Columns can be manipulated and styled via the options in the Settings Panel on the left or by right-clicking the Column handle and choosing from the context menu that pops up.
Create new columns
If you wish to add a new column, select one of the existing column in a section, and click the operation menu, then choose Add Column.
Pro Tip
Columns include content area inside, where you can drag/add other controls from designer. Columns are placed horizontally (on PC view) in section, also can display vertically on Tablet or Mobile view with the settings of column width.
Layout Settings
The width of each column is equal division by default, means 100% for 1 column, and 50% each for 2 columns etc. But you can change the width of each column by giving different percentage. For example, there are 3 columns in one section. You can set the width as 20% for column 1 and column 3, and set column 2's width as 60%.
You can set different percentage on PC, tablet and mobile devices. For tablet and mobile size, you can have columns display with multiple rows by changing the percentage of each column width:
Detail settings of layout
Column Width (%): Set your Columns Width
Vertical Align: Set your Column Content’s vertical alignment. This way, you will be able to stick the content of all the columns of a section to the bottom, the middle of the top, or “stretch to fill” to align columns with unequal heights. Choose from Top, Middle, Bottom, Space Between, Space Around, Space Evenly
Horizontal Align: This extends the ability of the inline positioning and lets you horizontally align the inline widgets that are placed in the same row. Choose from Start, Center, End, Space Between, Space Around, Space Evenly
Controls Space (px): Set the space of controls in this column.
Space Definitions
Space Between – Controls start and end at the edge of the column, with equal space between them
Space Around – Controls are spaced equally, and the edges are half the size of the space between widgets
Space Evenly – Controls have equal space between, before and after them
Style a Column
Background (Normal & Hover)
Choose between Classic (which allows you to set a background color or image), Gradient (allowing you to set a color gradient background), Video background, or an image Slideshow background.
Border (Normal & Hover)
Border Type: Set a Border Type
Border Radius: Set your Border Radius
Box Shadow: Add a Box Shadow
Typography
Set Typography Colors for the column.
Advanced settings
Advanced
Set the margin and padding to leave the spaces outside and inside contents. A column's padding also affects its height. It’s best practice to set a Section's top and bottom padding and add content to let it adjust accordingly.
Margin: Set the section Margin
Padding: Set the section Padding
CSS ID: Set a CSS ID for your column
CSS Classes: Set CSS Classes for your column
Responsive: Show or Hide column on Desktop, Tablet, or Mobile
Responsive
Show or Hide column on Desktop, Tablet, or Mobile
Reverse Columns: Slide to reverse your columns order (Great for Mobile)
Visibility: Show or Hide your section on Desktop, Tablet, or Mobile
Custom CSS
Add your own custom CSS. Learn more about Custom CSS