Divi 5 introduces Interactions, a groundbreaking new feature designed to make your website more dynamic and engaging.
This powerful system allows you to create custom animations and responses based on user actions or page events. Forget static designs – with Interactions, you can build captivating pop-ups, content toggles, mouse-responsive elements, and much more, all within the intuitive Divi Visual Builder.
At its core, every interaction involves three key components:
Trigger: What initiates the interaction (e.g., a click, hover, or element entering the viewport).
Effect: The action that occurs when the trigger is activated (e.g., toggle visibility, apply a preset, change an attribute).
Target: The specific element(s) on your page that will be affected by the interaction.
Accessing and Using Interactions
Divi 5 integrates Interactions seamlessly into the builder, making it easy to add dynamic elements to any part of your design.
Select Your Element: In the Divi Visual Builder, click on any module, row, or section to open its settings.
Navigate to the Advanced Tab: Within the element's settings, click on the Advanced tab.
Find the Interactions Group: Scroll down to locate the new Interactions group.
Add an Interaction: Click the Add Interaction button to open the Interaction Editor.
Configure Your Interaction:
Choose a Trigger: Select how the interaction will be initiated from the available options (e.g., Click, Hover, Enter Viewport).
Define an Effect: Select the action you want to happen (e.g., Toggle Visibility, Toggle Preset, Mirror Mouse Movement).
Set a Target: Specify which element(s) on your page will be affected. This can be the element itself, a parent, a child, or any other element on the page using its CSS ID or Class.
Customize Effect Settings: Depending on the chosen effect, you'll have additional options to fine-tune the animation, duration, delay, and other properties.
Save Your Changes: Once configured, save the interaction and your page settings to see it in action.
Interactions 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 or off for an element, with the option to replace existing presets.
Add Preset: Applies a preset style class to an element, with the option to replace 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.
Use Cases
The possibilities with Divi 5's Interactions are virtually endless. Here are two everyday and impactful use cases to get you started:
Use Case 1: Creating Dynamic Pop-Ups or Slide-In Banners
You can use Interactions to create attention-grabbing pop-ups or banners that appear at just the right moment.
How to do it:
Design your Pop-up/Banner: Create your pop-up content within a new section or module. Initially, set its visibility to hidden by default in its Advanced settings.
Add an Interaction to a Trigger Element:
Select the section or module you want to trigger the pop-up (e.g., the pop-up section itself, or a parent section that, when scrolled into view, triggers the pop-up).
Go to the Advanced tab → Interactions → Add Interaction.
Trigger: Choose Enter Viewport for the pop-up to appear when it scrolls into view, or Click on a button to trigger it manually.
Effect: Select Toggle Visibility or Show Element.
Target: Set the target for your pop-up section or module.
Add a Close Button (Optional): Inside your pop-up, add an icon or text module (e.g., an X icon). Add an Interaction to this icon:
Trigger: Click.
Effect: Hide Element.
Target: Your pop-up section/module.
This setup allows you to create interactive and non-intrusive pop-ups that enhance user experience.
Use Case 2: Building Interactive Content Toggles (e.g., Pricing Tables)
Interactions are perfect for creating sleek content toggles, such as switching between Monthly and Yearly pricing plans without reloading the page.
How to do it:
Create Your Content Sections: Design two separate modules or sections for your Monthly and Yearly pricing details. Initially, hide one of them (e.g., the Yearly section).
Add Toggle Buttons: Create two buttons or text modules (e.g., Monthly and Yearly).
Configure Interactions for Each Button:
Monthly Button Interaction:
Trigger: Click.
Effect: Show Element.
Target: Your monthly pricing section.
Effect: Hide Element.
Target: Your yearly pricing section.
Yearly Button Interaction:
Trigger: Click.
Effect: Show Element.
Target: Your yearly pricing section.
Effect: Hide Element.
Target: Your Monthly pricing section.
This creates a seamless toggle effect, allowing users to switch between different content views with a single click.