All Collections
Element Tutorials
Use Columns to align content and create horizontal dropzones
Use Columns to align content and create horizontal dropzones

To place elements side by side, simply drag an element next to another one, or use the Columns element to create horizontal drop zones.

Updated over a week ago

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

Animation showing how to create columns by dragging

Styling the Column Element

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 right-hand side menu.

Note: Column widths are not adjustable for smaller screen devices. They will appear at an equal width on mobile-sized screens.

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.

Did this answer your question?