WordPress Gutenberg vs Elementor (5 Differences)

wp-gutenberg-vs-elementor

What is Gutenberg? It’s a new block based editor released with WordPress 5.0 in December 2018.

This new visual editor has been released to replace the old one and provide a superior experience when it comes to content creation, editing and publishing.

It comes with multiple blocks which you can add, adjust and rearrange as you wish. You can give it a try here.

The ultimate goal of Gutenberg is to become a fully featured page & website builder, where you can easily build your web pages using various blocks and layouts.

Note: there was a lot of controversy among users regarding Gutenberg. Lots of them weren’t satisfied with it.

That’s why you still have the option to use the old Classic Editor. You can download and use it as a plugin. It will replace your current editor.

What is Elementor? It’s a WordPress page builder launched in 2016. Currently, it has more than 5 Million active users and it’s expanding very fast. It’s a powerful builder with a multitude of advanced features.

Elementor became widely used in the last few years and have seen a tremendous adoption rate. It’s easy to use for those who don’t have advanced coding skills and provides extensive customization options.

So, what the difference between Gutenberg and Elementor?

1. Editing experience

Right now, Gutenberg doesn’t allow you to edit your page in the front end. In order to see changes you’ll have to preview your page or view it in a new tab.

You can also use the Fullscreen mode to view your page in the backend, but you won’t be able to see you menu, header, footer and other elements.

Gutenberg editor

Elementor is working in the front end, so you can edit your web page and instantly see how it looks like.

Elementor editor

2. Drag and drop

Gutenberg has a limited drag and drop functionality. You can only move your blocks up or down and can’t incorporate blocks into other blocks.

At the same time, page builders like Elementor will allow you to create more complex layouts by adjusting the width, height, margin, padding of almost every block of your page.

You’ll also be able to drag and drop whatever element you like into any section of your page.

elementor editor drag and drop

3. Page style

When you create a page with Gutenberg it will inherit the style of your theme: fonts, icons, buttons, color scheme, etc. This means that you won’t have full control over your design and won’t be able to create custom looking pages.

With Elementor page builder you can use both the theme style and custom styles to create more custom looking web pages.

Elementor default colors and fonts

4. Site editing capabilities

Although the team behind Gutenberg is planning to make it a full website builder, currently it will only allow you to edit blog posts or pages.

On the other hand, Elementor Pro allows you to edit practically every element of your site: be it a header, footer, sidebar or even shopping cart.

I think that Gutenberg is way behind Elementor in terms of the amount of features and the capabilities it offers to customize your website. However, I have to mention that Elementor is a commercial project while WordPress is an open source platform.

5. Number of blocks

Gutenberg offers you a limited set of blocks (around 30 at the moment of writing) which you can use right out of the box. Most of them are just fine, but have some limited customization options.

Gutenberg blocks

Elementor has a decent library of around 30 free blocks (they call them widgets). If you go for the Pro version, you’ll have access to more than 50 premium widgets to enhance your website.

Elementor widgets

What is your favorite page/site builder? Would you consider using Elementor? Let me know.

P.S. if you like to build things from scratch and need an easy website builder then go for Elementor. If you’re obsessed by performance and like built-in featured provided by WordPress, then choose Gutenberg.

Leave a Comment

Your email address will not be published. Required fields are marked *