Use the Columns Manager in PublishPress Blocks for WordPress Layouts
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.

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).

- Enter a Heading 3, a small paragraph, and another paragraph with a link.

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.

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.

- Click the Tablet option tab.
- Select a different layout for this kind of viewport.

- Click Publish twice.
- Click View Post.
Notice also, that you can set here margin and padding styles for the whole column group.

- Resize your browser window until it fits the tablet size.

- 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.

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.

- Enter your own values.
- Click Save to record the changes.
- Close the overlay window.

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.

- Create a new post and add a layout with 3 columns like in the previous example.

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!
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?
Hi Nicky,
would you mind opening a ticket https://publishpress.com/publishpress-support/ so we can check your case scenario?
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!