Gutenberg vs. Page Builder Plugins: Pros & Cons

WordPress gives you a lot of different ways to create compelling content. This is great for flexibility, but can also make it tough to know which method to use to create content on your own WordPress website.

In 2021, one confusing sticking point is whether to go with the native WordPress block editor (AKA Gutenberg) vs. third-party page builder plugins like Elementor, Divi, Beaver Builder and others.

Both let you create stylish designs with unique layouts, so the question is: which editor should you use?

In short, the answer is that Gutenberg and page builders have slightly different strengths and weaknesses, so you'll want to use each in different situations.

In this post we'll compare Gutenberg vs. page builders so that you can decide which editor is best for your needs (or you might even use both, but in different situations).

Key Differences Between Gutenberg vs. Page Builders

Just to set the ground, let's quickly run over some key differences between Gutenberg vs. page builders.

But first – if you're not familiar with these terms, here's what we mean…

Gutenberg is the name for the native/default WordPress block editor – it looks something like this:

Page builders, on the other hand, are third-party plugins that you can use to add more design capability to WordPress. Popular options are:

They all look slightly different, but here's how Elementor looks:

So what are some key differences between these two builders?

Visual Design

When you're creating a design, it's useful to be able to see what it will look like to visitors.

With Gutenberg, you can get a rough idea. That is, if you add a button, you'll see a button (though the button might look different on the front-end). If you add columns, you'll see columns.

However, you still aren't seeing exactly what your visitors will see and you'll need to use the preview button to know what your design will really look like.

That's not the case with page builders, though. With a page builder, you'll see your design exactly as your visitors will see it, which makes it really easy and fast to create the perfect design.

Drag-and-Drop

Another key difference is drag-and-drop. Both Gutenberg and page builder plugins support drag-and-drop, but your average page builder is much more flexible than Gutenberg.

Though Gutenberg's drag-and-drop functionality has improved, it still feels a little awkward and it can be tough to position an element where you want it to be:

Drag-and-drop feels a lot more fluid in a page builder. For example, in Beaver Builder you can even drag a widget beside another one to automatically create a new column, which makes it super convenient to create your layouts:

In Gutenberg, you'd need to manually create the column structure and then painstakingly drag in each widget.

Design Options

Your average page builder is going to be a lot more flexible than Gutenberg when it comes to design options.

For example, look at the button styling options that you get in Gutenberg – you can switch up colours and the basic shape, but that's about it.

On the other hand, Elementor lets you customise everything, from changing fonts to positioning, spacing, box shadow, gradients and lots more. The screenshot below shows just one of the three different settings areas in Elementor:

If you want to get a similar level of control with Gutenberg, you're going to need custom CSS. Some Gutenberg block plugins give you more flexibility – but most still don't come close to a good page builder.

Performance

So far, most of the advantages have favoured page builders – but this is where things swing back in Gutenberg's favour.

In order to add all those features – the fancy design options, the flexible drag-and-drop, etc. – the trade-off is that your average page builder will be "heavier" than Gutenberg.

This means that all things equal, a design that you create in Gutenberg will load faster than a design you create in a page builder.

That "all things equal" is very important, though, because a well-optimised page builder design (optimised images, good font choices, etc.) could load faster than an unoptimised Gutenberg design.

But the idea is that if you created the exact same design in Gutenberg and a page builder, the Gutenberg version would almost certainly load faster, have a smaller page size, have fewer HTTP requests, and have cleaner code output.

Pros and Cons of Using Gutenberg vs. Page Builder Plugins

Now that you know some of the key differences, let's get into the more specific pros and cons of using each builder...

Advantages of Using Gutenberg

It’s free. While some page builder plugins have free versions, you usually need to pay for the premium version for the best features. Gutenberg is and will always be 100% free.
Better performance and more lightweight. In general, Gutenberg is a lot more performance-friendly than the average page builder, which means your site will load a bit faster with Gutenberg (all else being equal).
Core feature – no compatibility issues. Because Gutenberg is part of the core WordPress software, you never need to worry about compatibility issues like you do when dealing with any third-party plugin.
Simple experience. "Simple" can be a pro or a con depending on what you need to do. But if you just want to create basic content, a page builder might be overly complex for what you need.
No lock-in. If you build your content with a page builder plugin, it's hard to stop using that plugin in the future because your content will lose its styling (or even become unusable) if you disable the plugin. This is called "lock-in". This won't happen with Gutenberg because it's a core feature.

Advantages of Using Page Builders

A true visual editing experience. While working on your design, you'll see it exactly as your visitors will see it. This is great for complex designs because it lets you set up pixel-perfect layouts and spacing.
More design options. While it varies depending on which page builder you choose, most page builder plugins give you a lot more options when it comes to design choices and layout configurations. With Gutenberg, you might need to rely on custom CSS for a lot of changes.
Better responsive design. Page builder plugins give you more control over how your content looks on different devices, with options to change designs or hide certain elements depending on a user's device.
Better drag-and-drop. While Gutenberg does support drag-and-drop, it's still a bit awkward and doesn't feel seamless. Page builders offer a much slicker drag-and-drop experience that feels more intuitive.

When to Use Gutenberg vs. Page Builder Plugins

So now that you know the pros and cons of the different editors, let's talk about some situations in which it makes sense to use one or the others.

When to Use Gutenberg

At a basic level, Gutenberg should be your default choice whenever possible. This is because it's more lightweight and uses a core feature (which means no lock-in and no potential compatibility issues).

For example, if there's something that you think you can do with both Gutenberg and a page builder, you should always go with Gutenberg first in that situation.

On a more general level, Gutenberg works well when you're creating content with a simple layout and where you're mostly following your theme's existing design settings.

For example, you'll probably want to use Gutenberg for all of your blog posts. Most blog posts don't require detailed styling – normally at most you might want to create a simple multi-column design or add some buttons here and there. Gutenberg has more than enough power to get that done and you'll benefit from its more lightweight output.

Gutenberg can also work for simple homepages and core pages (like your "About" page). It really depends on how much styling you want to add.

If you feel like Gutenberg can almost get the job done but it's falling a little short, you might be able to bridge the gap with plugins. You can find lots of plugins that extend the block editor with new content blocks and/or layout options.

When to Use Page Builder Plugins

Page builder plugins make the most sense when you need to create complex designs with complex layouts.

While Gutenberg does let you create multi-column designs, it's much more limited than most page builders. Additionally, because the live preview in Gutenberg isn't 100% the same as what your visitors will see, it can be harder to get spacing right since you need to refresh the page each time to see how the design will actually look on the front-end.

For example, if you want to create a heavily styled homepage, that might be a good use case for a page builder. The same is true for your other core pages (if you want to create complex designs).

Page builders are also usually better if you want to create dedicated landing pages. While Gutenberg certainly can create custom landing pages, you'll typically need to add some custom CSS to make it do what you want. Page builders will let you do the same thing without relying on that custom CSS.

You Can Use Both Gutenberg and Page Builder Plugins

It's important to note that you can use both Gutenberg and a page builder plugin on the same site - it doesn't have to be an either/or situation.

You can use Gutenberg as your default editor. But if you hit a situation where you need some extra power, you can activate your page builder on that piece of content.

Many sites use a page builder plugin to design the homepage and core pages, but use Gutenberg for blog content and other simple pages.

Conclusion

Both Gutenberg and page builder plugins help you create content on WordPress, but they do so in slightly different ways.

Gutenberg is the lightweight solution, both in its features and its output. It includes all the options you'll need for most content that you create, so it should be your default choice when creating content.

Page builder plugins are more heavy-duty solutions - they give you a more visual design experience and a lot more built-in options. But they also output heavier code, which means page builder content will usually load a little slower than Gutenberg content (all things equal).

For that reason, you should only switch to page builders when you really need to take advantage of that extra design flexibility - such as building heavily styled pages (like a homepage) or dedicated landing pages.

Do you still have any questions about Gutenberg vs. page builder plugins and when to use each? Give us a shout in the comments!

If you want to find out more about the personalised help that our Onyx Managed WordPress customers receive, just get in touch via Live Chat.