As a web developer who loves working with the Divi Theme on WordPress, I’ve often found myself searching for ways to build popup boxes without using plugins. That’s why I’ve put together this guide, to help you create custom Divi popups with ease, no plugins required. In just a few simple steps, you’ll learn how to design and implement your very own slide-in popup boxes, complete with animations and Divi condition options to keep the popup hidden after a visitor closes it.
Note: this solution uses the Divi Condition Options feature which may not work with page caching, so if you do use page caching, make sure to test it well. You may need to exclude the page from your site cache.
Let’s get started.
First, create a new section, row, and add all the content you’d like to include in the pop up box. For my example I’m going to add the email opt in module to create a subscription box for a newsletter.
Style the section
Then you’ll need to style the section, set some condition options and add a class. Set the following popup section settings:
- Width: 500px
- Max-width: 90%
- Top and bottom padding: 0px
- Position: fixed
- Location: bottom right
- Vertical and horizontal offset: 15px
- Z index: 2
- CSS ID: “modal”
Click image to open in lightbox
Then add the following display condition to the section:
- Type: Cookie
- Display only if: Cookie Does Not Exist
- Cookie Name: modal_closed
Style the row
This styling is totally up to you, but here’s my suggestion for the row:
- Set a background colour
- Width and max-width: 100%
- Top and bottom padding: 0px
- Rounded corners: 3px
- Box shadow: 3rd option
- Animation: slide
- Animation Direction: Up
- Animation Delay: 200ms
- Animation Intensity: 10%
Add close button
Now you’ll probably want to add a close button so users can dismiss the popup. Here’s how to do that:
- Add a text module inside the column and add a single × character (note this is the multiplication symbol, not a letter x – it’s more balanced). Or you can add an icon module instead if you like.
- Text Font weight: Light
- Text Text Size: 35px
- Text Alignment: right
- Text Color: Light
- Width: 21px
- Position: Absolute
- Location: top right
- Horizontal offset: 5px
- Z Index: 4
- Add the following CSS to the Main Element CSS: cursor: pointer;
- Finally, add “closemodal” as the CSS ID of the close button module
Add code to handle closing
The last step on this page is to add a code module inside the column. Paste inside it the following code:
<script>
jQuery(document).ready(function() {
jQuery("#closemodal").click(function() {
jQuery("#modal").fadeOut(400);
Cookies.set('modal_closed', 'true', { expires: 90 });
});
});
</script>This code sets how long the cookie will last, preventing the popup from showing. In this example the popup will stay hidden for 90 days. To change how many days it stays hidden just edit the number after “expires:”.
And finally, add the following to your functions.php file (a child theme is best for this) to allow the code to set cookies in visitor browsers:
// Enqueue JS to allow setting of custom cookies
function add_js_cookie() {
wp_enqueue_script( 'js-cookie', 'https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js', array(), '2.2.1', true );
}
add_action( 'wp_enqueue_scripts', 'add_js_cookie' );Now, when visitors click the close button, the popup will fade out and the website will set a cookie in their browser. When they visit the page again, their browser will have the cookie saved and Divi won’t show the popup to them because of the popup section’s condition options.
So there you have it. If you’ve found this tutorial helpful or you have any questions, please post a comment below.
Thank you for the resource. I was very excited about learning how to do this when I saw your article. I did have one question though. I am trying to create a pop-up on my homepage so guests can select between English and Spanish so I have styled two buttons that are in the pop up. Is it possible to have it close after one of those two buttons are pressed instead of also having to press the X in the corner?
I am also in the process of trying to style it to be mobile friendly so that is a work in progress still.
I hope that makes sense.
Thank you,
Miles
To close the modal whenever either of the buttons are clicked just change #closemodal in the jQuery code to .closemodal (replacing the hash with a period). Then set the class of both the buttons to closemodal.