Columns

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.

1

To add a column click on row after expanding the section and select the number of columns

2

To edit a column, click on the column and the module editor will appear on the left

3

To rearrange a column, in the column layout manager panel drag the section to the required position

SETTINGS

1

Background Colour

To set a background colour, click on the colour palette and select a colour

2

BACKGROUND IMAGE

To set a background image, click on the plus sign and upload an image from the library

Background Repeat

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.

Background Attachment

Scroll: The background image will scroll with the rest of the page

Fixed: The background image will remain stationary when the page is scorlled

Background Position

 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.

3

Padding

Top Padding

Bottom Padding

Left Padding

Right Padding

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

4

Margins

Top Margin

Left Margin

Bottom Margin

Right Margin

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.

5

Background Video

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.

6

background Overlay

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

7

Vertical Alignment

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

8

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

9

Column ID

An unique id can be set for the column to customize it using css. (unique alpha numeric, no spaces, no special characters)

10

Column Class

A class can be set for the column to customize it using css

11

HIDE IN

The column can be hidden from a specific screen size

Responsive Breakpoints

Mobile < 767px

Tablet –  768px – 1024px

Laptops – 1025px – 1377px

Desktops – > 1378px

Related Articles

Leave A Comment?

You must be logged in to post a comment.