There are two options to create a popup in Divi. The first option, you can use a Divi-specific WordPress plugin like Divi Supreme or DiviPlus. The second option, you can create the popup manually, which I will cover in this post.
Popup itself is a great email marketing tool if you implement it properly. By meaning that it doesn’t interrupt user experience (UX). Some internet users really hate popup so you need to be very careful implementing a popup on your website.
In this post, I will show you to create a simple modal popup to display an email subscription form Divi.
Shortcuts:
- Step 1: Design the Popup Using Divi Builder
- Step 2: Add CSS Snippet to Hide the Popup Section
- Step 3: Add JavaScript Snippet to Handle Popup Actions
- Step 4: Call the Popup
Don’t Have Divi Yet? Get it Here 👈🏻
The Idea
As you know, Divi has no built-in popup builder feature like, for instance, Breakdance. Being an Elegant Themes member, you can actually install the Bloom plugin to create a popup. However, the design options are limited. Also, you can only use it to create an email opt-in popup.
Conversely, you can create any type of popup using the visual editor of Divi a.k.a. Divi Builder. You have a full control over the design. Also, you can add any element to your popup using the available Divi modules.
The idea of creating a popup in Divi is that you add a section on your page in which the section is dedicated for the popup. The section will be hiden — using a CSS snippet — on the front-end when you preview or publish your page, but it is still visible on the Divi Builder editor.
In this context, the section functions as the wrapper of the popup.
To display the section, you need to use a JavaScript snippet, which I provide later.
Creating a Popup in Divi Manually
Step 1: Design the Popup Using Divi Builder
You already know the idea. So, let’s get started.
First, edit a page where you want to add the popup on. Or you can also create a new page in case you haven’t had one.
Add a new section on the very bottom of your page. You can actually add the section anywere within your page, but I suggest you add it on the bottom so that it doesn’t interrupt your design process.
Select a column and add any module you want. Here is an example of the modules on my section.
Pro tip: You can rename the section to something like “popup” to make it easy for you to identify it on the future update.
You can play around with the Divi Builder editor to add any module you want to your popup. Once done, go to the Advanced tab and open the CSS ID & Classes settings block. Add the CSS ID popup-section to the CSS ID field and CSS class wpb-popup-content to the CSS Class field.
# Designing the Popup Overlay
We will utilize the background of the section as the popup overlay. Before setting the background, you need to set the height of the section to 100vh to make it fit your screen once the popup is displayed. To do so, open the section settings panel and go to the Design tab. Open the Sizing settings block and type 100vh on the Height option.
Once done setting the height, go to the Content tab and open the Background block. You can use any background type here. Be it solid color, gradient, or even image.
If you want your popup to have no overlay, you can simply use a transparent color background.
# Designing the Close Button
You need to provide a close button to allow your users to close the popup. Never create a popup without a close button. Otherwise, your visitors will never return to your website.
We will utilize the Icon module to create a close button of the popup. So, add an Icon module to your popup content and select an appropriate icon. Go to the Design tab to set the color and the size of the icon.
Next, go to the Advanced tab and open the Position block. Set the position to Absolute and select the top-right corner icon on the Location field. To set a more precise position, you can also set the vertical offset and horizontal offset.
A little tip. To make the close button looks good on any device type, you can utilize the responsive editing feature of divi by setting the different values of the vertical offset and horizontal offset. You can click the phone icon to access the responsive editing feature of Divi.
Lastly, open the CSS ID & Classes block under the Advanced tab and add the wpb-popup-close CSS class to the CSS Class field.
Step 2: Add CSS Snippet to Hide the Popup
Once you done designing the popup, the next step is to add the CSS snippet to hide the popup when the page is loaded. Here is the CSS snippet you can use:
/* Show/hide the popup overlay wrapper when "is-visible" class changes, apply the CSS to frontend only */
body:not(.et-fb) .wpb-popup-wrapper {
position:fixed;
z-index:990;
top:0;
right:0;
bottom:0;
left:0;
transition: all .5s cubic-bezier(.14,.06,.41,1.39);
opacity:0;
visibility:hidden;
}
body:not(.et-fb) .wpb-popup-wrapper.popup-is-visible {
opacity:1;
visibility:visible;
}
/* Allow the content inside the popup wrapper to scroll */
.wpb-popup-inside {
height:100%;
overflow-y: scroll;
}
/* Prevent Body from Scrolling when Popup is visible */
body.wpb-noscroll {
overflow: hidden;
}
/* Center Align Popup Content inside the Section */
.wpb-popup-content {
display:flex;
flex-direction:column;
justify-content: center;
}
.wpb-popup-content .et_pb_row {
margin-top:0;
margin-bottom:0;
}
/* Adjust the position of the popup overlay for admin bar */
@media (min-width:600px) and (max-width:782px) {
body:not(.et-fb).admin-bar .wpb-popup-wrapper {
top:46px;
}
}
@media (min-width:783px) {
body:not(.et-fb).admin-bar .wpb-popup-wrapper {
top:32px;
}
}
/* Mave the popup on top of other elements */
.et_builder_inner_content.popup-is-visible {
z-index:99999;
}
/* Add a hand cursor to the close trigger element */
.wpb-popup-close {
cursor:pointer;
}Not only does the above snippet hide the popup on initial page load, but it also prevent the body from scrolling when the popup is being displayed, place the popup to the center, and add a hand cursor to the close icon.
You can read the comments on each code block to learn more about the code.
# Where to Add the Code?
You can add the above CSS snippet to the Custom CSS field on Divi Theme Options. To do so, go to Divi -> Theme Options on your WordPress dashboard. Under the General tab, scroll down to the Custom CSS option and paste the code here. Don’t forget to click the Save Changes button.
Step 3: Add JavaScript Snippet to Handle the Popup Actions
You need to add JavaScript to open and close the popup. Here is the JavaScript snippet you can use for such purposes.
<script>
jQuery(document).ready(function($) {
$('.wpb-popup-content').each(function(){
$(this).wrap('<div class="wpb-popup-wrapper"><div class="wpb-popup-inside">');
});
$('.wpb-popup-trigger, .wpb-popup-menu > a').off().click(function(e){
e.preventDefault();
SectionID = $(this).attr('href');
$(SectionID).closest('.wpb-popup-wrapper').addClass('popup-is-visible');
$(SectionID).closest('.et_builder_inner_content').addClass('popup-is-visible');
$('body').addClass('wpb-noscroll');
});
$('.wpb-popup-close').click(function(e){
e.preventDefault();
$('.popup-is-visible').removeClass('popup-is-visible');
$('body').removeClass('wpb-noscroll');
var PopupVideoIframe = $(this).closest('.wpb-popup-content').find('.et_pb_video_box iframe');
var PopupVideoSrc = PopupVideoIframe.attr("src");
PopupVideoIframe.attr("src", PopupVideoSrc);
var PopupVideoHTML = $(this).closest('.wpb-popup-content').find('.et_pb_video_box video');
PopupVideoHTML.trigger('pause');
});
});
</script>
# Where to Add the Code
You can add the above JavaScript snippet on the Integration tab on Divi Theme Options. On the Divi Theme Options screen, go to the Integration tab and paste the code to the Add code to the < body > (good for tracking codes such as google analytics) field. Don’t forget to click the Save Changes button.
Step 4: Call to the Popup
Until here, your popup is ready to use. But it won’t show up until you call it. In this post, I will show you to call the popup using two methods:
- Button click
- Page load
# Button Click
To call the popup using button click, you can use the Button module of Divi. If your page hasn’t had one, simply add a new Button module. Once the button is in place, go to the Advanced tab on the settings panel. Open the CSS ID & CSS Classes block and add the CSS class wpb-popup-trigger to the CSS Class field.
Next, go to the Content tab and paste the text #popup-section to the Button Link URL field on the Link block.
Update or publish your page.
If everything goes well, you should see your popup shows up when you click the button.
# Page Load
In addition to button click, you can also display the popup section when the page is loaded. For this method, you can use the following JavaScript snippet:
<script>
setTimeout(function(){
SectionID = $('#popup-section');
SectionID.closest('.wpb-popup-wrapper').addClass('popup-is-visible');
SectionID.closest('.et_builder_inner_content').addClass('popup-is-visible');
$('body').addClass('wpb-noscroll');
}, 5000);
</script>You can place the above snippet to the same location as the previous JavaScript snippet (under the Integration tab). Simply paste it right after the last line of the previous JavaScript snippet.
On the above code, the popup will be displayd once the page is loaded, with a 5 secion delay. You can increase or decrease the delay duration by changing the value of 5000 to any value you want. Just keep in mind that the value is in a millisecond unit.
Summary
Unlike other competitors like Elementor and Breakdance, Divi has no built-in feature to create a popup. Thankfully, Divi supports custom CSS and JavaScript so that we can add any feature we want manually.
As I have elaborated above, you can create a popup in Divi manually using custom CSS and JavaScript. The popup is created using the visual editor of Divi (Divi Builder) so you have technically limitless design options.
You can implement the example I demonstrated on this post to create an email opt-in popup, cookie content popup, and other popup types that can be displayed via button click or page load.
