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?
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.
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.