Your life as a website owner or creator could be so much easier!
By saving time messing around with things which should be far simpler to do, like building and creating stunning web pages for yourself or your clients.
How?
Technology is racing ahead, and thankfully for us that means: you no longer have to tinker with HTML and CSS to create a stunning website.
And today, especially with WordPress, you can create easy to use, great looking web pages in a fraction of the time you used to. All by using what is known as Page Builders.
In this post I am going to compare in detail some of the best page builder plugins available for WordPress.
And at the very end, I will answer some of the questions (FAQs) you might have to save you looking for the answers.
Read the whole post if you dare! OR simply use the menu below to jump to the most relevant part for you.
And if you know someone who needs a page builder, send them over here to find out the best one for them too!
Enjoy!
Divi Page Builder
The Divi Page Builder is a powerful and easy to use page builder from Elegant Themes.
I have built quite a few sites using Divi and their page builder, and it is quite impressive.
It is very easy to get the hang of, and has almost all the elements you would need to build a stunning website for yourself or your customers.
So, without giving it any more hype, let's take a look at what the Divi Page Builder can do.
How Does The Divi Page Builder Work?
Like most page builders, there is a button at the top of the content in a page where you can choose to use the Divi Builder.
Note: If you do use the builder, you cannot use the WordPress editor. You can go back to it, but you then lose all your work in Divi Builder. Although this is quite a common issue with page builders.
Divi works with sections which are placed one after the other down the page. Inside each section is one row, by default, but you can add more. Or simply start a new section.
Sections can be dragged and dropped, so you can easily re-arrange content within the page.
These sections can then contain content in the form of modules (more on that later). The sections themselves can then be:
- full width (ie. outside of the content area, all the way to the browser edge)
- content width
- divided into columns of various sizes and arrangements
Divi Columns
Inside the rows are columns inside which you placed modules/content.
Of course you can also have columns of varying widths to help split up your content into more visually appealing layouts.
The kinds of column arrangements you can choose from include:
- 1/2 1/2
- 1/3 1/3 1/3
- 1/4 1/4 1/4 1/4
- or variations such as 2/3 1/3, or 3/4 1/4
Note: You can also manually choose a column layout if you don't find one in the selection they give you.
Here is a screenshot from the column chooser in the Divi Page Builder:
Divi Modules
Inside each column you can place any of the Divi Modules to help build your pages even faster.
The module range is huge, and includes everything from stylish pre-built elements like:
- Testimonials, About/Person
- Contact Form, Signup Form, Call to Action Heading/Button
- Social Media Follow Buttons
- Blog Post (Grid or List), Filterable Portfolio Display (Grid or List)
- Image or Video Sliders, Google Maps
You can also add simple structural elements to further help you display your content like:
- Divider (Dividing Line)
- Collapsable Boxes (aka. Accordion or Toggles)
- Tabbed Content (aka Tabs)
- Simple elements like Text, Image, Video, Audio
You can check out the full list of modules over here.
Fine-tuning Divi Modules
Each module comes with it's own settings, depending on what it actually does.
Normally this means you can fine-tune the module's content including all of the
- text, images, fonts
- colors, backgrounds (color, image)
- sizes and layouts (margins etc)
Each module also comes with advanced settings to really fine-tune each element's color, size etc. AND you can also add your own custom CSS if you want to take it a step further (ie. if you still can't achieve the result you wanted).
This is what a module configuration looks like:
Divi Page Builder in Action
Below you can see a page being constructed using the builder.
The blue sections are standard page width sections, while the purple are full-width.
You can then see in the third section that there are 4 columns containing blurb modules, which are image/title/text elements.
So, as you can see, it is quite straight forward to arrange your content using the modules inside their columns and rows.
Preview As You Build
Another great recent addition to the Divi builder is the ability to preview your pages as you build (instead of using WordPress Preview).
They provide a little "eye" icon when you are changing the settings, and then inside the preview (see below) you can choose what view you want to test:
- Desktop
- Tablet
- Mobile
This is a great way of not only seeing what you are creating, but pre-testing it in various devices to avoid huge amounts of re-work later.
Divi Takes It Further (Advanced)
Divi Theme has been around for a while, and their page builder, which has only recently been renamed "divi", is always improving!
Some of the more advanced features they have added lately, which are super useful, include:
- Global Rows (create them once, use them across pages - sharing the same copy)
- Content Library (create parts of pages, and re-use them easily in other pages)
- Locked Items within a page (stop others from ruining your hard work)
- Full revision control (so you can go back if you make a mistake)
- Fine-tune row or column layout / spacing (used to only be possible inside CSS code)
- Export/Import data to share layouts between different websites
So although Divi is like many other page builders, they have gone the extra mile to add really useful features that make this builder very solid and reliable for a web designer or simple website owner.
Not only that, but it is very simple to use and learn - I even recently worked on a site with a client, and he picked up how to use Div Page Builder within an hour!
Pricing
The Divi Page Builder comes as part of the Elegant Themes membership, which costs:
- $89 (per year) for all plugins and themes - Note even after one year you still have access to the plugin, just no updates or support
- $249 Lifetime access to everything
Thrive Content Builder
This blog post, and a lot of this website is built with Thrive Content Builder. (also called the Thrive Visual Content Editor)
Although I enjoy using Divi Builder, Thrive suits my needs better on my website because their themes and tools are more conversion/sales focused.
However, perhaps the biggest plus for the Thrive Content Builder over Divi Builder is that it is a completely visual builder - also known as WYSIWYG (what you see is what you get).
What does this mean? It means that you create your pages/posts right on the screen.
So, no previews. No Guessing. No Mistakes.
The Thrive Content Builder is almost 100% accurate to what will be visible when the page is published.
Below is a video walkthrough to show you in detail how Thrive Content Builder looks and works:
How Does Thrive Content Builder Work?
Thrive Content Builder can be launched from within a post, or in various locations around WordPress (posts/pages overview for example).
The builder adds a toolbar to the side (left or right, your choice) of the screen where you can choose what elements you want to add to the page and in what order.
Below you can see how it looked when I was creating this post:
Unlike more rigid page builders (like Divi), Thrive works in quite a fluid layout where you can add elements almost anywhere. You do not have to first add a section, then a row, then a column.
You can simply create a new page, use the builder and add content straight away.
Can I Still Use The WordPress Editor?
Thrive Content Builder works in an alternative view to WordPress, so it is something new to get used to.
You can still add standard WordPress content to a page or post, but it appears at the end, after the content builder's. So it is really best to use one or the other. No mixing.
However, if you want to create a page or post without the builder, you can certainly do that. And sometimes it is just far easier to do that. When you don't need anything fancy on the page.
Thrive Content Builder Elements
As I mentioned above, everything is about adding elements to your page with Thrive.
This may be as simple as adding a line of text (like this one) or an image or video.
But, you can also structure things more nicely with layout elements like boxes, columns, tabs and so forth.
Here is a list of many of the elements Thrive Content Builder provides:
(FYI: the list is made of three columns, and icon lists within the builder)
Simple Elements
- Text line
- WordPress editor area
- Custom HTML
- Custom CSS
- Content Container
- Image
- Video
- Icon
- Lists (with various icons)
- Button
- Star Rating
- Credit Care Icons
- Click to Call (Phone)
Advanced Elements
- Pricing Table
- Table of Contents
- Testimonial
- Google Map
- Countdown Timer
- Call to Action
- Guarantee Box
- Social Share Buttons
- Optin Form
- Data Elements
- Shareable Quote
Structural Elements
- Content Container
- Columns
- Content Box
- Content box with Icon
- Table
- Tabbed Content
- Page Section
- Borderless Content
- Blog Post Grid
- Blog Post List
Fine-tuning Elements
Thrive Content Builder provides a toolbar above each element when you add or edit it.
The contents of the toolbar are quite similar to other tools like WordPress, but also provide more specific things you can tune and tweak (many of them you normally need to know CSS to do).
Here is an example of what a text line's toolbar looks like:
It is a very simple yet powerful way to change the elements and can be done right "in page" so you quickly see the result. Another great advantage of such editors.
In general the toolbar let's you change such properties as:
- Color
- Font (size, line-height, bold/italic/underline)
- Left, right or centered
- Padding and margin (ie. spacing around the element)
Then if the element is more specific, you can edit its other relevant properties too - such as adding the image to a testimonial etc.
And because many of the elements are built of pieces (like a pricing table has various text elements) you can edit them each individually too.
The Thrive Content Builder is very flexible and intuitive in this way.
Advanced Features
Like with the Divi Builder, Thrive also has a lot of hidden gems to help you make the most of the builder and your time!
This includes some more powerful features such as:
- Undo and redo
- Full revision control (so you can step backwards to a specific version)
- Direct access to the HTML it is creating
- Templates (so you can save pages or elements for re-use on other pages)
- Landing Page templates (more on that below)
- Lightboxes (popups) - also more on that below
So the Thrive Content Builder also provides some great advanced features to improve your website!
Animation of Elements
Another hidden effect that the Thrive Content Builder can provide is the animation of elements on the page. This should be used sparingly of course, otherwise you will annoy your visitors.
However, you can easily animate an item on the page to bring attention to it (like a button or image) by working with the Event Manager of an element and animating it as it becomes visible on the page.
The button below would is configured that way to demonstrate the effect:
Thrive Landing Pages
Although you have only purchased the Content Builder, the team at Thrive still give you access to a lot of the functionality of their themes and other plugins such as landing pages.
The landing pages give you a huge library of stylish pre-built pages (currently over 100) that you can use to quickly and easily create pages for your website.
Here is a quick screenshot to show you what some of them look like in the Landing Page chooser:
The kinds of pages you get to choose from include:
- Home pages
- Webinar pages
- Product Launch
- Coming Soon
- Sales pages
- Download, Confirmation and thank you pages
- Podcast
- Video course
- Lead generation
And a lot of the pages are built around certain styles/themes so you can choose one kind of page and use their siblings (other pages) and get a particular look and feel very easily.
These landing pages really are a great way to quickly create your website, as well as get to know the content builder's capabilities.
Thrive Light Boxes
The content builder also gives you the ability to create light boxes (aka popups) from any element on the page, or via an event on the page (like a specific time, or when someone exits).
So if you do not yet have a popup plugin or a way to create two-step optins (where you click a button or image and get an optin popup) this provides it for you!
All you need to do is decide what element on the page you want to trigger a light box from, and then it gives you an editor using the content builder to create your popup/light box.
Here is an example of a simple optin lightbox I created:
Thrive Content Builder Summary
The feature set of the Thrive Content Builder (for a one off cost of $59) is huge.
You get a visual page builder with lots of great elements for quickly creating pages and the ability to tune them to your specific needs.
Not only that, but with the landing page templates you can quickly create almost any page for your website.
Add to that the lightboxes/popups and other advanced features and you have quite an impressive tool!
Pricing
Thrive Content Builder is the cheapest option in this review.
- Single Site $67
- Unlimited Sites $97 (personal sites only)
- Agency $49/month (all Thrive themes and plugins) for use on yours or client's sites
If you are only needing the plugin for your site, it is the cheapest around at $67.
Beaver Builder
A bit of a newcomer to the WordPress page builder scene, Beaver Builder is certainly worth checking out.
It is very similar to Thrive Content Builder in the way it shows you the final product as you make it (aka, WYSIWYG) but it has a few differences. The devil is in the detail, as they say!
How Does Beaver Builder Work?
Just like all the other page builders in this review, Beaver Builder provides an alternative view to WordPress, when you are using the tool.
You click the Page Builder button/tab on the top-right of the page and it opens the editor for you.
If it is a new page, the first thing you will see is an option choose a template, of which there are many (more on that below).
Then the editor panel is displayed to allow you to add modules and elements to your page:
This panel is then hidden when you are working on something, so you have to remember to reopen it if you want new elements to add (a minor downside I think).
Working With Modules
Beaver Builder is again similar to Thrive Content Builder in that it allows you to edit each module right on the page by simply hovering on it and then clicking. Below you can see what appears when you hover (copy, delete, move and edit icons):
Clicking on the settings icon (wrench) brings up the module editor. This has some general parts (which are common to each module) and other sections for specifics for that module. Below is an example of what that looks like:
So, Beaver Builder gives you full control over all aspects of a module, as well as the ability to easily move, copy, delete and so forth (as do all page builders).
It is all done right within the page, so is a great way to see the final product as you are working on it.
The Modules
One of the most important question with any page builder is what elements or modules does it come with?
Beaver Builder does not disappoint in that respect, with a variety of modules split into categories, which includes the row layout options, the basic modules (simple text, images etc), WordPress Widgets (these are simply borrowed from standard WordPress) and advanced modules:
Row Layouts
- 1, 2, 3, 4, 5 or 6 columns
- Left or Right sidebar
- Left and Right sidebar (both)
Basic Modules
- Heading
- Text
- Divider
- Video
- Image
WordPress Widgets
- Search
- Categories
- Tag Cloud
- Menu
- Recent Post
- Pages
- Meta
- Calendar
- Archives
- Adsense widget
- About Widget
- Advertisement
Advanced Modules
- Accordion
- Button
- Call out
- Call to action
- Contact form
- Content Slider
- Gallery
- HTML
- Icon
- Icon Group
- Map
Advanced Modules
- Menu
- Number Counter
- Posts
- Posts Slider
- Post Carousel
- Pricing Table
- Sidebar
- Slideshow
- Social Buttons
- Subscribe Form
- Tabs
- Testimonial
Like Divi and Thrive above, most builders offer very similar functionality and modules to help build your pages. There are slight differences, which may make a difference to you (so check the complete lists) but they are very similar.
The Templates
To help you get started with all your pages, Beaver Builder provides quite a range of templates.
They are broken down into categories, with the 14 home page templates in one:
And then the other page templates in another:
These content templates include:
- About page
- Contact page (personal and business)
- Various blog layouts
- Portfolio
- Pricing page
- Services
- Sign up
- FAQ
This means that you can almost create a whole standard website without lifting a finger (except to change the content of the page templates!).
Advanced Features
Beaver Builder is till improving compared to some of the other page builders (in terms of features, templates and modules) but the advanced features it does offer right now include:
- Globale settings (module & row spacing, mobile settings, etc)
- Save your own Templates (rows or modules)
- Duplicate a Page
What is Missing And Better
There are two main points worth mentioning about Beaver Builder, both a plus and minus.
Bad: It is hard to make full width layouts with the builder unless you use their theme.
To be fair, this is not always easy in any theme, unless the theme has such a template (most modern themes do) and Thrive & Divi both do a better job of it, usually :>
Great: Unlike Thrive and Divi, Beaver Builder adds code to your pages that means you can remove the plugin and it will still work. Not always the case with page builder (actually not that common).
Pricing
Beaver Builder has three tiers of pricing, where the main difference is whether is supports multisite and comes with the Beaver Builder theme:
- $99 Basic (all modules, 1 year support, no theme)
- $199 Pro (Beaver Builder Theme - easier to make full width, multi-site compatible)
- $399 Agency (Theme, Multisite plus network settings, full access to white label templates)
For just using the builder on unlimited sites, the $99 Basic is enough for most people.
Note: All licenses are for unlimited sites, and support is for 1 year. You can continue to use the plugin after one year, but get no updates or support. For that, you have to renew (40% discount for renewing within two weeks or the one year license ending)
Choose The Right Page Builder For You
In the next section I am going to help make your choice of page builder a little easier. I am going to do this by answering some of the most common questions people have when looking at page builders for WordPress.
If your question is not answered below, or somewhere in the content, feel free to get in touch with me directly and ask
Which Page Builder Plugin is the Cheapest?
An important question, if cost is an issue for you!
The cheapest page builder is: Thrive Content Builder at $67.
The next cheapest is Divi Builder at $89 (and you also get all Elegant themes and plugins).
Last comes Beaver Builder at $99.
Do These Page Builders Work With Any Theme?
Pretty much, yes! Of course, there are no guarantees that there won't be compatibility issues with any theme or plugin on WordPress. That is the nature of such an open and thus complex piece of software.
However, you can in almost all cases use there page builders with any page on any theme you have. (If they don't work, you get always get your money back within a certain timeframe)
The page builders do not rely on or use any part of the theme (except perhaps full width pages, which are useful for certain styles of pages elements in some of the builders - most themes have one of these if they are good.)
Note: Divi Page Builder comes with Elegant themes membership, so you get all their themes anyway. And Thrive can be bought with their membership or a single theme. Beaver builder pro version and up, have a specific theme you get with the builder.
Which Page Builder is Easiest to Learn and Use?
This is a very subjective question, but I will try to answer it based on my experience with each.
Divi Builder is very structured with sections, rows, columns and elements. And you have to preview the page (or inside elements) to know how it will look. It takes a little getting used to, but configuring elements is quite straight forward.
Thrive Content Builder and Beaver Builder are "what you see is what you get" so you build the pages visually using a drag and drop style builder. These seems a lot more intuitive and easier to learn. Of course, there are still a lot of settings and Beaver builder is a little easier to get around I find. But, Thrive, once you have learnt, gives you all the settings in one view - which is faster and easier in the end.
Do I Need To Be Super Techy To Use These Page Builders?
Like I mentioned above, there is a learning curve to any powerful tool like a page builder. After a bit of trial and error, you will figure out how to use any of them quite quickly.
However, to get the most from them (ie. fine-tuning layouts and create perfect websites) it will take some learning as you need to understand things like CSS (fonts, margins, padding, etc).
That is not to say it is a must, as you can ignore most/all of the more complex settings and still create a nice looking page.
Which Page Builder Has The Most Elements To Build Pages?
That is a hard question to answer (yes, I am too lazy to count them all and compare).
I think it is close between Beaver Builder and Thrive Content Builder, with perhaps Beaver builder winning.
But, in my opinion, this is not the thing that decides the purchase. Although if you desperately need one kind of element, check out the details on each to see if they have what you need.
Can I Use The Builders on Blog Posts Too?
Only Thrive Content Builder is able to be used on posts and pages. In fact, this post is created with Thrive.
That is not to say you need it, but it gives you the ability to add stylish elements to a post - such as boxes, dividers, animations etc.
Which Builder Comes With Pre-built Page Templates?
Having templates to quick start your pages is a huge help for a website owner or designer.
Thrive Content Builder comes with (over 100+) landing page templates, including everything from home pages, optins and sales pages, to thank you and webinar pages. These templates are conversion/sales focused.
Beaver Builder on the other hand comes with far fewer templates (around 30 I believe), but they are more focused on helping you build your website faster. They include things like a variety of home pages (14) as well as FAQ, Pricing, Contact etc.
Of course such pages can easily be built with all the builders using the huge range of elements they all have. But having a template to start with speeds things up.
Can I Collect Email Addresses Using The Page Builder Elements?
All the builders come with optin form elements that you can place on your pages. These enable you to collect email addresses for your marketing or newsletter.
Thrive Content Builder goes one step further giving you the option to add:
- 2-step optins via Light Boxes/Pop ups (these are triggered by clicking on a link/button/image)
- Exit Intent Lightboxes - show a popup when someone is leaving the website
What Happens If I Delete/Remove The Page Builder Plugin?
This is where most page builders have their biggest weakness. You are dependent on the plugin, and cannot remove it or deactivate it. Then your pages break or disappear.
This is true of both Divi Builder and Thrive Content Builder.
However, Beaver Builder creates HTML so once you remove it, everything still works fine.
Final Thoughts
I love using page builders, and as a web designer and developer I could actually do it all by hand.
But why bother! When you can create stunning pages with these builders in no time.
Will you be able to create pages like a pro? Almost.
But I don't think that is the point. You can create great looking pages, without the need for a web designer.
You will need some time and patience though. Don't forget you are learning a new tool and skill.
So, if you don't have the time, and are busy running a business, perhaps you are better off getting someone else to create your next web masterpiece! That is why my clients pay me to spend weeks on their sites :>
But if you do have the time, and want to get your hands dirty, page builders enable you to be as close to a pro as you can get.
Image Courtesy of Dave RosenBlum