Gutenberg vs. Elementor: Before Choosing Builder

The world is constantly changing, disregarding conservative wishes. One of these changes — the release of WordPress 5.0 and the built-in Gutenberg editor — built a fire under the entire IT community. ? You can treat this release as you like, but one thing is clear: you can’t ignore it.

The developers met the release with no enthusiasm — at the start, Gutenberg and its unusual interface, bugs, and conflicts with some old plugins broke the hearts of many. But here we have a spoiler: Gutenberg will stay with us forever. We have to get used to it. 

A lot of questions arise: why in our article we put Gutenberg vs. Elementor in the same rank, instead of putting Gutenberg and Divi, for example? What is Gutenberg capable of, and what future is waiting for it? And why does Gutenberg have the potential to displace many page builders? Let’s figure it out.

But first, a short disclaimer: we don’t try to compare Gutenberg with Elementor. Our mission is to find out what they can oppose to each other and to understand whether Gutenberg can reach the level of page builder or not.

Table of Contents

Gutenberg & Elementor: What You Should Know

In a nutshell, Gutenberg (ver. 9.2.2) is the built-in WordPress editor, which became the main tool for creating pages and posts after WordPress 5.0 release. You might have come across the Gutenberg plugin before, but let’s make everything clear: it’s not the same thing. Yes, before the latest WordPress release, you could download and install it additionally. So like it or not, from now on, Gutenberg is a native WordPress editor. Period.

The editor has the name of Johann Gutenberg, who created the first printing press in Europe and made a revolution in the field of printing. The primary idea of the Gutenberg WordPress editor is to create content with the help of blocks used for each separate item of the article.

Gutenberg replaced Classic Editor, and it means that users no longer need to know HTML or CSS and apply a bunch of shortcodes. It is an undisputed plus for beginners. But we have a whole generation of developers who painstakingly created pages using code. The good news is that any old-school developer familiar with CSS and themes will cope with the Gutenberg editor. And, probably, enhance its functionality with personalized blocks and additional shortcodes. But more on that later.

In turn, what do we know about Elementor? It is an up-to-date visual builder without limits; you can use and apply it to any website built on WordPress. Intuitive, multifunctional, and convenient – these are the first definitions that come to mind after using this drag-n-drop page builder for WordPress. Elementor works with both native WordPress pos types and custom post types.

Even if you have zero coding knowledge, you can create websites with Elementor. Edit the page and see what it looks like simultaneously, thanks to the convenient front-end editor. Elementor is almost perfect for building dynamic websites. At least, its Pro version is.

The Life Prior to Elementor and Gutenberg Era

Let’s start with Gutenberg. What did we have before it? Yeah, we had Classic (WYSIWYG) Editor based on TinyMCE. Everyone loved the old editor for its simplicity. But this simplicity also had the flip side. You could not create pages with a non-standard layout without editing HTML code. And the work with Classic Editor itself required more time and deeper coding knowledge.

The old WordPress editor was a simple text window. Although it worked well, you had to use different approaches to add images, create galleries, shortcodes, video inserts, and other content items. Therefore, the developers decided to create an editor that will be available to people without special knowledge. 

The new Gutenberg WordPress editor replaced the previous one with a simplified writing process, where each content item is packaged in a block. You can move them around the editor, change their settings, and create attractive layouts without writing code.

Elementor, in turn, was something like reinventing the wheel because the Elementor team tried to change the way people use WordPress. The needs of both developers and designers conflicted continuously, so something versatile was needed that would cater to both developers and designers.

Before, it was difficult to use WordPress effectively and comprehensively. The developers needed a clean interface and fewer controls; nothing had to distract them from coding.

At the same time, designers needed as many controls as possible to implement all the creative solutions. Both of them wanted to build a site that would meet various performance and visual criteria. And Elementor gave such a possibility.

On the one hand, page builders and editors made life easier for many who want to create sites. On the other hand, coding became not too necessary that seemed to offset the knowledge of many people who devoted much time to studying code. No balance, we may say. But it’s not that sad.

What Are They Both Good for?

Be patient, because now we will consider the functionality of Elementor vs. Gutenberg in detail.

Elementor Free version essentials

• Select any content type to display.
• Edit page on front-end (on the left you see a block with settings, and on the right, you see a page. All settings are applied immediately, and you see the result right away).
• Customize each and every element on the page.
• Apply precise typography settings (you can apply all possible settings for any text element, namely, size, saturation, transformation, style, appearance, line spacing, and character spacing).
• Setup the adaptivity (you can customize the display of the page individually on any device. Right in the editor, switch between devices and make point settings for each platform).
• Add motion effects.
• Use 30+ Elements.
• Apply versatile page layout setting.
• Apply elements, sections, and columns settings
• Save templates (you can save the individual sections or pages created as a template and then paste and use them on other pages).

Elementor Pro version essentials

• Display dynamic content.
• Integrate with other services (Elementor is compatible with many third-party services, so you will set up communication between them easily).
• Enhance functionality with additional widgets.
• Add modal windows (popups) (Elementor has many settings for creating popups, integrating with other services, and display conditions. The gallery already has more than 100 ready-made popup options, which you can select and customize for your tasks, or create completely from scratch. In the modal window, you can display the subscription form, authorization form, promotions, announcements, sales, etc.).
• Create a unique header and footer and use them throughout the site or on specific pages.
• Design personal themes (you can design all the necessary elements and pages that the WordPress theme includes, these are: Home page, Archive, 404 Page, header and footer, etc.).
• Build an online store with Woocommerce (Elementor also includes 15 widgets for creating a store. Like other items, you can fully customize them and link together).
• Add motion and parallax effects — you can set the motion settings for any item.
• Use 300+ pages templates.
• Add personal fonts.
• Apply global settings (save the individual elements and set the global settings. What does it mean? If you edit one element, the changes will be applied to all other related elements).

Gutenberg essentials

• Create personalized pages and posts templates.
• Add new blocks, move, and align them smoothly.
• Apply special features:
  • Table of contents;
  • Anchors (anchor tags allow you to refer to a certain part of the document. You can assign anchors to headings, and insert links in the page content. If you select a block with a title in the sidebar, the HTML anchor field appears, in which you need to insert the desired link text. It is equivalent to giving any HTML element an ID and binding to it by adding # name-of-id to the URL);
  • Additional CSS Styles (this function allows you to assign classes that can then be styled into CSS. So, we can create the skeleton of an HTML page in Gutenberg and then style it all separately in a CSS file. In the same way, you can override any default style for Gutenberg blocks);
  • Add a gallery (like in the old WordPress editor, you can add image galleries in Gutenberg. In gallery block settings, you can specify the number of columns (from 1 to 8), and trim or not trim the images);
  • Cover Image/Hero Image (Gutenberg allows you to add an image block with a text field centered horizontally and vertically. In the block settings, you can set the image to darken for better readability and lock the background image so that it stays sticky as you scroll through the page);
  • Pull Quotes and Block Quotes (highlight an important piece of text with the help of this block. The quote block has additional styles and methods for aligning text. You can toggle between two display styles by clicking on the toolbar);
  • Custom HTML (this block allows you to add any HTML code that is typically written in a text editor or template file directly to the visual editor. Custom HTML block has a preview button which shows any changes without the need for saving them or pressing the WordPress preview button);
  • Classic text block (this block simulates the default WordPress editor and shows the full TinyMCE toolbar instead of any Gutenberg buttons. The only difference from TinyMCE is the option “Additional CSS Class” in the block settings menu. Classic Text is used as the default block type that is assigned when Gutenberg cannot automatically determine the block type (when inserting text into the editor) and helps in the transition between the old and the new editor. You can move and delete a block using Gutenberg controls. When you switch to Text Display Mode, this block looks like pure HTML and is not enclosed in the HTML comment, like other blocks);
  • Verse (such blocks are intended for poetic or literary passages and are mainly used to determine line breaks and the interval between characters strictly. There is also a small indentation on the left side of the text. When you press enter in the paragraph block, the WordPress editor adds a new paragraph. Text editing options are limited to bold, italic, and strikethrough);
  • Text columns (the Columns block allows you to add any number of embedded blocks to a series. You can use the slider to select between 2 and 6 columns, but you can enter any number in the text box next to it. You can insert other blocks into these columns, including nested columns);
  • Buttons (the editor has a block that allows inserting buttons. For a button, you can select a style (straight corners, rounded button, and outline) and align it to the edges or center. On the toolbar, you can specify the background color of the button text. In the color editor, you can select RGB, HEX, or HSL mode);
  • Widgets integration (the block list also contains 5 useful widgets for displaying a list of recent entries, comments, archives, all categories, and custom shortcodes that otherwise will not work when inserted into any other Gutenberg WordPress block).

Where to start with Gutenberg and continue with Elementor? 

The main things you can do with Gutenberg are to design personalized layouts, create new blocks, enrich pages with text and media content, add buttons, and apply basic stylization.⚡

For the next steps, you have to use Elementor:

• Creating specific blocks (header, footer, breadcrumbs, etc.);
• Utilizing additional elements (internal section, video, text editor, button, separator, interval, Google maps, rating, carousel, main gallery, icon list, counter, progress, feedback, tabs, accordion, spoiler, social bar, warning, shortcode, SoundCloud player, HTML code, menu anchor, sidebar);
• Adding personalized fonts, motion effects;
• Checking adaptivity, etc. 

Remember that standard Gutenberg editor widgets are also available.

In other words, at the moment, Elementor is more about design, while Gutenberg is about better user experience in comparison to former editor, and about embellishing the article content with creative visual blocks. ?

Pros and Cons of Elementor and Gutenberg

Gutenberg

If we look at the new Gutenberg WordPress editor more calmly and objectively, disregarding bad reviews and low stars, we will find many convenient functions and solutions. Let’s look at the main ones:

• Variety of blocks for creating personalized layouts (the very principle of work is a big plus. All page elements are presented as blocks that you collect to get the finished page);
• TinyMCE editor is still available (it has its own block called “Classic.” This is a good option for those who switch to using Gutenberg gradually);
• Developers can add their blocks to the editor (no longer need to create shortcodes if you want to add custom blocks for the editor. You can create your own visual blocks, add them to the Gutenberg menu, and use them constantly. If you used shortcodes in some old posts, they will work with the new editor);
• All blocks can be customized and moved;
• Complete statistics on created publications (with one click, you can get complete statistics on the generated material: the number of words, images, the total amount of text and other information will be available).

The weak sides are as follows:

• Inconvenient interface (this is the main complaint of everyone who uses the new editor. Indeed, almost all functions have been rebuilt and the menus are made completely differently. But we are sure that the problem is not with the editor itself but with the power of habit. If you work a little in a new environment, Gutenberg will seem quite convenient and logical); 
• Copies many functions of visual builders (Gutenberg and some page builders, like Oxygen Page Builder, have competing functions. One example is adding buttons. In some cases, this leads to confusion and problems); 
• Many hotkeys are not working (The keyboard shortcuts familiar to the old editor no longer work in Guttenberg. It is due to the block principle of page building. The first striking thing is that the title is no longer created using hotkeys. You can do it only by a special block in the editor’s feature set. In the menu of tools and parameters (three points at the top right), there is an item with keyboard shortcuts. There you will see new working combinations);
• Limited toolbar;
• Has rather few third-party solutions.

Elementor

Let’s revise the pros and cons of Elementor briefly because we know about it more than about Gutenberg.

Pros:

• Huge opportunities for customizing pages structure and design;
• Compatibility with WooCommerce;
• Compatibility with Gutenberg;
• A lot of fine tuning options;
• You can specify usage conditions for the templates you create;
• Universal application;
• A great number of third-party solutions, additional widgets so on.

Cons: 

• There is no professional version trial. Still, you can opt for 30-days money-back guarantee;
• Subscription usage model — cannot be bought forever;
• Without buying a PRO version (or third-party solutions), it is weak (but suitable for the test);
• It creates a considerable number of queries in the database, that is, it requires good hosting for productive work.

Gutenberg: Where Is It Headed?

New Gutenberg WordPress editor is already capable of much. ? The blocks provide users with a convenient way to change content directly. Also, they ensure that the structure of the content cannot be easily violated by random code changes. It allows the developer to control the output by creating honed and semantic markup, which is saved by editing and cannot be easily hacked.

Gutenberg also allows the application of a wide range of APIs and interface components to create blocks with intuitive controls freely. The use of these components not only accelerates development but also provides a more consistent, convenient, and accessible interface for all users.

The new block paradigm opens the way for research and imagination when it comes to solving the needs of users. With a unified block insertion stream, customers can find and use blocks easily for all content types. Developers can focus on realizing their vision and providing a rich editing experience, rather than “dancing with a tambourine” with complex APIs.

WordPress 5.0 makes big changes to how users create content using WordPress. The most important WordPress plugins, such as WPForms and Yoast SEO, are already fully compatible with WordPress 5.0 and the new editor. Let’s highlight that Gutenberg returned the idea that the theme is critical, so all top WordPress stores have also made their themes compatible with the Gutenberg editor.

According to Matt Mullenweg, the main WordPress developer, “with the release of WordPress 5.3 on November 12th, we’ll see about 20% of what Gutenberg will bring to WordPress,” and this is just beginning. So, more advanced integrations and more Gutenberg add-ons are coming. 

So, where is Gutenberg headed? The most interesting direction here is Full Site Editing, released fully with WordPress 5.9. It expanded the role of the block editor. You can edit almost any part of your WordPress website from now on.

So, we can predict the slow death of several page builders because — here will be revealed the main intrigue of the article — someday, Gutenberg itself will reach the page builder level. We already see some competing functionality, similar both for Elementor and Gutenberg, and nothing will prevent the new WordPress editor from becoming the worthy alternative. 

At the moment, the main con (and pro, simultaneously) of Gutenberg WordPress editor is its limited stylization options that, in turn, do not create additional load or degrade page performance. Many of the upcoming changes include inline design — that sounds like a severe competition for Elementor and similar visual page builders. Of course, it will not happen right away, but it will happen, believe it or not. Gutenberg is not a page builder. Yet.

But it is more than just an editor.

It Is All About Pagespeed

We all like Elementor for its fascinating visual functionality, but here is a problem: low speed of response. Each add-on, widget, or anything else requires more and more additional files. So, this is the drawback of all plugins, they overload WordPress as hell.

Gutenberg started solving this problem with the theme. “Twenty Nineteen” is a new theme that goes with WordPress by default. It is designed to demonstrate the capabilities of the Gutenberg WordPress editor. The theme uses editor styles, so what you create in the content editor is what you see in the web interface. The theme has enough space, allows you to create headings in a modern form and without ticks in combination with classic text with ticks and system fonts that would affect the speed of loading pages of the site as best as possible.

Besides, considering that Gutenberg is a default WordPress editor, we can expect fewer and fewer conflicts and bugs. Gutenberg may conflict with third-party solutions but despite this, it works faster. The less code access and server queries, the better page speed. Gutenberg already outperforms Elementor in terms of page speed and generates fewer lines of code.

To be fair, pages on Elementor can be fast enough too. If you optimize your server speed and images, clear your HTML and CSS code, reduce the number of requests to external files, set up lazy load, your pages will be fast regardless of the page builder. But for that, you need some web development capabilities. You can’t achieve it with any “page-speed plugin.”

More on Developers’ Opinion

WordPress 5.0 and Gutenberg editor were released two years ago, and developers still don’t have a more or less uniform opinion. Some of them tend to extremes, and those who love Elementor don’t love Gutenberg and vice versa. For example, Gutenberg is used by WordPress fans, who believe that any WordPress add-ons lead to problems and breaks of the site. And those who love Elementor believe that Gutenberg is rubbish.

Well, none of them are completely right.

Our developers say that, generally, working with Gutenberg is not very difficult. It simplified and accelerated the creation of templates. Yet, they faced responsiveness issues. Also, they mentioned that visually, a page in the administrator panel looked different than on the front-end, although WordPress claimed that they would be identical. They needed to spend a lot of time to achieve this.

Still, we see on Envato that all the top-themes are compatible with Gutenberg, so most of the IT community believes in further Gutenberg enhancements.

At the same time, the opinion of plugin developers for Gutenberg is worse — they face complications of creating plugins on React because they have many different states and components.

A Few Words About SEO

We wouldn’t need to mention it, but people keep asking what is better for SEO — Gutenberg vs. Elementor. The quick answer is: there is no big difference. The longer answer needs a separate article. Needless to say that you shouldn’t expect great SEO results by default just because you used an editor and some pre-built page template. Analyze the SEO area thoroughly and make the settings according to your project. Yet, both editors are compatible with major SEO plugins like Yoast or All-in-One SEO, which cover all your SEO settings.

Gutenberg Editor vs. Elementor Page Builder Plugin FAQs

The Bottom Line

We have to admit: at the moment, Gutenberg is kind of a controversial thing that sometimes causes much pain. But let’s recall the primary idea again: Gutenberg is a native WordPress editor, and it has the undeniable advantage – the leading plugins already transfer to Gutenberg. We might not see it clearly, but if we search a bit, we will find that ToolSet, ACF, MetaBox released the versions compatible with the new WordPress editor. Gradually, Gutenberg will cut off all extra plugins and improve the page loading speed.

Gutenberg is already capable of much, and it will develop more, so the growing pain might be worth it.