Gutenberg vs Elementor: Key Differences Between WordPress Page Builders

Gutenberg vs Elementor: is there a right choice? Perhaps. But it depends on which features you want from your WordPress page builder.

We’ll explain the basics of Gutenberg and Elementor, then make a direct comparison between the two.

Keep reading for an in-depth look at the comparison between Gutenberg vs Elementor, based on years of experience using both and rigorous testing.

What Is Gutenberg?

Gutenberg is the default WordPress page builder. It was introduced in 2018 and replaced what’s now called the “Classic” WordPress editor, which was the original rich text/HTML content editor without any drag-and-drop functionality.

Gutenberg was actually a response to a wave of third-party page builder plugins, including Elementor, Divi, and Visual Composer, which all came out to replace the Classic Editor.

From a feature standpoint, Gutenberg offers an easily accessible “block” library for dragging content elements onto the pages and posts.

Gutenberg comes with close to 100 content blocks, some of which allow for integrations and embeds from third-party services like Twitter, Reddit, and Amazon Kindle. It’s also possible to create dynamic blocks for updating block content automatically. Some Gutenberg block examples include:

• Paragraph
• Heading
• Table
• Image
• Gallery
• Video
• Buttons
• Calendar
• Custom HTML
• Latest Posts

Most WordPress themes work well with Gutenberg (they’re essentially required to now).

The Gutenberg interface presents page or post content at its center, with rendered content (like showing forms or buttons) when possible. This is a significant upgrade from the Classic Editor since Gutenberg supports rapid markdown editing alongside a visual user experience. And if needed, there’s direct access to custom coding sections for CSS and HTML.

Each block provides its own long list of settings, and Gutenberg has quick panels for powerful control over document and block settings, like alt tags, background colors, and comment moderation.

What Is Elementor?

Elementor is a page builder, much like Gutenberg. However, Elementor predates Gutenberg as one of the third-party page builder apps that eventually lead to the creation of a default WordPress page builder.

Introduced in 2016, Elementor has been a favorite of WordPress designers due to its fully visual web design interface, sleek starter templates (ready for importing), and drag-and-drop content modules.

One of the most immediately noticeable differences between Elementor and Gutenberg is that Elementor is not built into WordPress. It’s made by a different company, so you must install its free plugin (premium versions are available, too).

You’ll also notice that Elementor has unique names for its features. What they call “blocks” in Gutenberg are referred to as “widgets” in Elementor. Speaking of which, Elementor boasts over 100 of those content widgets.

Examples of Elementor content widgets:

• Post
• Text Editor
• Heading
• Image
• Text
• Testimonial
• Toggle
• Progress Bar

Many of the widgets create integrations between a WordPress website and third-party apps, such as Stripe, Facebook, and Sound Cloud.

Overall, Elementor is one of the top WordPress page builders with a vibrant community of developers and users. The visual, drag-and-drop interface is hard to beat, you receive hundreds of designer templates, and all editing is done live.

Along with specialty WooCommerce widgets and marketing tools for landing pages and forms, Elementor remains a behemoth in the website building space, and that’s noticeable when comparing Gutenberg vs Elementor.

Gutenberg and Elementor Compared

We’ll compare Gutenberg vs Elementor in areas like features, user interface, pricing, and more. After our review, you’ll have a stronger understanding of which page builder is right for your needs.

Key Features

In this section, we picked out what we consider to be the “key” features of a page builder, then we’ll compare Gutenberg vs Elementor in each category.

Drag-and-Drop Functionality and Coding: Gutenberg vs Elementor

The issue with page builders is that they often fill the interface with visual creation tools and push the more advanced functionality, like code editing, out of view.

We prefer seeing a mix of both, where beginners have a sleek drag-and-drop interface that’s easily accessible, and advanced users can use CSS without having to dig around for the right field.

Gutenberg’s drag-and-drop functionality is straightforward and without lag. It only takes a moment to search for content blocks and drag—or click and insert—them into the content. Then, the block settings appear for customization.

One downside is that dragging currently placed blocks forces you to first select a block, then click and hold on a small Drag icon. This requires precision when clicking, which isn’t necessary for other page builders.

When it comes to coding, Gutenberg makes its Code Editor easy to find.

Users have found issues with blocks messing up their code and difficulties with the pre-made blocks, requiring developers to produce dozens of custom blocks.

Despite complaints, the page builder has improved for coders, and the tools are definitely there, but with perhaps a steeper learning curve than what was available in the Classic Editor.

You can even add HTML Anchors and additional CSS classes right from the Block tab in Gutenberg, which previously required a tedious trudge through the HTML tab in the Classic Editor.

Elementor provides drag-and-drop functionality, too. It works with most WordPress themes and presents a library of blocks to insert quickly onto any page.

Since Elementor uses a semi-automatically generated grid system, it’s possible to drop widgets on most areas of a page.

Moving previously placed content blocks is easier with Elementor than in Gutenberg. You simply click and hold anywhere on the block to move it.

Inserting or selecting a content widget shows that widget’s content, style, and advanced settings. As for coding, it’s streamlined with many of the block settings. Like how you can add HTML anchors, attributes, and custom CSS right in the widget or page settings.

Elementor also provides HTML Code widgets for inserting any custom coding you’d like through a webpage.

Overall, the drag-and-drop functionality of Elementor is stronger than Gutenberg’s. Yet, the custom coding options appear equally accessible in both page builders.

Templates (For Websites, Blocks, Pages, Popups, and More): Gutenberg vs Elementor

Page builder templates allow developers to construct websites with blazing speed. Templates allow you to start with professional websites or page designs instead of building from scratch.

Many page builders offer pre-made templates for:

• Full websites
• Pages
• Blog posts
• Page sections
• Content blocks
• Headers
• Footers
• Landing pages
• And more

Gutenberg has a severe lack of pre-made templates. The Patterns tab provides helpful section templates, but that’s about it.

However, it is possible to install third-party plugins with starter templates for pages and full websites. Plugins like Gutentor, Twentig, and Otter Blocks all fit the bill.

Elementor, on the other hand, is fueled by hundreds of starter templates in its Theme Builder.

The templates from Elementor include:

• Headers
• Footers
• Single pages
• Single posts
• Archives
• Search results pages
• Product pages
• Product archives
• 404 pages

Just about all the templates from Elementor require a premium subscription, but that’s affordable and better than what you get from Gutenberg.

Styling: Gutenberg vs Elementor

The styling features in Gutenberg allow for rapid customizations on the right-side Block panel—after selecting whatever block you want to edit.

The style settings are fairly basic compared to what’s in Elementor, but the essentials are almost always there, like options to change borders and dimensions for images, or color, typography, and margin settings for paragraph blocks.

Along with custom CSS for all blocks, you’ll find a hovering toolbar when a block is clicked. This section offers the styling of text, editing with HTML, copying that styling, and duplicating.

Style settings in Elementor are contained in three tabs when a widget is selected. Adjust content settings for image and text sizing, then jump into the advanced areas, with everything from hover animations to CSS filters and masks to transform effects.

There’s no doubt that Elementor has a stronger collection of styling tools than Gutenberg. However, those who want the utmost simplicity will feel right at home with the styling features available in Gutenberg.

Content Blocks/Widgets: Gutenberg vs Elementor

Gutenberg comes with a little over 90 content blocks. Elementor provides over 100.

Here are the Gutenberg block categories:

• Text
• Media
• Design
• Widgets
• Theme Embeds

You get all the essentials (paragraph, image, and button blocks), along with unique elements for things like Speaker Deck, Kickstarter, Query Loops, Verse, Time To Read, and more.

Elementor categorizes its content widgets as well:

• Basic
• Pro
• General
• Site
• WooCommerce
• WordPress

Those aren’t the most helpful categories, but at least they’re organized in some fashion.

Standard content widgets—like dividers, sections, and headings—are provided. There are also unique widgets for Google Maps, Code Highlights, WooCommerce Product Data, and more.

Our conclusion is that Gutenberg organizes and explains its content blocks much better, but Elementor provides a higher quantity of blocks (widgets) with stronger settings.

WooCommerce Support: Gutenberg vs Elementor

WooCommerce is a third-party plugin for turning any WordPress site into an online store. When paired with a page builder, you often receive WooCommerce blocks for greater customization of the shopping cart, product pages, and more.

Gutenberg is no exception. Once you install WooCommerce, a myriad of Gutenberg blocks appear for strengthening the design of your WooCommerce store. There are Product Search blocks, options to show Active Filters, and ways to display the Best Selling Products. We counted 26 Gutenberg/WooCommerce blocks, and there are several third-party plugins to expand upon this list.

Elementor plays well with WooCommerce, too, but for a price. You must have an Elementor Pro subscription to unlock any of the WooCommerce content widgets or page templates. Having said that, Elementor Pro is affordable, and the blocks provide more powerful styling tools than anything in Gutenberg.

At the time of this article, 20 WooCommerce blocks were available through Elementor. The list includes Product Images, Add To Cart buttons, Product Ratings, and Product Galleries.

There are even unique widgets like Upsells and Product Meta Data.

Integrations: Gutenberg vs Elementor

It’s important to not confuse integrations with compatibility. We’ll cover theme and plugin compatibility further down in this article, but integrations are more like links to other applications, platforms, and software, where data is sent to or from the page builder.

For example, an integration with Facebook might show a button for people to follow your page or a list of your most recent Facebook posts.

Gutenberg has a short list of direct integrations, mainly using blocks to pull content from exterior sources.

Here’s a taste of the 32 current Gutenberg integrations:

• Openverse
• Twitter
• YouTube
• WordPress
• SoundCloud
• Spotify
• Crowdsignal
• Dailymotion
• Imgur
• Issue
• Kickstarter
• Amazon Kindle
• Pinterest
• Reddit
• Slideshare

Elementor has a strong list of integrations, from media platforms to social sites.

Here are some of Elementor’s 40+ integrations:

• 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 respectable integrations, but the Elementor integrations appear stronger and more plentiful. You can tap into prominent email marketing providers, sell through payment processors, and connect with your customer relationship management software in Elementor. Whereas Gutenberg focuses more on linking to media libraries and social sites.

User Interface: Gutenberg vs Elementor

Getting started with Gutenberg is as intuitive as WordPress itself. That’s because Gutenberg is built into the WordPress dashboard automatically. There’s no need to install a plugin or add-on. Simply open a page or post editor, and Gutenberg goes to work.

You’re able to search for and insert blocks by clicking on one of the several “+” (Add Block) buttons scattered around the editor. It provides a search bar, along with various tabs for Blocks, Patterns, and Media. You’ll even notice that Gutenberg integrates with popular Creative Commons image providers for finding suitable graphics for free.

Speedy content creation makes Gutenberg one of the best page builders for bloggers and anyone who publishes online. You can write directly into the editor and utilize markup and keyboard shortcuts to quickly insert elements like headlines, links, and images.

Not to mention, Gutenberg integrates with a wide range of other third-party text editors, or you can copy content from other programs directly into Gutenberg (without having to upload images a second time or adjust with formatting).

The Page tab offers publishing and page-focused settings, like tools for featured images, excerpts, and comments.

It’s easy to adjust block-oriented settings as well. Just click on the Block tab. This opens up the unique customization features for the block you have selected. For instance, an Image block shows everything from Alt Text fields to settings for Image Dimensions. This is also where you would add CSS Tags, HTML Anchors, or Title Attributes.

When it comes to ease of use, Elementor is no stranger to making things intuitive. However, there is a learning curve, mainly due to the robust collection of features provided.

In the editor, you receive an exact replica of a page’s frontend as the editor. Every Elementor content widget is available to drag or edit from the library.

Although the categories lack useful names, you can find the widgets under Basic, Pro, General, Site, WooCommerce, and WordPress. There’s also a Favorites panel to save custom widgets for later.

The true ease of use in Elementor comes from its grid-based editor, which allows you to drag and drop an element just about anywhere on the page. Not only that, but you can drag entire sections, delete sections, or add sections by clicking within the editor.

We also enjoy quick access to the blocks and templates library. Save custom templates for later use, or take advantage of professionally designed blocks and page templates. Many of them are for specific situations, like if you needed a 404 page or a custom WooCommerce cart.

The main downside to the Elementor interface is its third-party nature. You must install a plugin to make it active on WordPress. Even then, you always have to click the “Edit With Elementor” button since Gutenberg is technically still installed in the background.

Overall, the Gutenberg interface is easier to grasp, but there’s nothing like working with Elementor. It’s smooth, fun to use, and capable of far more than Gutenberg, once you get the hang of it.

Performance and Impact on Page Speed: Gutenberg vs Elementor

Page builders provide plenty of features. That could lead to a bulky set of tools that conflicts with plugins and themes and also inhibits page speed. When looking at user reviews, Elementor and Gutenberg appear to perform fine when using the proper optimization tools and a speedy host.

In our test, we installed Gutenberg and Elementor on separate instances of what we know to be a high-performance, CDN-empowered server (from Kinsta). We also used the same theme with demo content to make the testing as equal as possible. We stuck to the same server location (Iowa) for both tests and installed two common plugins (WooCommerce and Yoast SEO) to see how the page builders responded to a real-world environment.

Here are the results using Pingdom and Google PageSpeed Insights:

Gutenberg Page Speed Tests

• Pingdom Performance Score: 92 (San Francisco test server)
• Page Size: 905.2 KB
• Load Time: 1.32 s
• Requests: 19

We ran the same test with a test server in London:

• Performance Score: 92
• Page Size: 905.8 KB
• Load Time: 1.50 s
• Requests: 19

And here are the results from Google PageSpeed Insights:

• Desktop Performance: 99
• Desktop Accessibility: 100
• Desktop Best Practices: 92
• Desktop SEO: 67
• Mobile Performance: 93
• Mobile Accessibility: 100
• Mobile Best Practices: 92
• Mobile SEO: 71

Elementor Page Speed Tests

• Pingdom Performance Score: 88 (San Francisco test server)
• Page Size: 2.5 MB
• Load Time: 1.93s
• Requests: 48

And the results from the London test server:

• Performance Score: 87
• Page Size: 2.5 MB
• Load Time: 1.97s
• Requests: 48

Results from Google PageSpeed Insights:

• Desktop Performance: 94
• Desktop Accessibility: 100
• Desktop Best Practices: 92
• Desktop SEO: 67
• Mobile Performance: 81
• Mobile Accessibility: 100
• Mobile Best Practices: 92
• Mobile SEO: 71

Gutenberg almost always delivered a higher performance score, lower page size, and faster load time, along with fewer requests. This, however, could be because Elementor has more advanced block designs, and Gutenberg is technically always installed alongside Elementor, so you’re stuck with two page builders running at the same time, potentially slowing the site down.

Regardless, both offer high speeds. The most important part of maintaining acceptable page speeds is opting for a managed, CDN-powered host like Kinsta.

Pricing: Gutenberg vs Elementor

You can get both Gutenberg and Elementor for free. The main difference is that Gutenberg is completely free, forever. Elementor offers a robust free version of its page builder and several upgrades and add-ons for those interested in more advanced features.

Gutenberg Pricing

Free, as it is the WordPress editor and built into WordPress by default.

Elementor Pricing

The Elementor brand offers additional products and services but for the sake of this comparison, we limit pricing to its page builder plugin.

• Free Plan: $0 for over 40 free widgets, drag-and-drop functionality, and a developer API
• Essential Plan: $59 per year to support 1 website with 100+ widgets, 300+ templates, the drag-and-drop theme builder, WooCommerce store builder, landing page builder, marketing tools, popup builder, and premium support
• Expert Plan: $199 per year to support 25 websites and receive all features mentioned in the Essential Plan
• Agency Plan: $399 per year for all features mentioned in the previous plans, but with support for 1,000 websites

It may at first seem like a “free forever” plugin (like Gutenberg) is the best deal. But the free version of Elementor is filled with enough tools for many types of projects, and they keep the premium plans reasonably priced.

We would argue that Elementor is a better value than Gutenberg simply because it’s a more streamlined, powerful page builder than Gutenberg, and you can still get many of the features for free. But if you must keep the budget at $0 forever, Gutenberg does the trick.

Compatibility With Themes and Plugins: Gutenberg vs Elementor

It’s difficult to pinpoint compatibility (or lack thereof) for page builders with the thousands of WordPress themes and plugins on the market. However, we can look into user reviews to figure out if there are some glaring compatibility issues with popular themes or plugins.

Gutenberg appears to work with most themes and plugins. After all, third-party developers must cater to the page builder since Gutenberg is built into WordPress by default.

From our research, the most common compatible issues with Gutenberg arise when combined with other page builders on the same website. We’ve also found that plugin developers are playing a game of catch-up to produce Gutenberg blocks related to their plugins. So, you may find that some older, less frequently updated plugins lack Gutenberg blocks.

As of this article, there are about 12 open compatibility questions in the WordPress.org forums, some of which appear to be user errors. But it’s not unfathomable to assume you might encounter some issues.

Elementor is known for having solid compatibility across the WordPress community. However, it’s a third-party page builder, so it’s wise to keep an eye on compatibility tags (notes that explain when a plugin isn’t compatible). And when searching for a theme, always check to see if it’s compatible with Elementor (if that’s what you’re using as your page builder).

For both Gutenberg and Elementor, you must keep an eye out for “multipurpose” WordPress themes with starter templates. Those starter templates are designed for specific page builders, so one for Gutenberg won’t work with Elementor and vice versa. And some themes lack starter templates for these page builders altogether.

Backend vs Frontend Editing in Gutenberg and Elementor

There’s no way to edit content on the frontend of a website with Gutenberg. But that’s kind of the point. Gutenberg strives to combine aspects of frontend editing with the backend experience, allowing you to stick to one interface.

So, for example, all editing occurs on the backend of WordPress, but many of the blocks show up in full display for the most realistic view of what to expect when published.

Elementor isn’t much different. It used to offer both backend and frontend editing, but it eventually combined the editing experience into one module. So, it’s not possible to go to the frontend of your website and drag elements around.

However, Elementor does bring your pages and posts into its own backend editor, which features a beautiful preview of the frontend page. This way, you see exactly what happens when a change is made.

Finally, both of these page builders have automatic saving, along with manual saving buttons.

Customer Support: Gutenberg vs Elementor

You often only get customer support when you pay for a page builder. During our research, that assumption applied to both Gutenberg and Elementor.

The standalone Gutenberg page builder has no direct customer support line to contact. You can, however, discuss issues in the Gutenberg user forum. WordPress.com members receive dedicated customer support, so you might ask them to assist with Gutenberg questions. WordPress.org users, unfortunately, are left to forums and blog posts to complete their own research.

The free Elementor plugin has a knowledgebase and user forum.

To receive email support from a real person, you must pay for Elementor Pro. Having said that, there is a live chat module for sales questions.

Gutenberg vs Elementor: Which One Should You Choose?

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

Here are the takeaways:

• Gutenberg’s features are simpler than those from Elementor. They’re great for the basics of web design, but power users will want the advanced style settings and content blocks from Elementor.
• Gutenberg’s user interface is built into WordPress, whereas Elementor’s will always be a third-party plugin. However, the user experience is seamless in Elementor, and it’s much harder to simply drag and drop an element in Gutenberg.
• Performance-wise, both Gutenberg and Elementor perform well. Our tests showed that. Regardless, you may encounter page speed slowdowns. The primary way around that is with a quality host like Kinsta.
• Gutenberg is always free, but you’re stuck with what’s there. Elementor has a powerful free version with the option to upgrade for more features and real customer support.
• Gutenberg and Elementor are compatible with a wide range of WordPress themes and plugins.
• The backend editing in Gutenberg provides a visually pleasing interface with quick styling options. Frontend editing doesn’t exist. You can, however, see a live frontend view in the backend editor. Elementor only offers backend editing as well, but with a real preview that shows everything from the frontend.
• Gutenberg has section templates but nothing else. Elementor is packed with section, website, page, header, and landing page templates, all of which require a premium plan.
• Customer support for Gutenberg is contained in user forums and whatever blog posts you can find about it. Paying WordPress.com users can get assistance with Gutenberg. Paying Elementor users receive human support, while free users gain access to many online resources, including a knowledgebase.

Summary

Each page builder has its place. Elementor is for more skilled users or those who need a library of page templates. Gutenberg serves as the ready-to-go page builder on WordPress, with simplified and easy-to-use styling tools and settings, making it perfect for rapid content creation.

When creating a WordPress website, you’ll need a powerful host in your corner. At Kinsta, we offer a range of performance-optimized WordPress hosting plans for all your Elementor or Gutenberg needs.

The post Gutenberg vs Elementor: Key Differences Between WordPress Page Builders appeared first on Kinsta®.