Beginner’s WordPress Page Builder Tutorial 2020

John // Tutorials


January 18  

Have you ever looked at an absolutely beautiful website and thought to yourself, “How in the world did they do┬áthat?” Well in this WordPress Page Builder Tutorial, I am going to show you 5 different popular page builders in WordPress, and we will build the same home page step by step with each one so you can see exactly how each builder works.

By the end of the post, you will learn:

  • The 5 best WordPress Page Builders in 2019
  • The fastest and easiest builder to make beautiful designs
  • How are the page speeds in the end?
  • Which page builder is right for you moving forward.

Let’s dive in…

What is a WordPress Page Builder?

Before we get ahead of ourselves, let’s do a quick definition…

What is a WordPress Page Builder?
A page builder is a plugin, theme, or other WordPress feature that allows you to create advanced designs and layouts for your WordPress-based content, without the need of custom coding.

There are 5 page builders that we are going to look at in depth in this article:

  1. Gutenberg (the default WordPress editor in 2019)
  2. Brizy
  3. Divi
  4. Thrive Architect
  5. Elementor

Are these the only 5 WordPress page builders on the market? Absolutely not, but they make up the majority of the market share, have incredible features, and are strongly supported by the WordPress community.

Is Gutenberg Really a Page Builder?

You will find some people claiming that Gutenberg is not a “page builder,” but instead more of a “content editing experience…”

And they have a point. Gutenberg’s stock capabilities are a bit limiting and you will find yourself struggling to build whatever you are imagining.

But when you add some of the 10 most useful plugins for Gutenberg to your site, your opinion will change.

By the end of this article you will see clearly that you are equally capable of creating beautiful pages in Gutenberg as you are in other powerful WordPress Page Builders.

The WordPress Page Builder Experiment

To best show each of these page builders’ capabilities, I decided to run a standardized experiment.

I took a sample home page (built originally in Divi) that I would attempt to rebuild as close to perfect as possible with each of the other page builders.

Then I created a blank website using the same host (bluehost), and attempted to recreate the home page as close as possible.

After the build, I ran 5 speed tests using GTmetrix to see how each page builder performed. I also noted the relative build speed and ease in the table at the end of the post.

To keep each test as consistent as possible, I:

  • Used the same Astra theme for all builds (only exception is Divi because it is both a page builder and a Theme combined)
  • Installed no additional caching plugins or speed enhancements. I used the default settings from Bluehost (although there are tons of ways to speed up your bluehost site!)

Let’s get into each build specifically.

Gutenberg Page Builder Tutorial

I was extremely curious how Gutenberg would perform, but I didn’t want to limit myself to the basic functionality. I wanted to give it a real chance against the matured page builders, so I installed the following plugins to supercharge Gutenberg:

  • Advanced Gutenberg
  • Atomic Blocks
  • Editor Blocks
  • Kadence Blocks
  • and a few others mentioned in the video

At the end of the day, I mainly used the functionality of Kadence blocks, but it was nice to have a wide range of potential blocks at my disposal. It helped my workflow stay smooth.

At the end of the day, the Gutenberg build went much smoother than expected, and the performance was wonderful – an average of 1.0 second load times across 5 attempts.

Gutenberg becomes a powerful page builder when you power it with the right plugins.

Brizy Page Builder Tutorial

Brizy is a newcomer in the WordPress page builder space, but they have one of the most attractive user interfaces I have seen for page builders. But does that beautiful interface translate to a more efficient build process?

…Not according to my experiment.

As I was building, I noticed a few struggles.

  • Managing images wasn’t as seamless as I’d ilke
  • Overlays didn’t respect transparent backgrounds nicely
  • While the minimal user interface is nice, I found myself digging through menus quite a lot.

Admittedly I have not spent nearly as much time with Brizy as I have with other builders, but I expected to have a better experience during this experiment. Still, the resulting page looked quite nice, and loaded in a decent 1.6 seconds.

Many of these concerns have already been addressed by Brizy and it is developing quite nicely!

Divi WordPress Page Builder Tutorial

As I said before, the model I was replicated originated in Divi, so this might not have been the most fair example. Needless to say, Divi was able to nicely replicate the page built, with minimal troubles.

Where the real challenge using Divi came in… was in the resulting page speed.

After 5 speed tests, Divi averaged an underwhelming 2.3 seconds page load speed. Now that probably doesn’t seem too bad, but you have to remember this is on a completely barren website. As time goes on, more and more will be added which will continue to slow down the site. So starting out more than twice as slow as Gutenberg means that Divi will never be the speed demon that we all know our visitors want.

Thrive Architect WordPress Page Builder Tutorial

Thrive themes is all about conversion optimization, so I was excited to see how this builder compared to the competition.

The majority of the build process was very smooth. I was able to duplicate, drag and drop, and do most anything easily with the builder.

One area where I always get frustrated when building with Thrive Architect is when it comes to mobile responsiveness. Once I was done building the page, I had to double check margin and paddings behind each new section to make sure that the content didn’t push directly up to the border of the screen.

This isn’t a bug on Thrive’s part – more of a design decision. They give you more control over the build process than any other builder on this list, but as a result, you can’t assume anything will really be done for you, so you have to check every nook and cranny before you hit publish.

The result? A great looking page that also loaded in 1 second flat! The same as Gutenberg, and faster than any other premium page builder. Those guys at Thrive are really cooking up something special.

Interested in Thrive Architect?

Thrive is working on a game-changing theme builder that will work beautifully with their platform. Check out their membership and get first access!

Elementor WordPress Page Builder Tutorial

Elementor was great fun to use. I never found myself struggling to build out the next section, and it is one of my least familiar builders on the list.

I quickly knocked the page out with assistance from their Elementor Pro widgets, which make the entire build process easier than others. The downside of Elementor is that the pre-built widgets tend to reduce your creativity when compared to Thrive. Each block gives you a few options to customize, but it pales in comparison to the blank canvas Thrive Architect gives you to work with.

But for folks who want an all around good page builder that won’t hinder their efficiency, Elementor is a great choice. But how did it perform?

After 5 speed tests, Elementor averaged 1.8 second load times… not the fastest in the pack, but still a good bit ahead of Divi.

I am also impressed with how Elementor and Gutenberg are working well together – they have released the ability to import pre-built Elementor content directly into Gutenberg – a great move.

You can read my full review of Elementor here.

WordPress Page Builder Tutorial – Major Takeaways

At the end of the day, here is how the page builders stacked up against each other:

Thrive Architect and Gutenberg tied for first place with page speed!

Regarding overall rating, Gutenberg just beat Thrive Architect, but some of that was due to my pure surprise at how capable Gutenberg really was.

There are several editing features where premium page builders are definitely superior and probably will be for some time, but the pure accessibility of Gutenberg makes it a very strong contender for anyone looking to get into building more beautiful and complex layouts on a budget.

Some of the other benefits of using Gutenberg throughout your site are that:

  • Building landing pages and blog posts will use the same editing experience, which will make you a more efficient builder
  • Using a single build experience will also keep your branding more consistent
  • Developers are currently in a land grab to build the best Gutenberg blocks available. This competition means that Gutenberg functionality will be advancing at an incredible pace in the future
  • While free, there are several Gutenberg features that are extremely premium, and already available.

Which WordPress page builder is right for you?

I’ve learned that most page builders follow the same thought process and philosophy, so ultimately it will come down to personal preference, cost, and integration needs.

But when it comes to integration, nothing will be more flexible than Gutenberg, as every developer will ensure their tools work with the default wordpress editor.

So instead of considering Gutenberg OR, I think the decision is Gutenberg AND, as the content creation process in Gutenberg is just wonderful and only getting better.

Check out my full Gutenberg Course

If you want to build more efficient, beautiful, and effective websites with Gutenberg, then you need Gutenberg Hero.

About the Author

John Whitford is an entrepreneur who has built over 12 profitable online blogs and businesses. He's also the founder of Unbeatable Tech, a data-driven digital marketing company that specializes in sales funnel implementation for both his own businesses and clients alike. John loves to be a beach bum while brainstorming new ideas for marketing strategies, but he's always excited to take on another project!