Put your content into Gutenberg columns

To continue our talks about Gutenberg editor features we can’t miss the columns topic. Earlier it was a really hard work to structurize the text. The new WordPress editor simplifies this work and allows you to put your content into several types of columns. In this tutorial, we will show you how to add columns to your blog posts, change the numbers of columns, combine text with media, and others in different ways.

Add Gutenberg editor columns block

To start with open the posts editor. Choose the place in your article where you want to insert the columns. Click on “+” and write “column” into the search field. Tap on the “Columns” block to paste it into your post.

Gutenberg columns

    Then choose the style of columns to start editing them.

    Gutenberg editor columns

      Choose the blocks for your columns

      When you are editing WordPress Gutenberg columns you can put in them not only the text but also images, video or any other blocks. When you have chosen the layout click on plus in the necessary column to add the block there.

      WordPress Gutenberg columns responsive

        For our example, we have picked the paragraph block for the first column, the image block for the second, and the button for the third.

        Note that in each column you can add more than one block. Press “+” to add more blocks within the column.

        WordPress Gutenberg two columns

          One more way

          One more way to put your content in columns is to add “Media&Text” widget. It is good for you if you need only two columns to put there text and image next to it. To insert such widget you should only write “/media&text” into the block adding field.

          Gutenberg columns

            Customize your columns

            In examples above we use the columns layouts – the prepared ready to use templates. But you also can customize them. Gutenberg columns allow easily to choose the number of them you want to use, their width, etc. To make this, click on the columns widget. In the left sidebar settings, you can choose the number from two to six. Also, in the “Advanced” field you can add CSS classes to improve their appearance.

            Gutenberg editor columns

              If you don’t like how your columns look or need to make one of them wider or thinner, click on the column you need to improve and enter the right width into the “Rectangle width”.

              WordPress Gutenberg two columns

                You can also improve any inserted to the column block by clicking on it and editing its properties.

                As you see from our examples working with the columns is the simple task with Gutenberg editor. In has enough functions to make your columns look great.

                With this knowledge, you can create interesting designs for your posts and make them unusual for users. Putting the content into the columns simplifies the understanding of the text and improves readability.

                Use our tutorials to learn more about Gutenberg features.