How to Add Columns
Columns are a great way to place and position elements horizontally on a page.
There are currently two methods of adding Column elements to your page.
1. Drag the Column element onto your page
2. Drag an element next to a pre-existing element
Styling the Column Element
Select the Columns element to change the settings below in the Main section of the settings panel.
Changing the Number of Columns
You can change the number of columns that are present in your Column element. This currently has a maximum of 6 columns.
Changing Column Sizes
Column sizes can be configured to your liking through the settings panel on the right. To start over, click the Reset column widths button.
Note: Column widths are not adjustable for smaller screen devices. They will appear at an equal width on mobile-sized screens.
To make all columns the same height, turn on the Equal column heights toggle.
Changing Column Spacing
You can change the spacing between each column. This can allow you to add more or less spacing between your content.
Columns on Mobile
The "Stacking on smaller screens" toggle controls how your columns appear on mobile devices.
When the toggle is disabled, all the columns will appear in a single row on mobile.
When the toggle is enabled:
If there are 3 or fewer columns, they will each stack one-by-one on mobile
If there are 4 or more columns, they will stack in a configuration of 2 columns per row on mobile
To accompany this setting, the Stacking behavior option allows you to control the order that content stacks on mobile. By default, the left-most column will appear at the top of the stacking order on mobile. Selecting the "Right first" option will reverse the order, causing the right-most column to appear at the top of the stacking order.
