How to Use The Column Element

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

Changing the Number of Columns of the Column Element

You can change the number of columns that are present in your Column element. This currently has a max. of 6 columns.

Styling the Column Element

Changing Column Sizes
Column sizes can be configured to your liking through the right-hand side menu.

Note: the Column element is currently based on a 12 column industry standard, this means that you may not be able to create 5 equally sized columns.

Changing Column Spacing

You can change the spacing between each column. This can allow you to add more or less spacing between your content.

Why Do My Columns Look Horrible On Mobile?

When your columns look great on desktop, but horrible on mobile, it's almost always because too many columns were used.

For example, if you're making a row of images, and a row of columns below them with corresponding text; you used an unnecessary row of columns.

The reason why it looks horrible on mobile is that columns "stack" for mobile. So now you have a bunch of stacked images, followed by a bunch of stacked text.

You can just drop the text in the same column with the corresponding image above it, and put a little margin on one or the other to give them space. Make sure to delete the extra set of unnecessary columns.

You may also choose to disable stacking on mobile devices. This will ensure that your Column element continues to remain horizontal.

Note: column widths are not adjustable for smaller screen devices

Did this answer your question?