Designing with the Columns block

Transcript

Introduction

In this lesson, we will explore how we can utilize the Columns block to create different designs. The Columns block is a container block that can be used to create various custom layouts. It 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. When used one after another, the Columns block creates a cool grid effect.

Adding and customizing a Columns block

To add a Columns block, click on the Inserter and type columns. Or you can 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.

Block Toolbar

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 have an option to duplicate. 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.

Sidebar Settings

If you wanted to add another column, you could merely click on the Inserter between two columns or select the parent block and open your sidebar settings. Then, below Columns, you have the option to increase or decrease the number of columns. Below that, we see the option to deselect or select Stack on Mobile. So ensure you select this option if you want your columns to stack on top of each other when viewed on a mobile device.

When we open Styles, we will see that the Columns block also allows us to change the colors of both the parent block or individual columns. Various typography options are worth exploring, such as font family, appearance, letter spacing, etc. You even have the option to change the size of your Columns block. Below Dimensions, you can adjust the padding or the space around the content of the block, you can add margin, or modify the space between columns. Right at the bottom of Styles, we can add a border and a radius to our Columns block. Lastly, you also have the option to add a drop shadow. There are various options to choose from.

Transforming other blocks into a 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.

Conclusion

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 using the columns block to achieve your design needs.

Practical

Use WordPress Playground to test your knowledge.

1. Create a similar design to the one below:
   • Use the default colors or update as you please
   • Add a Columns block with three equal columns
   • Left column
     • Add a border of 5 pixels
     • Add padding as preferred
     • Add content in the first Column
       • Paragraph block 1: 01
         • Size of text: 75 pixels
         • Bold
         • Line height: 1.3
         • Align centre
       • Paragraph block 2: Consultation
         • Size of text: Large
         • Line height: 4
         • Align centre
       • Paragraph block 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.
         • Text only
         • Align centre
     • Duplicate the first column twice, remove the empty columns, and update the content.