With DonDivi Popup, you have powerful ways to engage visitors and highlight important content via popups, whether triggered on page load, click, hover, or exit intent. Enjoy using it to create eye-catching, user-friendly popups!
Installation
Install and activate the Divi Theme.
Go to WordPress Dashboard → Plugins.
Click on the Add New Plugin button.
Click on the Upload Plugin button.
Choose the dondivi-builder.zip file.
Click on the Install Now button.
Once the builder is installed, you'll find a new module named DonDivi Popup in the Divi Builder.
Overview
The DonDivi Popup module can display a popup in various ways, including on page load, exit intent, page scroll, element hover or click, icon hover or click, image hover or click, or button hover or click.
The popup content can be fully responsive, include custom text and media, or be pulled from a Divi Layout.
Add DonDivi Tabs
Click on the Add Module button
Search for DonDivi Popup
Click on it to add it to your page
DonDivi Popup Settings
Content tab
Popup:
Trigger On: Select how the popup will be triggered:
Page Load (default): The popup appears as soon as the page loads.
Page Scroll: The popup triggers after scrolling. Use Page Percentage to set how far down the user must scroll.
Image/Icon: Renders an image or icon that, when hovered or clicked, opens the popup. You can style this element under the Design Tab → Trigger Element.
Button: Renders a button that, when hovered or clicked, opens the popup. Use the Button field to set the button text, and style it under the Design Tab → Trigger Element.
Element: Triggers the popup when hovering or clicking a specific page element. Enter the element's CSS class in Element CSS Class.
Exit Intent: Triggers the popup when the user attempts to leave the page.
Delay: By default, the popup triggers immediately. If you want a delay, specify the time in milliseconds here.
Show Close Icon: Enable this to display a close icon inside the popup. You can change the default icon if desired.
Disable Page Scroll: Prevents page scrolling while the popup is open.
Content:
Preview in the Builder: Turn this on to see how the popup will look on the front end directly in the builder. It's best to disable it once you finish editing so the popup doesn't obstruct other elements while designing.
Content: Choose what the popup displays:
Custom: The popup displays your text and media.
Divi Layout: The popup loads a Divi Layout from your library.
Note: Nested popup modules inside a DonDivi Popup can cause style conflicts; therefore, it's best to avoid this practice.
Desing Tab
Popup:
Location: Choose one of nine screen positions (top-left, top-center, top-right, left-center, center, right-center, bottom-left, bottom-center, bottom-right). This is responsive, allowing you to set different positions for each device.
Popup Max Width: This setting limits the width at which the popup can appear (80% by default). You can assign different max widths per device.
Popup Max Height: Limit how tall the popup can appear (default 80%). Also responsive.
Background Color: Assign a background color to the popup. Useful for custom content popups.
Overlay Color: Change the color overlay behind the popup. Responsive as well.
Close Icon Color & Width: If a close icon is displayed, these fields allow you to customize its color and width (both responsive).
Border and Padding: If the popup content is in a custom setup, add a border, rounded corners, and internal padding around it.
Popup Title: Select the font family, styles, alignment, color, size, and other settings for the popup's title text.
Popup Body: Select the font family, styles, alignment, color, size, and other settings for the popup's body text.
Popup Button: Select the styles for the popup's button.
Popup Animation: Animate the popup as it appears. The default is None, which has no effect. If you pick a DonDivi effect, any Divi layout animations are overridden.
Enter Effect: Choose the Animation for when the popup appears.
Exit Effect: Choose the Animation for when the popup is dismissed.
Animation Intensity: Adjust subtlety or strength (default 100%).
Duration: Choose how long the animation lasts in milliseconds (default 1000ms).
Sizing: Choose the popup's size, including width, max width, module alignment,, and more.
Spacing: Choose the popup's spacing, such as margin(outer spacing) and padding (inner spacing).
Box Shadow: Choose the popup's box shadow styles.
Filters: Choose the popup's filters.
Transform: Choose the popup's transform styles.
Animation: Choose the popup's animation. These are useful if the popup doesn't have any Enter/Exit effects.