| WordPress

Plugins to Improve Gutenberg Layouts and Columns

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

The Caxton 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 ‘Caxton’. 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 ‘Caxton’.

2 Pagebuilder Plugins Designed for Gutenberg Layouts

  • Select Caxton Layouts 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 Jedi controls let you rearrange the grid layout if you have already added content and then decide to change the nesting or ratio of the columns.

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


Conclusion

Both of these plugins extend the capability of the WordPress new editor Gutenberg considerably, making more complex layouts easier to achieve and adding interesting and useful additional blocks.


The video introduction to Gutenberg

WordPress 5 is here with a brand new editor called Gutenberg that changes the way posts and pages are created and edited. This video is your complete guide to Gutenberg! Thanks to our friends at Glowhost for making this video possible: Save 60% on your first invoice when you host your WordPress site with GlowHost. Click here and use the coupon "WPGUTENBURG".


About the author

Born in Zambia but living now in Cape Town, South Africa, Libby Young started out as a journalist. She taught herself HTML when the company where she was an sub-editor made the transition from CD-Rom to the web 20 years ago. Since then she has developed content-rich websites using a variety of open source content management systems.