Visiting WordPress blogs, bloggers that use WordPress and others that use WordPress for their bread and butter, there are a lot of different ideas of what the best page builder is. Top contenders are Divi, Beaver Builder and a new one to the market Elementor. Personal bias aside, I wanted to apply a bit of a scientific method and see which builder is best. In my experiment, I employed three tests:
- Time to build a site
- Site speed tests
- Disabling plugin results
- Responsive styles without any further modifications Let’s get to know the builders.
Let’s get to know the builders.
Page Builders
Beaver Builder
About
Beaver Builder started in 2014 by three friends who in their agency work were looking for a way to build faster sites. Robby, the co-founder, writes 2014 in Review: The Beaver Builder Story | Beaver Builder. There are over 1,000,000 websites using Beaver Builder today. They support the open-source community and have a lite version of their builder) in the WordPress plugin repository. They have three products, the builder, the theme and a product called Themer allowing you to them all areas of your website, like the header and footer.
Join over 1,000,000 websites that are using and loving Beaver Builder.
Pricing
The paid version fo the plugin for premium support and premium features starts at $99 / year for a single site. This jumps up to $199 for unlimited sites and the Beaver Builder theme. There is also a lite version available for free.
Add-Ons
The beauty of open source is that the community can join in and create even additional plugins that extend the builder. For Beaver Builder, there are two products that are owned by the same company, the theme that comes in the Pro and the above licenses. Themer allows you to modify areas of the theme not usually accessible to page builders such as the header, footer, and archive pages. Themer is a separate purchase for $147 which includes a license for unlimited sites.
In addition to the products offered by Beaver Builder, there are notably two additional packs that add functionality.
- Best Beaver Builder Addons – PowerPack Addon for Beaver Builder $69
- Ultimate Addons $69
Divi
About
Elegant Themes and Divi claim to fame is less the Divi builder but more the Divi theme which includes the builder. Elegant Themes started as a theme company and launched in 2008. They released 86 themes until 2013. In 2013, the Divi theme was released. They boast 601K customers and have been in business for 11 years with 85 team members spanning across the globe. The Elegant Themes website defines, “The Divi Theme is the ultimate all-in-one website building solution for WordPress. It comes with the Divi Builder pre-packaged and wraps it in a fully customizable theme that works perfectly with all builder elements.” In 2015, the Divi builder was released to be used with any theme. Divi is no longer tied down to the Divi theme.
Divi is a theme and builder by Elegant Themes has long been a favorite of many to create WordPress sites quickly. This infographic designed by divitheme.net shows the history of the theme and builder.
Pricing
Unlike Beaver Builder, Divi has one license that includes unlimited websites and unlimited users. The license also comes with perks like Extra, Bloom, and Monarch. Pricing is simple either $89 yearly access or $249 for lifetime access. This pricing makes Divi more accessible to agencies and individuals just starting out.
Add-Ons
There are many add-ons for Divi. This post names 10 that extend this theme and builder, 10 Awesome Third-Party Divi Plugins | Elegant Themes Blog. There is also a more comprehensive add-on package called Ultimate Divi Builder Addons – Give superpowers to Divi Builder! for $59.
Elementor
About
While Divi is the oldest member of this trio, Elementor is the new kid on the block launching in 2016. Elementor though has quickly gained popularity and according to its website has 3,000,000 active installs. They state their mission on their website, “Our mission is to empower web professionals to create powerful and beautiful websites using the most comprehensive all-in-one design solution.”
Pricing
Like Beaver Builder, Elementor has a free version of its builder in the WordPress plugin repository. For additional features, the pro versions start at $49 for one site. Plus includes 3 sites for $99 and expert includes 1000 sites for $199. This pricing is super accessible especially for one site for those starting out or on a tight budget.
Add-Ons
With its popularity, there are also plenty of add-ons to extend the page builder. The Elementor website has a listing of some of the most popular add-ons, The Best Elementor Addons.
The Experiment
To make things as fair and scientific as possible, I tried to set up the sites as similar as possible. I tested four main items, the time it took to build the site, page speed, disabling the plugin, and mobile view without any customizations.
I started with the hosting on WPMU DEV. They offer free hosting to their members and it is blazing fast!! Luckily, you can set up 3 sites in your hosting plan for free. The setup of these was a breeze and super quick which was a nice bonus. I set up three sites:
*These sites will be up until I need the server space for something else. No guarantees on availability. *
I wanted to create a simple VA website as an example and try within limits to make all three of them as close as possible using their respective builders. So Beaver Builder VA, Divi VA, and Elementor VA were born. I used this sample site Homepage – VA Agency as my generic goal. I did take some liberties for less content such as taking away a section on the home page, simplifying dummy content and colors. Lastly, I used the free and popular Ocean WP theme as the underlining theme. So let’s start the tests! For our baseline, we have the same theme, same hosting environment and a site that we are reproducing as close as possible. I also added the following tweak of CSS to all three sites. This was the only custom CSS used everything else was purely created with the builder.
.page-header{
position:relative;
background-color:#f5f5f5;
padding:34px 0;
display:none;
}
aside#right-sidebar{
background-color:white;
padding:20px;
}
.blog-entry.large-entry {
border-bottom: 1px solid #f1f1f1;
margin-bottom: 30px;
padding-bottom: 30px;
background-color: white;
padding: 20px;
}Time to Build and General Thoughts
Beaver Builder VA
A couple of side notes with Beaver Builder:
- First, this is the builder I use on a daily basis and know inside and out.
- Second, I would say this build took the longest because it was first and I was figuring out the theme. Once the theme was set the actual building of the pages was about 40 minutes.
Since I know Beaver Builder well this might not be as scientific but anyone running these tests may know one of these builders better. One thing, I noticed about Beaver Builder, the button with an arrow is not a straight forward option. Overall, it seems like it turned out to be a pretty good match.
What I liked:
- Fairly easy to match the example site pretty closely.
- All icons were available
- Call to actions had the option for inline styling
Roadblocks:
- Background image without repeating was difficult to accomplish
- Had to go in and change a lot of the colors as the contrast was low
- Beaver Builder still seems to have many clicks to accomplish things. There are multiple tabs for each panel and even after years of using it I still get confused about where things are located.
Divi VA
The site for Divi took me about 70 minutes to complete. I have not used Divi in years so the interface for the new version was completely new to me. There were two things that caught me completely off guard. First, there seems to be no heading module. I had to use the text module and then modify it every time in the editor. There was formatting for heading but it didn’t apply to the text headings. I might have missed something but this was super annoying. Second, the naming of the modules is, of course, going to be different. In Divi, what I am used to being a Callout in Beaver Builder is called a Blurb. I had built the whole section on the Services page before I realized what the blurb module contained. Divi seemed the hardest to match to the original site between missing icons and background colors being funky.
What I liked:
- Option to start from a previous template was nice
- Option to save a module to use later super easy
- Three sections to every module – content, design, advanced (which I never clicked)
- Changing colors for an element was simple and easy to do
Roadblocks:
- Icons missing to match design: personal, travel and affordable.
- Background color on the builder is white which is misleading. I had to go back and edit the page because the text was not readable. The actual background of the page is not white.
- Call to action items do not have an option for inline.
- No heading module
- Searching for icons was difficult with no search function. The only option is to try to go through the long list of icons and pick the right one.
Elementor VA
With Elementor the site took about 50 minutes to build. I did not change all the colors or fonts because the defaults from the theme did not carry over and it was just frustrating. The options were clear and it was easy to find the correct modules. At first, I used the free version of Elementor and did some tweaking to get it to look right but once the pro was used it was straight forward to get the correct modules. To be fair, I used the pro version of Beaver Builder and the only version of Divi which is paid. So I decided that I should use the Pro version of Elementor as well.
What I liked:
- Heading module!
- Navigator has a nice integration. Beaver Builder has something similar but it is hard to find and therefore I don’t use it.
- Search for icons.
Roadblocks:
- No posts module – have to purchase pro version – workaround recent posts widget
- No pricing table – have to purchase pro version – none yet
- No Call to Action – have to purchase pro version – work around two column heading and button
- No forms – have to purchase pro version – workaround Forminator form shortcode
Speed Tests
Speed is super important for users today and any lag caused by a builder would be negative. I ran all three sites in GT Metrix. Below are the videos of the page loading and the full report from GT Metrix. Divi was noticeably slower and Beaver Builder and Elementor were hand and hand. One scored 98 and the other 97. Very fast. If you figure in the # of requests, page size and fully loaded time, I would say Beaver Builder wins. Check out the comparison report elementor.wpmudev.host, divibuilder.wpmudev.host, beaverbuilder.wpmudev.host and the individual reports in each section.
Divi VA
Divi had the longest fully loaded time at 3.7s and the largest page size at 2.32 MB. Divi did slightly better than Elementor in the total number of requests at 37 vs 39, Beaver Builder only had 33 requests. The PageSpeed report was the lowest at 95%. Check out the full Divi Speed Report.
Elementor VA
Elementor came in second. With the highest PageSpeed Grade of 98% and a slightly lower YSlow Grade than Beaver Builder (80%) at 76%. Elementor came in second for fully loaded time (3.1s) and total page size (2.14MB). Elementor did have the highest number of requests at 39 vs. 37 (Divi) and 33 (Beaver Builder). Check out the full Elementor Speed Report.
Beaver Builder VA
Beaver Builder came in first place with a PageSpeed Grade of 97% and a YSlow Grade of 80%. It by far did the best in fully loaded time at 1.9s (a full second faster than the other two) and the smallest page size (2.08MB) and the number of requests (33). Check out the full Beaver Builder Speed Report.
Disabling Plugin
After a period of time, you might find that it is time to move on to a different builder or setup. Sure all the builders can do drastically new looks and change with what you need but still will the builder last 20 years? By then Gutenberg may do everything or WordPress may not even last that long. So what happens when you disable the plugin so you can move on to something different. How much of your content is still visible if the page builder is disabled. Sure it might not look pretty and stylized but does the content still make sense? Here are the results.
Divi VA
Divi, unfortunately, depends on shortcakes for the layout and design. Therefore, when you disable the plugin you are hit with the content in the middle of large or smaller blocks of shortcodes. Not the best for moving large amounts of content!
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.27.4″][et_pb_column _builder_version=”3.27.4″ type=”4_4″][et_pb_button button_text=”What We Do” _builder_version=”3.27.4″ button_alignment=”center” background_layout=”dark” button_url=”#” hover_enabled=”0″][/et_pb_button][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”3.27.4″][et_pb_row _builder_version=”3.27.4″][et_pb_column _builder_version=”3.27.4″ type=”4_4″][et_pb_blog _builder_version=”3.27.4″ posts_number=”3″ show_thumbnail=”off” fullwidth=”off” hover_enabled=”0″][/et_pb_blog][/et_pb_column][/et_pb_row][/et_pb_section]Chris Lema also discusses this recently on his blog post about the Divi theme, If you use the Divi theme with WordPress, it better be forever.
Elementor VA
Elementor, on the other hand, does not show the shortcodes when disabling the plugin. The content doesn’t look pretty but it is available for search engines and just looks like some of the CSS was disabled. On the front page, the recent posts section is missing completely.
Beaver Builder VA
Similar to Elementor, the site in Beaver Builder disables fairly cleanly. Again, it doesn’t look super pretty but when things go awry and you need to do something drastic you are not so concerned about it looking nice but want the content to still show up and be fairly easily readable.
The Winner
At the end of the day, the tests only do so much. The choice of a builder is super subjective and it varies among users. I find Beaver Builder to be the best and it also came out on top of some quantitative tests that could be performed. For me seeing shortcodes is a huge red flag. I even tend to email site owners that have shortcodes showing because it just looks like the site is not really complete or taken care of. The speed tests were interesting. Especially to see Beaver Builder load the page so much faster than the others. You can see a strip of how it loads and see how empty the others are in those first seconds until it loads. Again this is a huge thing for me because speed these days means a lot to users. If it takes too long to navigate your site I am going to leave. It is hard to get super high scores all the time but I think these tests show that it is possible with a page builder.
What is your favorite page builder? Are you a Divi lover or do you like Elementor? I find many have not heard of Beaver Builder. This might just convince you to check it out! My packages, with fully designed sites, also come with Beaver Builder and Themer and the theme. That is a HUGE value ($346)! I believe in Beaver Builder and want to spread the message and usage as much as I can. I have the agency license and with that can spread the love. Contact me today to chat about your site!
BY TECHIE MAMMA