Blocks »Columns Block

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

Adding the Column Block

Column Overview

In order to add a columns block, click on the Block Inserter icon.

You can also type /columns and hit enter in a new paragraph block to add one quickly.

Column Block Add Typing

Detailed instructions on adding blocks can be found here.

↑ Table of Contents ↑

Block Toolbar

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor. The columns block offers standard block options as well as full width and wide width options (if the theme supports these alignment styles).

Columns Interface 1

↑ Table of Contents ↑

Editing the Block

It is possible to add or remove columns. To do so, click outside the box, between the box and the sidebar then change the number of columns (up to six).

Change Number of Columns

You can also edit the width of individual columns. When you add new columns, the additional settings will appear in the sidebar on the right. You can change the value of the column to make it bigger or smaller. Columns don’t all need to have the same value.

↑ Table of Contents ↑

Adding Content

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

For instance, you can use the columns block as the structure and add image blocks, heading blocks and paragraph blocks to create a grid of services.

Columns Block - Services

Or you can use columns block with cover image blocks to feature pages of your site.

Columns + Cover Image

You could also use the columns block with button blocks to invite users to take some actions on your site.

As you can see, the sky is the limit! Need to see how the magic happens? Check this video!

Creating and editing the columns block.

↑ Table of Contents ↑

Block Settings

Most blocks have specific options in the editor sidebar in addition to the options found in the block toolbarIf you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.
The block settings can be found in the sidebar.

↑ Table of Contents ↑

Number of Columns

As mentioned in the “editing the block” section, on the block settings sidebar you can set the number of columns (up to six).

You can edit the number of columns by clicking on the up and down arrows, dragging the slider to the right or left or by typing the number directly in the field.

Columns Block - Number

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 you added to the selected column (e.g. if you added an image to one of the columns, when you click on the image the sidebar will display the options from the image block settings).

↑ Table of Contents ↑


The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. Learn more.

Block Button Advanced Tab

Not quite what you're looking for?

Get Help