The next level of structure in the builder are columns. Columns are the containers of the modules. A row can contain more than one column.
To add a column click on row after expanding the section and select the number of columns
To edit a column, click on the column and the module editor will appear on the left
To rearrange a column, in the column layout manager panel drag the section to the required position
To set a background colour, click on the colour palette and select a colour
To set a background image, click on the plus sign and upload an image from the library
There are four options: Repeat Horizontally and Vertically, Repeat Horizontally, Repeat Vertically, None.
Use the Repeat options if incase you use a pattern as a background image.
Scroll: The background image will scroll with the rest of the page
Fixed: The background image will remain stationary when the page is scorlled
You can choose where to position the background in the column
Background Cover Property
The user can adjust the background to center scale the column. Portions of the image beyond the section will not be visible.
To set custom padding on all four sides, enter the values individually
To set the padding on all four sides equally, select the linker icon and enter any one value.
The value can be entered in pixels or percentage
To set custom margin on all four sides, enter the values individually
To set the margin on all four sides equally, select the linker icon and enter any one value.
The value can be entered in pixels or percentage.
The background in this case can be a video instead of a colour or image.
Note that the video needs to be uploaded in all the three formats to be compatible with all the browsers.
YouTube or Vimeo videos cannot be used as backgrounds. Only self-hosted videos are supported.
To set an overlay for the background, select the colour and the opacity from the palette
Column without overlay
Column with overlay
The overlay will redirect to the link provided when it is clicked
The vertical alignment can be set inside a row by selecting any of the options, in this case there are four options: None, Top, Middle, Bottom
Enable CSS Animation
Enabling this will set a CSS animation for the column when the page is loaded.
The animation type can be selected from the list
An unique id can be set for the column to customize it using css. (unique alpha numeric, no spaces, no special characters)
A class can be set for the column to customize it using css
The column can be hidden from a specific screen size
Mobile < 767px
Tablet – 768px – 1024px
Laptops – 1025px – 1377px
Desktops – > 1378px