Gutenberg is the default WordPress page generator. It was launched in 2018, replacing what is now called the “classic” WordPress editor, the original rich text / HTML content editor with no drag-and-drop functionality.

Gutenberg is actually a response to a wave of third-party page generator plug-ins, including Elementor, Divi, and Visual Composer, that have emerged to replace classic editors.

From a functional perspective, Gutenberg provides an easy-to-access “block” library for dragging and dropping content elements onto pages and posts.

Blocks Tab in Gutenberg

Gutenberg is equipped with nearly 100 content blocks, some of which allow third-party services such as Twitter, Reddit and Amazon Kindle to be integrated and embedded. You can also create dynamic blocks and update the block contents automatically. Some examples of Gutenberg blocks include

Paragraph
Title
Form
Picture
Picture library
Video
Button
calendar
Custom HTML
The latest article

Most WordPress themes work well with Gutenberg (almost all of them now).

The Gutenberg interface centers the page or article content and renders the content, such as a display form or button, where possible. This is a major upgrade to the classic editor because Gutenberg supports fast tag editing while providing a visual user experience. If desired, you can also access the custom coding sections of CSS and HTML directly.

Each block has its own long list of settings, and Gutenberg’s quick panel gives you powerful control over document and block settings such as alt tags, background colors, and comment reviews.

What is Elementor?

Elementor is a page generator that is very similar to Gutenberg. However, Elementor predates Gutenberg as one of the third-party page generator applications that eventually led to the birth of the WordPress default page generator.

Launched in 2016, Elementor is popular with WordPress designers for its fully visual web design interface, fashion starter templates (which can be imported at any time), and drag-and-drop content modules.

Elementor

One of the most obvious differences between Elementor and Gutenberg is that Elementor is not built into WordPress. It is made by another company, so you have to install its free plug-in (there is also an advanced version).

You will also notice that Elementor has a unique feature name. A feature called “block” in Gutenberg is called “widget” in Elementor. Speaking of which, Elementor has more than 100 such content widgets.

Example of an Elementor content widget:

Article
Text editor
Title
Picture
Text
Introduction
Handover
Progress bar

Many gadgets can create integrations between WordPress sites and third-party applications such as Stripe, Facebook, and Sound Cloud.

In short, Elementor is one of the top WordPress page building tools with a vibrant community of developers and users. Its visual, drag-and-drop interface is unparalleled, you can get hundreds of design templates, and all the edits are done in real time.

In addition to professional WooCommerce gadgets and marketing tools for landing pages and forms, Elementor is still a giant in website construction, which is obvious when comparing Gutenberg with Elementor.

A comparison between Gutenberg and Elementor

We will compare Gutenberg and Elementor in terms of functionality, user interface, price, and so on. After our evaluation, you will know more clearly which kind of page generator is more suitable for your needs.

Main function
User interface comparison
The impact of both on performance and page speed
Pricing strategy differences
Compatibility of both with themes and plug-ins
Comparison between background editor and foreground editor
Comparison of customer support

Main function

In this section, we will pick out what we think is the “key” functionality of the page generator, and then compare Gutenberg and Elementor in each category.

Drag-and-drop function and coding: Gutenberg and Elementor

The problem with page builders is that they tend to fill the interface with visual creators, shutting out more advanced features such as code editing.

We prefer to see a combination of the two, where beginners have a smooth drag-and-drop interface that is easy to access, while advanced users can use CSS without having to look around for the right fields.

Gutenberg’s drag-and-drop function is simple and straightforward, with no delay. Just take a moment to search for the content block, then drag or click and insert it into the content. The block settings then appear for users to customize.

There are dozens of content blocks to choose from

One drawback is that when dragging a currently placed block, you must first select a block, and then click and hold a small drag icon. This requires precision when clicking, while other page generators do not.

Use the drag icon to move the block

Speaking of coding, Gutenberg’s code editor is easy to find.

The code editor is easy to access

When users use prefabricated blocks, they find that they mess up their code and are difficult to use, which requires developers to make dozens of custom blocks.

Despite these complaints, the page generator has improved for coders, and the tools do exist, except that the learning curve may be steeper than the classic editor.

You can even add HTML anchors and additional CSS classes directly to the “blocks” tab in Gutenberg, which previously required tedious operations in the HTML tab of the classic editor.

Adjust HTML anchors and CSS classes

Elementor also provides drag-and-drop functionality. It works with most WordPress themes and provides a library of blocks that can be quickly inserted into any page.

Basic block list

Because Elementor uses a semi-automatically generated grid system, you can place widgets in most areas of the page.

Drag the button block into the editor

It is easier to move previously placed content blocks in Elementor than in Gutenberg. Simply click and hold anywhere in the content block to move it.

Click and drag to move any block

Insert or select a content widget, and the content, style, and advanced settings of that widget are displayed. As for coding, it is simplified by many block settings. For example, you can add HTML anchors, attributes, and custom CSS directly to the widget or page setup.

Easily insert a custom CSS

Elementor also provides a HTML code gadget for inserting any custom code into a web page.

You can customize it using the HTML code box

Overall, the drag-and-drop function of Elementor is stronger than that of Gutenberg. However, the accessibility of the custom encoding option is the same in both page generators.

Templates (for websites, blocks, pages, pop-ups, etc.)

The page generator template allows developers to build Web sites at breakneck speed. With templates, you can start with a professional website or page design without having to start from scratch.

Many web page authoring tools provide prefabricated templates for:

Complete website

Page

Blog article

Page section

Content block

Page header

Footer

Landing page

More

Gutenberg has a serious lack of prefabricated templates. The templates tab provides useful partial templates, but that’s it.

Templates Tab

However, you can also install third-party plug-ins to provide startup templates for web pages and complete Web sites. Plug-ins such as Gutentor, Twentig and Otter Blocks all meet the requirements.

On the other hand, Elementor provides hundreds of startup templates in its theme generator.

The templates for Elementor include:

Page header

Footer

Single page

Single article

archives

Search results page

Product page

Product file

404 page

Various theme generator elements from Elementor

Almost all Elementor templates require premium subscriptions, but they are affordable and better than those offered by Gutenberg.

Layout

The layout feature in Gutenberg allows quick customization on the right block panel-after selecting any blocks to edit.

Design the picture style in Gutenberg

Styling is simple compared to the settings in Elementor, but there are almost all the basic elements, such as the option to change the border and size of the picture, or the color, typesetting, and margin settings of the paragraph block.

In addition to the custom CSS for all blocks, you will find a floating toolbar when you click on the block. This section provides text styles, HTML editing, style copying, and copying functions.

Levitation toolbar

The style settings in Elementor are included in the three tabs when the gadget is selected. Resize content settings for pictures and text, and then jump to advanced areas, from hovering animation to CSS filters and masks to transform effects.

Adjust the style of any selected block

There is no doubt that Elementor has a more powerful collection of styling tools than Gutenberg. However, for users who pursue simplicity, the styling features provided by Gutenberg will make them feel at home.

Content blocks / gadgets

Gutenberg is equipped with more than 90 content blocks. Elementor offers more than 100.

The following are the categories of Gutenberg blocks:

Text

media

Design

Gadget

Theme embedding

You can get all the basic elements (paragraphs, pictures, and button blocks), as well as some unique elements, such as Speaker Deck, Kickstarter, Query Loops, Verse, Time To Read, etc.

Elementor also classifies content gadgets:

Basic

Professional edition

Universal type

website

WooCommerce

WordPress

These classifications are not the most useful, but at least they are organized in some way.

Standard content widgets such as separators, sections, and titles are provided. In addition, there are unique gadgets such as Google Maps, Code Collection, WooCommerce product data, and so on.

More advanced elements include product pictures, product meta, and upsell

Our conclusion is that Gutenberg can better organize and interpret its content blocks, but Elementor provides more blocks (widgets) and more powerful settings.

WooCommerce support

WooCommerce is a third-party plug-in that turns any WordPress site into an online store. When used with the page generator, you usually receive WooCommerce blocks for more customization of shopping carts, product pages, and so on.

Gutenberg is no exception. Once WooCommerce is installed, countless Gutenberg blocks will appear to enhance the design of the WooCommerce store. There are product search blocks, options to display active filters, and ways to display best-selling products. We counted 26 Gutenberg/WooCommerce blocks, and there are several third-party plug-ins that can extend this list.

WooCommerce block

Elementor also works well with WooCommerce, but it comes at a price. You must subscribe to Elementor Pro to unlock any WooCommerce content widgets or page templates. Nevertheless, Elementor Pro is affordable, and the styling tools available in its blocks are more powerful than any tool in Gutenberg.

At the time of this writing, Elementor provided 20 WooCommerce blocks. These include “Product Picture”, “add to Shopping cart” button, “Product Review” and “Product Gallery”.

Additional WooCommerce blocks, such as menu shopping cart and product title

There are even some unique gadgets such as Upsells and Product Meta Data.

Integration

It is important not to confuse integration with compatibility. We will further cover the compatibility of themes and plug-ins in this article, but integration is more like a link to other applications, platforms, and software that data is sent to or received from the page generator.

For example, an integration with Facebook might display a button to get people to follow your page, or a list of posts you have recently posted on Facebook.

Gutenberg has a short list of direct integration, mainly using blocks to get content from external sources.

Here are 32 current Gutenberg integrations:

Openverse

Twitter

YouTube

WordPress

SoundCloud

Spotify

Crowdsignal

Dailymotion

Imgur

Issue

Kickstarter

Amazon Kindle

Pinterest

Reddit

Slideshare

Elementor has a strong integrated list, from media platforms to social networking sites.

Here are some of the more than 40 integrations of Elementor:

PayPal

Facebook (for comments, embeds, pages, and buttons)

YouTube

Vimeo

Google Maps

SoundCloud

MailChimp

ActiveCampaign

ConvertKit

HubSpot

Zapier

Discord

Custom icon libraries

Slack

ReCaptcha

Drip

Both have commendable integration, but the integration of Elementor seems to be stronger and richer. In Elementor, you can access well-known email marketing providers, sell through payment processors, and connect to customer relationship management software. Gutenberg, on the other hand, focuses more on linking to media libraries and social networking sites.

User interface comparison

Getting started with Gutenberg is as straightforward as using WordPress itself. This is because Gutenberg is automatically built into WordPress’s dashboard. There is no need to install plug-ins or add-ons. Just open the page or article editor and Gutenberg will start working.

Add blocks through the search bar or in the editor

You can search for and insert blocks by clicking one of several “+” (add blocks) buttons scattered throughout the editor. It provides a search bar and tabs such as blocks, templates, and media. You may even notice that Gutenberg integrates with popular knowledge sharing (Creative Commons) photo providers to find suitable images for free.

Rapid content creation makes Gutenberg one of the best page building tools for bloggers and all online publishers. You can write content directly in the editor and use tags and keyboard shortcuts to quickly insert elements such as titles, links, and pictures.

Not to mention, Gutenberg also integrates a large number of other third-party text editors, and you can copy content from other programs directly into Gutenberg (without having to upload pictures twice or reformat them).

The page tab provides publishing and page-focused settings, such as featured pictures, excerpts, and comment tools.

Feature Pictures Tab

It is also easy to adjust the block-oriented settings. Just click the “blocks” tab. This turns on the unique customization of the selected block. For example, the picture block displays everything from the Alt text field to the picture size setting. You can also add CSS tags, HTML anchors, or title attributes here.

Use the blocks tab to access all settings for the block

When it comes to ease of use, Elementor is no stranger to intuition. However, there is a learning curve, mainly because it provides a series of powerful features.

In the editor, you will receive a copy of the front end of the page. Each Elementor content widget can be dragged or edited from the library.

Classify Elementor elements

Although the category lacks useful names, you can find gadgets under Basic, Pro, General, Site, WooCommerce, and WordPress. There is also a favorites panel for saving custom gadgets for later use.

Elementor’s real ease of use comes from its grid-based editor, which allows you to drag and drop elements anywhere on the page. Not only that, you can also drag the entire section, delete it, or click add it in the editor.

Drag the block to another location

We also have quick access to blocks and template libraries. Save custom templates for later use, or take advantage of professionally designed blocks and page templates. Many of them are specific to specific situations, such as you need a 404 page or a custom WooCommerce shopping cart.

This is only a small part of the blocks provided through Elementor

The main disadvantage of the Elementor interface is its third-party nature. You must install a plug-in to make it active on WordPress. Even so, you have to click the “use Elementor Edit” button, because technically, Gutenberg is still installed in the background.

Overall, the Gutenberg interface is easier to master, but there is nothing better than using Elementor. It’s smooth and fun to use, and once you get the hang of it, it’s far more powerful than Gutenberg.

The impact of both on performance and page speed

Web page authoring tools provide a large number of functions. This can lead to a clunky set of tools that conflict with plug-ins and themes, as well as affect page speed. Judging from user reviews, Elementor and Gutenberg seem to perform well with proper optimization tools and fast hosting.

In our tests, we installed Gutenberg and Elementor on high-performance CDN servers as we know them. We also used the same theme and presentation to make the tests as equal as possible. We used the same server location (Iowa) in both tests and installed two common plug-ins (WooCommerce and Yoast SEO) to see how the page generator responds in the real world.

Here are the results using Pingdom and Google PageSpeed Insights:

Gutenberg page speed test

Pingdom performance score: 92 (San Francisco test server)

Page size: 905.2 KB

Loading time: 1.32 seconds

Number of requests: 19

We did the same test on a test server in London:

Pingdom performance score: 92

Page size: 905.8 KB

Loading time: 1.50 s

Number of requests: 19

Here are the results of Google PageSpeed Insights:

Desktop performance: 99

Desktop accessibility: 100

Desktop best practices: 92

Desktop search engine optimization: 67

Mobile performance: 93

Mobile accessibility: 100

Mobile best practices: 92

Mobile search engine Optimization: 71

Elementor web page speed test

Pingdom performance score: 88 (San Francisco test server)

Page size: 2.5 MB

Loading time: 1.93 seconds

Number of requests: 48

And the results of the London test server:

Pingdom performance score: 87

Page size: 2.5 MB

Loading time: 1.97s

Number of requests: 48

Results from Google PageSpeed Insights:

Desktop performance: 94

Desktop accessibility: 100

Desktop best practices: 92

Desktop search engine optimization: 67

Mobile performance: 81

Mobile accessibility: 100

Mobile best practices: 92

Mobile search engine Optimization: 71

Gutenberg almost always has higher performance scores, smaller page sizes, faster load times, and fewer requests. However, this may be because Elementor has a more advanced block design, and Gutenberg is always technically installed at the same time as Elementor, so you need to run two page generators at the same time, which may slow down the site.

In any case, both can provide high speed. To maintain an acceptable page speed, the most important thing is to choose a managed host with CDN support.

Pricing strategy differences

You can get Gutenberg and Elementor for free. The main difference between the two is that Gutenberg is completely free and permanently free. Elementor provides a powerful free version of the page generator and provides a variety of upgrades and add-ons for users interested in more advanced features.

Gutenberg price

It is free because it is a WordPress editor and is built into WordPress by default.

Elementor price

The Elementor brand also offers other products and services, but we only price its page generator plug-in for comparison purposes.

Free program: more than 40 free widgets, drag-and-drop features and developer API are available for $0

Essential program: $59 per year, supports one website, provides more than 100 gadgets, more than 300 templates, drag-and-drop theme generator, WooCommerce store generator, landing page generator, marketing tools, pop-up window generator and advanced support

The Expert plan: $199 a year, supports 25 websites and gets all the features mentioned in the basic plan

Agency program: $399 per year, with access to all the features mentioned in the aforementioned plan, but supporting 1000 websites

At first glance, “permanently free” plug-ins (such as Gutenberg) seem to be the most cost-effective. However, the free version of Elementor contains enough tools to meet the needs of many types of projects, and their advanced plans are reasonably priced.

We think Elementor is more cost-effective than Gutenberg because it is a leaner and more powerful page generator than Gutenberg, and you can get a lot of features for free. But if you have to keep your budget at $0 forever, then Gutenberg can meet your needs.

Compatibility of both with themes and plug-ins

Faced with thousands of WordPress themes and plug-ins on the market, it is difficult to determine the compatibility (or lack of compatibility) of the page generator. However, we can use user comments to see if there are obvious compatibility issues with popular themes or plug-ins.

Gutenberg seems to be compatible with most themes and plug-ins. After all, third-party developers must cater to the page generator because Gutenberg is built into WordPress by default.

According to our research, the most common compatibility problems with Gutenberg occur when used in conjunction with other page generators on the same site. We also found that plug-in developers are also playing catch-up games when making Gutenberg blocks associated with their plug-ins. As a result, you may find that some older, less frequently updated plug-ins lack the Gutenberg block.

As of this writing, there are about 12 open compatibility issues on the WordPress.org forum, some of which appear to be user errors. However, it is not incomprehensible to assume that you may encounter some problems.

It is well known that Elementor has good compatibility in the WordPress community. However, since it is a third-party page generator, it is best to pay attention to the compatibility label (indicating the incompatibility of the plug-in). When searching for a topic, be sure to check to see if it is compatible with Elementor (if you are using Elementor as the page generator).

For Gutenberg and Elementor, you must pay attention to the “multi-purpose” WordPress theme with startup templates. These startup templates are designed for specific page generators, so templates for Gutenberg cannot be used for Elementor, and vice versa. Some themes do not have startup templates for these page builders at all.

Comparison between background editor and foreground editor

Content cannot be edited at the front end of the site using Gutenberg. But that’s the point. Gutenberg strives to combine front-end editing with the background experience so that you only need to use one interface.

So, for example, all editing is done in the background of WordPress, but many blocks appear in full display to most realistically show the effect of the release.

Gutenberg (Gutenberg) background and its blocks and background are fully displayed

Elementor is no different. It used to provide background and foreground editing capabilities, but eventually merged the editing experience into one module. Therefore, it is impossible for you to drag elements in front of the site.

However, Elementor brings pages and articles into its own background editor and provides a beautiful preview of the foreground page. In this way, you can clearly see the effect of the revision.

Elementor Editor

Finally, both page generators have auto-save and manual save buttons.

Comparison of customer support

Customer support is usually available only after a paid purchase of a page generator. In our study, this assumption applies to Gutenberg and Elementor.

The stand-alone Gutenberg page generator does not have a direct customer support hotline. However, you can discuss issues in the Gutenberg user forum. WordPress.com members can get dedicated customer support, so you can ask them to help resolve Gutenberg issues. Unfortunately, WordPress.org users can only do their own research through forums and blog posts.

The free Elementor plugin has a knowledge base and a user forum.

Use Elementor Academy to search for help documentation

To get email support from a real person, you must pay for Elementor Pro. Nevertheless, we still provide a live chat module for sales issues.

Which one should I choose?

After years of working with WordPress users and a detailed comparison of Gutenberg and Elementor, we have come to some final conclusions.

Here are our gains:

Gutenberg’s function is simpler than Elementor’s. They are ideal for basic web design, but advanced users will need Elementor’s advanced styling and content blocks.

Gutenberg’s user interface is built into WordPress, while Elementor’s user interface is always a third-party plug-in. However, in Elementor, the user experience is seamless, while in Gutenberg, it is much more difficult to simply drag and drop an element.

In terms of performance, both Gutenberg and Elementor performed well. Our tests show this. In any case, you may encounter the problem of slowing down the page. The main way to solve this problem is to use high-quality hosts.

Gutenberg is always free, but you can only use the existing features. Elementor has a powerful free version, and you can choose to upgrade to get more functionality and real customer support.

Gutenberg and Elementor are compatible with a variety of WordPress themes and plug-ins.

The background editor of Gutenberg provides a visually pleasing interface with quick styling options. The foreground editing function does not exist. However, you can see the real-time foreground view in the background editor. Elementor also only provides background editing, but has a real preview that shows everything in the foreground.

Gutenberg has a block template, but no other features. Elementor, on the other hand, has a large number of sections, websites, pages, headers and landing page templates, all of which require advanced planning.

Customer support for Gutenberg is included in user forums and blog posts. Paying users of WordPress.com can get help from Gutenberg. Paid Elementor users can get manual support, while free users have access to many online resources, including the knowledge base.

Summary

Each page generator has its own opportunity to display its talents. Elementor is suitable for more skilled users or users who need a page template library. Gutenberg is a ready-to-use page generator on WordPress with simplified and easy-to-use styling tools and settings that are ideal for quickly creating content.

Disclaimer: All articles on this website, unless otherwise specified or marked, are original and published on this website. Any individual or organization is prohibited from copying, stealing, collecting, or publishing the content of this site to any website, book, or other media platform without the consent of this site. If the content on this website infringes on the legitimate rights and interests of the original author, you can contact us for assistance.