How to Add Columns to WordPress Posts with Gutenberg

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

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.

Gutenberg Add 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.

Gutenberg Columns Block

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.

Columns Block Example

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.

Add Block To Column

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.

Columns Example

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:

Change Number of Columns

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.

Related Posts

12 Comments

  1. vashika vashika

    Adding columns in Gutenberg is very easy. one can handle it easily. It is very easy than any other.

  2. digitalinfoline digitalinfoline

    I was facing problem in adding column after Gutenberg. I could add column to my blog only after reading this post. Thanks for sharing it.

  3. DSS DSS

    thanks for sharing this wonderful site…its very nice site working very nice

  4. sofia shriki sofia shriki

    thanku for writing this article and your information is very useful to us

  5. gourav gourav

    What are some tips for inserting a table in WordPress?

  6. shalini sharma shalini sharma

    thank you for giving us such info

  7. Shalini Sharma Shalini Sharma

    very helpful.. thank you for sharing.

  8. Stemar Stemar

    Thank you for sharing this. Its very useful..

  9. DSS Software DSS Software

    I am very excited to add the columns much faster to my wordpress. Thanks for sharing.

  10. Elle Bent Elle Bent

    I’m using WordPress now on my blog. Adding column is not easy, thank you for this article.

  11. sagarrajput sagarrajput

    Wonderful!! Thank you for posting informative blog. Your posts are more interesting and informative.

Comments are closed.