📖 How to Create a Popup in Divi Using Instant Popup Builder

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 popup type from the available options. You can explore additional features and extensions as needed.
3. Design and customize your popup content.
4. Click Publish to make your popup live.

Step 3: Configure the Popup Trigger

To display your popup 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.