The Perks and Perils of Page Builders

Building a new website can be scary. If you’ve lived through the process, you may have stories to tell around how expensive the cost of a website design is, how long the process takes, how communication with the marketing agency was frustrating, and worst of all, how once the project was finished and finally launched, making changes to the site was extremely difficult. Building a landing page or anything with a new layout requires you to go back to your website developer.

At BetterWeb, we’ve heard all those stories, and when we worked on the in-house marketing side of things, we lived them.

That’s why we do things differently at BetterWeb. Our goal is to launch sites efficiently and affordably … and to build them in such a way that you’ll have complete control over them, even after launch. One of the ways we do that is by using a page builder tool on our WordPress websites.

A page builder is exactly what it sounds like – a tool that allows you to build pages on your website without a lot of programming knowledge. While it doesn’t replace a qualified WordPress website designer and there is still some coding knowledge required for setup, page builders can make the process much faster and provide a lot of design flexibility, even after the site is launched.

There are a lot of page builders available for WordPress. Some of the most popular are Divi, Elementor, Beaver Builder, and the BetterWeb favorite – Cornerstone integrated with the Pro theme. Each of them have their own unique user interface and features, but they all provide some variation of a “drag and drop” tool where you add “blocks” or “elements” on a page, put them in whatever order you want; then add and style content. Even the WordPress core itself has moved toward a page builder style with the introduction of their Gutenberg editor.

If you don’t use a page builder, you have two other options for your WordPress website design – a purchased theme or custom development.

Themes are pre-built WordPress sites that already have designs and page layouts created. If you find a theme on a marketplace such as Template Monster or Envato that uses the exact layout and look you want, implementing it can be fairly easy, and it can certainly keep your website design costs low. However, it can be very difficult to find the perfect theme, and many of them have coding errors or design flaws that make them frustrating to use. In addition, if you need any custom functionality outside of a blog, these themes generally don’t accommodate it.

Most big web design agencies have turned away from off-the-shelf themes and instead custom code the websites they design. They generally create their own “starter” theme and then build “custom blocks” for the built-in WordPress editor. The idea is that you can still use the drag-and-drop layout tools that Gutenberg provides but also get a beautiful design. Despite these benefits, there are three big problems with custom designs and blocks:

• They take a long time to build
• It’s an expensive process
• If you don’t plan for every page layout contingency, you may not have the blocks you need to add or modify pages after launch.

A good page builder solves a lot of these problems.

As discussed, there are a few big problems with off the shelf and custom-coded themes. Here’s how a page builder addresses each of them:

When a good WordPress website designer builds a typical website without a page builder, they should spend a lot of time and effort thinking about every page on your site and how it should be laid out. They’ll think through the user journey and design every page to help you tell your story and for visitors to find what they’re looking for.

Next, they’ll build the blocks or elements that are needed to bring those pages to life. Because they’ve thought about the pages on your site and how the block will look next to other blocks, they’ll build it to have the right spacing, overlapping, etc, and will often “hard-code” things like colors, fonts, sizing, etc. All of this requires an experienced front-end developer, who will often charge higher rates.

When it comes to a page builder, the initial strategy is still incredibly important. Your website designer should still think through page layout, user experience, and marketing strategy. The designer will create styled elements, and the developer may set up templated elements and parts of a page. After that, however, the time to drag-and-drop elements onto the page is much faster and doesn’t require a developer, often driving down the website design costs significantly.

Speaking of dragging and dropping, when you’re using custom blocks, they are generally designed to be used in a specific place on the page, often with sizing and spacing between blocks “hard coded.” On the other hand, with a page builder – particularly our favorite, Cornerstone – you can drag-and-drop elements wherever you want them, in any order, and customize the sizing, spacing, and layout very easily.

Building pages goes much faster this way, saving time and money as mentioned above, but also allowing the site to grow with you over time. You can create landing pages with totally unique layouts and adjust existing pages as your business changes. You’re not locked into the layout of a purchased theme or from the pre-planned elements of a custom build.

Building custom blocks can be very time consuming. Each one must be planned, developed, and tested before you can even begin to build the pages on your site or load content. If you create a page and find that you want it laid out differently, you’ll have to return the developer to have changes made to the block, and they’ll need to ensure those changes don’t negatively impact other places the block is used on the site. The process is very linear and can take a long time.

Page builders offer a lot more flexibility. Once the initial elements are styled, you can drag them on a page, load your content, and change spacing and layout to look perfect with the specific length of your content, size of your images, etc. Because you can control these things yourself, you don’t need to go back to a developer for fixes or try to re-write content to pigeon-hole it into a pre-planned slot.

With each page taking less time to build and less planning and testing for custom programming, the overall time to build a site can be cut significantly. That’s not to mention that launching changes, such as new pages with different layouts, can be done with little to no development time.

Not every page builder is equal, and some are equipped with more functionality than others, but several of the more well-known page builders have specialized but flexible functionality for things like portfolios, blogs, event calendars, staff profiles, eCommerce, and more built-in.

None of these things are “turned on” right out of the box, but they also don’t require as much custom coding as an off-the-shelf or custom theme would. In fact, when selecting and off-the-shelf theme, your options often will be limited to only those that support your custom functionality. And, when building a custom theme, your developer usually has to start from scratch to implement a lot of the functionality that page builders handle with ease.

No website solution is ever 100% perfect, and page builders are no exception. There are some pitfalls that you should be aware of when determining if you want to go the route of a purchased theme, custom development, or page builder.

The most significant risk of using a page builder is lack of consistency. The very thing that gives you flexibility in page layout – the ability to control sizing, spacing, etc. – is also the thing that means your pages may be inconsistent. If one person builds a page and puts 100px of space between elements, and the next person builds a page using only 50px, the result is obvious. The pages don’t look the same.

In most cases, differences in things like spacing between elements won’t be that noticeable, but it’s possible for someone using a page builder to go completely off-brand and use non-standard colors, size fonts weirdly, or just not follow website design best practices. However, if you set some standards at the beginning and place one person in charge of quality control, these risks can be minimal or mitigated completely.

When custom coding a website, your developer will create Cascading Style Sheets (CSS) – code behind the scenes that does things like define what size, font, and color your headings should be, if images should have rounded corners, what buttons will look like, and more. In a page builder, you often have the ability to override those styles. Of course, this can be a perk when what you’re looking for is flexibility.

However, if you override these rules and then ask a developer to make a global change, you’ve got a problem. In custom development, if you want all your H1 headings to be 5px bigger, no problem! The developer changes that setting in the CSS, and every piece of text with that rule applied is instantly updated. Because page builders allow you to break those rules, however, it’s not always that easy. You may find that you need to go to every page on your site to make updates wherever an element is used. Tedious and frustrating, for sure! However, for most people, the trade-off in design flexibility is and cost savings is well worth this risk.

For a long time, page builders have received a bad reputation in terms of search engine optimization. Because you are dragging-and-dropping elements onto a page, the HTML and CSS that is created is not controlled – or optimized – by a developer. In addition, the page builder software itself may not be well optimized and may require a lot of resources on both the front and back ends of the website. The result can be “page bloat,” or lots of unnecessary code on each page. That code makes the page load more slowly and means that the search engine spiders who crawl your site have to wade through a lot of unnecessary stuff, both things that are considered bad for SEO.

In many cases, the bloated code reputation is valid. Some page builders are much worse than others when it comes to this, so if you’re considering this option, it’s worth investigating which ones do better than others and be sure to follow development best practices even as you’re dragging-and-dropping elements onto a page. If you work with BetterWeb, note that our favorite scores very well on page speed tests and has built-in optimization tools to help with page speed.

There is no one-size-fits-all solution for building websites, and there are many factors you need to consider when determining the route you want to go for a WordPress site.

The fastest, cheapest, but least flexible option is to purchase an off-the-shelf theme and make your content and functionality fit within what it offers.

The second option – custom development – usually ensures that your site is well optimized and uses consistent design across pages, but it’s often the costliest, requires the longest development time, and usually results in a site that’s not very flexible.

Page builders, while they have a few risks, generally offer the best of both worlds. They offer quicker development times, powerful functionality, beautiful designs, and the flexibility to change your site or build landing pages without returning to a developer for help. That’s why we recommend a Page Builder for most of our clients’ sites, and why they’ll tell you the website development process with BetterWeb is easier and faster with BetterWeb and why their digital marketing gets better results with our sites. If you want to learn more about whether a page builder is the right solution for you, contact us for a no-obligation discussion.