Elementor vs Gutenberg: from the End User Perspective

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.TABLE OF CONTENTS

• Elementor vs Gutenberg: Editing Experience
  • — Page Structure
  • — Page Layout Control
  • — Responsive Editing
  • — Margin and Padding Control
  • — Typography Controls
  • — Styling Options for Image and Button
• Elementor vs Gutenberg: Amination Effects
• Elementor vs Gutenberg: Editing History
• The Verdict

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)
• Column
• Widget (the actual design element)