Popups for Divi
Create Popups in the Visual Builder!
- Transform every Section into a popup
- Unlimited Popups on every page
- Trigger popups via Button or Link
- Extendable via a professional JavaScript API
- No configuration, simply install and use
Popups in Divi. The way they should be.
Transform every Divi-section into a Popup without leaving the Visual Builder. The configuration is simple via our innovative UI.
Read more, to find out why Popups for Divi is the leading Popup plugin for your Divi website.
Simple
The plugin adds a brand-new Popup-tab to the section settings-modal. With those new options, you can turn a regular section into an interactive Popup.
Flexible
Show your Popups when you need them. For example, when clicking a link or button, or on exit-intent. You can even create advanced, custom triggers by using the plugins JavaScript API.
Fast & Responsive
Every line of code is optimized to load your page as fast as possible. It’s perfectly compatible with all caching plugins and all devices.
Integrated
Popups for Divi can display any default module that comes with Divi. It plays well with the Divi- and Extra theme, and the Divi Builder plugin, WooCommerce, etc.
Extendable
A stable and documented JavaScript API and possible customization via WordPress filters make this plugin even more versatile!
Free forever
Popups for Divi is and stays free: No fees, no ads, no nags, just Popups. It comes with a GPL compatible license.
"Huge fan of your plugin"
I am a huge fan of your plugin Popups for Divi, as an independent web developer, I use it a lot for my clients!
Miguel
Your first popup, in 60 seconds!
- Install the plugin
Log into your admin dashboard and find the plugin Popups for Divi. Install and activate it. -
Define a Popup
Enter the Visual Builder and add a new section. In the section settings, enable the option “This is a Popup” and set the popup ID to “sample“. -
Trigger the Popup
Finally, add a new button to a different section, and set the link URL to “#sample“. -
Done
Now save your page, and load it without the Visual Builder – click the button to see your Popup in action!
Need more details?
We’ve created a free 6-day email course that walks you through all aspects of Popups for Divi – many samples, images, and even code snippets.
(opens in new tab)
The first Popup
It’s so simple to turn a Divi section into a Popup!
All Popup Options
General
This is a Popup
Turns the current Divi section into a Popup. When enabled, additional options become available.
Popup ID
Assign a unique ID to the Popup. You can display this Popup by using this name in an anchor link, like “#slug”.
Behavior
Close on Background-Click
Here, you can decide whether the Popup can be closed by clicking somewhere outside the Popup.
When this option is disabled, the Popup can only be closed via a close button or pressing the ESC key on the keyboard.
Close other Popups
Here, you can decide whether this Popup should automatically close all other Popups when it is opened.
Enable Exit Intent
When you enable the exit intent trigger, the Popup is automatically opened before the user leaves the current webpage.
Note that this behavior only works on desktop browsers, not on touch devices like phones – Divi Areas Pro has a “back-button trigger” that works on all devices.
Close Button
Show Close Button
Do you want to display the default close button in the top-right corner of the Popup?
When the close button is hidden, the user can dismiss the Popup by clicking on the background overlay, or pressing the ESC key.
Button Color
Here, you can choose the color of the built-in close button. The default style is dark (i.e., the “x” icon is dark), which looks good when your Popup has a light background color.
When you design a Popup with a dark background color or image, when use a light button for better contrast.
Options:
- Dark
- Light
Transparent Background
This option allows you to remove the background color of the close button.
When enabling the transparent background, the close button only shows the x-icon and no square background.
Layout
Add a Default Shadow
Decide, whether you want to add a default shadow to your Popup.
You should disable this option, when you set a custom box shadow for this section.
Show Loader
Enable this to display a loading animation in the background of the Popup.
This should be turned on, when the Popup contains an iframe or other content that is loaded dynamically.
Visibility
Disable on
Here you can disable the Popup on selected devices.
Options:
- Phone
- Tablet
- Desktop
The JavaScript API
How to use the JS API
Looking for a step-by-step guide on how to add this code to your webpage? Here it is:
JS API Overview
Code Generator
A developer tool to help you to create custom JS snippets for Popups for Divi.
"Great contribution"
That is one awesome free plugin – and a real bonus having the API!
What a great contribution to the Divi user community.
Paul
Feature Comparison
See, what’s included in our plugins and why customers love them.