All Collections
Page Elements
Containers & Columns
Containers & Columns

Learn the different functions of container and columns and when to use it on your page

Ariane Ramirez avatar
Written by Ariane Ramirez
Updated over a week ago

Containers and Columns are expandable spaces that is used to house other page elements together.  You can place any page element inside of a container or a column. It’s a powerful component which lets you divide sections of a page into grid-like layouts. The difference between a Container and a Column is that a Container has only 1 expandable cell. Columns, on the other hand, can have 2 or more expandable cells side by side.


​     
​   
Add a Container or Column

To add a Container or a Column, click Add [+] Button on the top left corner in the Page Editor to slide the web page elements menu. Then simply drag the Container or Column element into the page you’re working on.


​   

Add an Object inside a Container or Column 

To add a page element inside a Column or Container, just drag the object over to the container / column.


​   

CONTAINER SETTINGS & USES

A Container is an expandable space that can be used to house page elements and divide the page into sections. 


​   
A Container can be used to house page objects that belong together. You can place any page element inside a container.

   
Like any page element, the Container has its own property settings. You can change the following settings for Containers:

  • Background

  • Size

  • Position & Padding

  • Alignment

  • Borders & Shadow

     

COLUMN SETTINGS & USES

Columns are a great way to design your pages with grid-like layouts. 


​   
You can increase the number of columns by clicking the [dropdown arrow] at the corner right section of the cell.


To resize the size of the columns, drag the “knob” between the 2 cells. 


​   
To change the settings of each column cell, click the [dropdown] arrow at the corner right section of the cell, then choose “Column Properties.” You can change the following settings:

  • Background

  • Padding

  • Borders & Shadow 

   
To change the entire column element’s settings, click the [gear icon] to change the following settings:

  • Background

  • Size

  • Position

  • Alignment

  • Borders & Shadow

*To adjust the padding of the column, you must do this on the individual cell settings (see above)

Other Element Options

Click the dropdown arrow next to the settings icon of the element or right click on the element to show the the other options.

  • Cut - the element will be removed from the page and can be pasted in another part of the page or on a different page

  • Copy - the element will be copied and can be pasted in another part of the page or on a different page

  • Paste Below - a copied or cut element will be pasted below the selected element

  • Rename - the element will be renamed instead of having the default element label

  • Duplicate - the element will be duplicated and placed below the selected element

  • Delete - the element will be deleted from the page

  • Container / Column Settings - it will open the settings menu on the left side of the screen

  • Help with Containers / Columns - it will open up a new tab and redirect to a help article about the element


Did this answer your question?