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. 

Columns Overview
Columns Overview
Single Columns Block Result
Single Columns Block Result

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.

Columns Block Add Typing
Columns Block Add Typing

Detailed instructions on adding blocks can be foundĀ here.

Block Toolbar
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
Columns Interface

Top ↑

Editing the block
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
Change Number of Columns

Top ↑

Adding content 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
Columns Block – Services

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

Columns Block - Cover Image
Columns Block – Cover Image

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

Columns - Buttons
Columns – Buttons

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.

Top ↑

Block Settings 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.

Top ↑

Number of Columns 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 of Columns
Columns Block – Number of Columns

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).

Top ↑

Advanced Advanced

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.

Columns Block - Advanced Tab
Columns Block – Advanced Tab