The migration from Divi 4 to Divi 5 is kind of a big deal for those of us who’ve been using Divi for a long time. As someone who has been an Elegant Themes subscriber since 2012, and has been using Divi almost since it was released, I was as apprehensive about the changes as anyone.

Even after using Divi 5 for several new website builds and updating the class I teach at Fenzi Dog Sports Academy, Building a WordPress Website, for dog trainers on building their own website to use Divi 5, I still held off on updating sites originally built in Divi 4 for months.

Now, however, we’ve migrated 13 of our maintenance clients to Divi 5 and I thought I’d share the lessons we learned along the way.

Elegant Themes’ Guidelines for Migrating from Divi 4 to Divi 5

Elegant Themes has an “official guide” on how to migrate from Divi 4 to Divi 5 that they call a complete guide — and it IS a really helpful starting point. It walks you through what happens under the hood when you migrate, what they see as the biggest changes between Divi 4 and Divi 5, and the five-step process they recommend. However, we’ve found it’s missing several important pieces that can make the process smoother and leaves out what steps you may want to take after you officially click update.

Let’s start by looking at the five steps they recommend you take and talk about the pieces we’ve added to that process when we’re handling these migrations for clients… then dive into what we do after a site is on Divi 5.

Step 1: Create a Staging Site and Back Up Your Data

This step is CRITICAL. Essentially, they recommend creating a private clone of your website, running the update there, and then moving that cloned version of your site to the real thing. This is important because there is a very real possibility that after you upgrade you’re going to need to do some additional work to the site to get it looking and operating the way it did before the migration.

For the sites we’ve worked on that often isn’t a ton of work — but it’ll depend on how complex your website is and how you built it. If you used a lot of specialty sections, for example, you’re going to end up needing to rebuild those to take advantage of the new Divi 5 functionalities… and if you’re learning Divi 5 at the same time, that can be a frustrating process.

Of the native features built into Divi 4, the things we found most likely to cause issues after migrating were specialty sections and sites where we’d never switched over to using the Theme Builder for header and footer layouts. We also ran into issues where custom code caused hiccups, since Divi 5 restructures Divi to get away from building with shortcodes.

So after cloning your live site, I recommend checking for custom code in Divi Theme Options in the Custom CSS box, and checking through a few of your pages to see if you made use of Specialty Sections (which show as purple rather than blue sections in the builder) or full-width headers, which are also not a thing in Divi 5.

Also — don’t forget to turn on the “discourage search engines” box under Settings > Reading. We don’t want Google indexing your staging site and having it compete with your real one.

Step 2: Audit Your Third-Party Extensions

The official guide recommends making a list of the Divi extensions you use (module packs, layout plugins, anything from the Divi Marketplace) and checking whether each one has a Divi 5-compatible version yet.

If an extension hasn’t been updated, Divi 5 has a “backward compatibility mode” that keeps those modules running on the old Divi 4 framework. Your page won’t break, but it also won’t get all the benefits that are the reasons to upgrade in the first place. So before you begin, do a quick plugin check — what’s installed? If you look at the plugin developer’s website, do they mention Divi 5 compatibility?

We make sure to update any other plugins before migrating to Divi 5. A number of the plugins we use regularly HAVE released Divi 5 versions; sometimes, however, you have to take extra steps during migration to ensure the plugin continues working as intended. That should be done before beginning your migration.

It’s also worth looking at what plugins you’re using that are NOT Divi specific. Some, like Gravity Forms, keep working just fine. Others, like Rank Math and Yoast, still have gaps — their core SEO features keep working, but their controls and content analysis don’t show up inside the Divi 5 Visual Builder the way they did in Divi 4. Non-Divi-specific plugins are less likely to note on their website if they’ve been updated; for those plugins, your best bet is to search for them in the Divi Facebook group and see if anyone has mentioned compatibility problems.

Alternatively, you could post asking other users if they’ve run into problems with the plugins used on your site, or reach out to the plugin developer or to Elegant Themes support and see if anyone has feedback for you. Unfortunately, sometimes there’s just no data if it’s not a popular plugin… and you end up playing the guinea pig.

That might mean after upgrading, if the plugin is essential to what your site does, you end up rolling back to Divi 4… so again, be sure to do this on a staging site and to take a backup first.

Step 3: Install Divi 5 (But Document Your Settings First)

Elegant Themes makes this next step pretty simple: if you’re on the latest version of Divi 4, you can opt into the Divi 5 upgrade path from the Divi dashboard, and Divi 5 shows up as a regular theme update. Or you can download it from your member area and upload it manually.

Their guide has a number of helpful pictures and a detailed how-to if you need help doing that. However, this is where our process splits from the official one.

What we document before installing Divi 5

Before we click update, we do two things:

First, we write down the hex codes for the colors in the Theme Options panel. In our experience, the migrator does not do a good job of bringing over the colors and fonts set up in Divi’s Theme Options and Theme Customizer. Your pages are probably going to come through fine, but anything that relied on those site-wide settings can shift after the migration. And if you decide to add on to your existing site in the future, it’s helpful to not have to hunt for each of those color codes again.

So before installing Divi 5, we record:

• Your color palette (the default colors in the Divi color picker)
• Your body and heading fonts, sizes, and colors
• Your link and button colors

After the migration, we use that list to rebuild the colors and fonts in Divi 5 in the new variables panel, so the site matches the original.

Second, we check how the header and footer were built. The Theme Builder didn’t arrive until Divi 4.0 in October of 2019, so if your site was built before then, there’s a good chance the header and footer are still running on the old Theme Customizer settings. Sites like that are the ones most likely to need work after migrating. To check, go to Divi > Theme Builder and see whether there’s a custom header and footer assigned to your default website template.

You can make things a little easier for yourself if you rebuild the header and footer in Divi 4 before migrating, since it’ll mean not having to learn the new Divi 5 builder interface immediately… instead you get to rebuild them in an interface you already know well.

Step 4: Run the Compatibility Check

Once Divi 5 is installed and activated, you’ll be taken to the Divi 5 Migrator (you can also find it under Divi > Divi 5 Migrator in your WordPress dashboard). The first time you open it, it automatically scans your site: pages, posts, custom post types, Theme Builder templates, Divi Library items, widgets, and presets.

When it’s done, it’ll show you an on-screen analysis of your site. A blue checkmark means that content should convert cleanly to Divi 5.

An orange warning means something on those pages isn’t fully supported yet and will run in backward compatibility mode. The report tells you which modules are causing the warning and which pages they’re on, so you know where to look after the migration. However, the report isn’t foolproof — we’ve definitely seen sites where we got a clean report and then still had pieces that needed manual attention after upgrading.

It also doesn’t check the things I mentioned documenting in Step 3. A clean compatibility report is a good sign, but it’s not a guarantee that everything is going to go smoothly.

If there ARE things that Divi flags during the compatibility check, and the report gives you enough details that you can fix them, we recommend fixing them before migrating to Divi 5 if you can… otherwise, you’ll find that you have to rebuild sections and update layouts on a brand new interface that you’re not familiar with yet. Instead, it’s much easier to update what you can in Divi 4, which you already know well, and then migrate to Divi 5.

Step 5: Migrate to Divi 5

For this next step, we follow exactly what the official article on “How To Migrate From Divi 4 To Divi 5 (Complete Guide)” says to do.

Afterward, however, there are a few additional steps we take to ensure the site is in good working order going forward.

After Updating to Divi 5: What’s NOT in the Official Guide

1. Clear the Cache. After clicking the button to have your site update, we like to go into the hosting account for that website and clear the cache. It’s not uncommon for little things to cache weird during the update — most commonly, icons on the page or in the menu fail to display. Clearing the cache tends to fix that quickly and easily.
2. Add Color Codes to the Variable Manager. The preset palette in Theme Options goes away as part of the update, so those colors need to be re-added so that they’re there the next time you want to use them.
3. Check Font Sizes and Colors. Often, for some reason, this is one of the things that struggles to migrate correctly. While we also recommend going page by page to check over your site after migrating, we first check a page or two specifically to see if there was an issue with font sizes or colors for each site.
4. Review the site page by page. We usually do this with two monitors — one with the live, Divi 4 version of the website up, and one with the newly upgraded Divi 5 version of the website up, so that we can catch any differences between the two. We also specifically look for pages where Divi tells us backward compatibility mode has been enabled.
5. Troubleshoot Pages with Backward Compatibility Mode Enabled. When backward compatibility mode is enabled, a site doesn’t get all of the benefits that it should from updating to Divi 5. So it’s worth taking a bit to try and figure out why the alert is present. Most often, there’s a specialty section or a module that is from a plugin that hasn’t been updated yet.
6. Replace Non-Essential Plugins. Divi 5 comes with a TON of new modules and tools — most notably, the new loop builder, which adds a ton of flexibility around how blog posts or custom post types can be displayed, and the new Gravity Forms module, which means we no longer need a plugin to style a Gravity Forms form within the Visual Builder. Spending some time making those switches is a good way to get to know the new Divi and to ensure you’re taking advantage of all the new features it has to offer!

Finally, get to know the new interface and learn how to use Divi 5. I recommend investing at least a bit of time into this before you take your staging site live. However, don’t wait until you have it mastered before making the switch… Divi 5 comes with enough changes that learning all of the ins and outs can take a while. That’s okay.

Spend enough time that you feel like you can hop in and make the edits you make most often in the new version and then take it live on your real domain. You’ll continue to learn the theme from there as you go, but you’ll also be able to enjoy the benefits of having made the switch.

After you do take your staging site live, be sure to go back to Settings > Reading and uncheck that “discourage search engines” box. It’s an easy detail to forget, but if your traffic tanks after migrating, it’s almost certainly the reason.

Still feeling a little overwhelmed thinking about migrating to Divi 5?

We’d be happy to help. We have a few options for Divi 4 users who are interested in some help making the switch.

We’ll Upgrade for You

First, we’re happy to do it for you — we offer upgrades as a service and as we finish out our maintenance clients will have a limited number of spots available to just handle the migration for you from start to finish, handing over a ready-to-go Divi 5 website when we’re done.

Second, if you’d like the migration plus some continued support while you learn the interface, we’ll do the migration for FREE if you sign up for at least 6 months of our website maintenance plan.

Take our DIY Course on Upgrading to Divi 5

Or third, if you’re more of a DIY type, I’m currently working on a course to walk students through the upgrade process step-by-step. Like the other courses I’ve offered on Divi, everything will be as detailed as I can make it so there are no surprises. The course will include lessons on learning the new interface after upgrading and an option to buy an hour or two of my time if you get stuck.

I’m working on the course now — if you’d like to be notified as soon as it’s available, sign up for the waitlist below!