This time we are digging into Gutenberg, the new WordPress editor which is continuously growing and getting better every day. It is intended to become the “barebone” of WordPress. Indeed, Gutenberg blocks are a very intuitive way of creating a page. Although it has been the subject of thorough criticism, many developers are adopting it for building pages and even creating new applications. In this short tutorial, we’ll show how to build a multi-column layout with Gutenberg.
Start building a Multi-column Layout with Gutenberg
First, you need to add a new post or page. This action will bring you to the initial point where you can add content. By default, the first block is reserved for the title. After adding the title, add a new block by clicking on the plus symbol that’s on the left top of the window.
A new frame will come up allowing for selecting a block. You can choose between various types of blocks but in our case, we’ll use one from the Layout Elements. Obviously, we are going to select the Columns. The next step is to add content to the columns. You can add any block you need. The good news is you can also add a Columns block so you can achieve a multiple-columns layout.
The first step is to build a two columns layout with Gutenberg. But, this is just the beginning. You can achieve even a multiple-column layout, with a few clicks.
Example of Multi-column Layout with Gutenberg
This is an example of a four-column layout built with Gutenberg.
We have added a Column block withing a Column block.
This way we managed to “split” the column into more columns.
The four-column layout is easier than ever to achieve with Gutenberg!
Practically, this method will work with any WordPress based website. As far as the theme is compatible with Gutenberg, it should work out-of-the-box. Plethora Themes are all compatible with the new editor. They come bundled with a full-featured editor (WPBakery Page Builder) but they work great with Gutenberg.
Stop the press; on version 6.0 you can do it even faster
On Gutenberg version 6.0 there is an update regarding the building of columns. In particular, the new function allows for selecting between presets; a number of the most common layouts is available.
As you can see in this short video (originally posted on this page), in the new version you can use the graphical interface to add a layout. You can also drag and drop an image from the computer directly to the column.
Gutenberg is steadily growing and adds new features. How soon will it become mainstream? Let’s give it a chance.
Add Comment