Designing with the columns block

The Columns block is a container block that can be used to create various custom layouts, and it opens up a world of design possibilities. In this tutorial, we will take a closer at all the functionalities of a Columns block.

Learning outcomes

1. Adding a Columns block and selecting the suitable variation to start with.
2. Identifying the parent/child relationship between the main Columns block and individual columns.
3. Adding, moving and duplicating columns.
4. Using the sidebar settings of the Columns block.

Comprehension questions

1. If you have inserted multiple blocks one after another, can you turn them into columns?
2. What are the advantages of using the list view when designing with the Columns block?

Resources

1. Columns block

Transcript

Hi, and welcome to Learn WordPress. In this video, we are going to explore the Columns block. The Columns block is a container block, which can be used to create various custom layouts and opens up a world of design possibilities. The Columns block allows you to insert text, media and other types of content into up to six columns. And when used one after another, the Columns block creates a cool grid effect.

To add a Columns block, click on the Inserter and type columns or you could type forward slash columns and select it from there. You can choose the number and the size of the columns you want to start with. The beauty of the Columns block is that you can add other blocks into each column. For example, you can create the Columns block to add structure and then add Image blocks, Heading blocks and Paragraph blocks. You can also create this type of design by adding a Cover block to each column.

A parent/child relationship exists between the main Columns block and the individual columns that form part of the parent block. When you click on the alignment icon, you can change the alignment of your block to wide-width or full-width.

Did you know that you can also duplicate columns? Let’s select the third column in the Columns block. When you click on the three vertical dots, you can duplicate the column. Duplicating a design will save you a lot of time and effort. When you select an individual column, you also have the option in the block toolbar to use the arrows to move the column to a new position. But you also have the option in the list view to drag and drop a column where you want.

If you wanted to add another column, you could merely click on the Inserter between two columns to add a new column, or you can select the parent block and then open up your sidebar settings. And at the top of the sidebar settings, you will notice it says columns where you can increase or decrease the number of columns in your Columns block. Then below that, keep stack selected if you want the columns to stack on top of each other when viewed on a mobile device.

The Columns block allows you to change the colours of both the parent block or individual columns. So let’s go ahead and change the background colour for example. There are also various typography options worth exploring, such as font family, appearance and letter spacing. You might even decide to change the size of your Columns block.

Below dimensions, you can adjust the padding or the space around the content of the block, and if you click on unlink sides, you can set different values for the top, right, bottom and left. You can also change the margin of the block, which is the space surrounding the Columns block at the top and the bottom. When you click on the ellipses, you can also select Block spacing which allows you to modify the space between columns.

Lastly, you may even decide to add a border or change the radius of the Columns block. Another great feature is that you can transform other blocks into a Columns block and even a Columns block into a Group block. So as you can see, you can achieve any custom design using the Columns block from introducing your team, displaying different media types or even creating a pricing table.

Enjoy designing with the Columns block and visit Learn WordPress for more tutorials and training material.