Gutenberg Editor: How to Use Columns

WP Enthusiast

WP Professional

WP Professional Plus

PairSIM WordPress

Gutenberg has introduced a way to add columns to your page or post. Using columns can help you add new formatting structures within your content.

Make sure you are using the Gutenberg editor. If you upgraded to WordPress 5, then your post and page editor will default to use the Gutenberg editor. If you are still using WordPress 4 (or earlier) or have the Classic Editor installed, then your editor will not work with this tutorial.

How to Add Columns to a Post or Page

To add a column, follow these steps:

  1. Log in to the WP admin interface, then navigate to a page or post editor
  2. Click the plus button in the top navbarplus button image
  3. Find the Columns block and click to add itcolumns block image

A column block will be added to your page or post. By default, the column block will split the content in the section into two columns.columns image

How to Add Content Within Column Blocks

You can add content within the columns. The content will be restricted to the column’s area.  To add content within columns, follow these steps:

  1. Hover over the column section where you want to add content
  2. Click the plus button that appears in that sectionplus button column image
  3. Find the content block you want to add and click itcolumns added in column image

By completing this process, the content you selected will be added within the column section.one block image

How to Add More than Two Columns

If you want to have more than two columns on your page and post, you can nest column blocks within a column.

  1. Make sure you have already added a column block
  2. Hover over the column section where you want to add more columns
  3. Click the plus button that appears in that sectionplus button column image
  4. Find the Columns block and click to add itcolumns added in column image

This will add two more columns within one of the already existing columns section. This will result in three columns.nested columns image

If you wish to have four columns, repeat the process in the other column section that does not yet have nested columns.

Updated on February 20, 2020

Was this article helpful?

Related Articles