Divi 5 is officially here. When you have an present Divi website online, migrating to Divi 5 is the one maximum impactful improve you’ll be able to make. The brand new framework delivers quicker web page so much, a redesigned Visible Builder, and lines that essentially exchange what’s conceivable. This information walks you via each step of the Divi 4 to Divi 5 migration, so you’ll be able to step into the way forward for Divi with self assurance.
What Adjustments When You Migrate To Divi 5
Sooner than coming into the how, it is helping to know what the migration in fact does below the hood. Divi 4 shops all format knowledge as shortcodes, comparable to
Divi 5 replaces shortcode-based format garage with a brand new, extra solid garage layout at the back of the scenes. While you run the migration, the Divi 5 Migrator converts each supported module in your website from the previous shortcode layout to this new construction. Your content material, design settings, and configurations are preserved. The entrance finish of your website appears and purposes the similar after migration. The adaptation is fully in how Divi processes and renders that knowledge, which is the place the efficiency beneficial properties come from.
Modules that aren’t but supported through Divi 5 (basically third-party extensions from the Divi Marketplace) get wrapped right into a backward-compatibility layer that continues working them the use of the Divi 4 framework. That implies legacy Divi 4 modules can proceed working via Divi 5’s backward-compatibility layer as an alternative of being transformed natively. The ones modules stay running precisely as they did sooner than till their builders free up Divi 5-native updates.
Why Migrate Now?
The fast resolution: Divi 5 is not in beta! That is the production-ready free up and is the professional advice for all new websites and for all websites now on Divi 4.
For websites that depend on third-party extensions, the transition is now a lot more sensible. Divi 5 features a backward-compatibility device that permits legacy third-party modules to stay functioning whilst builders roll out local Divi 5 updates. That implies you don’t essentially must stay up for each product on your stack to be absolutely rebuilt sooner than making the transfer. And now that Divi 5 is formally launched, third-party builders have a solid manufacturing goal, which means that compatibility updates must start arriving a lot more briefly around the Divi ecosystem.
Right here’s what you acquire right away after migration:
A fully redesigned interface. The Visible Builder has been rebuilt from scratch. A continual left sidebar provides you with consistent get admission to to the Layers view, Design Variables, and such a lot of different gear. Contextual floating menus seem on hover for speedy movements. The fitting sidebar adapts to no matter part you choose, with settings arranged into Content material, Design, and Complex tabs (identical as Divi 4, however with a lot more energy baked in).
Local CSS Grid and Flexbox. Divi 5 contains integrated CSS Grid and Flexbox format techniques. You’ll create advanced, responsive layouts that have been up to now unimaginable with out customized CSS. And those aren’t simply new show varieties — they’re the most productive implementations of those format options in any web page builder.
Design Variables and Possibility Staff Presets. The Preset system in Divi 5 works at more than one ranges. Component Presets save a complete module’s configuration. Option Group Presets save person taste teams (like spacing or borders) that you’ll be able to practice throughout other module varieties. Mixed with Design Variables, you’ll be able to construct and care for design techniques that replace globally from a unmarried supply.
Interactions Builder, Loop Builder, and extra. The Interactions Builder allows trigger-driven results with out plugins. The Loop Builder allows you to create customized dynamic content material templates. Custom Attributes, Find & Replace, Nested Rows, Advanced Units, HSL & Relative Colors, and Customizable Responsive Breakpoints — those are options that merely don’t exist in Divi 4. And there’s slightly an inventory of options we haven’t even discussed.
The longer you wait, the extra you fail to see. And with backward compatibility dealing with your Divi 4 third-party modules, ready manner delaying a lot of these advantages for no sensible explanation why.
How To Migrate From Divi 4 To Divi 5
A couple of easy steps gets you in your manner.
Step 1: Create A Staging Web site And Again Up Your Information
Don’t skip this step. To make migration more secure, we strongly suggest making a staging website — a personal clone of your website online the place you’ll be able to take a look at the migration with out affecting your reside website. Divi has some integrated protections, however you must completely do what you’ll be able to to give protection to your website.
In case your internet hosting supplier doesn’t be offering one-click staging (like SiteGround, Cloudways, or WP Engine), you’ll be able to use a plugin comparable to WP Staging. If a staging atmosphere isn’t an possibility, you should no less than carry out an entire backup of your database, uploads, subject matters, and plugins the use of a device like UpdraftPlus or BlogVault.
Sooner than you again up or create a staging website, be sure WordPress core, Divi, and all Divi-related plugins are working their newest solid variations (D4).
Step 2: Audit Your 3rd-Birthday party Extensions
In the event you use third-party Divi extensions — module packs, format plugins, or customized capability from the Divi Marketplace or different assets — take a little time to test whether or not they’ve launched Divi 5-compatible variations.
3rd-party builders are answerable for updating their very own plugins to paintings natively with Divi 5. Many have already executed so, and extra are liberating updates incessantly. For extensions that haven’t been up to date but, Divi 5’s backward-compatibility device will stay them working with out breaking. However any web page that comprises the ones legacy modules will load the Divi 4 framework, in order that they gained’t get the total efficiency receive advantages till the extensions are up to date.
Make an inventory of the third-party extensions you depend on. Test with each and every developer about their Divi 5 timeline. If the vast majority of your website is determined by extensions that don’t but have Divi 5-native variations, you’ll be able to wait a couple of weeks and take a look at again, or just depend on backward compatibility.
Step 3: Set up Divi 5
There are two techniques to replace your Divi 4 website to Divi 5. The best way is to replace to the most recent model of Divi 4.
From there, move to the Divi Dashboard, the place you’ll be able to decide into the Divi 5 improve trail. Doing so will display that some other theme replace is to be had, which would be the newest Divi 5 construct. From there, replace your theme to Divi 5.
Or, you’ll be able to do issues the extra guide manner and log in for your Elegant Themes member dashboard to obtain the most recent Divi 5 free up.
This is similar procedure if you’re including Divi to a website for the primary time
Then, on your WordPress dashboard (in your staging website), move to Look > Topics > Upload New > Add Theme and set up the Divi 5 ZIP record.
Turn on the theme. As soon as Divi 5 is activated, you’ll be directed to the Divi 5 Migrator mechanically.
Step 4: Run the Compatibility Test
The Divi 5 Migrator mechanically plays a compatibility scan the primary time you get admission to it. Navigate to Divi > Divi 5 Migrator on your WordPress dashboard for those who’re no longer already there.
The scan tests more than one spaces of your website, together with Pages, Posts, Customized Put up Sorts, Theme Builder Templates, WooCommerce Merchandise, Divi Library Pieces, Widgets, and Presets.
Every house within the record shows considered one of two signs. A blue checkmark manner the content material is absolutely well suited and can convert to Divi 5 natively. An orange caution icon signifies that the content material contains modules or options no longer but absolutely supported — these things will run in backward-compatibility mode.
For any pieces flagged with warnings, the record identifies precisely which modules are inflicting the compatibility factor. Overview this sparsely. It provides you with a transparent image of what is going to run natively in Divi 5 and what is going to fall again to the legacy framework. It’s going to additionally display you which of them pages, if any, have the unsupported modules.
Step 5: Migrate
After reviewing the compatibility record, replace any third-party extensions you employ to their Divi 5-compatible variations, if the ones updates are already to be had. Those will care for the migration of their very own plugins and settings.
After that, return to the compatibility record and click on the Migrate This Web site to Divi 5 button. A affirmation conversation will seem. Click on Ascertain to continue.
The migration itself is speedy. The migration procedure normally takes a couple of seconds, regardless that higher websites might take a few mins. Greater websites with intensive libraries of content material might take a minute or two. Throughout this time, the migrator converts each Divi-built web page, put up, and template — transferring supported modules to the Divi 5 framework and wrapping unsupported modules within the backward-compatibility layer. That is usually a one-time procedure, so that you gained’t wish to run it once more for a similar website.
When the migration completes, you’ll see a “Welcome to Divi 5” affirmation display. This display may additionally come with two further choices: a button to rerun the compatibility take a look at (helpful as third-party extensions free up updates) and a button to repair Divi 4 content material if you want to revert.
Working out Backward Compatibility Mode
After migration, some pages in your website might show a small realize at the entrance finish that reads “Backward Compatibility Mode Enabled”. That is informational, no longer an error. It manner the web page comprises no less than one legacy module nonetheless working at the Divi 4 framework, so Divi so much the legacy rendering device to stay that module running.
In Backward Compatibility Mode, legacy modules can nonetheless be exhibited to guests and opened within the builder. All styling stays intact. However the web page so much the Divi 4 rendering engine along Divi 5, so it gained’t have the benefit of Divi 5’s efficiency enhancements till each module on that web page is transformed to Divi 5. Unsupported modules are nonetheless selectable within the Module Picker, however the use of them will stay the web page in Backward Compatibility Mode till they’re up to date.
As third-party builders free up Divi 5-compatible updates for his or her extensions, you’ll be able to replace the ones plugins, and the backward-compatibility realize must disappear as soon as all legacy modules at the web page had been up to date or changed. You’ll additionally proactively exchange legacy third-party modules with Divi 5-native possible choices the place to be had.
Pages that include simplest Divi 5-native modules run fully at the new framework with complete efficiency advantages.
Put up-Migration Trying out
After migration, check key pages to make sure the whole lot is functioning as anticipated.
Test your highest-traffic pages first. Load a number of of them at the entrance finish and examine how they appear to how they appeared sooner than migration. Search for format shifts, lacking content material, damaged styling, or capability problems.
Test Theme Builder templates. Headers, footers, and customized put up sort templates all move throughout the migration procedure. Ascertain they show and serve as as it should be.
Test WooCommerce pages for those who’re working an internet retailer. Product pages, cart, checkout, and account pages must all be verified.
Test paperwork, menus, and interactive components. Touch paperwork, navigation menus, conditional shows, and any JavaScript-dependent capability must be examined on each desktop and cell.
In the event you to find problems in your staging website, report them and believe whether or not they’re blockers. Some could also be fast fixes you’ll be able to do immediately in Divi 5. For different problems, chances are you’ll need to stay up for a plugin replace. That is precisely why staging exists — you determine and resolve those issues with out affecting your reside website.
In the event you run into migration problems with local Divi modules, please record them so the migration device can proceed to reinforce.
Going Reside
As soon as your staging website passes checking out, push staging to manufacturing. Maximum internet hosting suppliers that provide staging additionally be offering a one-click push to make your staging website reside. That is the cleanest means as it replaces your manufacturing website with the absolutely examined, migrated model.
If One thing Is going Improper
The Divi 5 Migrator features a integrated repair possibility that assists in keeping a replica of your Divi 4 content material. In the event you stumble upon issues after migration, click on Repair Divi 4 Content material at the Migrator display to revive your pre-migration Divi 4 content material. After restoring your content material, you’ll be able to roll again or reinstall Divi 4 to go back absolutely to the Divi 4 replace trail.
If the repair possibility doesn’t unravel the problem, the use of a disposable staging website or your complete website backup from Step 1 will can help you get again for your running Divi 4 construct.
We’re actively running via migration-related worm stories as they arrive in. There might nonetheless be edge instances the place a migration leads to small problems. In the event you stumble upon a particular factor all the way through checking out on staging, record it and notice if you’ll be able to repair it from the Divi 5 facet. If the repair is minor, it can be value making the adjustment in Divi 5 somewhat than looking ahead to a long term replace. However that judgment is totally as much as you. Issues that block you lately could also be resolved within the subsequent dot free up, as we be sure migration isn’t a roadblock.
Migrate Your Web pages To Divi 5 As of late!
Divi 5 is essentially the most important improve in Divi’s historical past. The migration procedure is designed to be protected, reversible, and thorough. Again up your website, take a look at on staging, run the migrator, check your pages, and move reside. The efficiency beneficial properties, the brand new builder interface, and the expanded characteristic set are value it.
And keep in mind, different developers in fresh reminiscence didn’t provide you with a migration pathway. We’re so humbled through our devoted customers’ endured use that we made it a demand for ourselves to make sure a migration device is in position. We are hoping that you’ll be able to simply bounce into Divi 5 and enjoy the entire implausible development we’ve been making.
The put up How To Migrate From Divi 4 To Divi 5 (Complete Guide) seemed first on Elegant Themes Blog.
0 Comments