We partnered with Corey Potter from Fuel Your Photos on a really fun and extensive test on page builder plugins.
The idea came up because in so many Facebook groups we found people asking questions about page builders and comparing WordPress features to Squarespace features. We know page builder plugins can make that migration easier, and really make maintaining websites easier for all photographers.
To make the test fair and even across the board, we did a few things. First, we used cacheless cloud hosting, which does not come bundled with a page builder at the time of writing this. The servers are all based on the east coast in the United States. The servers used contain no caching, unlike the live servers at Imagely Hosting. The servers are also cloud servers which help websites load extremely fast.
Each plugin was purchased, except Elementor which is free, but no license was inserted. That was done on purpose because it happens all the time in the photography industry, or licenses expire and are not renewed.
We also used the Twenty Sixteen theme, which is pre-bundled with fresh WordPress installs at the time of testing.
It's important to know which versions of the plugins we tested. If you're using an older version then we recommend updating to the latest, as the developers likely improved speed, quality and added new features and addressed compatibility or security concerns. If you're using a newer version than what we have listed then good for you, and hopefully some of our findings have been addressed.
- Divi 1.3.10
- Cornerstone 1.3.0
- Beaver Builder 1.8.4 (Standard Version)
- Elementor 0.74
- Visual Composer 4.12
- Thrive 1.200.18
- Themify 1.8.3
Some of these themes offer a theme counterpart. We decided to test without those themes on purpose. You will see why later.
If you prefer jumping to specific sections, here's a table of content to get you going.
- Code Optimization
- Load Speed of Homepage
- Load Speed of Page Builder Page
- Modules & Templates
- Outside the Box
- User Experience
- Unconventional Use
- Support System
- Community Help
- Why we use what we use
Code optimization goes way beyond just what we tested. However, the average site owner might have the knowledge to review the following items. And the items we tested have an impact on site speed. The speed of your website is important for search engine optimization. A few kilobytes or milliseconds here and there don't make a big difference. But once you approach megabytes and seconds, everything changes and tiny differences go a long way. So although small, they're important.
To get the ball rolling on code optimization, we created a homepage with no page builder in use, but the plugins were active. Here is what we were looking for:
- Number of CSS Scripts Loading Everywhere (Everywhere means even pages without the page builder in use)
- Number of JS Scripts Loading Everywhere
- Inline CSS Loading Everywhere? (which means CSS is included but not in a file)
- Size of Scripts Loading Everywhere
- Minified CSS Scripts used in the plugin? (Minified means the file has been compressed)
- Minified JS Scripts used in the plugin?
If that doesn't make sense feel free to comment and we'll adjust the post accordingly. Let's dig into the plugins, shall we?
- Divi had 2 CSS files and 6 JS files loading on the homepage totaling 612kb. The CSS files were not minified and only 2 out of the 6 JS files were minified. Divi did not add any additional CSS outside of the files.
- Cornerstone had 1 CSS and 1 JS file loading on the homepage totaling 129kb (both of which were minified). Cornerstone did, however, include CSS outside of a file.
- Beaver Builder did not have any CSS or JS files on the homepage, and also no inline CSS. However, all the CSS and JS files in the plugin folder were minified.
- Elementor had 4 CSS and 4 JS files loading on the homepage, totaling 144kb. All of these files were minified, and Elementor did not add any additional CSS outside of the files.
- Visual Composer had 2 CSS and no JS files loading on the homepage totaling 4kb. All of these files were minified, and Visual Composer did not add any additional CSS outside of the files.
- Thrive had 0 CSS and 2 JS files loading on the homepage totaling 1kb. All of these files were minified, and Thrive did not add any additional CSS outside of the files.
- Themify had 1 CSS and 2 JS files loading on the homepage totaling 1kb. All of these files were not minified. Themify did include CSS outside of a file.
Load Speed of Homepage
The next test was to see the load speed of each site with the plugin active but not used on the homepage. The tests were done using Pingdom as well as locally in Chrome's developer console. The servers we used are based on the East Coast, so to achieve the fastest load times, we set Pingdom's test from New York. Here is what we tested for:
- Homepage Performance Score on Mobile (Done via Google Page Speed Test)
- Homepage Performance Score on Desktop (Done via Google Page Speed Test)
- Load Speed of Homepage Tested on Pingdom
- Total Page Size of Homepage
- Load Speed of Homepage Tested Locally
Ready for the results? If you have been a fan of specific page builders, the results might surprise you a little.
- Divi scored 73 on mobile and 89 on desktop with a load speed of 573ms according to Pingdom. The page size was 254kb and the local load time was 467ms.
- Cornerstone scored 74 on mobile and 90 on desktop with a load speed of 613ms according to Pingdom. The page size was 203.2kb and the local load time was 284ms.
- Beaver Builder scored 74 on mobile and 90 on desktop with a load speed of 306ms according to Pingdom. The page size was 151.6kb and the local load time was 344ms.
- Elementor scored 74 on mobile and 90 on desktop with a load speed of 604ms according to Pingdom. The page size was 200.9kb and the local load time was 248ms.
- Visual Composer scored 74 on mobile and 90 on desktop with a load speed of 486ms according to Pingdom. The page size was 151.7kb and the local load time was 178ms.
- Thrive scored 74 on mobile and 90 on desktop with a load speed of 492ms according to Pingdom. The page size was 153kb and the local load time was 205ms.
- Themify scored 74 on mobile and 90 on desktop with a load speed of 735ms according to Pingdom. The page size was 220.4kb and the local load time was 308ms.
Load Speed of Page Builder Page
Next up was doing the same tests as the homepage, but for a page built with a page builder. We decided to keep this simple by doing a text block, an image, and a blog post excerpt - each using modules within the page builders, but the same content for each. That means the same text, the same image, and the same blog post. Here is what we looked for:
- Load Speed of Page Builder Page Tested on Pingdom
- Total Page Size of Page Builder Page
- Load Speed of Page Builder Page Tested Locally
- Page Builder Page Performance Score on Mobile
- Page Builder Page Performance Score on Desktop
It would have been nice to test an extremely detailed page template, but because each plugin has its own templates that would have been extremely difficult. So we kept it simple.
We also ran into a roadblock with Thrive's page builder plugin. Although we're testing premium plugins (except Elementor which is free), we are not inserting license codes. As it turns out, the Thrive plugin will not allow you to use it without entering a license code. So from here out the plugin was removed from testing. Why did we do this? Because we know that many photographers wind up stopping their premium subscriptions and in turn stop receiving updates and support. We want to be open and honest in this report because as a plugin user, it means you can no longer use the plugin if you stop paying. Keep that in mind!
With that said, here is how each performed:
- Divi had a load speed of 842ms on Pingdom, reaching 588.7k in size. The page loaded in 1.08s locally and had a Page Speed score of 65 on mobile and 77 on desktop.
- Cornerstone had a load speed of 2.03s on Pingdom, reaching 552kb in size. The page loaded in 2.78s locally and had a Page Speed score of 76 on mobile and 81 on desktop.
- Beaver Builder had a load speed of 645ms on Pingdom, reaching 645kb in size. The page loaded in 953ms locally and had a Page Speed score of 65 on mobile and 78 on desktop.
- Elementor had a load speed of 759ms on Pingdom, reaching 547.8kb in size. The page loaded in 1.29s locally and had a Page Speed score of 65 on mobile and 78 on desktop.
- Visual Composer had a load speed of 810ms on Pingdom, reaching 563.2kb in size. The page loaded in 1.18s locally and had a Page Speed score of 73 on mobile and 89 on desktop.
- Thrive couldn't be tested because they require a license to be active for the plugin to be used.
- Themify had a load speed of 791ms on Pingdom, reaching 529.1kb in size. The page loaded in 1.29s locally and had a Page Speed score of 73 on mobile and 88 on desktop.
Modules & Templates
Now for the juicy stuff. This is a page builder comparison, so we can't go much further without comparing the actual page builder features. So in this section, we will compare templates and modules.
Modules are individual elements which can be dragged around a page and used to display something, like an image, a counter and much more. A template is a block of modules designed and organized a specific way, with colors, borders, backgrounds and so on.
A template is a block of modules designed and organized a specific way, with colors, borders, backgrounds and so on.
Here is what we looked for:
- Default WordPress Modules Available
- Number of Custom Modules Available
- Number of Templates Available
- Can you save Modules customizations?
- Can you save page template customizations?
We were quite surprised to see few of the plugins using standard WordPress widgets, but here are the results for you to see as well:
- Divi had 0 modules for WordPress widgets, but 37 custom modules. The plugin has 33 templates built in and ready to use, and you can save custom templates and modules.
- Cornerstone had 0 modules for WordPress widgets, but 42 custom modules. The plugin has 0 templates built in and ready to use, but you can save custom templates and modules.
- Beaver Builder had 12 modules for WordPress widgets, and 25 custom modules. The plugin has 25 templates built in and ready to use, and you can save custom templates and modules.
- Elementor had 14 modules for WordPress widgets, and 28 custom modules. The plugin has 20 templates built in and ready to use, and you can save custom templates, but not modules.
- Visual Composer had 12 modules for WordPress widgets, and 42 custom modules. The plugin has 60 templates built in and ready to use, and you can save custom templates and modules.
- Themify had 1 module with a handful of WordPress widgets included, and 19 custom modules. The plugin has 49 templates built in and ready to use, and you can save custom templates, but not modules.
Outside the Box
For this section, we are thinking outside the box. Earlier we mentioned that many of these builders have corresponding themes. For example, you can buy the Divi theme which included the plugin, or the Beaver Builder theme, or X Theme which includes Cornerstone and Visual Composer. But what happens if you decide to use another theme? Or if you decide you no longer want to use the plugin? That's what you will learn about now. Here is what we looked for:
- Styling ok even without page builder specific theme?
- Content kept when the plugin is disabled?
- If content is kept, do shortcodes display? Or just HTML?
Also as mentioned, we used the Twenty Sixteen theme as that is the default theme bundled and activated with a fresh WordPress install at the time of testing.
- Divi experienced some styling loss like paragraph spacing, blockquotes, and missing bullets when used outside of the Divi theme. However, the rest of the plugins did not have a problem like that. All of their styling was retained regardless of the theme being used.
- If you decided to disable Themify, you would lose all of your content. Nothing is retained at all. None of the other plugins experienced this issue.
However, many page builder plugins, including ones we did not specifically test, use shortcodes, like [ columns count=2 ]. So if disabled, your content might be there, but in between ugly shortcodes. So we tested to see which of these plugins do that, aside from Themify which completely loses the content when disabled, as previously said.
- Divi, Cornerstone, and Visual Composer fill your content with shortcodes when the plugins are disabled.
- Beaver Builder and Elementor display your content in HTML as if you did it in the WordPress editor already.
One of the main reasons photographers lean towards using a page builder is the simplicity of managing and creating a website using them. Coding is not needed, and you can create a website with your mouse, some dragging, and clicking. It is a beautiful thing. But not all page builders are beautiful. In fact, some are hard to use, some are easy to use but not pretty. Some are so pretty but have other downsides. So Corey and I decided to judge the user experience of each plugin on a scale from 1 - 10, with 10 being the best experience.
- Divi - Scott gave it a 9 and Corey gave it a 9.
- Cornerstone - Scott gave it an 8 and Corey gave it a 7.
- Beaver Builder - Scott gave it a 7 and Corey gave it a 6.
- Elementor- Scott gave it an 8 and Corey gave it a 9.
- Visual Composer - Scott gave it a 5 and Corey gave it a 6.
- Thrive - Couldn't be tested.
- Themify - Scott gave it a 3 and Corey gave it a 3.
We also wanted to see if the page builder plugins would work outside of a normal page, which is their first intention. So we tested to see if they can be used in blog posts as well as Custom Post Types. Now, we know most photographers won't use page builders in blog posts, and most do not know what a Custom Post Type is. But because some photographers might use a Custom Post Type (CPT) or a blog post, we figured we would check and share the results anyway.
- Divi - Yes
- Cornerstone - Yes
- Beaver Builder - Yes
- Elementor- Yes
- Visual Composer - No
- Thrive - Yes
- Themify - Yes
Custom Post Types
- Divi - Yes (as of 7/13/18)
- Cornerstone - Yes
- Beaver Builder - Yes
- Elementor- Yes
- Visual Composer - No
- Thrive - Yes
- Themify - Yes
It's worth noting that while not all the page builders supported CPTs out of the box, it is very possible that with a little coding magic, or help from the developers of the plugins, that CPTs could be supported.
Every company has a different method of providing support for their products. For example, at Imagely we offer 1-on-1 email support with our incredible team. Here is how each company provides support for their page builder plugin:
- Divi - Support via a public forum which only members can contribute to. Documentation publicly available as well.
- Cornerstone - Support via a public forum which only members can contribute to. Documentation publically available as well.
- Beaver Builder - Support via a contact form and handled via email. They used to use a forum but closed it down. It's public for archival reasons only. Documentation publically available as well.
- Elementor - Support via the WordPress.org support forum. Documentation publically available as well.
- Visual Composer - Support via an Envato connection. Documentation publically available as well.
- Thrive - Support via a contact form which posts to a private forum only members can contribute to. Documentation publically available as well.
- Themify - Support via a public forum which only members can contribute to, or via a contact form and handled through email. Documentation publically available as well.
With how complex page builders can be, and how many things can be done with them, some people have taken upon themselves to create communities for users to interact.
Divi, Beaver Builder and Cornerstone (via X Theme) have large communities around them. The list below contains some of the places where you can go to discuss the builders with other users.
- Divi Help & Share on Facebook
- Divi Theme Users on Facebook (the theme contains the plugin)
- Divi Theme Tutorials on Facebook (the theme contains the plugin)
- X Theme Users on Facebook (the theme contains the plugin)
Why we use what we use
At this point, you might be wondering what me (Scott) and Corey are using for ourselves and for photographers we help.
I prefer Elementor over the others for a few reasons. First, sites still load fast with pages made with Elementor. The code is optimized for quality, compatibility, and speed. There are so many modules and templates that can help photographers to achieve nearly any design. The importing and saving features for templates make it easy to use a template created by someone else, or to re-use modules in other places around a website. Elementor is definitely is easy to use. There is no guessing of what to do. They have made the user experience enjoyable. And for photographers who decide to stop using a page builder at some point, Elementor gracefully turns the content into standard WordPress content in the page editor. There are no lingering shortcodes. The only lost content are things like number counters which are exclusive to page builder systems. Lastly, Elementor works so well with Genesis themes, like our photography themes.
Corey prefers Divi. Here is his reasoning...
Because of the specific choices I've made for my website, I've grown to love the Divi builder. At this point, it is certainly one of the most visually appealing and intuitive builders I've tested. The Divi builder supports my personal workflow for building websites, making it fast and easy for me to create anything I can imagine. However, I will be the first to admit that the Divi builder only works well "out of the box" when used with the Divi theme. Using it with other themes often introduces challenges that require more advanced coding.
What to do with this information
Now that you have read through all of our findings, it's your turn to make decisions. Visit each page builder by clicking on the links below. If they offer a live demo try it out. If they offer a free trial, take them up on it. If the plugin is free, like Elementor, it can't hurt to take it for a spin. But at the end of the day your decision should also be based on some key elements, like ease of use, load speed and much more.
Corey's final advice for you is this...
Be sure to pick a builder that feels intuitive to you. Often you can overcome some of the bugs, and they all have their little quirks. Page builders often have a learning curve in the beginning, but once you are familiar with your builder it can make editing your site much easier.
Hopefully, the information we share will help you make an educated decision as to which page builder plugin is best for your photography website.
Want to see the data in a spreadsheet? You can view it below.
Want to view the spreadsheet larger? Click here.
If you would like a more technical overview, also remaining unbiased, I recommend checking out this article from Pippin Williamson.
Note: Major updates to Beaver Builder and Divi are coming soon, and we plan to re-test the two when they're available.