How to Use the Columns/Container Block

The Stackable Columns / Container block allows you to create your own column layout and 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 the 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 / Container block, you have the option to choose from a couple of layouts with pre-set column widths.

If you wish to adjust the column’s widths afterwards, you can do so by easily dragging the corners 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 click on the figure. You can type in the size of your column for more precision.

Switching Columns

If you want to swap or switch columns around, you can do this by selecting the specific column you want to move, and then clicking 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.

How to Collapse Columns in Tablet and Mobile

Column Block Settings

Column Gap and Row Gap

You can change the distance between the columns with the Column Gap option which can be found when you select the parent Columns / Container block, under the Style tab > General.

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

Note: 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, and then navigate to the Style tab, where you will see the Container Background option. Toggle it on and then select the background color, image, or video you like.

Opening the tab will provide you with background color options or the background image/video option.

Enabling container backgrounds will add a new hover state option for the blocks inside your column. Learn more about hover states in this article.

Block Background

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

Just select the parent Columns / Container block, and then navigate to the Block tab where you will see the Background option.

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

What are Block Backgrounds and Container Backgrounds?

Top and Bottom Separators

You can use the Block Separators alongside Block Backgrounds to enhance your section designs.

Select the parent Columns / Container block, and navigate to the Block tab where you will see the Top Separator and Bottom Separator settings.

Advanced Responsive Controls

If you are a Premium user, then you also have the option to rearrange the columns on mobile view. Just navigate to the Advanced tab in the inspector, and open the Responsive panel where you will see the Mobile Column Arrangement settings.

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

Tips and Tricks

Quickly Duplicate Columns

There are 2 ways you can quickly duplicate your columns. The first way is by using the Column Slider which can be found under the Style tab in the inspector.

Just select the Columns block (you can use the navigation panel to make it easier) and then navigate to the Style tab where you will see the General panel. From there, click on the duplicate icon on the right side of the Columns settings, and just slide the range control to duplicate the column.

The other method is by duplicating the column through the block’s Toolbar. Just select the inner Column block (you can use the navigation panel) and then click on the 3-dot button on the toolbar where you will see the Duplicate option. 

Adding a Block Title

If you want to add a block title to your Columns / Container block, you can do this by selecting the block, and then clicking on the Columns / Container icon on the block’s toolbar.

You will see the option to transform the block into: Columns / Container.

Afterwards, select the inner Column block (tip: you can use the navigation panel in the inspector!) and add a Heading block which can serve as the Block Title. 

Creating a Grid Layout

You can create a Grid layout for your Columns block by selecting the parent Columns / Container 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! 🥳