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.
Table of Contents
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!
The complete toolkit for the WordPress block editor
PublishPress Blocks is the plugin that gives you more control over the WordPress block editor. You get a complete set of management tools for your blocks.
