Divi Builder Review: A WordPress Developer’s Perspective

Let’s start with the executive summary.

Is Divi Builder Good?

It’s okay. We wouldn’t recommend it, especially in light of the better options that exist. Two much better options are Beaver Builder (our personal favorite) and Elementor.

To see how the Divi Builder stacks up to those options, check out our full page builder comparison:

https://wpshout.com/wordpress-page-builder-review/

Divi Builder Review Table

Below is a detailed breakout of Divi Builder’s strengths and weaknesses from our page builder comparison table:

See more detail about how Divi Builder stacks up against WordPress’s other largest page builders in our full WordPress page builder comparison.

Full Divi Builder Review

With the at-a-glance summaries above taken care of, here’s our full Divi Builder review.

What We’re Reviewing

This review focuses on the Divi Builder plugin, version 2.0.68. The Divi theme is not considered, nor are Divi Builder extensions or add-on products.

To review Divi Builder, we put it through the same test (duplicate the landing page of an app named Tile) that we use for the other page builders we’ve reviewed.

About the Reviewer

Hi! I’m Fred Meyer, co-editor-in-chief of WPShout. I’ve been a professional WordPress developer for six years, and I’ve written hundreds of WordPress tutorials for developers here on WPShout since 2013.

Links to Divi Builder in this article are affiliate links. My opinions of both Divi Builder’s strengths and weaknesses are my own. In both this review and my related WordPress page builder comparison review, I’m telling you the plain truth as I see it about which WordPress page builder to use, when, and why. Thanks for reading!

Sections of the Review

Click on a section below to navigate this Divi Builder review.

• Pros: Things I especially like about Divi Builder.
• Cons: Where Divi Builder falls short.
• Summary: Divi Builder review summary.

Divi Builder Review: The Good

Awesome Inline Text Editing

The Divi Builder’s inline text editing was a “wow” moment for me when I first understood how it works. You first add text as a normal pop-out module, but then you can make both content changes and simple layout changes inline—directly on the page—with a clean, simple JavaScript editor interface:

You can even paste in text from other sources, directly onto the page:

Front-End Wireframe Mode

I think the Divi Builder’s “wireframe mode” is a nice development out of its origins as a back-end builder. You can click to enter “wireframe mode,” and work with and manipulate the section-row-column-element structure of the page directly—all while staying on the front end and without page refreshes. Leaving takes you back to a live-previewing front-end view of the page:

Generally Clean, Helpful Design

I find the Divi Builder’s loud, jewel-toned color scheme to be too obtrusive, as are some of its JavaScript “sproing!” animations when you open a module. I was glad to stop using the Divi Builder after testing it out partly because of the loudness of the design.

These minor issues aside, the Divi front-end builder is, in my opinion, laid out effectively and efficiently and makes good use of the screen real estate. It’s generally clear where things are, what they do, and how to use them.

Divi Builder Review: The Bad

Slow and Frequent Redrawing

When you start working with it, Divi is fairly performant, with live JavaScript-based updating. That sense of speed starts to change as you put more elements on the page, especially elements that are being rendered programmatically like widgets and shortcodes. As I built out the test landing page further, I found myself spending more and more time waiting for things to render or re-render:

This was not only an issue on page load. In the demo below, cancelling (rather than saving) changes to the text field leads the Gravity Forms embed to redraw itself for some reason, and it takes a long time—maybe three or four seconds—to render.

Very Obtrusive CSS Style Overrides

The first area that makes the Divi Builder really unusable is its overwhelming application of CSS styles to elements on the page. I first noticed this when I applied a Gravity Forms form through a shortcode, and saw the input fields shrinking to comically small proportions:

The issue is that Gravity Forms itself wants to tell these inputs to have sensible widths—100% by default—but all Gravity Forms’ own styles are being overwritten by absolutely enormous Divi Builder style declarations. In this case, the Divi Builder sets the inputs’ width to auto, which it intends as a sensible default of its own but which shrinks the form fields to almost nothing.

You may not realize how big a problem the Divi Builder’s overbearing CSS rules are until you contemplate doing the work yourself to fix them.

You may not realize how big a problem this is until you contemplate doing the work yourself to fix the overbearing CSS style rules of your own page builder—rules whose list of targeted HTML selectors easily run to dozens of lines. Do you want to use any third-party resource that has an opinion on how it should be styled? A business listing plugin might be an example.

Uh-oh: its styles are randomly overwritten by a torrent of Divi styles, each targeting dozens of CSS selector combinations more or less at random. Good luck rewriting the listing plugin’s own CSS rules—as you run, one by one, into the places where they’re not working—using selectors verbose enough to overwrite the Divi Builder’s.

This problem cropped right back up, for similar reasons, when I tried a WooCommerce “products” widget:

I guarantee that I didn’t want my list of products to have the Divi Builder’s thoughtful(?) default width of 20.875%. Now I’ve got quite a bit of CSS to write just to be able to reimpose my own design ideas (or even WooCommerce’s) onto Divi’s avalanche of overrides.

This issue, by itself, is easily enough to turn an entire website project into an ordeal.

From experience on numerous client projects involving the Divi Builder, WPBakery/Visual Composer, and similar builders, I can say the following: this issue, by itself, is easily enough to turn an entire website project into an ordeal. It’s a massive argument against using the Divi Builder for anyone who needs website projects done right—“right” here being as modest as “my products widget isn’t 20.875% wide for reasons I have no control over.”

Flashy Design Options with Missing Fundamentals

A number of times in testing the Divi Builder, I found myself wowed by its design options. For example, Divi’s Gallery feature lets you do on-the-fly Instagram-style tweaking of things like the hue and saturation of your gallery images:

The galleries also have a truly gorgeous and seamless click-to-lightbox experience:

After several minutes of looking, though, I realized you can’t change something extremely basic: how many columns the gallery is laid out into! Divi has decided there will be four images per row, and there’s no option to change that.

There’s also no option to change which size of image the gallery uses. You can’t make a gallery of thumbnails (which are square), or of any other specially registered image dimension you might need on your project. The five gallery images I’ve chosen have ragged bottom borders, since the images have different underlying dimensions—and there’s no way to do anything about that other than manually cropping the images in something like Photoshop.

I can count on zero hands the number of times I’ve needed to box-shadow an entire gallery while putting strikethroughs in its captions and sepia-toning the images themselves—all of which are options in the Gallery module. However, as a developer I’m certainly going to need to lay elements out the way I want them pretty much every time, and that includes getting to dictate whether a gallery is a four-column display of large images or a tightly packed thumbnail grid.

As another example, the Divi Builder’s “gutters” implementation is flashy and presumably appealing to nontechnical people—but it’s a big question mark for developers and other precision-minded people who need spaces between elements to be in pixels, rems, or other technical units, not unitless chunks:

Despite its apparent ease of use, this feature, like several others like it in the Divi Builder, has the effect of making precision significantly harder to achieve by creating user-facing layout options that aren’t the way you actually control layout. If I want columns to have 2rem of space between them, and I’ve got to fight the Divi Builder’s massive tide of CSS styles to get there, I’d rather not have to also face the unknown (JavaScript? CSS?) implications of an end user choosing “Gutter: 3” on a random assortment of rows.

Shortcode Horror

The dark design flaw at the heart of the Divi Builder is that it’s based in shortcodes. You can see this clearly if you deactivate the builder, which results in the Fallback to Shortcode Devastation that you’ll be familiar with if you’ve worked on a few or more WordPress client projects that used builders like the Divi Builder or Visual Composer:

Divi Builder Review: Summing Up

Divi Builder’s issues are only visible once you try to apply the software to real purposes and projects.

As I’ve mentioned, the Divi Builder’s user interface is more usable and sanely coded than I’d expected, and even had some wow moments I wasn’t expecting.

With Divi Builder (as, candidly, with all Elegant Themes products I’ve tried), the real issues are only visible underneath the surface, once you start to try to apply the software to real purposes and projects.

So with the Divi Builder, the devil is in the details, not in the superficial presentation. One major issue is the torrent of CSS styles the plugin brings with it, and how those styles’ syntax leads them to override the helpful and necessary styles that other elements bring with them. Another is the lack of full control over various elements of layout and presentation—the folksy unitless “gutter” value, the automatic four-column gallery layouts, and more. A third is the inherent fragility of the Divi Builder’s use of shortcodes as the basic unit of layout.

My overall experience with the Divi Builder was unexpectedly, pleasantly lukewarm—but I certainly can’t think of a situation in which I would use it.

I can’t really say that the Divi Builder is something that you only use if you’re insane or badly misinformed—which I’ll happily say (shout, even) about the WPBakery Page Builder. Given my uniformly dark history with numerous Divi-based website projects, and with all Elegant Themes products in general, my overall experience with the Divi Builder was unexpectedly, pleasantly lukewarm.

But I also certainly can’t think of a situation in which I myself would use the Divi Builder, putting myself at the mercy of its fragile, random, and difficult-to-fix technical missteps. This is especially true given how much better Beaver Builder is in almost every single way.

Once again, if you like Divi Builder, we think you’ll love Beaver Builder or Elementor. Our favorite of the two is Beaver Builder, and here’s why:

The Best Page Builder in WordPress

Beaver Builder

More than any other single plugin, Beaver Builder has changed how I do my work as a WordPress developer, and made good front-end layout building a reality.

Thoughtfully built, feature-rich, and above all reliable, Beaver Builder is our favorite page builder in WordPress.

Try it Now

To see in detail how Divi Builder stacks up against WordPress’s other largest builders, have a look at our full WordPress page builder review:

https://wpshout.com/wordpress-page-builder-review/

Thanks for reading! Let us know your thoughts on Divi Builder, WordPress page builders, and anything else in the comments.