Comparing Elementor and Gutenberg is a bit unfair as Elementor is too superior. But, due to so many questions about the issue (Elementor vs Gutenberg), we will try to elaborate the answers. Let’s start by understanding the basic difference between the two.
Elementor is a page builder, while Gutenberg is a block editor. What’s the difference?
A page builder allows you to control everything on the page you are creating. From the layout, design elements, design element settings, design element stylings, and so on. Block editor, meanwhile, doesn’t offer full freedom over the page you are creating. In some ways, you are limited to what’s offered by your theme. An easiest instance, if your theme doesn’t support full-width page, you can’t create a full-width page in Gutenberg.
On block editor, your design elements are controlled by your theme settings. To prove this, you can try adding a Heading and Button on two different themes. Block editor (Gutenberg in this case) allows you to customize the design elements, indeed. But the options are extremely limited.
For the Heading block, for instance, you can only change the text color as well as the text size. There are no options to change the font family, font weight, font style, and so on. You can actually change the font family and make some other advanced settings as mentioned, but you need to go to the theme customizer (Appearance -> Customize). In other words, the changes are not made via Gutenberg.
Elementor vs Gutenberg: Editing Experience
A brief intro about Gutenberg before we continue. It started available as default WordPress editor since version 5.0, replacing the Classic Editor.
Classis Editor is still around on the core of WordPress, but it is not set as the default editor. If you are not comfortable creating content with Gutenberg, you can disable Gutenberg to revert back the classic editor.
On its initial emergence, Gutenberg looked promising in replacing the Classic Editor with its more modern editing experience — although not all WordPress users really impressed with it. It offered a pleasurable content editing experience with a cleaner interface.
However, Gutenberg is getting more and more complicated these days. There are too many blocks (some blocks really useless). Not to mention the fact that each theme offers different editing experience.
To create blog posts, Gutenberg is great. But for pages, we don’t think so.
Elementor (and other page builders), meanwhile, has the focus on page creation. It doesn’t stand between page creation and blog post creation like Gutenberg. As a result, it has a better page editing experience with its live editing experience and more setting options over design elements.
— Page Structure
One of the most obvious differences between Elementor and Gutenberg when it comes to editing experience is the page structure. In Gutenberg, all elements considered blocks, even the container that hosts loads of design elements (text, button, image, etc.). In Elementor, elements are divided into three types:
- Section (container)
- Widget (the actual design element)
The idea of dividing elements into three different types offers way better page editing experience. First, it allows you to design the layout more easily. Second, for a long page, it allows you to identify the elements more easily. Third, the idea also makes it easier for you to turn a design concept created with tools like Figma and Adobe XD into a live page.
Most importantly, the idea of dividing elements into different types makes it way easier for Elementor to be used, especially for new users (read: How to Use Elementor).
— Page Layout Control
Before starting to add an element, the very first thing you need to do to create a page is to set the page layout. You can set whether the page has a sidebar or not. If you want to create a page with a sidebar, you can set the location of the sidebar — as well as the size. In Gutenberg, you can set the page layout from the Page tab on the settings panel. The layout options offered by each theme are different. On the GeneratePress theme, for instance, you have the following page layout options.
If you want to create a sidebarless page, you need to go to the theme customizer to set the page width. So is with a page with a sidebar.
In Elementor, you can control everything from the settings panel. No need to back and forth between the editor and theme customizer or WordPress dashboard.
— Responsive Editing
Responsive editing is a crucial feature given in today’s age; many internet users access a website using their smartphone. Web creators need to make sure the website they are creating looks nice on every device type. Page builders — including Elementor — are one step ahead of Gutenberg in this area. Until now (in WordPress 5.9.1), Gutenberg has no native responsive editing feature.
What is responsive editing, by the way?
The term “responsive editing” refers to page editing whereby you can control the settings of the elements on each device type (desktop, tablet, and smartphone). In addition, responsive editing also allows you to control the visibility of a certain element based on certain device type. For instance, you can set a button to show only on desktop.
Responsive editing is crucial as each device type has a different screen size. You don’t need to always show all elements on smartphone as it has a smaller screen size than tablet and desktop. With responsive editing, you can optimize a page on a certain device type according to your main target audience target.
In Elementor, you can switch between device types by clicking the device icon on the settings panel.
— Margin and Padding Control
The ability to set the margin and padding are crucial in web page creation (read: the difference between padding and margin). The feature allows you to set the space between a certain element and its surrounding elements. Without the ability to set margin and padding, you can only create a cluttered page.
Elementor (and most page builders) has built-in setting options to set the margin and padding of an element. Be it a section, column, or widget. You can even use a different setting on each device type thanks to its advanced responsive editing feature. Gutenberg, meanwhile, has no built-in settings to set the margin and padding.
— Typography Controls
There are several native Gutenberg blocks to add text to a page. Including the Heading block and the Paragraph block. When you add these blocks, you can set the size and color. But there is no option to change the font family. If you want to change the default font family, you need to go to the theme customizer.
Elementor, meanwhile, offers more settings to control the typography. Most importantly, you can make the settings from its settings panel. In addition to making basic settings like font family, font size, and text color, you can also set the font weight, font style, line height, letter spacing, and decoration. Furthermore, you can use a custom font if you want it (Elementor even supports integration with Adobe Fonts).
— Styling Options for Image and Button
The look of button on Newspaper theme is different to Avada (or other themes), even when you use the same settings (e.g., size) on Gutenberg. The reason is that this element (button) is controlled by your theme. On Gutenberg, you can only set the color, alignment, and text size. You won’t be able to set things like hover effect, border radius, or border size, unless you use a plugin like Kadence Blocks or CoBlocks.
Same as the Button block, Gutenberg also offers extremely little options to style up the Image block. You can only set the image size, alignment, and style (default and rounded).
In Elementor, you can apply more styling options to a button or image. For the button, you can apply hover effect, set the custom border radius, set custom size, add an icon, set the typography of the button text, and so on. While for the image, you can apply CSS filters, image masking, border radius and size, hover effect, and so on.
Elementor vs Gutenberg: Amination Effects
For some people, animation effects don’t really matter. But for some, adding animation effects is a way to impress their users. Hover effect is one of the examples of animation effects offered by Elementor. In addition, you can also apply an entrance animation effect to an element. Be it section, column, or widget.
If you use the pro version, you can even add mouse effects and scrolling effects. Here are the animation effects offered by Elementor:
- Hover effect
- CSS transform
- Mouse effect
- Scrolling effect
- Entrance animation
And don’t forget that Elementor also allows you to add a Lottie animation.
What about Gutenberg?
So far, Gutenberg has no animation effects. Even entrance animation.
Elementor vs Gutenberg: Editing History
Page creation/editing involves many actions. From setting the layout, setting the colors, setting typography, and so on. Every now and then, you might make a change you never meant.
Or imagine this case: you already have a page on your website and want to edit it. Once you are done editing, you are not satisfied with the new changes and want to revert to the previous design instead. In Elementor, you have an editing history feature to allow you to revert the previous version of your design in case you are not happy with the new changes you made.
You can access the feature by clicking the history icon on the settings panel. There are two tabs you can open: the ACTIONS tab and REVISIONS tab. The ACTIONS tab stores the changes you made today (in 24 hours) while the REVISIONS tab stores the changes you made yesterday (or older).
Gutenberg also has the same feature, but it is more complicated to use. It doesn’t show the changes in the canvas area like Elementor. Instead, it only compares the versions of your page to show the changes you made. Gutenberg doesn’t preview the changes. Instead, it only highlights the code associated with the changes.
As stated in the opening section, comparing Elementor and Gutenberg is unfair. Elementor is way superior as it is designed specifically as a page builder whereby you can use it to create pages with a complex design. In Elementor, you have full control over your page design.
Gutenberg, meanwhile, is a block editor, not a page builder. In Gutenberg, everything is defined by your theme. It indeed offers styling options, but the options are extremely limited. In most cases, you only have options to set the size and color. Above all, what makes Elementor so superior is its designing experience. Elementor comes with an excellent editor which offers a live editing experience.
Gutenberg, however, is great when it comes to blog post creation. It has a more modern interface and a more pleasurable blogpost creation than the Classic Editor. Gutenberg is also good to create a page with a simple design. But if you want to have full control over your design, Elementor (and other page builder plugins) is not debatable.