WordPress’ block editor has now been on the scene for two and a half years. It has brought about new opportunities to design pages as opposed to just adding text and images to them.
But learning the various blocks and how to put them together can still be quite a slow and frustrating process. You might have learned that you can use the Columns block to put content in columns, but it can take a while to build the layout you want.
Gutentor is designed to solve that problem.
Gutentor is a powerful page building plugin that extends the Gutenberg block editor. Let’s take a look at how it can help you build a professional looking site.
Table of contents
- Starting out with Gutentor
- Gutentor blocks
- Gutentor templates
- Gutentor template kits
- Gutentor Patterns
- Customizing Gutentor blocks
- Documentation
- Features I like about Gutentor
- What could be improved about Gutentor?
- Summing up
Starting out with Gutentor
Like other page builders, Gutentor has a number of blocks which build on the standard blocks and allow you to create innovative layouts without code.
Gutentor also offers templates (block layouts for particular use cases) and template kits. For a demo, visit the Gutentor Demo Library.
To get started with building with Gutentor once you have installed the plugin, create a post or page and user the Template Library button in the editor to access Gutentor’s blocks.
Gutentor blocks
Gutentor contains a large range of custom blocks to build a site. They are organised by category and most categories contain a choice of blocks of the same type.
One thing to note is that many blocks are designed for a full width layout. If you’re using a theme such as Twenty Twenty One, then you’ll need to set each block to full width (or at least wide width) for it to display optimally.
Some of the more innovative blocks are:
Dynamic Columns: display 2-6 items in columns of equal width.
Advanced Columns – column layouts with different combinations of elements, such as contact forms, bullet lists, images, maps and social media icons.
Duplex Post Module – create a showcase for your posts with the latest one displayed with a large featured image.
Filter Module – filter a collection of images by type. The types are editable from the defaults.
News Ticker – show your latest post titles in a block with controls.
Gutentor templates
Templates are prebuilt block layouts which you can use to build pages quickly with minimal configuration.
Templates come with demo content which you can swap out for your own information.
Templates are moving to Templateberg, an online template library with both free and premium templates. Signing up to Templateberg content takes just a few minutes and is free.
You’ll need the Templateberg plugin to install and use Templateberg templates.
One point to note: if you’re building with templates, you might want to hide post or page titles for aesthetic reasons.
Gutentor template kits
Template kits are collections of templates that work for a particular site type.
Template kits cover various industries including business, education, fitness, law, medical, restaurant and travel.
An example is the Charity template kit, which has templates for 5 pages:
The Charity home page consists of:
- a Give a Helping Hand and Help Unfortunates introductory slider with information panels with call to action buttons
- a Welcome section
- a How You Can Help? section
- an Our Causes section with images, donation buttons and donated amounts
- A Donation section with counters and a donation form using Contact Form 7
- A Volunteers section with profiles
- A Latest News section with 3 recent blog posts
You can add, move around, delete and modify these blocks to suit your own purposes.
Gutentor Patterns
Patterns are modified native blocks. Some are designed specifically for the Twenty Twenty One theme.
The Large header with a heading and a button block is a modified Cover block with other blocks within: Paragraph, Spacer and Button.
Customizing Gutentor blocks
You customize Gutentor blocks in a couple of places: through editing the blocks themselves, and in the Block settings section in the sidebar.
The end result of these changes is:
You should remove images that come with the blocks and insert your own, as specified on the plugin’s download page.
The Advanced tab has a heap of options, most of which will only be of interest to developers and power users rather than the casual user.
One of the more interesting options is Block Shape, which adds a shape to the block.
Here it is in action for the Featured block:
Animation is also available, though Gutentor recommends that you don’t use it without an understanding of what it does.
Documentation
Perhaps the best way to get going with Gutentor is to start selecting and customizing blocks or templates for yourself.
If you need a helping hand, Gutentor has documentation for the plugin to help you along your way.
Many help articles have a demo video showing how to perform a task using Gutentor.
The documentation breaks up Gutentor blocks into modules, widgets and elements, but at the end of the day, they’re all blocks!
Features I like about Gutentor
One big plus point about using Gutentor is that becuase it builds on the block editor, it doesn’t bloat your site like some other page builder plugins, which can slow down a site horribly. Gutentor has a light footprint: it doesn’t load any code that you don’t need on a web page.
Gutentor also supports two popular online store plugins: Easy Digital Downloads and WooCommerce, where it has layouts for your store and individual products.
What could be improved about Gutentor?
Gutentor is an impressive plugin for page building with the block editor. There is a wide range of blocks, and templates are well designed and fairly easy to adapt to your site’s needs.
I think it could be improved in a few key areas:
- Choice of templates. Compared to the likes of Divi or Elementor, which are more mature page builder plugins, the number of templates from Gutentor is relatively small. The introduction of Templateberg is designed to help with this, but it will take time to accumulate a range of templates.
- Documentation. The documentation is a bit scanty in some areas. More screenshots and explanation would help.
- Accessibility. Some blocks, like Gutentor’s Accordion block, are not accessible to keyboard users.
Summing up
If you have some familiarity with the WordPress block editor and want to try your hand at more advanced and professional layouts, it’s worth giving Gutentor and Templateberg a try.
You can put a site together quickly with minimal fuss using the large range of blocks available and the learning curve is fairly gentle.
Have you used Gutentor or will you be trying it? Leave a comment below.
Hi Cliare – thanks for the review.
I am a GeneratePress/GenerateBlocks user, but always on the lookout for other WP Block editor products.
One thing you have not touched on (from an initial glance) is performance.
Do you have any feedback on how well it is written and performs ?
TIA, Dave
ps – Love Edinburgh – would love to visit again when I can travel (in Perth, Australia)
Hi Dave
I didn’t do any performance testing, but the plugin developers say this about speed:
So if we take them at their word, a site running Gutentor should not be significantly slower.
Thanks Claire – appreciate you getting back…
Dave