How to Create Multiple Columns Layout in WordPress Site?

Columns help to arrange content within a smaller spacer. You can place text, images or any two elements beside each other instead of showing one below another. Earlier you need a page builder plugin to create columned content in WordPress sites. However, now it is very easy with the Gutenberg block editor and you can drag any blocks inside a column. In this article, we will explain how to use Columns and other blocks in Gutenberg editor to create columned content in WordPress.

Gutenberg Columns Block

Columns is one of the default Gutenberg blocks as part of “Design” blocks. Type /columns or use block inserter to add a Columns block in your content area when editing a post or page.

If you do not find it, click the three vertical dots (Options) showing on top right corner of the editor. Go to the bottom of the menu list and select “Preferences” option. This will open “Preferences” dialog and go to “Blocks” section. Search or find “Columns” block under “Design” section and enable it.  

Insert Columns in Content Area

Once you have the Columns block, insert it where you want to show columned content. You will be prompted to select the number of inner columns and click on one of the available options. For example, select 50 / 50 to have two equal inner columns in a row or select 33 / 33 / 33 to have three equal inner columns.  

Let’s use, 50 / 50 two inner columns in our example. Once you click on that option, WordPress will insert two placeholder blocks inside a single row as shown below.

It is not always necessary to select 50 / 50, 33 / 33 / 33 or one of the other available options. You can adjust the width of each column as per your preference. For that, make sure you have selected the first placeholder block inside the columns and check the “Column settings” option showing in the right sidebar settings. You can enter the width in pixels or click the PX to change to % and then enter the value in percentage which will be easier. Let me type 66% for the first column which will automatically adjust the width of the second column to 34%.

Add Columns and Stack on Mobile

Let’s say, after inserting two columns (50 / 50) block, you want to add one more column. For that make sure to select the “Columns” block by clicking on the “Columns” icon showing on block’s top toolbar. Now, the right sidebar will show different settings and increase the number under “Columns” section. As you can see, the first inner column width is retained as 66% while second and newly inserted third inner columns are equally divided (17% + 17%).

Make sure to select “Stack on mobile” option to show the inner columns one below another on mobiles. Otherwise, all three columns will be showing in a single row on mobile thus hiding the content. You can preview the columns by selecting “Preview > Mobile” option and see the inner columns are equally stacked on mobile view.

Note: You can also reduce the number of columns by simply changing the number from 3 to 2 for example. In such a case, third inner column will be removed and you will lose any content inserted in that column. Therefore, make sure to remove any content from the last column before reducing the number of columns.

Inserting Blocks in Inner Columns

Now that you know how to insert Columns block and adjust the width of inner columns. Next step is to insert blocks in the inner columns. Simply click on the + icon and add the block you want to insert.

Let me add a paragraph and an image in two inner columns of Columns block as shown below. You can adjust the horizontal and vertical alignments to middle so that the content looks aligned.

Customizing Columned Content

Each block inside the Columns block will have its own settings in the ride sidebar. You can make use of those settings to decorate the content if needed. Below is how the customized Columns block will look after adjusting the text and image settings:

Here are things I have adjusted:

• Columns – added background.
• Paragraph in first inner column – reduced font size, used semi bold for the text and changed the color.
• Image in second inner column – changed to rounded corner instead of default style.

As you can see, the final block looks like a cool call to action box which you can use to showcase your own or affiliate products. If required, you can also insert a button below the text so that users can click and go to the product page.

Converting Columns to Reusable Block

The best part in Gutenberg editor is that you can reuse any block without creating it again from the scratch. Simply click on the three vertical dots (Options) on the Columns block’s top toolbar. Select “Create Reusable block” option and provide a name to save your block. Later, you can anytime find the reusable block name and insert it on any other posts/pages on your site.

Note: If required, you can also assign custom CSS class for your Columns block under “Advanced” section of the right sidebar settings. Or open “Code Editor” by clicking on three vertical dots showing on top right corner of the screen and add custom inline style to the block. Custom CSS can be used to add border and adjust spacing (margins and padding) of the columns block. Learn more about how to use custom CSS class in WordPress.

Using Media and Text Block in Gutenberg

The advantage of Columns block is that it support multiple inner columns and you can drag any other block inside the column. However, if you simply wanted to use text/media combination in two column layout, then Gutenberg editor also has another “Media & Text” block for that purpose. Inserting this block will show a two columned layout with options to insert a media in one column and text in another column. You can change the alignment of media to left or right position and use sidebar settings to create similar call out box as explained above. It is also possible to drag other blocks like Table or List beside media block instead of using plain text.

Goo part is that you can anytime convert “Media & Text” block to “Columns” to get additional features available for Columns block.

Example Two Columned Content

Below is the live example of how a two columned blocks will look on published WordPress site. It uses Gutenberg Columns block along with custom inline CSS for adding border and padding. As mentioned, you can insert anywhere using reusable block and you do not need any third-party plugin for creating such beautiful call out content in WordPress.