Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
Have you been using WordPress for a while?
If so you’ve probably Googled this before.
Adding columns to posts and pages has been a huge pain for years. But you’re in luck…
The new Gutenberg WordPress post editor has columns built-in and they work great.
In this post, you’ll learn how to add column “blocks” with Gutenberg. You’ll also discover how to add different types of content into the columns and change the number of columns you want to be displayed.
If you aren’t using WordPress 5.0 yet, you can install the Gutenberg plugin to start adding columns to your posts now.
How to add columns with Gutenberg
Subscribe to Compete Themes on Youtube
Start by navigating to the post you want to add the columns to.
To add the columns, you’ll insert a new columns “block” into the post. Hover over an existing block and move your cursor over the top or bottom edge to reveal the “+” button for adding a new block.
Click the plus button and you’ll see a popup where you can select a block to add. The Columns block is featured at the top.
Click the Columns block and it will be inserted into the post.
When you first insert the column block, it adds a block that essentially contains two paragraph blocks. You can begin typing in either right away.
Easy, right?
You can add as many column blocks to your post as you want by inserting column blocks in this way.
Add blocks into the columns
Of course, you aren’t just limited to creating columns of text. If you hover over one of the two blocks in the column, a plus button will appear that you can click to then select any block type to insert.
For example, I can select the image block and insert that into the left column and then add any block I want to the right column.
In fact, you can even stack multiple blocks in either column.
In the screenshot above, I’ve added an image block to the left column, a heading block in the right column, and an additional paragraph element under the heading in the right column.
The ability to stack multiple blocks in a column makes this feature pretty flexible. One limitation with this feature is that you can’t adjust the width of the columns, but that may be coming in a future update for Gutenberg.
How to add more columns
The example above uses two columns, but you can add up to six columns in one column block.
To increase the number of columns, click somewhere in the column block but outside of the blocks within it. You’ll see the settings in the sidebar switch from the Document settings to the Block settings revealing these options:
You can use the slider or the number input to adjust the number of columns from 2-6.
At this time, the Advanced settings only include an option to add a custom CSS class to the column block. This could be handy if you’re familiar with CSS and want to style one of your column blocks a bit differently.
Conclusion
While the Gutenberg columns block could use some usability improvements, it works pretty well. And to be honest, it’s way better than the existing option in the classic editor – nothing!
Now that you can create multi-column layouts in your posts, you’ll have more room for creative expression and making interesting designs within your articles.
If you have any questions about adding columns to your WordPress posts, leave a comment below.
