Want to add a high-converting popup in Divi website? With the Instant Popup Builder plugin and a simple CSS class trigger, you can easily create responsive, engaging popups that appear when users interact with buttons, images, or other page elements. Follow this step-by-step guide to build and trigger a popup in Divi.

Step 1: Install & Activate Instant Popup Builder

First, make sure the Instant Popup Builder plugin is installed and activated on your WordPress site.

1. In your WordPress dashboard, go to Plugins → Add New.
2. Search for Instant Popup Builder.
3. Click Install, then Activate.
4. Confirm the plugin appears in your list of active plugins.

Step 2: Create a New Popup

1. Go to Instant Popup → Add New Popup.
2. Choose the pop-up type from the available options. You can explore additional features and extensions as needed.
3. Design and customize your pop-up content.
4. Click Publish to make your pop-up live.

Step 3: Configure the Popup Trigger

To display your pop-up when a user clicks or hovers over an element, set up a trigger using a CSS class.

1. In your popup settings, navigate to General → Triggers.
2. Choose your preferred trigger type: On Click or On Hover.
3. A unique CSS class (e.g., .ipb-popup-123) will be generated for your popup.
4. Save or update your popup.

This CSS class will be used to trigger the popup from any module or element within Divi.

Step 4: Add the Trigger Class in Divi

1. Open the Divi page where you want the popup to appear.
2. Select the module you want to use as a trigger (e.g., Button, Image, or Text).
3. Go to Advanced → CSS ID & Classes → CSS Class.
4. Paste the CSS class you copied earlier (e.g., popup-discountoffer) into the CSS Class field.

That’s it! Your popup is now set up and ready to go. When a user clicks or hovers over the designated element, the popup will appear instantly.