2 Pagebuilder Plugins Designed for Gutenberg Layouts
WordPress’s new editor Gutenberg provides new flexibility and opportunities for creativity in itself, but there are now plugins available to help improve its performance even more.
The one area where Gutenberg can be frustrating is the columns block. The settings are limited and it can be difficult to get just right. Now there are a few plugins that provide the functionality that has been missing, such as:
- Variable column widths
- Padding and margin settings
- Styling for individual columns.
Plugin #1. Advanced Gutenberg
The Advanced Gutenberg plugin makes it easy to lay out pages in any grid format, and then add Gutenberg’s blocks within that layout. The grid allows for the nesting of rows and is fully responsive.
- To install go to Plugins, Add New and search for ‘Advanced Gutenberg’. Install and activate.
Now when you add a new block to a page or post you will find that you have a new tab called ‘Advanced Gutenberg’. It’s easy to spot the new Advanced Gutenberg blocks. All the new blocks are shown in purple.
- Select Columns Manager block and you can choose between a variety of column layouts, some fairly simple, others more complicated nested structures.
Once you have chosen a layout you can either enter the text of select different types of block to fill the space in that layout.
You also have a variety of settings in the right-hand column to help you create exactly the look you want. These allow you to increase padding, add a background color or an individual CSS class.
The Background tab allows you to use an image as a background, or select a plain or gradient color of your choice. You can also decide on the opacity of the background color or give the background image a Parallax effect.
The Advanced Gutenberg tab includes a growing library of blocks that can be used alone or as part of the layout grid, including a slider, social icons and a cover image with a button. All are very useful.
Plugin #2. Kadence Blocks
An alternative page builder toolkit is Kadence Blocks. This plugin gives you control of columns for different screen sizes as well as editing tools like padding, backgrounds, and overlays with gradients.
- To install go to Plugins, Add New and search for ‘Kadence Blocks – Gutenberg Page Builder Toolkit’. Install and activate.
You will now have a new item under Settings on the Dashboard’s left-hand sidebar, called Kadence. All the block are active by default but here you can deactivate the ones you don’t want and alter the settings for each one. You can also control the maximum width of your template here. You can leave these settings just as they are, to begin with, but they can provide additional controls as you finetune your layout.
When you start adding blocks to a new page or page, Kadence does not have its own tab, but all the new block types are blue and can be found under the Common Blocks and Layout Elements tabs.
Select the Row Layout icon and you will see a variety of column layouts as well as a button to the prebuilt library.
Once you have selected one of the layouts you have considerable extra control over how to alter the layout for your particular needs from the settings on the right.
The top tab called ‘Row Layout’ lets you decide on the way the layout should look on desktops, tablets and mobile devices, as well as letting you decide on the order in which the columns should collapse on mobile devices if you decide to stack them on top of each other.
Other tabs let you control:
- Padding and margins
- Background colors and images
- Dividers
- Text color
- Height and width of containers.
The pre-built library is a great timesaver, providing a selection of readymade layouts that can be used for a variety of uses, such as:
- Headers
- Call-to-action
- Features
- Tabs.
Just select the layout you want and update it with your own content. Again, there are some control options on the right-hand sidebar to help you get exactly the effect you want.
Kadance also provides a handy library of icons. Select the Icon block and you can select from a useful library of ready-made icons.
You can easily change the icon color, size, and line width, before adding a link to the icon.
