Beaver Themer Add-On Plugin - Use Beaver Themer To Customize Every Part Of Your Site! Try It Today!

Difference between Gutenberg and Page Builders like Beaver Builder, Elementor, and Divi

difference between Gutenberg and Beaver Builder

What is the difference between page builders and Gutenberg?

This question has been coming up a lot! In this post, we explain how page builders differ from Gutenberg and the best scenarios to understand when to use one or the other.

TL;DR: Page builders provide designers and developers with far more control when creating pages. Fonts, sizing, padding, margins, colors, and TONS of other options are available in Beaver Builder and other builders. Whereas, Gutenberg is a writing tool. It's tuned and optimized for creating rich text content for the web using elements like headings, images, or lists. Gutenberg is great for writing blog posts and Beaver Builder is great for working on the rest of your WordPress site.

Gutenberg is great for writing blog posts and page builders like @BeaverBuilder are great for working on the rest of your WordPress site. Click To Tweet

Is a page builder always the best tool for the job?

I attended a JavaScript conference a few years ago, and a great analogy from one session stuck with me. Designers and developers have many tools at their disposal. One skill of a seasoned web professional is recognizing which tool is the best for a particular problem.

The comparison was made with a screwdriver. You've used a screwdriver before, right? After loosening a screw enough, what do you do? You don't reach for an electric drill, you grab it and use your fingers to finish the job. The moral of the story is, sometimes the best tool for the job is the simple option.

What I’m finding myself doing is using Gutenberg to do the blogging and beaver builder to do the pages. Best of both worlds and they don’t conflict at all.

– Chris Teitzel via Twitter

At the time of writing this post, Gutenberg is WordPress' default editor. During its initial development and beta period, there were many issues with Gutenberg. Over time, the writing experience has improved significantly! I recently started using Gutenberg for my personal blog, and I really enjoy it. Gutenberg is excellent for creating written content for the web.

Do I want a WYSIWYG experience?

Beaver Builder is a WYSIWYG experience. This acronym has been around for a long time and it means, “What you see is what you get.” When you build a page using Beaver Builder and click publish, the page will look exactly the same as when you were building it. You'll also see your work in the same context as it will be displayed to the user.

Have you ever tried to pick an image for a website only to realize the colors in the image clash with the rest of the site? Humans appreciate symmetry and consistency when it comes to design, so there's a lot of benefit to being able to see the complete picture of what you're working on.

WordPress Frontend vs. Backend

Another notable difference between most page builders and Gutenberg is that Gutenberg operates in WordPress' backend admin area. What this means is that not all the CSS and styling from your theme are visible. Now, Gutenberg has reinvigorated a WordPress featured called theme editor styles. This feature allows theme authors to write CSS that is displayed in the backend editor and attempt to mirror how it will appear on the frontend.

There are a few friction points with this approach. First, not all themes have editor styles. I imagine most themes will support them moving forward, but this doesn't help if you already have an established WordPress site running an older theme. Another issue is if a site is using JavaScript to assist with any visualizations. Things like parallax images or JavaScript-powered animations won't work in Gutenberg. Last, in Gutenberg, you'll be working in a “black box” context where your site's header, footer, and sidebars won't be visible.

It's possible for theme authors to make the experience of working in Gutenberg pretty close to the experience users will see on the frontend, but it's still not perfect or available in all themes.

Do I need to customize responsive layouts for mobile devices?

More and more users are accessing the web from mobile devices. Beaver Builder and many other page builders offer a suite of tools to customize and preview layouts for mobile.

With Beaver Builder, you can tweak font sizes, margins, and padding for a variety of screen sizes. The importance of creating layouts that are mobile friendly will only increase as more and more people throughout the world come online exclusively using phones and tablets.

What about the rest of my site?

Before the release of Beaver Themer, page builders only functioned in “the content” area of your WordPress site. So the things like headers and footers were still rendered and styled by the theme.

Themer brings the power of drag and drop design to your entire WordPress website! Besides headers and footers, Themer also makes it possible to create layout templates for blog posts, products, or custom post types and apply it to as many posts as you'd like! Imagine a WooCommerce store with hundreds of products. You can create one template using Themer then apply that template to all the store's products.

Several other page builders have followed suit and released similar functionality. Gutenberg, on the other hand, is still limited to the content area and working on single posts or CPTs.

Will Gutenberg catch up to page builders?

The Core WordPress team is planning to extend Gutenberg's capability beyond just writing and tackle more site customization, but what this will look like remains unknown. Luckily, for them, our team has a lot of experience in this area and have been happy to lend a helping hand! Our lead designer, Brent Jett, has been publishing some fantastic visual brainstorms on what the future of site customization might look like.

It's still up in the air, but we expect Gutenberg will continue to evolve and mature–which is a great thing for WordPress users. Although, we're hopeful and optimistic that page builders will continue to have the agility to further extend WordPress' core functionality and offer more fine-tuned control.

Just like your Netflix account, it's okay to share...
Robby McCullough's Bio

8 Comments

  1. Stephen Starr on January 16, 2019 at 4:11 pm

    Thanks for the TLDR opener, Robby. Although I read the whole thing, this a great snippet for phone conversations… which is when most of these things come up!

  2. Guy Barry on January 16, 2019 at 5:08 pm

    Cheers Robby, always nice to get a rational response to emotive questions.

    There was quite a furore when Gutenberg was announced way back when, and as we all know it is the hot topic of the past year in the World of WordPress.

    There was also a lot of fear surrounding the change, and rightly so in the earlier days since WP really demonstrated that they have very little insight into how people are actually using WordPress. It’s thanks to the community as a whole, and more so to the developers of the tools which so many of use that they sat up and paid attention.

    I almost feel like the Gutenberg we got is a very watered down version of what the dreamers were dreaming of, although as you mentioned that will soon evolve.

    Personally, I’ve really been trying to get used to Gutenberg for writing posts, but at the moment it’s truly dreadful. It still feels like some kind of Alpha version of something, and doesn’t even begin to match what is possible with something like Beaver Builder.

    Interesting times ahead though, and I think all of us are intrigued by how Beaver Builder will evolve in the Gutenberg ecosystem. One thing I’ve always felt is that the team at BB has a finger on the pulse, so I’m confident that the future for all the people using BB is in safe hands. 🙂

    • Robby McCullough on January 23, 2019 at 2:08 pm

      I don’t find it all that bad for writing, but the more I use it the more quirks and issues I run into. I am ready to stop talking about Gutenberg so much! 😀

  3. Glenton on January 17, 2019 at 12:27 pm

    There’s a difference, for now.

  4. Ryan Cameron on January 20, 2019 at 10:27 am

    Even though Gutenberg is starting to evolve, it is still no match for Beaver Builder. Beaver Builder is by far the best page builder I ever used.

  5. Sunil Ghosh on January 28, 2019 at 8:14 pm

    Thanks for this apt difference between all the great page builders Robby. I’m yet to try Divi. However, I personally didn’t love Gutenberg maybe because it’s not stable yet but compared to Beaver Page Builder and Elementor it comes no where close right now.

  6. James Bullis on February 9, 2019 at 8:14 am

    The more I use Gutenberg, the more I find it’s usefulness in the blog. Using Beaver Builder as the wrapper and engine for the rest of the site works perfectly. Thanks for clearing this up.

Leave a Comment