How to Create a Popup with Divi Theme

If you are using the Divi WordPress theme and are looking for a way on how to create a popup window, read on. I will explain you how to do it.

We will create the popup with a premium Divi plugin called Divi Overlays. This plugin was created by Tim Strifler of divilife.com. If you need to create popups for just one website, you shall be fine with the $24 Single Site license. This plugins is great, because it allows us to build any layout with the Divi builder and set it as an overlay. It can be a fullscreen overlay, modal or a pop-up. We will be using it as a popup in this tutorial.

So here we go to the tutorial:

The first step is to purchase a Divi Overlays license and then install and activate this plugin on your WordPress website. After that you shall see a “Divi Overlays” link added in your WordPess admin panel. Also, don’t forget to enter your license key to enable the plugin (you will find it in the purchase confirmation email).

 

 

The next step is to simply create a new Divi Overlay by clicking on Divi Overlays > Add New in your WordPress dashboard. And of course, you can enable the Divi Builder on it and create the layout using it. Actually this will be our popup.

I want my popup to be a Divi contact form, so I’ll just add a contact form module and apply some styling options to it.

Now, what is important are all the options that you can see below the WordPress editor and in the right sidebar.

There are options like e.g. the overlay background color or the overlay font color.

Then in the right sidebar you have more options like the overlay animation style or the display locations that allow you to set this particular overlay to show only on some pages (or one page) of your website.

 

 

There are also some other options. You just need to play with them and test them. For example, you can also customize the close button styling.

As for my Divi overlay, I will just set the “Automatic Triggers” option to “Exit Intent”, so that my popup shows up when the visitors of my website want to close it.

 

 

You can see on the small screenshot below that when I load my website and head with my cursor to close the browser window, my Divi Overlays contact form nicely shows up.

 

 

And as the Divi Overlays plugin allows us to make a popup out of any Divi layout, you can make your popup to be even an embedded YouTube video.

Also, if you want your overlay to be e.g. just a small box in the center of your screen, just set a background color and add some padding (e.g. 20px) for top, bottom, left and right.

So there you have it. In my opinion, this is the easiest way to create a Divi popup. Even if it requires a little investment, but it is worth it.

PS: If you are looking for something simpler, you might like to try using the Popup Builder free WordPress plugin.

And for more Divi tutorials like this one, you can subscribe to my newsletter.