Seite auswählen

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).

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

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()
Damit schließt du das oberste Popup. Wenn das letzte Popup geschlossen wurde, wird der Hintergrund wieder freigegeben (siehe DiviPopup.hideOverlay() unten)
DiviPopup.showOverlay()
Dunkelt den Hintergrund ab und verhindert, dass der Besucher scrollen kann. Er soll sich auf dein Popup konzentrieren…
DiviPopup.hideOverlay()
Gibt den Hintergrund wieder frei. Das Gegenteil von DiviPopup.showOverlay() oben.

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)

Customization in WordPress.

evr_divi_popup-js_data

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.

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 from the free WordPress plugin repository and try it yourself!