Popups can be used to encourage website visitors to engage with your business through various social media platforms and pop up boxes can be added either upon entering or leaving the website with our Popular Popup extension for Divi which makes it a lot easy to make popups in Divi with many options for customizations. Using this extension you can create almost any kind of popup from Contact Form Popup to Email Optin Popup.

So today we’ll learn how to create beautiful Popups by taking advantage of Divi Supreme’s Popup extension. It uses the Library Layout to show a popup which is the easiest solution to quickly create Popups so you don’t have to mess with CSS IDs and Classes.

You can create 4 Different types of Popups:

• Layout: You can choose this option to select a layout from the Library to be shown in Popup.
• iFrame: Using this Popup type you can load a web URL in the Popup.
• Image: You can use this to show an image in the popup. You’ll be prompted to upload an image or select from Media Library.
• Video: Using this Popup type you can show a video in the Popup just enter the URL of the video and you’re good to go.

Before we start

Before we can start using the Popup extension, first make sure that it’s activated in the Plugin Settings page.

1. How to show a Popup on Button Click

Now it’s time to take the power of the Popup extension to the table. We’re going to see how to make a popup using the Layout saved in Divi Library and then we’ll show that layout as a Popup when user clicks on a Button. For this, we first need to add a Layout in the Library, go to Divi > Library and click on Add New button at the top. Now put in a name for your Layout and start designing it.

You can also use the pre-made Divi Layouts here which you can access by clicking on the + button at the right side of the screen. And from there you can search for Layouts as well. For our Popup example, we’re using the LMS Contact Page layout and we’ve also deleted all the other unnecessary sections and just kept the Contact form by making the Row Fullwidth and changing the section padding to 0. 

Note: Always adjust your section and row padding. What you see on the Visual Builder, is what you get for the Popup as well.

But of course, you can design your very own Popup here as well by keeping your brand design.

Watch this video to see what to do.

After doing all those changes, make sure to Save All the Changes.

Now, what If we’d like to show this Popup when someone clicks on the Send a Message button they see this Popup. For this, we need to open up the Divi Builder and open up that Button Module Settings –> Advanced –> Visibility –> Use Popup, enable that switch and then make sure the Popup Type is Layout and select your newly added Layout from the Dropdown.

Now we need to make these changes, but you can do them on your own to match your site.

• Trigger On – Button Click (If you’ve another module like Image choose Image Click or If you’ve got an Image in the Module and want to show popup on image click then choose Image click.)
• Entrance Animation – Zoom in
• Exit Animation – Zoom Out
• Popup Max width: 900px
• Close Button Placement – Outside
• Close button background color – #fff
• Close button Icon color – #000

That’s it, we’ve just created an On-Click Popup in Divi with cool Animation. Here’s a quick look

3. How to show a Popup on Page Load

Most of the Popups that every site shows to its visitors on Page load is Newsletter or any special sale they’re having on their site, It’s a great way of user conversion so that’s why It’s compulsory for us to include this feature in our Popup extension and it’s super easy then you’re thinking.

OK so let’s see how to show a popup on Page load, in the Divi Builder you can open up any Module settings(It doesn’t matter) and then go to Advanced > Visibility > Use Popup and then you can set up your popup the same way we did in the first example, after setting up your Popup now It’s time to change Its trigger method to Page Load You can also change the delay time for the Popup like 3seconds so the Popup will be shown after 3 seconds when the page loads.

That’s it now when a user comes to your page they will see that Popup after 3 seconds when the Page loads and It wasn’t difficult right?

4. How to show a Popup on Scroll

This is also a great trigger method that Divi Supreme’s Popup extension provides and using it you can show a Popup when a user reaches a specific part of the page. You can show a warning before what they’re going to see and stuff like that, So the same It’s super duper easy to set up this.

Just locate the place where you want to show the popup and open up any Module settings at that place, now go to Advanced > Visibility > Use Popup and here you’ll need to set up your popup, once you’re done with setting up your popup, go and find the option Trigger On and change it to Scroll. And you’re done here’s a quick look

And here’s a Quick Look at what we’ve done.

5. How to show a popup when a user tries to exit your site

Our visitors are very important and we don’t want them to leave our site at any point that’s why we provide this functionality which will show a popup when the user tries to go to the search bar of the browser or anywhere else out of your site, they’ll be prompted again to the site with a Popup where you can show a special offer or anything else you like to show.

Ok so let’s see how to make, BTW It’s just as simple as other examples we’ve created you can go to any Module settings on the page and go to Advanced > Visibility > Use Popup and set your popup as we’ve done in the first example and after setting up your popup you just need to change the trigger method to Exit Intent, and that’s it. When your user tries to leave your site, they’ll see a Popup. Easy peasy!

Here’s how it works.

7. How to show Image/Video Overlay

We do have this feature in the Supreme Button Module, but in some cases, it might be helpful so that’s why we added this option as well. So let’s say you want to show an Image or a Video in the Lightbox when some clicks on a Button which is inside a Slider Module, Accordion Module or any Module, where you can’t have Image/Video Overlay, then this is where this feature helps you.

All you’ve to do is set up your Popup and in the Popup type you just need to select Image(If you want an Image overlay) or Video(If you want to show a video overlay) and If you’ll select Image you’ll then prompted to add an Image and If you’ll select Video you’ll then see a field where you can enter the Video URL which you want to show in the Overlay. And yeah It’s super-duper easy. Right?

Conclusion

In Conclusion, we’d like to share that Divi Supreme’s Popup extension is the best Popup solution ever made for Divi because It’s super easy to use and configure, and anyone can understand how it works in seconds so you don’t need to know any coding when using any of our extensions including Divi Popups