A lot of new and old users ask themselves at some point “Should I use Gutenberg or Elementor, as my main page builder?”. Both are great page builders and offer a variety of tools to create the website of your dreams, but there are some things to consider when choosing Gutenberg or Elementor as your main page builder. So let’s dive in and see which one works the best for you.
What is a WordPress page builder?
Before we talk about Gutenberg vs Elementor, let’s talk about WordPress page builders and what page builders are. Page builders, in short, are tools to help you, the owner or user of a WordPress site to build a site faster, quicker, and easier without the need of knowing what PHP, HTML, CSS, JS, or any other web-based programming language.
Page builders also often come with a variety of different kinds of premade templates, tools, and widgets you can use to customize your website almost endlessly.
What is Gutenberg?
Gutenberg is the default page builder in WordPress and was introduced the first time to WordPress users in WordPress 5.0. It had been in development for a while before this and when it finally was released, it replaced the old classic editor which was similar to Word and other text editors.
What is Elementor?
Elementor is one of the most popular (if not the most popular) WordPress page builders. It was founded in 2016 and has since created quite a ripple effect in the WordPress community and among its users by becoming a truly dominant force among different page builders in WordPress.
Gutenberg vs Elementor: Key differences
What are the key differences between Gutenberg and Elementor?
|Gutenberg is the default builder of WordPress||Elementor is a plugin that is separated from WordPress and thus needs to be loaded and activated on WordPress to be used.|
|Gutenberg works with almost all themes and plugins||Elementor requires no other plugins, it does need a theme to build on (though this is debatable because of how Elementor is built).|
|Gutenberg is 100% free and will always be since it is a core WordPress feature.||Elementor offers a limited free version and a paid Elementor Pro version that brings a huge amount of new features and ways to build a site.|
Gutenberg vs Elementor: Capabilities
Gutenberg in its most basic forms does not offer many direct customizations, though does offer more layout possibilities than the original classic editor and it has the same text customization capabilities as before. Though when compared to Elementor there is a clear winner here. Elementor offers almost limitless ways to customize each element without the need of touching any CSS or code, whereas in Gutenberg each block can be assigned a custom CSS class it still needs to be customized through CSS to change its looks.
Gutenberg vs Elementor: Ease of use
If you have ever used the classic editor of WordPress, you know how easy it is to use. If you have never explored any of the other options you may be unsure as to what if anything is better or worse. Elementor is extremely easy to use as it simply works. You can drag and drop components into any area of the page depending on where you want them to appear and it automatically creates the layout and styling for you.
Gutenberg is extremely easy to use and it works in the exact same way. You use a drop-down bar at the top of the editor that is a bit more difficult to navigate than Elementor’s drag and drop method. You also don’t have full access to different CSS edits directly as you would with Elementor making Elementor the easier one of these two to use and the more “robust” builder.
Gutenberg vs Elementor: Responsiveness
Gutenberg and Elementor are both responsive by design, though it is most of the time easier to create different responsive looks for each element in Elementor than in Gutenberg. This is because of how they are designed and how many options for customization each has.
Gutenberg vs Elementor: Speed index
Both Gutenberg and Elementor are extremely fast. When looking at the speed index on a site built with Gutenberg and Elementor we can compare their speeds.
Here is the page we are testing on a local WordPress install.
We created the same site with only using Elementor and only using Gutenberg to check out their respective speeds.
The first result is the Gutenberg speed result from Google Lighthouse:
And here’s the results of a site created with Elementor:
As we can see from the score there is a slight difference between Gutenberg and Elementor. This is because Elementor needs to load more assets when compared to a clean Gutenberg, making it a bit slower, but much more visually better looking.
|First Contentful Paint||0.6 s||1.0 s|
|Time to Interactive||0.8 s||2.1 s|
|Speed Index||0.9 s||1.7 s|
|Total Blocking Time||0 ms||0 ms|
|Largest Contentful Paint||1.5 s||2.4 s|
|Cumulative Layout Shift||0.003 s||0.00 2s|
Gutenberg vs Elementor: Themes
Gutenberg works with almost all themes that are built for WordPress because it is the native builder of WordPress. Though there are exceptions on this and most of the time you will need plugins to increase your Gutenberg capabilities to create a site you want. With Elementor you don’t need any other plugins most of the time since its ease of customization and a wide variety of tools included allow you to build all kinds of sites. Of course, it also has its limits but you are less likely to bang your head on a wall than with Gutenberg most of the time.
If you’re looking for themes that support Elementor and Gutenberg we highly recommend the following themes:
Places where Gutenberg excels over Elementor:
- Gutenberg is much faster than Elementor.
- Gutenberg is very flexible and allows for endless customization.
- You can create any type of page you want.
- Gutenberg is an all-in-one solution.
- Gutenberg is open source, Elementor is not.
Places where Elementor excels over Gutenberg:
- You can customize the page builder without forcing you to use any plugins.
- You can create modules and modules are great to organize, group, and styling your content.
- You can customize elements with so many options and combinations that you would have to spend hours creating the exact look you want.
Gutenberg vs Elementor: Conclusion
In conclusion, Gutenberg is a great way to make new blog posts on your WordPress site and Elementor is a drag and drop page builder that lets you build any type of page you can imagine. In conclusion, Gutenberg is great, but Elementor is hands down the best WYSIWYG editor out there.
Elementor is easy to use, even for beginners and has over 40 different customizable page layouts to choose from. Elements are easily added without any coding needed, and it offers more flexibility than Gutenberg with live previews of changes on updates.