WordPress page builders are increasingly becoming the norm and it’s easy to see why. Page builders allow you to the edit your webpages with a visual representative of how the page will look, typically using drag-and-drop blocks.

Other website platforms, such as Wix, already have their own page builders, so it’s important WordPress embraces these advances too.

Virtually all the web designs we create here at Primary Image now include a WordPress page builder, which our clients like, and it also speeds up our development time.

However, after being invited to participate in a panel discussion at this month’s WordPress London event (pictured right), I thought I’d do a quick comparison of the different page builders on the market, some of which I’ve used for the first time!

What are the advantages of using a page builder?

  • You can visualise how the page will look when published.
  • They allow complex layouts and designs to be created quickly.
  • You don’t have to use shortcodes to create page layouts (so old school now!).
  • You’re not restricted to set layouts, like with custom fields.
  • Developers can often extend page builders with custom-designed blocks.
  • You can sometimes save blocks to re-use on other pages.

What are the disadvantages of using a page builder?

  • There’s clearly a learning curve with using new software (I’ll come onto this below).
  • There can be a performance impact on your website (again, I’ll look at this).
  • You’re tied into using that page builder, until your next major website refresh. If a page builder is uninstalled, you’ll lose all your formatting (and maybe your wording too!).
  • Without the aid of an experienced designers, users can accidentally mess up layouts or make poor design choices, which ruins the professional design. Though, I’m aware some page builders can now lock the layout, meaning only text can be edited, which solves this issue.

TESTING WORDPRESS PAGE BUILDERS

I installed seven different WordPress page builders and ran some tests:

  • Beaver Builder Lite  (1.10.7 – August 2017)
  • Divi Builder  (2.0.14 – June 2017)
  • Elementor  (1.7.1 – August 2017)
  • Fusion Builder  (1.2.1 – July 2017)
  • Gutenberg  (1.0.0 – August 2017)
  • Page Builder by Site Origin  (2.5.11 – August 2017)
  • Visual Composer  (5.2.1 – August 2017)

Each of the page builders were installed on a clean WordPress installation (version 4.8.1), running the default Twenty Sixteen theme.

There are some limitations of this test, which I’ve noted later on…

My basic test involved creating a simple two-column layout, containing just over 100 words, which simply looks like this:

What I wanted to test:

  1. How do the page builders affect website speed / page weight?  (This is something I’ve always been interested in, and I’ve given talks on this subject!).
  2. How easy are they to use?
  3. What happens if you leave the page builder.

 

HOW WORDPRESS PAGE BUILDERS AFFECT LOADING SPEED / PAGE WEIGHT?

WordPress is shown here as the baseline (no page builder installed), then we can see the impact each of the page builders have on page weight.

All I’ve tested here is a simple two-column layout to see what resources the page builder loads in the background by default.

It appears some page builders are selectively loading what they need, depending on what blocks you’ve used, rather than loading all the resources. That clearly makes a lot of sense.

The raw data is shown below:

Total Files Loaded JavaScript files CSS files Page Size
WordPress (base) (13) (6) (3) (164kB)
Page Builder by Site Origin +1 +0 +1 +1kB
Gutenberg +1 +0 +1 +5kB
Beaver Builder +2 +1 +1 +10kB
Visual Composer +2 +1 +1 +64kB
Elementor +13 +5 +7 +95kB
Divi Builder +11 +6 +4 +151kB
Fusion Builder +68 +67 +1 +218kB

VISUAL COMPOSER

Visual Composer is one of the most popular WordPress page builders, running on over two million websites. It’s often found bundled with premium themes and I’m pretty familiar with this one.

Impact on page weight:

There’s an impression that Visual Composer is a bit of a resource hog, but I was pretty surprised by this test. The page builder has been optimised fairly well, adding only two files and 64kB of download size to the page load, which isn’t going to trouble us!

Ease of use:

You activate Visual Composer on any post or page by clicking the “Backend Editor” or “Frontend Editor” buttons. I’ve personally always used the “Backend Editor” option, which stays within the familiar WordPress interface.

In my test, adding two text columns, it’s straightforward to use and works effectively.

Adding new blocks could be a bit overwhelming for new users, with a huge screen of options! However, I do like the small description associated with each block, and it’s easy for developers to add their own custom blocks (as we do here!).

Leaving the page builder:

I wanted to test what happens when you leave or deactivate the different page builders.

If you switch between Visual Composer and normal WordPress mode, it doesn’t do any harm to the pages. The shortcodes are left in place, which Visual Composer recognises when it’s next activated.

 

BEAVER BUILDER

I’ve only used the free version of Beaver Builder for this test, but that gave me a good idea of its capabilities. It seems pretty popular within the developer community, with over 275,000 installs.

Impact on page weight:

It only added 10kB to the page download size in our test, so pretty respectable!

Ease of use:

It’s activated by clicking on the “Page Builder” tab:

You’re then taken to a front-end view of your webpage, so it’s very visual!

Blocks are dragged from the sidebar and it’s easy enough to use.

Leaving the page builder:

If you try going back to the default WordPress editor, Beaver Builder strips away all the page builder layout, so you’re left with clean text.

It effectively saves the page builder view as a separate version, which seems useful, so you can always go back to it:

 

FUSION BUILDER

Fusion Builder comes with the Avada theme, with over 350,000 sales, and it’s one of the most widely-used premium themes on the market.

Fusion Builder is not currently released as a standalone product, so this test may be a little unfair, but apparently it will be sold as a separate product in the future. And, as our test shows, Fusion Builder does appear to run ok on non-Avada themes.

Impact on page weight:

Wow! It’s very heavy on performance and clearly loads everything in the background. Fusion Builder added 68 files to each page load, which will have a noticeable speed impact to your visitors.

If you use Avada (or Fusion Builder), I’d strongly recommend using a combining plugin.

Ease of use:

It’s similar to Visual Composer, so you click on a button to activate the page builder view, but you stay within the familiar WordPress back-end.

I find this page builder a bit harder to use, particularly with how it adds columns. It’s not quite as slick as Visual Composer.

Compared to other page builders, adding new blocks is fairly tucked away into a small bar, which may not be as obvious for some users.

The popup screen to add new elements is functional enough, but takes up a lot of space!

Leaving the page builder:

Like Visual Composer, it relies on shortcodes, and you can switch between the normal WordPress editor and Fusion Builder without doing any harm.

However, it leaves a lot of mess behind! The shortcodes include all the options, even those that have been left blank:

 

PAGE BUILDER BY SITE ORIGIN

I’d heard of this one, but never used it before. It’s a free plugin and has over one million installs.

Impact on page weight:

Out of all the page builders I tested, this had the least impact on page weight, adding only 1kB to the total page load, which is really impressive!

Ease of use:

It’s activated by clicking on the “Page Builder” tab:

The first thing that struck me was it looks quite old-fashioned and not particularly nice to look at. The buttons and text seem a bit small.

Leaving the page builder:

Page Builder by Site Origin doesn’t use shortcodes, but instead puts HTML directly into the saved page.

When I tried switching to default WordPress mode, then back to this page builder, it caused problems because it seems TinyMCE had altered the code. This rendered the page builder layout unusable.

I’m afraid I found this page builder to be my least favourite of the bunch.

 

ELEMENTOR

Elementor has had over 1,500,000 downloads. There’s free and premium versions available.

Impact on page weight:

This page builder makes visitors download thirteen extra files (JavaScript and CSS files), which isn’t great for speed optimisation, but the additional download weight only comes in at 95kB, so it’s fairly minimal.

Ease of use:

Elementor is activated via a button in the WordPress editing screen. It then loads a front-end view, so similar to Beaver Builder.

It’s got a nice interface, making it easy to drag and drop blocks.

What I didn’t like, however, was my text had to be edited in the tiny sidebar, which I found quite restrictive. If I had been writing a lot of content, this could be annoying!

Update – thanks to Alan posting a comment, who pointed out the sidebar can be expanded a bit further, which I didn’t notice originally! Perhaps that could be made clearer in the user interface design? Though it still feels a bit constrained, compared to other page builders.

Leaving the page builder:

Elementor effectively locks you from editing content in the default WordPress screen.

If you do decide to go back to the default WordPress editor, your content is converted into normal text, which I think works well.

 

GUTENBERG

Gutenberg is basically how WordPress will look in the future, which is planned to launch with WordPress 5.0.

It’s only released for beta testing at the moment, so this test isn’t entirely fair! Though it’s already attracted a huge amount of discussion within the WordPress community.

Impact on page weight:

Gutenberg is very lightweight, but as it’s going to be bundled into WordPress core, that’s to be expected really!

The expectation is that theme builders will add their own styles to work on top of Gutenberg.

Ease of use:

Personally, I found it very fiddly to add columns, because the menu to add new blocks is hidden away. You have to do lots of scrolling to find and add elements.

I imagine beginners would find this quite hard to use. The interface is fairly minimalist too.

This is, though, only the start of Gutenberg, and it’s certainly going to be developed much further over the coming weeks.

Leaving the page builder:

It’s got a clever interface, which locks content that has been edited outside of the page builder.

As this will become the “default” WordPress editor, I guess it’s almost irrelevant to look at what happens if you switch it off!

 

DIVI BUILDER

The Divi theme is one of the most widely-used premium themes, although its Divi Builder is sold as a standalone product too.

Impact on page weight:

In my test, Divi Builder made visitors load an extra eleven files (an additional 151kB of data), so it’s not particularly well optimised for speed.

Ease of use:

The first thing I noticed is that it’s REALLY colourful!

It takes a bit of time to understand how it works, but I found it fairly similar to Fusion Builder, where you add blocks via buttons within the layout.

Update – thanks to Grant for posting a comment, who pointed out you can use the front-end editor too (called Visual Builder).

Leaving the page builder:

If go back to the normal WordPress editor, you basically lose all your content, which isn’t ideal.

I think some of the other page builders handled this better, such as where they convert your content back to plain text.

 

FINAL THOUGHTS…

It’s been really useful to see how different page builders have their own ways of doing things. Clearly some are better than others in different areas.

The surprise for me has been, on the whole, how efficient page builders are to page weights (with the exception of Fusion Builder!).

Though all eyes at the moment will be on the new WordPress editing interface – Gutenberg – so it’ll be interesting to see how this evolves in the coming weeks and months…

 

Thanks to Todd Halfpenny for the WordPress London picture above.