How Does Gutenberg Stack Up With Elementor (Free and Pro)?

Introduction

If I had a dollar for every time someone asked me to compare Gutenberg with Elementor then I could buy a nice lunch. A year ago I was not asked this question, or even 6 months ago, but now it keeps coming up. If you have been neck-deep in Elementor and have not been following what is happening with Gutenberg then you might be surprised by this type of question. Or, if you have never used Elementor then you may be wondering if it has any features not found in Gutenberg. This post is for people who are curious about this question. In this post I do a comparison to show how they stack up with each other. Some people will be surprised.

Background

Lets start with a bit of background. The Classic Editor was introduced into WordPress in 2005. At that time many WordPress core developers believed that anything other than plain text, with maybe a few pictures, was extravagant bloat. Literally, there was no native ability to create columns. There was nothing but a one column linear stream of content. If you wanted to add padding or margin then you had to go into “Text” mode and do it manually. This gave rise to two things: first, a lot of companies popped up offering hosted landing pages because it was difficult to build eye catching sales pages in WordPress; and second, the rise of page builders.

Divi was released in 2013 and it was revolutionary. Beaver Builder launched the next year.

Page builders brought a huge jump in flexibility such as drag and drop, better what you see is what you get, padding and margin controls, different types of content, different settings by device size, forms, popups, templates, and of course columns and speed. Elementor was released in 2016 back in the days of the Classic editor.

Automattic, the hosting company for WordPress.com, found that they could not complete with Wix and SquareSpace. The Classic Editor was too out of date and limited.

Gutenberg was released just two years ago. The launch was rocky and it was probably released too soon. However, Gutenberg kept getting better and the market for third party addons has grown quickly and they have been adding page builder like features. Gutenberg addons come with advanced container and column blocks providing page builder like layouts, and the blocks in free and premium addon packs provided even more block types than found in core. There was a transition this year to the point where all of sudden site builders and authors started to realize that Gutenberg had gotten good enough to use. During this transition some people have lost site of the differences, and this post will make them clear.

Gutenberg vs Elementor Free

Install and Maintenance

Gutenberg is shipped with WordPress core. That means that there is no install process, no extra updates, and there are no license keys or account connections necessary, and that is easier.

Performance

When it comes to performance, Gutenberg outputs cleaner HTML. Here, for example, is a single button on a Gutenberg page.

And here is the source markup output for that, the main section with the code for the button highlighted:

Here is a single button on a page created with Elementor:

And here is the source markup for that, the main section shown, also with the code for the button highlighted.

Ease of Use

I’ve spoken with a number of agency owners who say that Elementor is easier for their clients to learn. To a certain extent, editor choice is a matter of personal preference, but I think that Gutenberg is a different paradigm than many people are used to. Also, Gutenberg, since its release, has been in a state of change and the user interface is still being refined.

A feature of the Elementor editor that is very consistent, is the placement of options and settings. The Content, Design, and Advanced tabs of the widget panel are largely the same from widget to widget and even third party addons follow the same conventions.

Global Features

Elementor Free comes with the ability to set colors, fonts, typography, and break point settings that apply to all pages created in the editor across the entire site. Gutenberg does not have this, though themes may provide varying types on theme Customizer to Gutenberg integration.

Blocks vs Widgets

Gutenberg has blocks and Elementor has widgets. These are the components used to assemble the page. How do they compare?

Containers and Columns

Containers and columns are the heart of the layout of a page, so it makes sense to look at columns to see what kind of options the two editors provide.

Gutenberg columns have a vertical alignment option and a text color option as well as the option for a solid or gradient background color.

Elementor offers height, width, alignment, and overflow options. Background options include: color, gradient, image, and video. There are background overlay options, border and shape divider options, margin, padding, and z-index options. and responsive options.

Number and Features

Gutenberg comes with about 35 blocks, which is a pretty decent number. Gutenberg also comes with 35 embeds, which is impressive. However, there are fewer options available for controlling the layout and styling of each one as much of that is left to the theme. See the screenshots above comparing the column features as an example.

Elementor Free has about the same number of widgets as Gutenberg does blocks. It also supports about 36 WordPress widgets. Whereas layout and style options for Gutenberg are meager and inconsistent, all Elementor widgets have margin, padding, z-index, motion, background, border, position, and responsive options.

Elementor also comes with some more advanced widgets, such as Google Maps, Star Rating, Tabs and Accordion widgets.

Other Features

Gutenberg has the notion of Reusable Blocks where you can save a block, or a group of blocks, with their content and settings to insert on other pages. This is similar to Elementor templates, where you can save a section or sections and reuse them on other pages.

Gutenberg also has the concept of Block Templates, which are predesigned blocks that you can insert and change. Elementor, for its part, has a Template Library. The Elementor Template Library is much more extensive and includes predesigned sections (called blocks) as well as full predesigned pages.

Elementor has the ability to set mobile and tablet breakpoints. It has a Role Manager for managing access to the Elementor editor and its features. Elementor provides a coming soon and maintenance mode feature so you can limit access to your site during development. It also has a Replace URL Tool which you can use to aid with site migrations.

Gutenberg vs Elementor Pro

More Widgets

Elementor Pro is another level of features that get added to the above comparison. First off Pro adds approximately 58 additional widget, counting the WooCommerce and Theming related ones. Some of the advanced widgets include form, login, table of contents, social share, and Lottie animation widgets.

Theme Builder

Elementor Pro comes with a Theme Builder that lets you create theme templates for single posts, pages, and Custom Post Types. I also lets you create the blog, archive, header, footer, search and 404 pages.

Dynamic Data

Elementor Pro lets you work with dynamic data, that is data both from your WordPress site and well as custom fields and Custom Post Types added using Advanced Custom Fields, Toolset and Pods. Custom fields and Custom Post Types are components of WordPress that are very powerful, provide a great deal of flexibility, and help make WordPress more than a blogging platform. However, core WordPress, including Gutenberg, does not provide any way to output custom fields and by default requires using PHP. Elementor Pro’s ability to work with dynamic data, or Dynamic Tags, lets you use these advanced features in the editor and easily output their values.

Elementor Popup Builder

The Elementor Pro Popup Builder is a comprehensive tool for creating mobile popups. It lets you create popups for email signups, login forms, promotion and sales banners, content lock, announcements, exit intent, and more. With Elementor Pro you there are a number of conditional triggers and rules you can apply to control the popup display. Also, you can put almost any kind of content in a popup.

WooCommerce Builder

Elementor Pro comes with a large number of WooCommerce widgets that you can combine with the Theme Builder to totally customize your WooCommerce pages.

Form Builder

The Elementor Pro form widget is a form builder with a number of field types, the ability to create multi-step forms, and a large number of integrations.

Integrations

Pro comes with a large number of integrations. These include integrations for email marketing, for dynamic data, for Slack, fonts, social media, online calendars, third party forms plugins, and even the WordPress command line utility.

Motion Effects

Elementor Pro lets you add animations to almost every widget. There are a large number of effects that can be triggered by scrolling or mouse actions.

Addons

Elementor

There are a large number of free and pro addons available for Elementor. Some of them extend the built in widgets and others are unique or provide advanced features that Elementor does not natively support. Looking at just the Dynamic Content for Elementor addon, for example, it provides a number of widgets for working with SVG images, 360 degree images, WebGL, copy to clipboard, cross-site copy and paste, QR codes, save to PDF, conditional display, extending Elementor forms with conditional fields and other advanced form features, extensive dynamic tags beyond what is offered in Pro, cursor tracking, and more. Gutenberg also does not have these features.

Gutenberg

There are an increasing number of free and pro addons for Gutenberg. They fill in many of the gaps of the core editor and bring page builder like features. An important component of these addons are container and column blocks. Here for example is the Kadence Row Layout block. Note the options and settings on the right. The settings can all be set by device size. It allows you to set the vertical alignment, layout, and stacking order. You can set the margins, padding, and z-index. You can apply a color, gradient, image or video background. There are background overlay options, color and typography options, width and height controls, visibility options, and the columns have animation options. Sound familiar? These options are very similar to those we listed earlier for Elementor columns.

Continuing with Kadence blocks as the example, take a look at the list of blocks. Advanced Button, Advanced Heading, Tabs, Accordion, Info Box, Icon List, Testimonials, Advanced Gallery, Table of Contents, Post, Portfolio and Product Carousels, Modals, and Video Popups, are among those on the list. There is a lot of overlap with Elementor Free and some overlap with Elementor Pro.

If we look, for example, at the Kadence Advanced Button block we see that it has many more layout and style features than Gutenberg core.

It is important to note that some of the blocks that are similar to Elementor Pro, such as the form block, are not as extensive and have no where near the number of integrations, but they are certainly more powerful than Gutenberg core. There are many blocks that similar to those found in Elementor Free.

In addition to blocks, a number of third parties now integrate template libraries into the Gutenberg editor. For example, here is a screen shot from the Qubely Gutenberg addon that brings 156 predesigned block sections into the editor.

And here are the 36 Starter Packs Qubely adds of the themed sets of predesigned pages.

Kadence Blocks have the ability to set global colors, typography, and block settings options that apply to their use across pages.

Conclusions

If we compare just Gutenberg with Elementor Free then we find that Gutenberg doesn’t require any extra install or license. It also outputs cleaner HTML. However, many will find that Elementor free is easier to use. Elementor has standardized settings that are located consistently across all widgets. The Elementor settings are much more extensive and provide greater flexibility and control for layout and styling. Consequently, while Gutenberg is a nice step up from the old Classic Editor, Elementor Free is the more powerful page builder.

When we compare just Gutenberg with Elementor Pro then we find that Elementor Pro has a large number of advanced features that don’t exist in Gutenberg. The Theme Builder, Popup Builder, Form Builder, WooCommerce Builder, ability to work with dynamic data, and the motion effects are some of the biggest ones. If the comparison of the Classic Editor to Elementor was like comparing a car to a bicycle, then the comparison of Gutenberg to Elementor Pro is like comparing a car to a jet. It is just way more powerful.

When we start of consider Gutenberg addons then things get interesting. While they do not have as many options, Gutenberg addons provide many of the features of the free version of Elementor. This has progressed to the point where we can start to consider Gutenberg, plus a pro addon, as comparable to Elementor Free in terms of the ability to layout and style content. This is a pretty significant step for the core WordPress editor. For simple sites, Elementor may no longer be needed.

Currently Elementor Pro stands head and shoulders above Gutenberg, even if you add Gutenberg pro addons. Elementor Pro is the preferred tool for advanced WordPress site building and design by professionals from around the world. The Gutenberg development team is working on new features, such as full site editing, and I imagine that over time that will make it possible to do more advanced work using tools found in WordPress core, but Elementor is not standing still and is not going away any time soon.