Column Overview

Sections house Columns and Columns house Widgets. That is how they work, you can add columns easy, copy, duplicate, or even delete them by only using the right click on the columns handler. If you click on the [plus icon] to open a new section, a new column will be integrated within automatically, to add more columns you can either choose a structure with more columns or right-click on the column handle and click on Duplicate, this will instantly a new column. To customize and edit columns click on the handler and the Settings Panel will open up. The settings are divided into three tabs

Layout Tab 

  1. Column Width (&) - Set the column's width values manually in percentage, if you use more then one column, the total width of all columns is 100, if for example, you have two columns, to have them evenly wide, you set their width 50.
  2. Vertical Align - Choose the column's vertical alignment to Top, Middle, Bottom, Space Between, Space Around, and Space Evenly
  3. Horizontal Align - Choose the column's horizontal alignment to Start, Center, End, Space Between, Space Around, and Space Evenly 
  4. Widgets Space (px) - set the space between the widget and the columns in pixel values
  5. HTML tag - Set an HTML for your columns to div, header, footer, main, article, section, aside, or nav. 
  6. Column Link - Enter the URL to link the column to internal or external pages, Click the cog icon to open the link's options. You can have the link to be opened on a new page or add the rel=nofollow links.

Style Tab

Background

  1. The background can either be Normal or Hover
  2. When choosing the Normal option, you can set the Background Type to be Classic, Gradient or Slideshow
  3. When going for the Hover option, you can set the Background Type  to be Classic or Gradient 
  4. Classic Type of Background will let you choose a color or add an image as your background 
  5. The Gradient Background Type will have the options to choose two colors, Set their Location, choose the Type of gradient and the Angle 
  6. The Slideshow Type of Background will have its own options like images, Infinite Loop, Duration of the slideshow, Transition animations and Duration, Background Size and Background Position

Border

  1. You can choose the Border to be Normal or Hover 
  2. Choose a Border Type from the drop-down menu like Solid, Double, Dotted, Dashed, or Groove 
  3. Set the Border Radius for your border. You can set the values altogether, or unlink them to set separate values. 
  4. Add a Box Shadow and adjust its settings

Advanced Tab

Advanced

  1. Margins - Margin adds spacing outside the element borders.
  2. Padding - Padding adds spacing inside the element borders.
  3. Z Index - This property allows you to precisely place elements on your page in a stack order of elements
  4. CSS ID - You set CSS ID for your section, a customs selector which can find many uses
  5. CSS Classes - Add your custom CSS class with a specific class attribute

Motion Effects 

  1. Scrolling Effect - Enable the scrolling effect, choose from the list of scrolling animations, and adjust their proper settings 
  2. Mouse Effect - Enable the mouse effect so that the widget moves in coordination with mouse movements Track the Mouse or 3D Tilt 
  3. Entrance Animations - Choose entrance animation for your elements from the drop-down list of animations provided. Change animation duration and delay to provide to give your widgets and columns movements.

Background

  1. Choose the background to be Normal or Hover
  2. Have the background to be Classic where you create a one-color background or add an image or either Gradient to have two colors blended together. 

Border

  1. Choose a Border to be Normal or Hover 
  2. Decide to have a Border Type: Solid, Double, Dotted, Dashed, or Groove 
  3. Set the Border Radius 
  4. And add Box Shadow for the column 

Positioning 

  1. Choose the column's width, it can be Default, Full Width, Inline, or Custom 
  2. Set the Positioning > Absolut, choose the Horizontal and Vertical Orientation either Left or Right and slide the Offset handler for both Vertical and Horizontal Orientation. 
  3. Set the Positioning > Fixed, choose the Horizontal and Vertical Orientation either Left or Right and slide the Offset handler for both Vertical and Horizontal Orientation. Or you can even grab the widget and drag it across the working page to set it to a preferred place. 

Responsive

  1. Visibility - Choose the column to Hide on Desktop, Tablets, or Mobiles. These will take effect when on Live View or Preview Mode 

Attributes 

  1. Set Custom Attributes for the wrapper element. These attributes must be each written in a separate line. 

Custom CSS

  1. Add your own Custom CSS to the editor field below. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.