Popups for Divi

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.

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 add a new section. In the section settings, enable the option “This is a Popup” and set the popup ID to “sample“.

3. Trigger the Popup
   Finally, add a new button to a different section, and set the link URL to “#sample“.

4. Done
   Now save your page, and load it without the Visual Builder – click the button to see your Popup in action!
   

Turns the current Divi section into a Popup. When enabled, additional options become available.

Assign a unique ID to the Popup. You can display this Popup by using this name in an anchor link, like “#slug”.

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.

Here, you can decide whether this Popup should automatically close all other Popups when it is opened.

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.

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.

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

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.

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.

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.

Here you can disable the Popup on selected devices.

Options:

• Phone
• Tablet
• Desktop

Now it’s your turn!

To learn how to build those Popups, download the demo files. Inspect the Popups on your own website inside the Visual Builder and adjust them to your needs.

How do the demo files work?

We’ve prepared a zip package with some Visual Builder export files. To use those samples, you need to extract the JSON-files and then import the layout into your Visual Builder.

Then click through all elements to examine the section- and module settings.

What demos are included?

The zip package contains the following demo files:

• File 1: A single, basic Popup with a Button trigger.
• File 2: All samples from this page ←
• File 3: JS API sample – see the code module contents.