The Columns Block

Learn The Columns Block

The columns block is one of the most useful and innovative additions included in the block editor. The columns block allows you to easily create multicolumn layouts within your pages, something that was difficult to do before the block editor. To get started with the column block, click this + sign and search for columns or scroll down to formatting and select the block that way. Once you have done this, then your block should look like the screenshot below, and you can pick a layout. 

This image shows the different layout options for the Columns block, and is in the center of the screen below the title.

Once you have added the columns block you have an option to choose between five layout variations. Selecting one of these variations will add the selected number of columns (each rectangle represents a column) according to the proportions in the layout. For our example, we are going to use a two-column layout with each column taking up 50 percent of the row (this is the first option listed). Once you select a layout your page should look something like the screenshot below.

This image shows a two column layout in the center of the screen below the title.

With the columns laid out for you, each column will have a + button in the middle of it, which you can click, to add a block. We added a paragraph block to each column, but you can, of course, add any type of block that fits your fancy. Do note, that the content area of the block editor is probably much narrower than the content area of the page itself, so if your content is looking a little cramped in the editor view, know that it may stretch a good deal wider when you publish the page.

Once your columns are full of content, there are a couple of options that you can change to further customize your columns. The first of these options is to modify the vertical alignment of the content within your column. By default, the content is aligned at the top of the column, but you can also align it to the middle or bottom depending on your preference. We have drawn an arrow to this option in the screenshot below. The other option is to change the width of your column, which you can do using the slider found under column settings, which is outlined in red in the screenshot below.

This image shows how to change the alignment of your columns.

That’s all for the columns block. For help with other blocks, check out the full list of blocks we have guides on here.

Previous Guide
Next Guide

Are You Ready to Uplevel Your Web Presence?

Use the form to the right to share a little bit of information about yourself, and we'll be in touch within one business day to learn about how we can help!