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

Simple

Only add a single CSS class to any Divi-Section and you’ve got your first popup!

Unlimited

Create as many popups as you need. Or want. It’s just fun!

Visual Builder

Transform every Divi-Section into popup and view a live preview inside the Visual Builder!

Flexible

Show your popups when you need them. For example when clicking a Link or Button. Or on exit-intent

Responsive

Do not worry about mobile optimizations. Popups for Divi is completely responsive!

Free

Divi Popups is (and stays!) free. It comes with a GPL compatible license.

}

Fast

Every line of code is optimized to load your page as fast as possible. Absolutely compatible with all caching plugins.

Developers love it

A stable JavaScript API and possible customization via WordPress Filters make this Plugin even more versatile!

Your first popup, in 60 seconds

1. Install the Plugin
Log into your Admin Dashboard and find the Plugin Popups for Divi. Install and activate it.

2. Define a popup
Enter the Visual Builder and give a section the CSS class “popup” and set the ID to “sample“.

3. Trigger the popup
Simply add a new button to a different section and set the link URL to “#sample“. Simple!

4. Done
Now save your page and load it without the Visual Builder – your popup is ready!

The result: View popup

Special classes for the Visual Builder

popup

Convert a normal Divi-Section into a popup.
Note: Every popup also needs a unique ID. Otherwise you cannot show the popup to your visitors.
→ Sample

no-close

By default every popup has a close button in the top right corner. When you do not want this button, then you only need to add the class no-close to your popup.
→ Sample

dark

Change the color of the close button in the top right corner. By default the button is light with a dark icon. The class dark changes this to a dark background and light icon.
Note: This class has no impact when you also use the class no-close on your popup.
→ Sample

is-modal

Add the class is-modal to any popup to disable the close-function of the background layer.
→ Sample

on-exit

Show the popup without a click when the user tries to leave your page. 
Note: This only works on normal desktop computers that have a mouse. On devices with a touch-screen the popup is not displayed (e.g. on iPhones).

single

When you have multiple popups on your page they are all stacked and the user needs to close each popup individually. When you add the single class to a popup, it will close any other open popups when it is opened.

Special classes for elements inside the popup section

close

Add a custom close button to your popup. Simply add a link, image or any other element inside your popup and set the class to close. When clicking that element, your popup is closed.
→ Sample

Special classes for elements in other sections (outside the popup)

show-popup-<name>

This trigger option can be used, to turn any element on the current page into a popup trigger! Simply add the class “show-popup-” followed by a popup ID to your page. When this element is clicked, the specified popup is opened. 
→ Sample
(HTML: <a class="show-popup-popup-6">→ Sample</a>)

The JavaScript API

All popup functions can be called via the global JavaScript object window.DiviPopup

DiviPopup.openPopup(id)

Opens the popup with the given ID. This function also darkens the background by calling DiviPopup.showOverlay() (see below).

Tip: When the popup is already open, it will be brought to the front (i.e., when the popup is hidden by a second popup, then use this function to bring the original popup to the front).

DiviPopup.closePopup([id])

Closes the specified popup; when the specified popup is not open, nothing happens.

When you do not specify any ID, then the top-most popup is closed.

Upon closing the last popup, the background overlay is removed as well (see DiviPopup.hideOverlay() below)

DiviPopup.showOverlay()

Darkens the background and prevents scrolling of the window. After all the user should focus on the popup and nothing else…

DiviPopup.hideOverlay()

Removes the background overlay and makes the window scrollable again. It simply undos all changes from DiviPopup.showOverlay() above.

Example 1: Display the Popup “get-newsletter” after a 3-second delay

Example 2: Display the Popup “get-newsletter” when page was scrolled down by 200 Pixel.

Looking for a step-by-step guide on how to add this code to your webpage?
Actually, I have written one here: How to use the JS API

The JavaScript Events

$(document).on(
 'DiviPopup:OptionsReady',
  function(ev) {}
)

All plugin options are initialized and are accessible/modifiable via the window.DiviPopupData object.

$(document).on(
 'DiviPopup:Ready',
  function(ev) {}
)

The popup plugin is ready. The options are initialized and all popups were detected, etc.

💡At this point, the JS API is fully functional (above section)

$(document).on(
  'DiviPopup:Init',
  function(ev, popup) {}
)

A new popup was initialized (during page load). The section was removed from DOM and is ready to be displayed.

$(document).on(
  'DiviPopup:Show',
  function(ev, popup) {}
)

The popup is displayed and an eventual enter-animation started playing (but did not finish yet).

$(document).on(
  'DiviPopup:Focus',
  function(ev, popup) {}
)

Triggered when a popup is focused. This event is triggered every time when any popup is moved in front of other popups – regardless, whether the popup was visible prior to this or not.

$(document).on(
 'DiviPopup:Blur',
  function(ev, popup) {}
)

This happens, when the “focused” popup is moved to the back or prior to it being hidden.

$(document).on(
  'DiviPopup:Hide',
  function(ev, popup) {}
)

Triggered right before the popup is hidden.

 

$(document).on(
  'DiviPopup:BeforeShow',
  function(ev, popup, visibleIds, hide) {}
)

 

Triggered before a new popup becomes focused. This event provides the following parameters:
  1. popup the popup which is about to be displayed.
  2. visibleIds is a list of all currently visible popups.
  3. hide(id) is a callback function, that allows you to close a popup manually. It accepts a single param, which is a popup ID.

 

$(document).on(
  'DiviPopup:BeforeHide',
  function(ev, popup, visibleIds, hide) {}
)

 

Triggered before a visible popup is closed. This event provides the same parameters as the DiviPopup:BeforeShow event above.

$(document).on(
  'DiviPopup:OverlayShow',
  function(ev) {}
)

The modal background overlay just became visible. This happens right before a popup is displayed.

$(document).on(
  'DiviPopup:OverlayClick',
  function(ev) {}
)

A popup is visible and the user clicked on the modal background overlay. This event is triggered regardless of the “is-modal” modification class mentioned above.

$(document).on(
  'DiviPopup:OverlayHide',
  function(ev) {}
)

The modal background overlay was hidden again, because the last popup was closed.

Customization in WordPress.

 

add_filter(
  'evr_divi_popup-js_data',
  function( $config ) {}
);

 

This filter is applied to an array of settings. It allows modifying the javascript defaults that initialize your popups. Most options can be ignored under normal circumstances, but are provided to handle possible conflicts, that could be caused by a plugin or a child-theme.

Related Articles, Tutorials and Guides.

The future of Popups for Divi 🤩

The future of Popups for Divi 🤩

Almost two years after the first release of Popups for Divi, it finally evolves into a new, much more advanced plugin: Divi Areas Pro offers a lot more than “just Popups”!

How to display a popup only once per day

How to display a popup only once per day

As more and more people use the Popups for Divi plugin, there also is demand for advanced features. One of the most requested features is a way, to display a popup only once per day/week/month, like here:...

How to use the JS API

How to use the JS API

The Popups for Divi plugin comes with an extensive Javascript API which allows you to monitor and control popups on your webpage. In the plugin documention, you find two code examples that can display a popup after a timeout or after scrolling the page to a certain...

Frequent questions. And Answers.

Does "Popups for Divi" impact my website performance?

Actually no!

The plugin is tuned for maximum page performance with no bloat, no external libraries, no tracking.
In all tests I’ve conducted on various websites, I have literally seen absolute no performance decrease at all. Give it a try yourself!

The details: The plugin adds a single line of CSS to your page source code. Additionally, a minified JS and a very basic CSS file is loaded on the first page visit. All files are less than 7 kB in size and are cached by the browser. Trust me, your visitors will not notice anything.

Is "Popups for Divi" compatible with my Caching plugin?

Yes, absolutely!

This plugin does not create any dynamic HTML content, as other popup plugins do. Performance was the top-criteria when creating this plugin. This means: Popups for Divi embraces every caching plugin you can throw at it!

Really, there is almost no PHP code at all. The actual plugin is a static JS file, which runs on the users browser. It’s typically is stored in browser-cache and can even be served via a CDN.

Which version of Divi do I need?

The plugin is always compatible with the latest version of Divi.

I have tested it with all Divi releases, beginning with 3.0.0, but possibly it will even work with older Divi versions. But let’s be realistic; why would anyone use such an old version of Divi…?

Does the plugin also work with other themes or page builders?

Good question. Yes, it does!

In fact, the plugin is a regular popup module, which (by design) is pre-configured for the Divi theme. But the plugin offers a WordPress filter which you can use to re-configure it for any other theme that you can think of! Just have a look at the filter “evr_divi_popup-js_data” and you will find everything you need.

It's not working. Can you help me?

Of course, I do my best to provide support for this plugin via the wordpress.org support forums.

Really, this plugin has a fantastic community and I love to be in touch with you and see, how you use this plugin to improve your Divi sites 😄

But please keep in mind, that this is a free plugin and I am usually very busy with paid WordPress projects; so my answer might not come on the same day. But you will get my feedback.

In case it’s urgent enough, that you are willing to pay for my time to have a look at it instantly, you can ask for my help on Codeable. Typically it takes me 30-60 Minutes to handle a support request for this plugin.

 

Test Popups for Divi now!

You can install the plugin for free from the WordPress plugin repository and try it yourself!