How to create columns in Gutenberg WordPress

How to create columns in wordpress gutenberg

Would you like to add columns to a blog post or page? Today, I’m going to show you step-by-step how to create columns in Gutenberg WordPress editor.

BTW: Columns are great for creating beautiful portfolio or gallery pages too!

How to Add Columns to a Post or Page

  1. Login to your WordPress dashboard, then navigate to a post or page.
  2. Click the plus button to the left of ‘write your story’.
How to create columns in wordpress gutenberg-1
  1. Under Layout Elements, locate the COLUMNS BLOCK and click to add it.
How to create columns in wordpress gutenberg-2
  1. A column block will be added to your post or page. Note: by default, the column block will create two columns.
How to create columns in wordpress gutenberg-3

How to Add Content within the Column Blocks

Now you can add content within the columns. Most likely you will be adding text or an image, but no matter what you add to your columns, the content will be restricted to the column’s area.

To add content within columns, you’ll do the following steps:

  1. Hover over the column section where you want to add the content and click the plus button for that particular section.
How to create columns in wordpress gutenberg-4
  1. Find the content block you want to add and click to add it. In this example, I’m adding an image. Either upload your image or pull from your media library. By completing this process, the content you selected will be added within the column section.
    How to create columns in wordpress gutenberg-5b
    1. Repeat the process of adding content into the second column.
    How to create columns in wordpress gutenberg-6

    Note: In this example, I’ve added an image into both columns.

    How to Add More Than Two Columns

    If you want to add more than two columns on your post or page, you’ll do the following steps:

    1. Hover your mouse over the entire column block. This will place a line around the entire column block area, then click your mouse.
    How to create columns in wordpress gutenberg-7
    1. The click will provide you with a number of columns option in the right sidebar.
    How to create columns in wordpress gutenberg-8
    1. Place the quantity of columns you would like to have. I’m a gal that likes things in 3’s! So let’s do 3 columns for this example.
    How to create columns in wordpress gutenberg-9
    1. Add to the newest content block. I’m simply going to add another image.
    How to create columns in wordpress gutenberg-10

    Here’s what my 3 column of images look like, when I preview it.

    How to create columns in wordpress gutenberg-11

    Pretty cool and easy huh?!

    Creating columns isn’t so bad, once you know how to create columns in Gutenberg WordPress!

    xo-tana

2 Comments

    1. Right on!!! It’s best if ALL of the images are the EXACT same size – otherwise it can look wonky (in my opinion), haha. Can’t wait to see it!!!

Leave a Reply

Your email address will not be published. Required fields are marked *