How to Use the Columns Block

The Stackable Columns block allows you to create your own column layout, and to control the margins and paddings of your columns. You have the ability to add other blocks, not limited to Stackable blocks, inside the columns.

With responsive settings, you are able to easily control the way your columns collapse in mobile or tablet screens.

Adjusting the Columns Widths

When you add the Stackable Columns block, you have the option to choose from a couple of layouts with pre-set column widths.

If you want to adjust the column’s widths afterwards, you can easily drag the sides of the column.

When hovering over the column, you will find a small circle on the side which indicates that you can drag it in order to resize the column.

You can also hover your mouse on the top left corner of a column and type in the size of your column for more precision.

You can also adjust the Column Widths in the inspector by selecting from the pre-set column widths, dragging the range slider, or typing in the exact sizes for each column in the fields below.

Switching Columns

If you want to swap or switch columns around, select the specific column you want to move then click on the right or left arrow in the block’s toolbar.

Note: Columns are blocks, so you can perform actions such as duplicating columns, or dragging a column block into another columns block

Responsive Columns

For settings different column widths for both tablet and mobile views, change the preview to tablet or mobile first, then drag the corners of the column.

You can also adjust the Column Widths in the inspector by dragging the range slider for each column or typing the sizes into the fields.

Column Block Settings

Column Gap and Row Gap

You can change the distance between the columns using the Column Gap setting which can be found in the Layout tab of the Columns block. There is also the Inner Column Spacing that’s available to adjust the inner spacing for each column.

If you have more than one row, you also have the Row Gap option.

The Row Gap option is more useful in tablet or mobile views where some columns are in a collapsed state.

Container Background

Adding a Container Background to individual columns will enclose the contents of the block in a styled container.

Just select the specific column then toggle on the Container in the Layout tab. This will open up the Container’s style settings in the Style tab. Navigate to the Style tab then select Container Background to change the background of the container.

Enabling container backgrounds will add a new hover state option for the blocks inside your column. Learn more about How to Style the Different Block Hover States.

Block Background

The Block Background option can turn your columns into entire sections in your page.

Just select the parent Columns block then navigate to the Style tab where you will see the Background setting.

Toggle on the Background setting then select your background color, image, or video.

What are Block Backgrounds and Container Backgrounds?

Top and Bottom Separators

You can use Block Separators together with Block Backgrounds to enhance your section designs.

Select the parent Columns block, and navigate to the Style tab where you can turn on the Top Separator and Bottom Separator settings.

Advanced Responsive Controls

You can rearrange columns on mobile view. Navigate to the Layout tab in the inspector and open the Layout panel where you will see the Column Arrangement settings. You can toggle between the different devices to make your changes.

Simply drag the columns labelled as “1, 2, 3 ...” and so on to rearrange them.

Tips and Tricks

Quickly Duplicate Columns

There are two ways you can quickly duplicate your columns. The first way is by using the Columns slider which can be found under the Layout tab in the inspector.

Select the Columns block then navigate to the Layout tab where you will see the Layout panel. From there, click on the duplicate icon on the right side of the Columns slider then slide the range control to duplicate the column.

The second way is by duplicating the column through the block’s Toolbar. Select the Inner Column block then click on the 3-dot button on the toolbar where you will see the Duplicate option.

Creating a Grid Layout

You can create a Grid layout for your Columns block by selecting the parent Columns block and then clicking on the 3-dot button in the toolbar.

From there, Duplicate the block, and then select both blocks. In the toolbar, you will see the Columns icon again, where you can transform the block into a Container.

This boxes the columns into one container! 🥳