Testing Divi Essential With Divi 5

Divi 5 has been in Public Alpha since late last year. It is incredible how much progress we’ve made over that time. However, to gauge its progress, you need to look at how leading third-party extensions are adapting to Divi 5’s new architecture.

We did a full overview of Divi Essentials not too long ago, but that was well before any D5 updates on their part.  Let’s check in on Divi Essential again and look at its recent D5 compatibility updates!

Divi Essential’s D5 Progress Update

Divi Essential, a popular module and extension pack, is actively pivoting to Divi 5! Its latest beta version is now out and is compatible with Divi 5. Divi Essentials users can contact their support team to get access to the Beta if they want to try it.

Divi Essential’s developers have built an innovative dual-compatibility, supporting Divi 4 and Divi 5. Migration is currently initiated only when pages are saved after initial attempts, not directly from the migrator interface. This cautious approach helps ease the transition to the new Divi environment when using their modules and extensions.

Here’s how the Divi Essentials Modules look in the Module Picker of Divi 5.

And here are a couple of Divi Essential Modules rendering on the Front End.

They even improved their Admin Dashboard UI in this big update. But more on that below.

What Is Included With Divi Essential?

Divi Essential includes an impressive 64 modules, seven extensions, and hundreds of premade layouts. It covers a lot of ground and interesting use cases, from dynamic visual storytelling to advanced effects and highly interactive user experiences. There’s more than we can realistically cover here, so make sure to see for yourself.

Get Divi Essential

Popup Pro Extension

So many people get Divi Essentials for the Modules but keep using it for Popup Pro. It lets users create dynamic, engaging popups without touching any code. You can start from scratch or get a head start using one of dozens of premade templates.

The first thing to do is ensure the Popup Pro Extension is turned on in its Dashboard.

This will create a new WordPress Admin menu item on the left. You can click into Popup Pro and create a new popup using Add New.

They still use a form-based editor to create and deploy popups. The settings have three tabs: General, Customization, and Display Conditions.

It would be great to see something that leverages the Visual Builder in the future, but it works exactly as it did with Divi 4, and for that, we are thrilled.

Dozens Of New Modules

Divi Essential drops sixty-four fresh modules inside the Divi 5 builder. You get access to helpful modules ike Business Hours, Price List, and Review. You also get eye-candy movers like 3D Cube Slider, Glitch Text, and Image Magnifier. Carousels, accordions, hotspots, timers — the gang is all here.

Everything renders live inside the Visual Builder, so there is zero guesswork. Drop in a module, fiddle with its settings, hit save, and enjoy.

Rebuilt Divi Essential Dashboard

The Divi Essential Dashboard has been redesigned along with these D5 updates. With it, users can centrally manage modules, extensions, and settings, simplifying the configuration and integration process.

The new dashboard layout offers a nice performance boost (by deactivating unused modules/extensions) and is easy to use.

Building An Interactive Section With Divi Essential’s 3D Flip Box

Divi Essential’s impressive additional Modules are great for adding low-effort effects to your website. Let’s try the 3D Flip Box Module on for size.

1. Enable The Module

Open the rebuilt Divi Essential Dashboard and activate the 3D Flip Box. Save. If the builder was opened in another tab, refresh it. (Deactivating unused modules here could improve site performance.)

2. Add The Module In Divi 5

Create a new row, click the gray “+” icon, and search for “Flip.” Select 3D Flip Box. The Module drops in with a default front and back panel. When hovered (on the front end and in the editor), the box will flip to show the reverse side.

3. Design The Front Panel

Now, you can customize your flip box.

• Replace the placeholder icon with your own selection.
• Add a headline, short text, and a button.
• Style text and other things using your Design Variables and Advanced Units

4. Tweak The 3D Motion

In the Design Tab, you can set one of three effect directions (left to right, right to left, and bottom to top).

As you look through the other Design Settings, you’ll notice that this Divi Essentials module uses many of the new features in D5. You can use Advanced Units to set sizing options and Design Variables to keep things consistent. You can also use the extra Breakpoints and the efficiency features of Attribute Management and Extend Attributes with these modules, too.

Building A Rotating Image Carousel With Divi Essential

All of Divi Essential’s Modules are well-made and straightforward to use, including the Carousel Module.

1. Add The Carousel Module To Your Page

To use it, ensure the Module is activated in the dashboard and then add it to a Divi 5 page.

2. Add Child Modules For Each Carousel Image

The Carousel Module holds Child Modules, which you’d add each image through. Click Add New Child Module to start adding images. Add as many child modules as you need for the number of images you want in your carousel.

3. Configure Carousel Settings

As you add images to each child module, the carousel will work even in the back end. There are several configurable settings to customize your carousel from here.

Here are some of the main options:

• Carousel Settings
  • Autoplay Delay – time between automatic slides
  • Loop – restart carousel after last slide
  • Center Slide – keep active slide centered
  • Auto Height – height adapts to each slide
  • Equal Height – force uniform slide heights
  • Speed – transition-animation duration (ms)
  • Space Between – gap size between slides
  • Slide Preview – number of slides in view
• Navigation Settings
  • Use Grab Cursor – show hand cursor on hover
  • Use Arrow Navigation – display next/prev arrows
  • Keyboard Navigation – arrow keys move slides
  • Mousewheel Navigation – scroll wheel changes slides
  • Pagination Type – bullets, fraction, or progress
  • Dynamic Bullets – bullet size reflects position
  • RTL Direction – flip navigation for RTL sites
• Effect Settings
  • Use Slide Shadow – add drop shadow to slides
  • Slide Rotate – rotate slides on transition
  • Slide Stretch – perspective stretch during swipe
  • Slide Depth – Z-axis depth/parallax amount
• Lightbox Settings
  • Use Lightbox – open images in overlay viewer
  • Arrow Color – set lightbox navigation arrow color
  • Close Button Color – color for close icon
  • Overlay Color – tint behind lightbox content

And of course, thanks to Divi 5’s native styling options, a lot more can be done in the Design tab of the module and child modules. Each Divi Essential Module delivers on its purpose. The settings are clearly laid out, and everything I tested seemed to work in Divi 5.

4. Possibilities

And without much work at all, you can have a beautiful image carousel.

The cool thing about this module is that it supports text content and overlays, turning the carousel above into an interactive call to action.

Get Divi Essential Today

To access the latest Divi Essential beta for Divi 5, existing and new users can request beta access directly from the developers. For standard installations, you can purchase Divi Essential from the official Divi Marketplace:

Get Divi Essential

Purchasing via the Divi Marketplace ensures reliable updates, excellent customer support, and easy management of licenses. Users enjoy unlimited site usage, regular updates, and a 30-day satisfaction guarantee.

Start Using Divi Essential With Divi 5

Divi Essential’s transition to Divi 5 is welcome news to the Divi ecosystem. Divi 5’s potential is much more exciting as more third-party plugins transition. Divi Essential is one of a handful of Marketplace products leading the way.

Because of their unique suite of modules and extensions, Divi Essential has something useful for every website.

Now is the ideal moment to explore Divi Essential, embrace Divi 5, and push your creative boundaries further than ever.