Use the Columns Manager in Advanced Gutenberg for WordPress Layouts

Columns Manager

One of the big promises for the Gutenberg editor is that it will be easier forr you to create layouts.

That is very true with the Columns Manager block in Advanced Gutenberg.

With the Columns Manager, you can choose from many different column layouts to present your content. After choosing a predefined layout you can able to tweak everything related to every single column, like margin, padding, borders, and even the width of the column itself.

With this in mind, we are going to create a basic card layout in this tutorial. Card layouts usually contain small amounts of relevant information, and most of the time, they have a link redirecting the user to another page on the site.


Step #1. Install the Advanced Gutenberg Plugin

First, let's get a copy of the Advanced Gutenberg plugin:

  • Click Plugins > Add New.
  • Type Advanced Gutenberg in the search box.
  • Click Install Now.
  • Click Activate.
200720 Adv Columns 001
200720 Adv Columns 001

Step #2. The Columns Manager Block

Now let's create a layout for a new post:

  • Click Posts > Add New.
  • Write a proper title.
  • Click the “+” icon to insert a block after the title or hit the “/” key.
  • Search and select the Columns manager block.
200720 Adv Columns
200720 Adv Columns

You will be presented with many different layout options.

  • Select the layout with 3 equal columns.
  • Click the “+” icon on the first column and add a Group block.
  • Change the color settings of the group (text and background color).
200720 Adv Columns 003
200720 Adv Columns 003
  • Enter a Heading 3, a small paragraph, and another paragraph with a link.
200720 Adv Columns 004
200720 Adv Columns 004

After you have finished with this one, repeat the process with the other 2 columns:

  • Create a group, choose colors, add heading, content, and link.
200720 Adv Columns 005
200720 Adv Columns 005

Select the Columns manager block in your block editor

  • Change the width of the block to Full width.
  • Take a look at the other available block options related to the height of the container.

The configuration options for the Advanced Gutenberg columns block are on the right of the screen.

200720 Adv Columns 006
200720 Adv Columns 006
  • Click the Tablet option tab.
  • Select a different layout for this kind of viewport.
200720 Adv Columns 007
200720 Adv Columns 007
  • Click Publish twice.
  • Click View Post.

Notice also, that you can set here margin and padding styles for the whole column group.

200720 Adv Columns 008
200720 Adv Columns 008
  • Resize your browser window until it fits the tablet size. 
200720 Adv Columns 009
200720 Adv Columns 009
  • Edit the post once more. 
  • Select the Columns Manager group and hit the ↓ key of your keyboard, so you are now positioned inside the first column containing the group.

You can see the column options on the right. You can, for example, change the width of one of the columns and the other two columns will alter too, to fit the new layout. However, take into consideration, that you have a full list of layout options to start from. Take a look there, before start tweaking something that is already included for you in the plugin.

200720 Adv Columns 010
200720 Adv Columns 010

After making all your customizations save the post and take a look at it. By now you already have grasped the ease of use of the Advanced Gutenberg Columns Manager block.


Step #3. The Advanced Column Default Options

Let's take a look at the global settings for the Column Manager:

  • Click Advanced Gutenberg > Default Blocks Config.
  • Click the cogwheel beside Adv. Column.
200720 Adv Columns 012
200720 Adv Columns 012
  • Enter your own values.
  • Click Save to record the changes.
  • Close the overlay window.
200720 Adv Columns 013
200720 Adv Columns 013

These are the configuration options for every single column within a column group. Let’s take a look at the Columns Manager configuration options. 

  • Click the cogwheel beside Columns Manager.

You can configure here the settings for the whole group of columns within a layout. It considers both column and row settings. 

  • Change the values according to your preferences. 
  • Click Save.
  • Close the overlay.
200720 Adv Columns 015
200720 Adv Columns 015
  • Create a new post and add a layout with 3 columns like in the previous example.
200720 Adv Columns 016
200720 Adv Columns 016

As you can see, working with columns with Advanced Gutenberg is quite intuitive. You just declare a container, set a specified number of columns, and are ready to insert content. 

Test some layouts yourself and let us know about your opinion. Thanks for reading!


Leave a Reply

Your email address will not be published. Required fields are marked *

Professional publishing plugins for WordPress! Get PublishPress