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 amount 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 off 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 because 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.

Did this answer your question?