In this guide, we’ll show you how to make a popup so it displays when you click a Divi button. By the end of this tutorial, you’ll know how to use Popup Maker to create and use a Divi popup that’s both functional and eye-catching.
Let’s dive in!
What You’ll Need To Follow Along
To create your popup, we’ll be using Popup Maker—a free, beginner-friendly plugin that packs a powerful punch. It’s perfect for boosting revenue, growing your subscriber list, or simply sharing information with your visitors in a dynamic way. While there are various options for creating popups for Divi, Popup Maker stands out for its ease of use and compatibility.
Let’s get Popup Maker set up.
Log into your WordPress dashboard and head to Plugins > Add New.
In the search bar, type “Popup Maker”.
Popup Maker should appear as the first result. Click the “Install Now” button.
After a quick installation, hit “Activate”.
And just like that, you’re all set to create your first popup! With Popup Maker at your fingertips, you’re about to unlock a whole new level of interactivity for your website. Let’s dive into the fun part—creating your popup!
Create Your Popup
Popup Maker is incredibly versatile, integrating seamlessly with popular plugins like WPForms, Easy Digital Downloads, Formidable Forms, and Contact Form 7. For this guide, we’ll keep things simple with a basic popup.
To get started, head to your WordPress dashboard and navigate to Popup Maker > Create Popup.
You’ll now see the Popup Maker editor, where you can customize your popup’s design and content.
Start by giving your popup a name (this is for your reference only). Then, enter a title that will appear at the top of your popup.
In the WordPress Classic Editor, add your popup content. This can include text, images, HTML, or even shortcodes from other plugins. Want to include a form? No problem—just use a shortcode from your favorite form plugin.
Popup Maker has built-in support for the most popular form plugins out there. Learn about the perks that come with using a form plugin that Popup Maker integrates with.
Scroll down to find the Popup Settings section.
While Popup Maker offers a plethora of customization options, for this guide, we’ll focus on adding a new trigger. Click the Add New Trigger button:
In the popup that appears, select Click Open as the trigger type.
Click Add to customize this trigger. On the next screen, you’ll see a class name for your popup. Make a note of this—you’ll need it later.
Click Add again to attach this trigger to your new popup.
Pro tip: By default, Popup Maker will load this popup on all pages on your website, even though it will only display this when your target button is clicked. If you are only going to use this popup on a couple of pages, you’ll want to target those pages using the popup Targeting settings. That way, Popup Maker will only load this popup on the posts or pages you need (for efficiency).
Finally, hit the Publish button in the top right corner of the page:
And there you have it! Your popup is now ready to go. In the next section, we’ll connect it to a Divi button.
Link Your Divi Button To The Popup
Now that your popup is live, it’s time to connect it to a Divi button on your website. Don’t worry if you can’t see the popup yet—that’s because we haven’t linked it to any buttons. Let’s fix that!
First, open any page in the Divi builder. You can either select an existing Divi button or add a new one. Once you’ve chosen your button, click the gear icon to access its settings:
In the settings panel, switch to the Advanced tab. This is where the magic happens!
Remember that class name we noted earlier? It’s time to use it. Find the CSS Class field and enter your popup’s class name:
Don’t forget to hit the green Save button to lock in your changes.
Finally, let’s make these changes live. Click the Publish button in the bottom right corner of your screen:
And voilà! You’ve successfully linked your Divi button to your popup.
Now for the moment of truth: visit your website and give that Divi button a click. If everything’s set up correctly, you should see your beautiful new popup spring to life!
If you get stuck anywhere, we’re only a click away. Reach out to our friendly support team.
Congratulations—you’ve just added a popup to your website that’s sure to grab your visitors’ attention. Feel free to experiment with different popup designs and button placements to find what works best for your site. With this method, you can create different types of Divi popups, from lead capture forms to promotional offers, enhancing your website’s functionality and user engagement.
