Interactions For Divi 5 (Pop-Ups, Toggles, Mouse Effects & More)

Today, we are excited to release Interactions for Divi 5, 🎉 a robust system for creating interactive elements such as popups and toggles, and creative scroll-based and mouse-movement-based effects.

It’s not a pop-up builder; it’s an anything builder. Create a trigger, assign an effect, choose a target, and bring your custom interactions to life. You can do so many amazing things with this system, and I can’t wait to show you how it works, so let’s jump in.

Check out the following video to see the new feature in action. 👇

Build Your Own Interactive Elements

You’ll notice a new Interactions group in the advanced tab of all elements. Clicking the add interaction button will open the interaction editor, where you can configure each interaction’s trigger, effect, and target.

The trigger initiates the interaction, such as when clicking or hovering. The effect happens when the interaction is triggered, such as toggle visibility, preset, or attribute, and the target is the affected element on the page.

Interaction Examples

Before I go deeper into these settings, let me show you a few examples of what interactions can achieve.

Example 1: Building A Pop-Up

In the video example below, I used interactions to create a pop-up.

I added an Enter Viewport trigger to a section, which applies the Toggle Visibility effect to my pop-up. The section enters my viewport, triggering the visibility of the popup, and it slides in using Divi’s animation settings.

Additionally, an icon module within the popup has a Click-based interaction, which toggles visibility on the popup to close it. You can create any type of pop-up or floating banner!

Example 2: Building A Toggle

In the video example below, I used interactions to toggle monthly and yearly pricing tables.

I added two interactions to a row to toggle the visibility of alternating yearly and monthly pricing sections. Next, I added two more interactions to toggle the visibility of two icon modules, giving the user additional feedback on click.

Example 3: Transitioning Between Presets

One of the most powerful effects is the toggle preset effect. Since presets allow you to modify an element’s settings, there’s no limit to what you can do. When a trigger changes the preset on a target element, it can transform it in many ways.

In the video example below, I set up two interactions to add and remove a preset on a row as it enters and exits the viewport. The highlight preset changes the row’s background color and scale, and adds a box shadow, grabbing users’ attention as they scroll down the page!

Example f: Mouse Movement Effects

The interaction systems’ mouse-movement-based effects are a lot of fun.

In the video example below. I added several interactions to a hero section, targeting various elements with mouse-movement-based effects of varying sensitivities.

The interactions trigger on mouse enter, applying opacity, movement, and tilt effects on elements that change as my mouse moves. I also added an interaction to the button module, which toggles a preset to change the style of the square outline.

The Possibilities Are Endless!

I could go on and on with different examples, and I’m excited to see what you come up with.

Looking at the Interaction Editor more closely, you can see some additional effects to play with that I haven’t mentioned yet, such as toggling attributes, cookies and scrolling to the elements.

For example, you could use attribute effects to change an element’s CSS classes, ID, or anything else.

Version one of Interactions supports the following effects:

• Toggle Visibility – Switches an element between visible and hidden states automatically.
• Show Element – Makes a hidden element visible.
• Hide Element – Makes a visible element hidden.
• Toggle Preset – Switches a preset on/off for an element, with optional replacement of existing presets.
• Add Preset – Applies a preset style class to an element, with optional replacement of existing presets.
• Remove Preset – Removes a preset style class from an element.
• Toggle Attribute – Adds or removes an element’s specific HTML attribute value, such as a CSS class and ID.
• Add Attribute – Adds a specific HTML attribute value to an element if it doesn’t already exist.
• Remove Attribute – Removes a specific HTML attribute value from an element.
• Toggle Cookie – Add or remove a cookie value from a cookie. For example, set a cookie when a pop-up appears to track when a user has seen a pop-up. Then, use Divi’s condition options to hide the popup on future page visits for that user.
• Add Cookie – Adds a cookie and cookie value you define to the visitor’s browser.
  Remove Cookie – Remove a specified cookie.
• Scroll To Element – Smoothly scrolls the page to bring the target element into view.
• Mirror Mouse Movement – Makes the target element follow mouse movement within the trigger element using various movement types (translate, scale, opacity, tilt, or rotate) with adjustable sensitivity.

Try Divi 5 Today

Interactions for Divi 5 is available today, and it’s one of many features coming to Divi this year.

You can follow along as we progress through the final release of Divi 5 and beyond, with updates every two weeks. Depending on your priorities, you can use Divi 5 now to build new websites or wait until we add more features, whatever works best for you.

As outlined in Divi 5’s original multi-phase release schedule, the Divi 5 Public Alpha is like “Divi 5 Lite.” It’s missing a few features and may not be suitable for existing websites, but it’s ready to be used on new websites if you prefer the experience to Divi 4.

We want you to try it, and if you love it, use it; when everyone loves it, we’ll make it official.

Have You Tried Relative Colors?

In case you missed it, we recently released Relative Colors for Divi 5, making Divi the clear leader in color management and advanced color system. It allows you to create mathematically beautiful variable-based color systems with nested color relationships using HSL. You don’t want to sleep on this feature.

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

2025 is the year of Divi 5. The tedious work is behind us. We built the super-fast foundation, and now it’s time for Divi to make its comeback.

If you’re here for the Divi comeback, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.

Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁