• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / Gutentor: A Popular and Powerful WordPress Page Builder Plugin

Gutentor: A Popular and Powerful WordPress Page Builder Plugin

Posted: June 15, 2021 by Claire Brotherton
4 Comments

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 – Gutenberg Blocks – Page Builder for Gutenberg Editor

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 Template Library button

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.

Gutentor template library

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.

Setting a block to full width on Twenty Twenty One theme
Gutentor Icon Block in Twenty Twenty One
Without the full width option, the Icon block is compressed
Gutentor full width icon block
The Icon block displays properly at full width

Some of the more innovative blocks are:

Dynamic Columns: display 2-6 items in columns of equal width.

Gutentor Dynamic 5 column layout
Dynamic Columns, modified from 6 to 5 columns

Advanced Columns – column layouts with different combinations of elements, such as contact forms, bullet lists, images, maps and social media icons.

Some Gutentor Advanced Columns layouts

Duplex Post Module – create a showcase for your posts with the latest one displayed with a large featured image.

Two layouts for the Duplex Post Module

Filter Module – filter a collection of images by type. The types are editable from the defaults.

Gutentor Filter Module with images filtered by free type
Gutentor Filter Module with images filtered by free type

News Ticker – show your latest post titles in a block with controls.

Gutentor News Ticker

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.

Gutentor templates

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.

Templateberg

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:

Gutentor charity template kit

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
Gutentor Our Causes block from Charity  template kit
The Our Causes section of the charity homepage template

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.

Gutentor patterns

The Large header with a heading and a button block is a modified Cover block with other blocks within: Paragraph, Spacer and Button.

Large header with a heading and a button block

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.

Gutentor Tabs widget editing
Editing the Tabs block. Each tab can be moved or removed, and the Lorem Ipsum text is editable.
Gutentor Tabs block settings
Gutentor Tabs block settings

The end result of these changes is:

Gutentor left aligned tabs with button link

You should remove images that come with the blocks and insert your own, as specified on the plugin’s download page.

Edit Image Testimonials block
Replace an image by using Edit Image in the block to select your own

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.

Gutentor Advanced settings

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:

Gutentor Block Shape settings
Gutentor Featured block with block shape

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.

Gutentor WooCommerce layout
A template for displaying products in a WooCommerce store

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:

  1. 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.
  2. Documentation. The documentation is a bit scanty in some areas. More screenshots and explanation would help.
  3. 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.

Related

Category: WordPress Tags: block editor, page builder

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Dave Porter says

    June 16, 2021 at 12:58 pm

    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)

    Reply
    • Claire Brotherton says

      June 21, 2021 at 9:46 am

      Hi Dave

      I didn’t do any performance testing, but the plugin developers say this about speed:

      How can you say Gutentor makes the site faster?

      It is not Marketing words. Gutentor creates a single minified CSS file for only used Gutentor blocks in the editor, for normal to advanced landing pages it is less than 50kb, for a simple page it is less than 20kb. Less CSS ∝ Faster Loading Sites.

      So if we take them at their word, a site running Gutentor should not be significantly slower.

      Reply
      • Dave Porter says

        June 21, 2021 at 10:24 am

        Thanks Claire – appreciate you getting back…
        Dave

        Reply

Trackbacks

  1. Level Up with Query Block, FSE for Classic Themes and more - Weekend edition #199 - Gutenberg Times says:
    January 15, 2022 at 2:47 am

    […] Brotherton published post Gutentor: A Popular and Powerful WordPress Page Builder Plugin. She reviewed building full page layouts with this plugin for various purposes and explains their […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map