Are we even able to remember the times when WordPress functioned without page builders?
Time flies, technology advances and WordPress with its very limited capabilities is just a vague memory now, thanks to WordPress themes’ functionalities, but especially WordPress plugins, such as page builders.
In this article, we’re going to cover two of the most popular page builders among OceanWP users – Elementor and Gutenberg. The information we’ll provide here is not based on our personal opinion and experience alone, but also on OceanWP users’ feedback we receive on a daily basis.
Let the Showdown begin!
What is Elementor?
With the average rating of 4.7 out of 5 and 5+ million active installs – there’s no doubt about it: Elementor is the most popular page builder among WordPress users.
Elementor was first introduced in 2016 and took over the lead very fast. The reason for its almost instant popularity was the difference between Elementor’s visual drag-and-drop builder and the usual WordPress text editor (the pre-Gutenberg era).
WordPress users finally gained something that did not resemble Microsoft Word – a flexible editor that allowed their creativity to shine, all thanks to various widgets that reduced the need for all kinds of custom coding or custom HTML / PHP / CSS template creation.
And, if you’re looking for some new Elementor WordPress website templates? Check out our latest HubSpot collection.
In this Elementor vs Gutenberg comparison, we’ll be addressing only features of the free version of Elementor.
What is Gutenberg?
Gutenberg, also known as the block editor, is the default WordPress page / post editor. It was introduced in 2018 for the first time, with the WordPress Bebo 5.0 version.
The WordPress team understood the needs of the community for a more advanced and intuitive default editor, as well as the trends in website building. That’s how the Gutenberg editor came to be and replace it’s predecessor – the classic editor.
Even though Gutenberg is not yet developed to the fullest and its peak is expected in the years to come, the WordPress team delivered what they promised – a simple but mighty visual editor that made the shift from a content editor to a page builder.
And, if you’re looking for some Gutenberg WordPress website templates, check out our latest collection of WooCommerce templates that use Gutenberg.
Elementor vs Gutenberg: Comparison
Ease of Use
Any WordPress user that had the pleasure of using both tools will tell you something we can also agree on – Elementor wins the ease of use comparison.
Thanks to its enormous flexibility and mobility, Elementor really resembles advanced image editing tools. Just select the widget you need and place it anywhere in the content – that’s it.
Need to create sections? Or sections with a different number of columns? Choose a different design or images for different devices? Also not a problem. Elementor truly allows you to set up the entire content until perfection. Not to mention various animations website designers are fond of (even though speed measuring tools are not).
On the other hand, Gutenberg is a clean and simple page builder. Unlike Elementor, Gutenberg doesn’t offer the highly-liked drag-and-drop feature (at least not yet). Even though you can easily add and move the blocks, things are not that simple as with Elementor. In addition to it, styling a block can be somewhat challenging, especially for those who are used to the luxurious environment Elementor provides.
Gutenberg has been the default WordPress editor for 3 years now, but there are still people who are reluctant to try it. Such users do not favor any page builder – they favor the classic (content) WordPress editor over anything else.
Since we’re all creatures of habits, we find it wouldn’t be objective to mark Gutenberg as non-intuitive and difficult to use merely because the classic editor is easier to use. But, we can tell you one thing – once you create one post with Gutenberg and overcome that initial learning curve, you will continue using it.
Elementor vs Gutenberg, which one to choose? The answer is always OceanWP, because we use both 🙂
PS One of Gutenberg’s blocks is also the Classic block so there’s no reason to use additional plugins to use the old-school feature 🙂
Elementor vs Gutenberg Ease of Use Summary
Elementor offers advanced widgets and editing tools which makes it easier to use than Gutenberg, but it can become just as challenging once the need to make the website pages responsive emerges.
Gutenberg comes with its own learning curve which you can easily overcome. Understanding how Gutenberg works will help you manage all other page builders, including Elementor.
Elementor vs Gutenberg: Features
Elementor has widgets, Gutenberg has blocks – as simple is that.
The term widget, however, has been used in WordPress for a long time, when referring to a feature that used combined elements. For example, an image with a heading, list of blog posts with different query options, etc.
Elementor widgets function in a similar way – by providing features with grouped options and multiple query and styling settings. Naturally, Elementor widgets offer far more options and versatility than the WordPress widgets (Appearance > Widgets).
Gutenberg started out with very basic blocks, like the paragraph block, image, video, etc. Even though blocks offer styling options too, these features are not as rich nor as intuitive as with Elementor. But, to be fair, when it comes to user-friendly settings, Elementor definitely leads the way – not just compared to Gutenberg, but compared to almost all page builders available.
On the other hand, the “problem of overly simple” blocks can be easily resolved with some of the additional Gutenberg plugins that offer highly-functional blocks with more features and user options.
Elementor vs Gutenberg Features Summary
Elementor uses widgets, Gutenberg uses blocks. The free version of Elementor comes with many advanced widgets every website designer can use to build a fantastic website. In order to get a hand of more advanced blocks, additional plugins are needed for Gutenberg – such the Ocean Gutenberg Blocks.
Elementor vs Gutenberg: Performance
You may noticed we intentionally used the term “performance” instead of “page speed”.
The reason is plain and straightforward – most online tools measure website scores which do not reflect the speed of a website. Aside from that, there are just too many factors website speed depends on. The success of a website’s performance sadly does not solely depend on the theme or plugins you’re running.
Not to mention, website owners usually forget these tools do not reflect the status of the entire website – only the page assigned to the URL tested. In short, take care of all website pages equally as you do with the homepage.
However, the quality of a theme and plugins can have a substantial impact on the overall website performance. And so do page builders.
WordPress Setup Comparison
Before we begin, we’d like to give a little intro on how we build WordPress templates. In this way, the results of the Elementor vs Gutenberg comparison can be understood in full.
WordPress templates are sample website content (pages, blog posts, prebuilt and styled). These templates serve to speed up the building process or inspire. In case of Ocean Website templates, when Elementor page builder is used, it is used solely on the main pages (home, contact, about, etc).
All other pages, such as blog posts, shop, product pages, archive pages are default WordPress pages managed by the OceanWP theme.
For this little experiment we used our two WordPress website templates: Agenda and Gutenberg Agenda.
By the first glance and just looking at the images, would you be able to tell the difference between these two and guess which one was built using Elementor and which using Gutenberg?
Both websites are located on the same server and have absolutely the same configuration:
- Software: Apache/2.4.51 (Unix)
- MySQL: (Ubuntu) v5.7.36
- PHP: 7.4.24
- WordPress: 5.8.1
- WordPress (PHP) Memory Limit: 256M
- WordPress theme: OceanWP (blink blink)