Plugin Link: 

We can use Divi Overlays as an alternative to Popup Maker on our Divi websites. It allows us to create popups, modals, and fullscreen overlays using the Divi Builder. The basic workflow is straightforward: create the popup, design its content, and connect it to a button, link, or another trigger. This should feel familiar to team members who already work with Divi. Product overview

Divi Overlays is developed and supported by Divi Life. The Elegant Themes marketplace currently lists compatibility with both Divi 4 and Divi 5. Settings and screen layouts may vary by version. Marketplace listing

1. Install the plugin

1. Download the Divi Overlays ZIP file from the account used to purchase it.
2. In WordPress, go to Plugins → Add New → Upload Plugin.
3. Select the ZIP file, install it, and activate the plugin.
4. Complete any license activation required for your purchase.

2. Create a popup

1. Open Divi Overlays in the WordPress dashboard and add a new overlay.
2. Enter a descriptive title, such as “Contact Form Popup.”
3. Enable the Divi Builder and design the popup.
4. Add the content required for the popup, such as text, images, a form, or a call-to-action button.
5. Adjust the layout, spacing, background, and mobile appearance.
6. Publish the overlay.

You can also import a supplied popup template. Import the template directly into the overlay’s editing screen using the Builder’s portability tool. Getting started guide

3. Open a popup using a CSS class

For our team’s class-based workflow, use the plugin’s CSS Selector Trigger feature. The following example connects a button to a contact popup:

1. Edit the button that should open the popup.
2. Set its link URL to #open.
3. In Advanced → CSS ID & Classes → CSS Class, enter:

   open-contact-popup

4. Edit the contact overlay and locate CSS Selector Trigger.
5. Enter the matching selector:

   .open-contact-popup

6. If display-location options appear for this trigger, include the page where the button is placed.
7. Save both the overlay and the page, exit the Builder, and test the button.

Use no dot in the module’s CSS Class field, but include the leading dot in the overlay’s CSS selector field. You can reuse this class on additional buttons that should open the same popup. Use a different class for each different popup. This example applies the plugin’s documented CSS selector method. CSS selector trigger guide

Documentation note: Some official tutorials describe the generated overlay ID method, while the quick-start instructions also mention the CSS Class field. The custom selector method above makes the class-to-popup connection explicit.

4. Configure automatic popups when needed

Divi Overlays also supports:

• Timed delay: Open after a specified number of seconds; use zero for page-load triggering.
• Scroll trigger: Open after the visitor scrolls a specified distance.
• Exit intent: Open when the plugin detects that the visitor is about to leave.

Configure these in the overlay’s automatic trigger settings. Trigger overview

Additional controls include display locations, scheduling, device restrictions, close-button customization, and a close-button cookie to limit repeated automatic appearances. Scheduling and the documented device-disable feature apply to automatic triggers; do not assume they also disable click triggers. Feature documentation

5. Replace existing Popup Maker popups

Use this migration process for each website:

1. List the existing popups, their content, trigger buttons, display rules, and repeat-display behavior.
2. Recreate each required popup in Divi Overlays.
3. Connect the relevant buttons and links to the new overlay.
4. Recreate the required automatic triggers and display settings.
5. Test the replacements on a staging site before disabling Popup Maker.
6. Deactivate Popup Maker after all required popups work correctly.

Treat this as a manual rebuild unless an import method has been verified. Existing Popup Maker settings and trigger classes should not be assumed to transfer automatically.

6. Check before publishing

• Confirm every intended button opens the correct popup.
• Verify the close button works and remains visible on mobile.
• Test forms, validation, success messages, and email delivery.
• Check automatic triggers on included and excluded pages.
• Test as a logged-out visitor and on desktop and mobile.
• Confirm visitors do not see both the old and replacement popup.

If changes do not appear, clear the relevant Divi, website, and browser caches and test again. The developer also provides troubleshooting articles for missing updates and click-trigger issues. Troubleshooting documentation