Popups for Divi
– Demos –

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

1. Prepare the Popup

To create a new Popup we have to add a new Divi Section to our page.

In this example, I use a section with a two-column layout. In the left column, I display an Image Module and on the right side, I’ll add an Email Option Module. I’ll also apply some styles to the section – like dark background color, a maximum width of 1080 Pixels and some other changes.

Below you can see the final sample that I have designed for this demo:

2. Enable the Popup

After we designed the Section, the next step is straightforward: I just toggle the option This is a Popup to Yes in the dedicated Popup tab. That adds a new CSS class to the Section and instantly changes the display of the Section inside the Visual Builder.

Also, I set a Popup ID, so I can later trigger the Popup via a link/button.

3. Trigger the Popup

By now, the Popup is ready and will not be displayed anymore, when the page is opened without the Visual Builder. But we still need to set a trigger that makes the Popup visible for the user.

It’s as simple, as adding a new Button Module to the page and set the Button Link URL to the Popup ID that I added to my Section just a moment ago: #popup-1

4. Test the Popup

That’s it! Click the button to see the Popup in action:

More Samples

No Close Button

By default, every Popup displays a Close Button in the top right corner. In the Section Settings, you can choose to not display that Button.

Dark Popup

You can customize the built-in Close Button in two ways: You can remove the background rectangle and only display the Close Icon, and you can invert the colors to make the button look nice on dark backgrounds. This demo applies both changes.

Modal Popup

A modal Popup cannot be closed “by accident”: It ignores any click that is outside the Popup. You need to close the Popup via the Close Button (or the Escape-Key).

Custom Close Button

You can even create your own Close Button and hide the default one. This is simple, as you only need to add the CSS class “close” to any button/link inside the Popup. The element will be turned into a Close Button.