The WordPress classic editor had many drawbacks. It allowed users to create posts/pages with text and media content only. Gutenberg is way more advanced than the Classic editor. It lets users work with blocks and design attractive pages from scratch using the pre-designed blocks or the blocks added by the Gutenberg blocks plugins.
Gutenberg is a part of every website built using the latest version of WordPress. It is the official replacement for the classic WordPress editor. Before this editor was launched, people used page builders to design pages Elementor is a widely used WordPress page builder plugin. It was launched in 2016. According to its official WP page, it is active on around 5 million sites.
Gutenberg was added to WordPress 5.0. WP 5.0 was introduced in December 2018. According to WP version usage tracking websites, WordPress 5.0 is used by 92% of the WP CMS users. Thus, Gutenberg has millions of users.
Below, we’ve compared Gutenberg and Elementor. Find out which page builder is better, easier to use, and more powerful.
Designer and UX
“Edit with Elementor” is the option that will take you to the page designer interface. You’ll find this option at the top of the WP editor. In Gutenberg, you can see the blocks you can add to the page by clicking on the “+” sign icon that appears at the right side of the line of the editor that you click or are currently editing.
Elementor shows the blocks/widgets on the left side. To insert the widget on the page, you must drag and drop it. The page builder will hide the blocks in the modal and show the widget’s settings when you do so. When you choose a block in Gutenberg, the editor will insert the block immediately. You must click the block to see its settings. The settings are displayed on the right sidebar of the Gutenberg editor.
Elementor offers more settings for widgets/blocks compared to Gutenberg. Its options are grouped into three categories – content, style, and advanced. Here are the settings for its Heading module:
- Title, link, size, HTML tag, alignment.
- Text color, typography, stroke, shadow, blend mode.
- Margin, madding, CSS ID, motion effects, transform, background.
- Border, mask, position, responsive, attribute, CSS.
Gutenberg lets users change the size of the heading text and set letter spacing for it. You can also change the background and foreground color of the heading element with it.
Reuse
If you’ve customized a widget/block to perfection and would like to use this block on other pages, you can make the block “reusable” in Gutenberg or save the design as a template in Elementor.
Site structure
In Elementor, you can see the site structure. Gutenberg shows the page’s structure with these two options – list view or document outline.
Theme builder
Elementor ships with a theme Builder tool that enables users to design custom footer, header, single posts, WooCommerce pages, etc. The current version of WP ships with a Full Site Editing Tool. FSE is similar to the Theme Builder tool of its counterpart. According to the developers of this WP extension, their theme builder works great with the Hello theme.
The current version of WP includes a Full Site Editor tool. The tool is in Beta and supports the twenty twenty-two theme only. When FSE is out of Beta, it may support other themes.
Role management
The admins of the page builder can prevent certain users of WordPress from accessing the editor. You won’t find the role editing options for Gutenberg in WordPress, but you can add this feature to your site with the help of a user role management plugin.
Rollback
The settings interface enables you to switch to an older edition of the page builder. The only way you can roll back to the previous edition of Gutenberg is to switch to an earlier edition of WordPress. You can do so with the WordPress downgrade plugins.
Replacing URLs during the transfer
With Elementor Pro, you can export/import designs. The page builder enables you to use the same design on other sites by providing a URL replacer tool. Once you import a design on a new site, you can replace the URLs/domain name in the design with a new URL/domain name.
Maintenance mode
You cannot put a website in maintenance mode without installing a WordPress maintenance mode plugin, but you can do so with Elementor. The page builder lets users choose a page they would like the plugin to display when their site is in maintenance mode.
Compatibility
When the WordPress core team was testing/developing Gutenberg, the theme developers made considerable changes to their themes to ensure their template was compatible with the new editor. Now, most of the templates updated at least once last year work great with the editor. Elementor Pro subscription ships a theme called Hello. You can customize Hello the way you want with the Theme Builder tool you get with it. Many themes that are available in the WP theme repository support this page builder.
Elementor Pro features:
Widgets: In the free version of the extension, you get 31 widgets. The Pro edition of page builder provides around 90 modules.
Custom fonts: The page builder’s Pro edition supports local fonts i.e. fonts you’ve downloaded from a third-party website or existing font files on your PC.
Custom icons: This tool enables you to add and manage custom icons on your website.
Custom code: With the custom code function, you can insert code snippets into pages of your website without installing any plugins.
Site templates: You will get access to over 298 custom-built templates when you buy the Elementor Pro subscription plan. Gutenberg ships with 10 to 20 templates. A theme you install may add dozens of templates to its template library. For instance, the Astra Pro offers 100+ templates.
Forms: The plugin’s Pro version allows you to build cool and powerful forms for your website. You can see the responses/form submissions in the WordPress dashboard itself.
Popup builder: In addition to attractive forms, you can create popups with Elementor Pro.
You can add the above features of Elementor Pro to your WordPress site with the plugins available in the WordPress repository. When you keep installing plugins and don’t take measures to keep the site’s performance stable or improve the performance, the site’s performance might deteriorate. Why is it so? WP plugins can add scripts/stylesheet files to the site. This increases the size of the page and the number of HTTP requests.
Closing words: As you can see above, Elementor Pro offers a complete package for WordPress users and hundreds of options. It is thus a better page builder than Gutenberg.
