November 26, 2019

Gutenberg vs WordPress Page Builders – Into the Future

It has been a controversial year for the block editor we all know and have a love/hate relationship with – Gutenberg.

Considering its evolution from being a heavy, slow, clunky block editor to a fast, responsive solution with a really cool variety of blocks (WPv5.3), Gutenberg seems to be gearing up to eliminate the need for page builders within WordPress.

The question is, will it be able to do so?

Here we put Gutenberg against Elementor, Divi, and Beaver Builder – WordPress’ darling block editor against the top page builder plugins in WordPress.

Note: We’re comparing the latest version of Gutenberg that was updated with WordPress v5.3 with the page builders.

Blocks and Customization

The most common complaint of WordPress users was that Gutenberg does not have enough design features, or blocks, as compared to Elementor or Beaver Builder.

Post the 5.3 version launch though, Gutenberg boasts of an impressive 60+ block types, which can be used on your posts and pages.

The much-needed Columns block is now a lot more flexible, but sadly, there isn’t an in-built block for Testimonials yet (you can always get additional blocks from Stackable though).

This includes some page building elements like a Hero block, Cover header, Collage and Masonry blocks for image displays, etc., as well as, blog elements like Highlight marker, Pullquote, Click to Tweet, Verse, Author Bio, etc.

To improve ease of use for the keyboard-savvy developer, there’s a new Navigation Mode for quickly moving from block to block and, from Matt Mullenweg’s Keynote Address at WordCamp US 2019, there’s a dark mode coming soon as well.

All in all, the design aspect of Gutenberg has improved significantly over the past one year, bringing in some much-needed design elements into the picture.

New blocks in Gutenberg
The new blocks in Gutenberg

Having said that, it does not even come close to the flexibility of design that Elementor, Divi, or Beaver Builder offer. The styling and padding options are limited, despite the introduction of color gradients, and the block customization interface is not very intuitive.

An important development is the addition of the ‘Group’ Block in Gutenberg which lets you, well, group different types of blocks.

Source: wordpress.org

However, you cannot merge elements to form a group by simply dragging them into an existing group, you have to create that block within the group itself.

What this implies is – With Gutenberg, you need to know exactly how your page is going to look like, before you start creating it.

Page Builders are a lot more flexible in this regard as they let you play around with widgets and blocks in a much more fluid manner.

Elementor widgets
Elementor widgets

Backend vs Frontend Editing

Gutenberg is essentially a backend editor and even with all its efforts to simulate a front-end editing experience, you cannot view how the page will look like at the front-end.

Gutenberg does try though. You can see quotes, images, columns the way they will be seen at the front-end. If you collapse the menu and turn off the settings bar, you get a fair idea of how the page will look like.

Editing a page in Gutenberg, with the main menu collapsed and settings off
Editing a page in Gutenberg, with the main menu collapsed and settings off

However, if you disable a few things, say the Page title, or the footer, that change is visible only when you preview the page.

Page builders like Divi, Elementor, or Beaver Builder, on the other hand, show you exactly how your page will look from the visitor’s perspective. All the edits you make can be seen as they would reflect at the front-end.

Formatting and Styling

Gutenberg’s biggest shortcoming is evident here – it has limited formatting options for pages.

For example, in the Column block, you can change the percentage width of the columns as you need, but adding custom widths for the blocks is not possible.

Also, the styling options are still not very intuitive; you need to poke around a bit if you want to depart from the conventional structures and colors Gutenberg offers.

Page Builders have that advantage. Formatting and styling a page is simple, quick, and effortless.

Elementor has an extremely intuitive interface that lets you make all sorts of font, color, padding, weight, changes, with additional features like element transformations and custom positioning options.

Video Source: elementor.com

In addition, if you want to override the default font and color settings for a particular page, page builders let you do so.

Moreover, most website page builders have default templates that reduce your work to a great extent. All you have to do is use that template, make a few design tweaks as per your brand, and you’re good to go.

Blog Editor vs Page Builder

The most important difference between Gutenberg and WordPress page builders is that of perspective.

Gutenberg is essentially built to make Post and Page creation easy for the WordPress newbies.

From the perspective of WordPress, this makes sense, as this is going to increase its popularity as the easiest website-building platform.

The way Gutenberg has evolved over the year is commendable and I can safely say that a WordPress beginner can now manage his/her blog without needing to know a single line of code (which was not always possible with the Classic Editor).

You don’t need custom CSS or shortcodes to add any sort of highlights or features, which makes it really palatable to code-ignorant bloggers, like me. But if we consider the broader category of developers and website builders, Gutenberg fails to satisfy.

It has page-building blocks to be sure, but the ease of use expected for page building is still slightly lacking.

Page builders are, by definition, not limited to blog post creation, and are hence preferred by developers when it comes to website development. They factor in the complexity of webpages and accordingly have elements (modules/widgets) built-in, to make the page building experience a breeze.

This difference of perspective can be an advantage or a disadvantage, depending on how you look at it.

I’d say, the best way to go is to use Gutenberg to publish your posts and a page builder to build your pages.

The Final Verdict

The latest Gutenberg update marks its entry into serious page building, with adequate options for creating advanced posts and pages. These features are excellent for creating blog posts, but for pages, the customization options fall somewhat short.

For all intents and purposes, you’ll be able to create a great, working landing page, which does not have too many complex elements.

If, however, a custom, highly styled page is what you need, you’d be better off with a WordPress page builder like Divi, or Elementor, or Beaver Builder.

The pace at which Gutenberg is developing is worth noting, yet it has a long way to go still and in the meantime, the other page builders are coming up with even more intuitive and ingenious features themselves.

Nevertheless, even if Gutenberg might not put the other page builders out of business in the immediate future, I wouldn’t discount the possibility in say, another 5 years or so!

What do you think? Do you prefer Gutenberg or a page builder? Drop a comment to let me know why!

Disclosure: Some of the links in this blog post might be affiliate links. When you purchase through a link on our website, we receive a small commission, at no added cost to you, which helps us run Epitrove and keep producing great content. This does not influence our recommendations; we only recommend products we work with or love. Thank you for your support!

Pranoti Panchwagh
Pranoti Panchwagh

I'm an avid reader and classical dancer, who loves nothing better than curling up with a book and a cup of coffee. When not burning digital ink, you can find me trekking or listening to music, and they're not always mutually exclusive!

Responses

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.