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.
TABLE OF CONTENT
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
2. How to show a Popup on Link Click
So If you’ve got a link in your paragraph in any Module and want to show a popup when a user clicks on that link, then It’s super-duper easy(the link could be anything like –> #), all you’ve to do is open up the Module Settings > Advanced > Visibility and you can set up your Popup by following the steps above and then where you see this option “Trigger On” here you’ll need to select Hyperlink Click and that’s it. Now when you’ll click on the link you’ll see Popup.
Note: You can only have one Hyperlink popup in one Module.
Here’s a quick look, you can also click here to see the Hyperlink click Popup live example.
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.
6. How to show a Page/URL in the Popup
If you want to show a webpage in the popup then you do have this option to do so It’s called iFrame, and It’s also a whole lot easy. All you’ve to do is just set up your Popup and in the Popup, type choose iFrame and enter the URL which you want to show in the Popup.
And that’s it here’s a quick look at how it works, you can click here to see the Live demo.
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
Why should you choose Divi Supreme for your popup designs?
We bet we’ve probably already answered this question by now with all the information we have shared with you about how our popup extension works and its unique features. However, allow us to add a couple more details which we think could further convince you to want to check out Divi Supreme Popup yourself.
There’s no limit on how many popups you can create with Divi Supreme
Yes, you heard that right. You can create as many layouts as possible, save them in your Divi Library, and later convert them into beautiful popups. Thereafter, go to a page or post of your choice and use the popup setting to create your preferred popup design using the saved layouts. You can even choose to have multiple popups on the same page, but we recommend against using too many of them as this can harm the user experience.
Our popups do not slow down your page load speed
Popups have for the longest time get a bad rap for their negative impact on page load speed. The reason for this is because most of them use a lot of Javascript files that eat up a lot of hosting resources.
The good news is that Divi Supreme works differently in that we use the same built-in popup lightbox library that Divi uses with no additional Javascript files. This means our popups add no extra load to your site other than what the native Divi Builder requires to load fully.
Want to add popups to your website? How about you install Divi Supreme Pro today and get access to our feature-rich popup extension. Let’s get your site popping!
How to access the Divi Popup Extension
To use the Divi Popup extension, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.
Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.
So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Divi Popup extension in the comments section below.
And Don’t forget to try out the Divi Supreme Lite
Divi Supreme Lite Offers 20 Modules and 4 Beautiful Extensions and using them you can easily extend your site’s functionality.
How do I decrease time delay of exit intent popup?
Hi Ashrafali, you can use the Timed Delay option to do that.
hmmmm, but how can I set this on the (startpage) homepage?, I have set a pic modul as a layout in the library. How can I “tell” the homepage to show this? Only with divi page builder?
I have the same type of question that Joerg Baaden asked 4 years ago. Maybe after this amount of time has past this would have been addressed.
To display a popup only on your homepage, use Divi Builder to edit the homepage. Trigger the popup from within any module on that page. This will limit the popup’s visibility to the homepage. For global onload or on-exit popups, utilize the Theme Builder.
I want to install the page load popup on all subpages, do I have to activate it on every page or is there a switch for “show on every page”. Customers also come to subpages via Google and do not use the homepage.
To achieve this, the most effective method is to use the Divi Theme Builder. Assign to “Children of specific pages” (the inner subpages you mentioned). Then, within that layout, you can add and configure your popup using any module. I hope this helps!