Elementor also provides HTML Code widgets for inserting any custom coding you’d like through a webpage.
You can use the HTML code box for your own customizations.
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.
More advanced elements include Product Images, Product Meta, and Upsells.
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
The free Elementor plugin has a knowledgebase and user forum.
Search for help documentation with Elementor Academy.
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.
When it comes to coding, Gutenberg makes its Code Editor easy to find.
The Code Editor is easily accessible.
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.
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 the results from the London test server:
Performance Score: 87
Page Size: 2.5 MB
Load Time: 1.97s
Requests: 48
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.
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.
The templates from Elementor include:
Headers
Footers
Single pages
Single posts
Archives
Search results pages
Product pages
Product archives
404 pages
The various theme builder elements from Elementor.
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.
Check out our plans or talk to sales to find the plan that’s right for you.
Jeremy Holcombe
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.
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?
Examples of Elementor content widgets:
Post
Text Editor
Heading
Image
Text
Testimonial
Toggle
Progress Bar
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.
Adjust HTML Anchors and CSS Classes.
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
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?
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.
A list of basic blocks.
After years of experience working with WordPress users and a detailed comparison of Gutenberg vs Elementor, we came to some final conclusions.
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.
Adjust styling for any selected block.
Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).
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
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.
The hovering toolbar.
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.
Additional WooCommerce blocks like Menu Cart and Product Title.
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.
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.
Since Elementor uses a semi-automatically generated grid system, it’s possible to drop widgets on most areas of a page.
Dragging a button block into the editor.
There are even unique widgets like Upsells and Product Meta Data.
Integrations: 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.
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.
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.
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.
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
Gutenberg has a short list of direct integrations, mainly using blocks to pull content from exterior sources.
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.
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
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.
Use the Block tab to access all the block’s settings.
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
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.
Use the Drag icon to move blocks.
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.
