It’s been a long time coming — but it looks like the finish line for Divi 5 is finally within sight. From the Elegant Themes blog this week:

“We aim to enter beta in ~1 month. Almost the entire team is focused on cleaning up the remaining bugs, and we’ll launch the beta as soon as we are confident that we have cleaned up the worst of them. The date we launch the beat will depend on the volume of new bugs reported over the next few weeks.

When Will Divi 5 Be “Officially” Released?

Divi 5 will reach its “final form” before the end of the year, with the ultimate goal of leapfrogging the competition before the year ends.”

We’re incredibly excited to see Divi 5 be officially released and have been learning the new system since February. We’ve been actively using it for new clients for a few months now… and overall we’ve been blown away by the upgrades to functionality and flexibility.

However the new system also comes with a pretty significant learning curve.

Not only has Elegant Themes rebuilt the code base for Divi from the ground up – they’ve done a lot of re-thinking when it comes to the look and feel of Divi, as well as adding many, many, new features. That means adapting isn’t just a matter of clicking “update” when Divi 5 comes out.

As they’ve worked on Divi 5, they’ve released an number of blog posts that are incredibly helpful for learning the new system… but if you’re not tuned in and using Divi to build new sites on a week-to-week basis, and haven’t updated to Divi 5 yet… all of those changes are going to feel like a LOT when you finally hit upgrade later this year.

So what are the biggest changes?

The New Divi 5 Branding, User Interface, and Editor Default Set Up

The first big change that Divi 4 users will notice after shifting to Divi 5 is likely to be a tiny one — but it represents a bigger shift that you’ll see carried through to the entire builder.

Divi has swapped their long-standing purple brand color for blue… and the text of the button used to turn on the page editor has changed from “Enable visual builder” to “Edit with Divi.”

Personally, I think the new text is much more helpful for new users — it helps clarify the difference between the “edit page” option and the option of using Divi to edit the design of the page. After clicking on the button, however, the changes are much more dramatic.

Slightly Updated Color System in Divi 5

While the colors for sections, rows, and modules have remained similar, Elegant themes has shifted the specific shades slightly to make everything feel a little more modern. The blue for sections is a little brighter; the green for rows is a little more saturated; and the gray for modules has gotten a little darker. None of these should throw long-time users off much.

Relocated Controls: New Admin Bar, Left Hand Menu and Setting Panel in Divi 5

The bigger difference is in the newly relocated controls in Divi 5. First, Elegant Themes has created a new Admin Bar at the top of your screen to replace the old purple circles along the bottom of the screen.

Controls for looking at your page on various screen types, undoing (and redoing) edits, uploading/saving page templates, exiting the builder, previewing your page, and saving your changes all now live in a new thin top bar. The default WordPress Admin Bar (which previously showed the “Exit Visual Builder” button) is no longer visible by default.

The exit button now also has a convenient dropdown menu (accessible by clicking on the down arrow to the right of the word exit) that lets you choose where you’d like to go after existing your editor — back to where ever you were last, to view the page you’ve been working on, to the edit page screen (in the backend of WordPress), or to your WordPress dashboard.

In addition to the new top bar, we have a new white menu along the lefthand side of the screen. This new menu has options for:

• Inserting a page layout (also previously housed in the purple circles)
• A newish (it existed in Divi 4 but was less obvious) layers panel
• The new variables manager (more on this below)
• The wireframe view option (also previously housed in the purple circles)
• 3 “settings” options (action icons on hover, parent action icons on hover, and Xray) which are blue when turned on and grayed out when not active
• A builder settings icon
• A help shortcut that loads the Divi Builder Helper

Finally, by default clicking on a settings option (the gear icon) in any of the toolbars for a module, row, or section will now open the settings window in a docked position on the right hand side. While this was an option in Divi 4, it wasn’t the default behavior.

The settings window itself has also had a mild refresh. The large purple label bar at the top of the window has been removed and replaced with a breadcrumb-style label that allows you to quickly click through to other setting windows. For example, if you open a section settings window, it shows “Page > Section” and clicking on page would take you to the page settings. If you click on a row, it becomes “Page > Section > Row” and in a column it becomes “Page > Section > Row > Column” allowing you to scale the hierarchy of settings windows quickly.

Other tweaks here are pretty mild but when taken together they do create a much more modern aesthetic that does require you to actually LOOK for settings you may have previously been able to click on while on autopilot.

A few new options also show up in the options panel – most notably the option to enable Divi 5’s Loop Builder. The new loop tool is incredibly powerful — but unlikely to impact most users when they initially upgrade to Divi 5.

Color Picker Default Palette replaced by Divi 5 Color Variables

Another major change from Divi 4 to Divi 5 is the way Divi manages colors. In Divi 4 we would typically set up a default theme color palette on the WordPress backend under Divi > Theme Options. Then we could set additional global colors directly in the builder, which would apply a single color to any field where a color could be chosen – and if we made changes to the global color, it would change it every place throughout the site where we’d used that color.

The new Color variables option works in a similar way to the Global color option – but it lives in the new variables setting window, accessible within the builder from the new left hand menu.

It’s unclear at this point if the migration tool will automatically migrate your chosen default color palette or if this is something you’ll have to set up manually after migrating to Divi 5. If it doesn’t migrate automatically, the first time you go in to work on your site after the upgrade you’ll find none of your default colors easily available… so this is definitely one of the things you’ll want to address soon after the upgrade (it’s on our list of things to check and handle for our maintenance clients once Divi 5 is finally released).

Overhaul of Responsive Setting Controls in Divi 5

The third biggest change pre-existing Divi users will notice after upgrading is the way responsive design works in Divi 5 and where those options live.

In Divi 4, if you wanted to edit a setting to impact mobile or tablet only, you’d use the small “responsive settings” icons that appeared on hover next to each section heading within a settings panel.

In Divi 4, you’d need to independently toggle this on for each setting you wanted to act differently on tablets or mobile devices. Then you could change which device type you were viewing to preview your edits.

In Divi 5, you toggle the device type at the top of the screen and any changes made while on that device top preview are applied specifically to that device type or screen size with a waterfall effect (so it also applies to any smaller screen sizes, unless you’ve previously created individual settings on that screen size for that design element).

Then, after you’ve created a screen size specific setting, you’ll get an indicator on that setting even when working on the design for other screen sizes. Clicking on that icon in the settings window will pop out an additional settings window where you can see the different settings by device type in case you want to change them further.

The other major change is your ability to control how items are ordered on device types other than desktop — reversing column order or item order is now just a toggle you can click on to control the order items will display on tablet or mobile.

Other Major Changes in Divi 5

These are only the tip of the iceberg when it comes to changes in Divi 5 — Elegant Themes has truly overhauled the theme from the ground up, granting all of the new features to existing members. These are just the changes I think preexisting Divi users are likely to find themselves navigating most immediately after upgrading… and things it is good to be prepared for in advance, if possible!

A few other honorable mentions…

Equalizing Column Heights

With Divi 5’s new flexbox settings, the way you will equalize column height has changed; this impacts how you’d apply settings to columns that you want to appear similar – so when adding borders or background colors to a column. It also impacts things like creating a row with buttons that line up horizontally.

Vertical Alignment Options: Including Vertically Centering Things!

Also due to the new Flexbox options, we can now vertically align items to the center of a row much more easily! This means no more tinkering with code just to get items to look centered vertically (or at the bottom or top of a row). There’s now a setting for this!

Flexbox in Divi 5 introduces a ton of new options and if you’d like to do more than just a basic upgrade, learning a bit about the options it gives you may be well worth the time investment.

Elegant Themes is, as usual, doing an excellent job of keeping their blog up to date as they release new features — not just showing us the new features, but providing tutorials on how to use them and background education for why you’d want to. If you’re not already, be sure to subscribe to their emails for almost weekly updates on the new features and how to use them.

We’ll also be sure to cover some of the new options here — and I’ll be sharing both my favorite and least favorite aspects of the latest additions to Divi 5.