Use the Columns Manager in PublishPress Blocks 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 PublishPress Blocks Plugin

First, let's get a copy of the PublishPress Blocks plugin:

  • Click Plugins > Add New.
  • Type PublishPress Blocks in the search box.
  • Click Install Now.
  • Click Activate.

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 PublishPress Blocks Columns Manager block.


Step #3. The Advanced Column Default Options

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

  • Click PublishPress Blocks > 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 PublishPress Blocks 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!


Comments (3)

  • I don’t think it is as intuitive as described. I have a columns manager block of 3 columns and all I want is to place a button in each column with buttons of the same width, based on the biggest content. I have not found out how to do this. The buttons stick to each other or are not equally placed relevant to each other. There is plenty of space however, to use the full column width but I seem to be unable to do this.

    Another struggle I had was to find a way to change an existing column to show 2 instead of 3 columns. I had to recreate all buttons in a new block of the different column count. This is not very intuitive for me.

    It seems to me that most users probably want consistent use of space, being able to align objects.

    Am I missing something?

  • So far so good … (Thx. for this really nice plugin).
    Still, I’ve got two questions:

    1. If I have a preset of e.g. two columns, and I liked to add a third one. How would I do this (without starting from scratch)?

    2. Why can I no longer insert a new set of columns (Col. Manager) into a Tab Item)? This works, though, but the new columns appear as flat lines that can’t be used …

    Thx!

Leave a Reply

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

Professional publishing plugins for WordPress! Get PublishPress

  • SUBSCRIBE TO OUR NEWSLETTER
  • SEARCH THIS SITE