Columns Block

The Columns block allows you to insert text, media, and other types of content into columns with a limit of six columns. When used one after another, the columns can create a grid effect. 

Add a column block

You can add a Column block in one of two ways:

• Click the Add Block icon on the screen
• Start typing in the word "Columns" into the Search bar, then select the Columns option from the menu when it appears.

• Type "/columns" and hit "Enter" in a new paragraph block to add one quickly.

Once you add the Columns block, you can choose a variation to start with (you can change the number or add more columns later). Simply select a variation from the choices, or hit "Skip" if you want to use the default variation (50 / 50).

Add and Remove Columns

It is possible to add or remove columns.

• To do so, navigate your mouse pointer in between columns to see the Add Column icon.
• Click the "Add Column" icon to add a new column.

You can adjust the number of columns in the block setting section. In the example below, there are two columns on the page.

• Click into any of the blocks within the Column.
• In your keyboard, hit the up arrow key twice to get the Columns settings in the Block section. You can also select the Block tab in the Settings option in the right hand menu (if the Settings menu is not open, click on the "cog" icon in the upper right corner).

• Adjust the number of columns; the maximum number of recommended columns is six.

Once you have adjusted the number of columns, the new number of columns will show immediately on the page.

Add Content to the Columns

Once you have defined the number of columns, you can add content to each column. The amazing thing about the Columns block is that you can add other types of blocks into each of the columns.

• Click the "+" icon in the column to Add Block.
• Type in the name of the block to the Search bar, then select it from the available options.

Block Toolbar

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor.

The Columns block shows the following buttons:

• Transform to
• Drag / Move up or down
• Change alignment
• Change vertical alignment
• More options

Transform to

You can transform columns into a Group block. Using the Group block allows you to have the ability to quickly edit multiple blocks at once, such as changing the background color around the columns.

Drag / Move up or down

The dotted icons can be used to drag and drop a block to the place of your choosing.

The up arrow icon can be used to shift a block up on the page, while the down arrow icon will move the block down on the page.

Change alignment

• None – No changes.
• Wide width – Increase the width of the block beyond the content size.
• Full width – Extend the block to cover the full width of the screen.

Change vertical alignment

• Align top – Make the block vertically aligned top.
• Align middle – Make the block vertically aligned middle.
• Align bottom – Make the block vertically aligned bottom.

Options

The Options button on a block toolbar gives you more features to customize the block. 

Move left or right

• You can use the left or arrow arrow to switch the order of the columns, such as moving the paragraph block shown here to the far left column versus the center column.

Block Settings

The Block settings panel contains customization options specific to the block.

• To view the Settings menu, click the cog icon beside the Save button to open the menu.
• Click the Block tab.

Note that since the Columns block has the ability to embed other blocks, if you click specifically on one of the columns, the settings in the sidebar will change according to the block that is in the selected column (e.g. if you added an image block to one of the columns, when you click on the image, the sidebar will display the options from the Image block settings).

Here are the options for the Columns block:

Columns

In the Columns settings, you can set the number of columns, with up to six columns. You can edit the number of columns by dragging the slider to the right or left to either increase or decrease the number of blocks, clicking on the up and down arrows within the numerical field, or by typing the number directly in the field.

You can also indicate how the blocks will respond in a mobile environment by toggling on or off the Stack on mobile setting.