Gutenberg vs Page Builders: A “How-to-Choose” Guide for Mission-Driven Organizations
Share
You’re producing a new website for your mission-driven organization and you’ve decided on WordPress, the most widely-used content management system (CMS) in the world. Congratulations! But now you face an equally daunting decision: should you create it using a theme based on the included WordPress Gutenberg editor (also called the “block editor,”) or a page builder like Divi or Elementor? Maybe someone in your nonprofit, school, or municipal department has experience with one or the other, or maybe the designer you’ve hired has a preference, or maybe cost considerations loom large. No matter what, this one choice will have long-term and far-reaching consequences.
We’ve assisted countless clients in making this decision, and in this post we’ll go through the pluses and minuses of each direction to help you figure out the best choice for your situation.
Before we begin, let’s make sure we’re on the same page (see what I did there?!) about what these broad terms mean.
A page builder in the context of this article is a tool that enables you to build your WordPress website using a “drag-and-drop” visual editor, much like Wix or Squarespace does, largely eliminating the need for writing code. In theory, this means non-developers can build out an entire site.
On the other hand, we have Gutenberg, the new built-in WordPress editor, which relies on content types called blocks. They allow you to add, arrange, and style content of all types, and require no knowledge of code to use. (This is why some people refer to the tool as the “block editor,” but for simplicity’s sake, we’ll keep calling it Gutenberg.)
With that common footing established, let’s take a look at the pros and cons of each approach.
Page builder pros
Anyone can do it or: the promise of a code-free build
Page builders make it possible—but not necessarily simple—to make an entire site without needing to hire web developers to write code. Unfortunately, mission-driven organizations such as arts organizations or state universities may face more budget constraints than a commercial entity might, making a page builder more appealing—developers are typically the most expensive people involved in the entire process.
Design can shine
Page builders also share a similar methodology with the tools designers use every day to lay out sites. That makes it more comfortable for them to translate their designs into actual web pages, even to the point where they might edit the site directly. This direct line of control is appealing for organizations for whom branding and art direction are particularly important, and where people on the design team, such as strategists, designers and writers are decision-drivers.
See what you build in real-time
Being able to see the page in the editor as you’re building it the same way a visitor to the site would has always been a strong point for page builders. For a long time, editing a page in WordPress bore little resemblance to how it would come out on the front-end, with the editor checking boxes or typing text into fields without a direct relationship to what it meant on the other side. Even finding the right place to edit something as simple as a label could be a chore, versus seeing exactly how the page looks and clicking directly on the thing that needed changing. Page builders address that issue nicely.
Page builder cons
Difficult to change systems or, “content lock-in”
Whether you work for a higher education institution, government department, or some other place, your organization may undergo a rebrand or personnel changes that necessitate changing your CMS. Once you choose a page builder, you’re locked into that ecosystem until and unless you completely rebuild the site. No easy, automated method of converting from a page builder back to default WordPress exists, greatly limiting your ability to control your content going forward. For instance, here’s what the front-end of a site built with WPBakery (a popular page builder) looks like if you turn WPBakery off:
Front-end of site built in WPBakery displays system-specific code if you shut off WPBakery
As you can see, you’re left with unused and unreadable shortcodes that are difficult to parse. And once you do that, you’ve got to completely re-build the visual and functional elements of the page. Once you’re in with a page builder, you’re pretty much stuck with it.
Content lock-in is the single largest hidden cost associated with choosing a page builder, and can often dwarf the savings from not having to hire a developer to write code.
Potential increased training time + cost
The promise of page builders is that they will make it easier to create custom layouts, opening up the editing experience to designers, interns, and other non-technical staff. But that comes at a cost in terms of training, as you and collaborators must learn basic WordPress and an entirely new ecosystem.
The layers of complexity also add up quickly in terms of time, frustration, and functionality. For instance, here’s what the editing experience in Divi looks like:
Divi’s user interface displays a design-in-progress
Users can become overwhelmed by the multiple nested toolbars, plus and minus buttons, multiple containers, and duplicate icons.
For mission-driven organizations in particular, the time cost of training new volunteers or employees to use page builder (in a potentially high-turnover environment) can quickly outstrip the value it offers by offering more options to designers.
Lower speed
Page builders add a lot of additional code to the site in a way that frequently causes a dramatic loss of page speed. The page basically has to load all of WordPress, then an entire replacement of the WordPress editor, then all of the code required to translate the visual editor elements into the front end. Page builder powered sites can load as much as 57% slower than a Guttenberg powered site.
Potentially decreased site health & security
Imagining your site getting hacked and displaying abhorrent content might keep you up at night. Popular page builders have suffered significant security breaches. And if you want to get security updates, you’ll typically have to pay a licensing fee every year between $39 and $99.
The cost of disentangling from a page builder
At the 2023 WPCampus conference, Engineer Steve Ryan of the University of Arizona summarized the real-world issues often experienced with page builders:
Coming from a university setup where we are actively attempting to disentangle ourselves from a page builder set up, I'll reiterate the dangers of content lock-in. If the thing you are using to build your pages results in a whole bunch of garbage present on the page when you turn it off or activate a new theme... it's not a great situation.
In addition, we figured out the hard way that page builders represent a trade off in usability.
On one hand, they provide a really valuable tool to our content creators who wanted more control over their sites. Builder tools also leaned into the future of WordPress well in advance of the Gutenberg block editor curve and continue to demonstrate the possibilities that exist within that mentality of content design. (Moving from something that looks like a document to something that looks like blocks of content is a pretty big paradigm shift.)
However, with the addition of those tools, you also really increase the knowledge curve necessary to do non-design oriented content management. The layers of complexity needed to "design anything" using the builder just get in the way of the user who will occasionally want to change a handful of content areas on a page and be done. It represents an additional entire body of knowledge that they have to fight against in order to do the job. So... content updaters need to know WordPress.... but they also have to know which of the icons in the purple bar to push in order to get to the window where their sentence exists.
In our experience, we found that the audience sizes are much more skewed toward the occasional editor rather than the true "page builder." Particularly when we add faculty websites to the mix.
Gutenberg pros
Higher speed
Gutenberg has repeatedly been proven to produce higher page speed scores compared to page building plugins. Numerous factors contribute to an overall page speed score, but they include:
- Number of requests made of the browser
- Total page size
- Time it takes to fully load the page
- Number & size of JS, CSS and font files to load
When comparing two identical pages—one created with a page builder and one built with the block editor—the Gutenberg page generates fewer requests, has a smaller page size, loads faster, and has fewer files to load.
Decreased use and training time
Because Gutenberg is built into WordPress, you only have to train content editors on one system, not two. And building with Gutenberg blocks is much easier and more intuitive than the old WordPress experience. Watch Kalamuna’s Kristina Kaminski give a quick tour of how to add or edit page content with Gutenberg:
Lower cost
Gutenberg is packaged in with your WordPress files, so it’s completely free. Premium page builders can cost hundreds of dollars and often require yearly license fees to keep access to updates and security patches. And if you don’t keep up those payments, you not only expose your site to more potential hacks, but you risk having to spend even more money if the site goes down and you need to pay to fix it. WordPress core updates, on the other hand, are free forever.
Ability to easily change themes
Because Gutenberg is part of WordPress, your content will remain available even if you change themes. You won’t have to face the random shortcodes and broken layout issues you have when converting from one page builder to the next.
Gutenberg cons
Potentially inconsistent design
As with page builders, Gutenberg can offer too much freedom to editors. With every color in the world just a click away, the temptation to a volunteer unfamiliar with the brand guidelines to make that headline the most adorable pink can be too enticing, and as a result, over time the site might begin to look haphazard. At Kalamuna, we account for that by building brand guidelines into the editor code so that off-brand pink won’t even be an option, but that can’t be done without a developer.
Fewer blocks & patterns out of the box
Although the block library is constantly growing, the major page builders have benefitted from many more years of development. Some of the biggest even have third parties creating blocks specifically for them. (We build custom blocks and patterns for our client sites, too.) Over time the gap will close, but for now page builders have an edge in terms of the number of available blocks or widgets.
Not drag-and-drop
The ability to drag and drop in what is essentially the live page is a big selling point for page builders. While Gutenberg comes close, it’s not as immediately intuitive as a dedicated drag-and-drop interface.
Which to choose?
Hopefully, we’ve helped your decision making process by laying out the pros and cons of using a page builder and using Gutenberg. And since every mission-driven organization has different resources and challenges, your choice belongs solely to you.
We believe page builders are generally best if you’re already invested in that ecosystem and your staff is comfortable with it. They are also good if you need to make highly customized designs right in the CMS and don’t have a development team that can convert designs into blocks and patterns for you.
For all other cases, Gutenberg is the superior choice. A good agency (like the one I happen to work with) will use tools to tailor the editing experience to make content entry even easier while still maintaining your brand. The key is to work with WordPress rather than trying to supplant it with a completely different add-on experience, flattening the learning curve and making it even easier (and cheaper) to keep your site as vibrant as your organization itself.
Reach out to me at [email protected] for specific questions, or get in touch with our accounts team if you’d like to talk about your website needs.
