This post is part of a series of WordPress framework reviews where we assess and compare the frameworks that received the most votes in our Best WordPress Framework poll. Check out the wrap-up or take a look at the reviews for Headway, Ultimatum, Divi Builder, or Gantry.

Elegant Themes’ Divi Builder plugin isn’t technically a WordPress framework; it’s a page builder. However, it’s so powerful and has grown so quickly that we think it’s poised to be a very strong competitor and is only a few features away from being the best WordPress framework on the market.

Elegant Themes' Divi Builder Review

The Divi Builder

The Divi Builder is a plugin that can be used with any WordPress theme to create layouts for content. It also comes bundled in the Divi theme itself, which is how we tested it. We chose to test the builder using the Divi theme rather than the plugin and a third party theme because we wanted to see how the builder would perform in the most common use case scenario. The builder works the same way in Divi and in other themes and an Elegant Themes subscription gives you access to both, so we think most people will opt to use it with the Divi theme itself. Most of what follows applies to the Divi Builder regardless of what theme it’s used with.

The builder allows you to easily create custom layouts for any type of content on your site. You simply open the page or post, click the button to switch from the default editor to the Divi Builder, and you’re ready to begin. If you have existing content it’s ported into a text block and maintained. From there you begin creating your layout, and that’s where the Divi Builder really stands out.

Elegant Themes has created the most intuitive and fully featured builder interface we’ve seen yet. The basics are simple; add rows, choose the column layout, and add modules. What makes the Divi Builder special are the 40+ modules and the overall polish of the design. They even include dozens of pre-made layouts that help kick start any design and give you an idea of what the builder is capable of.

Divi Builder layout manager

Everything about the Divi Builder just makes sense. You can hide content on mobile, desktop, or tablets with simple toggles in each module, row, or section. You can copy and paste or duplicate anything with a simple click. Layouts can be easily saved, imported and exported. Advanced settings like gutter widths, line heights, and custom margins/padding are all adjustable without coding, but custom CSS and classes are found right where you expect them; in a tab for the module, row, or section in question. They even break the custom CSS fields apart into logical sections and show you the classes that they will be applied to. This is far, far better than anything anyone else is doing.

Each layout can be saved and loaded on any page or post so they don’t have to be re-designed every time. Any module, row, or section can be saved as global, allowing content to be easily shared across different posts and pages. This is very handy for shared elements like sidebars, graphics, and other universal items, but if you have a lot of people editing content with global items it could become an issue as those elements aren’t locked when being edited by a user so they could accidentally overwrite each other. If you use the Divi Builder and switch to another theme your layouts will remain intact as long as the Divi Builder plugin remains enabled.

The modules are, generally speaking, well done. Some could use a little more love like gallery, accordion, and toggles, but they all work and they are all better than the included modules in the other frameworks we tested. Having so many modules available really makes it easy to pivot on a design when a client isn’t happy with something because it just doesn’t take a lot of time to create something totally new using existing content. However, you can’t integrate widgets into the layouts without using the code module and inserting shortcodes or third party tools which can be a limitation if you rely heavily on those elements.

The reason the Divi Builder can’t be considered a true WordPress framework is because it doesn’t allow you to bulk-assign layouts. For example, if you have 300 posts and 200 pages, you’ll have to manually open each one and assign a layout, being sure to copy and paste your existing content in the appropriate area. There is no module to pull from a default or custom WordPress loop. To be fair, it’s not marketed as a framework, but rather a page builder. That said, it is marketed as a builder with which you can construct entire sites, and while that’s certainly true for new sites, existing sites will need to consider the effort involved in manually updating content before implementing the Divi Builder. It’s easy to see how this could be remedied by simple adding a WordPress loop module and an assignment system akin to Gantry’s so hopefully this will be added in the near future.

There are three types of sections: fullwidth, standard, and specialty. The latter is used for layouts requiring things like dual sidebars or uneven column counts and can be handy when creating less conventional designs, but we find them a bit limited in most circumstances and wish that the ability to have columns that span the height of multiple rows was an option in the standard layouts. In fact, the best solution would be to merge all three layout types into a single, more robust section builder.

Divi Leads

Divi Leads is a built-in split testing system that comes with the Divi Builder, but it has a few rough edges.

The Divi Builder includes the ability to perform split testing, or A/B testing, on different items in your layout, which they call Divi Leads. This is handy if you want to check to see if one button is more effective than another or if one design outperforms a variation. There are lots of third party tools to accomplish this but having it directly integrated into the builder is great. However, there are some issues. One glaring problem is that you aren’t able to easily see and test the variations as a developer because the tool will always show you the first variation you see. Sure, you can use the preview tool, but that doesn’t give you a good sense of how they will appear in a real-world environment and it shows all of the variations at once which can throw off your design. The developers are aware of this and will hopefully address it soon. The tool doesn’t seem to count impressions accurately, either, as it only tracks a single impression per IP; this would be more accurately described as a user or unique visitor than an impression and is a strange choice given that some people will want to test actions taken by people who interact with their content more than once or are on a corporate network where hundreds or thousands of people may use the same public IP address. Finally, results aren’t reported in real time; you have to click the refresh button in the tool to see new data. It’s a little thing but can be frustrating if you forget it and think nothing is happening. Lots of promise here but clearly some work yet to be done.

Divi Theme

The Divi theme comes bundled with the Divi Builder. Although most of the functionality of the theme is part of the builder and can be used with any theme, there are a few things that the Divi theme adds.

The default WordPress Customizer is greatly enhanced by the Divi theme, allowing you to have a lot more control over the menu, typography, and color schemes of your content, all adjustable and preview-able in real time. You can change site-wide defaults here and although options are continuously being added, it’s still missing a lot of granular functionality like the ability to setup different fonts and styling for content based on taxonomies or assignments. Lots of items in Divi have light and dark settings, but you can only control the dark styles here; light has to be done in the advanced options of each module you edit. We’ve never been a huge fan of the simplistic Divi menu and although some variations have been added, we think it’s still pretty basic. The default sidebar is boring, too, and could use some love.

Another addition the Divi theme makes is the ability to control some of the page or post settings. For example, you can assign the sidebar to the left, right, or disable it. You can also display dot navigation, hide the nav bar before scroll, and a few other tweaks. It’s handy and should probably be included with the Divi Builder plugin, but one could argue that those are theme-specific changes. There is also a theme options section allowing you to further modify your site, including things like your custom logo, favicon, social media links, etc.

Conclusions

The Divi Builder is by far the best page builder we’ve ever tested. Fast, polished, and easy to use, it makes us wish all frameworks used it. If Elegant Themes were to add a few important features it would be in framework territory. Namely, assignments, site-wide configuration options, a WordPress loop module, and better integration with WordPress widgets in the layout builder. If these were added, we think Divi Builder would be the market leader.

That said, there is also room for improvement with existing features. The Divi Leads split testing tool needs some work to be viable and the layout builder would be better served by having one all powerful section type than rather than three divergent options. A system of locking the global elements to a single user when being edited by more than one needs to be implemented and, as with other frameworks, it would be great if hiding content on certain devices didn’t just use CSS to hide it but rather didn’t generate the content at all. Additions and improvements to the Divi Builder have been coming quickly and we’re looking forward to seeing if Elegant Themes chooses to make it a true framework or continues to develop it as a page builder for smaller sites.

WordPress Frameworks Benchmarks

 

Methodology

A new WordPress installation was created for each framework using the latest version of WordPress (4.4.2) and the framework as of early April, 2016. Each was a clean install using the ZIP from WordPress.org and a separate database, but all running from the same server. No further optimization was enabled, and no caching was configured. Only the plugins required by the frameworks and/or their templates were added and the two plugins included with WordPress were removed.

We considered manually re-creating a generic layout using each framework but decided to implement templates created by their developers instead. Not only did this reduce the already lengthy testing and review process, but it allowed us to test the frameworks using templates the developers themselves deemed high quality and suited to their audience. In order to have comparable test results we chose templates that were similar in design and made sure that all content ran off of our test server rather than being pulled from third party sites.

YSlow Grade

"YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis."

  • WordPress - Twenty Sixteen 93% 93%
  • Gantry - Hydrogen 92% 92%
  • Headway - White Wash 91% 91%
  • Elegant Themes - Divi 90% 90%
  • Ultimatum - Clean 89% 89%

Google Page Speed

"When you profile a web page with PageSpeed, it evaluates the page's conformance to a number of different rules. These rules are general front-end best practices you can apply at any stage of web development."

  • Elegant Themes - Divi 97% 97%
  • Ultimatum - Clean 96% 96%
  • WordPress - Twenty Sixteen 94% 94%
  • Gantry - Hydrogen 93% 93%
  • Headway - White Wash 87% 87%

Page Load Times - Homepage

After installing each framework and a simple template/layout we measured the page load times of each three times using GTmetrix.com and averaged the scores to come up with a final value. The clear winner here is Gantry and their Hydrogen theme, which impressively outscored the default WordPress Twenty Sixteen theme.

1.13s Gantry - Hydrogen WINNER

1.29s WordPress - Twenty Sixteen

1.41s Elegant Themes - Divi

1.60s Headway - White Wash

1.92s Ultimatum - Clean

Page Load Times - About Us Page

For a more apples-to-apples comparison we also tested a simple About Us page with each framework. This consisted of the default header/footer, three paragraphs of lorem ipsum, and a single image. As you can see, the rankings were largely the same. The surprise was that two of the five frameworks actually had slower sub-pages than homepages.

0.93s Gantry - Hydrogen WINNER

0.97s WordPress - Twenty Sixteen

1.63s Elegant Themes - Divi

1.71s Ultimatum - Clean

1.72s Headway - White Wash

What We Tested

Here's what each homepage looked like after it was setup on our test server.

Hey, you read the whole thing!

That deserves a reward. How about not having to worry about WordPress maintenance ever again? That's what we do at Barrel Roll. Have 10% off your membership for life on us!

Click on Cary for 10% Off!
0
Would love your thoughts, please comment.x
()
x