Divi Popup: No Plugin Required! [Full Tutorial]

How to create a Divi popup without plugins? Learn how to display any Divi section inside a Full Page Overlay!

This is the ultimate guide to creating a Divi popup without plugins. I will show you how to turn any section into a hidded popup that will be displayed after a button click. You will not need any plugins to do this – only a few lines of CSS and some jQuery, so we’ll keep your website uncluttered and performing great!

You can choose from 3 ways to achieve this effect – each a different difficulty level. The easiest way is to download the free layout, the second option is to use the free snippets and watch the first 7 minutes of the Divi popup video tutorial, and the most advanced one is to follow the longer step-by-step video guide starting at minute 8 – direct link here. It will teach you how to write this code yourself and help you better understand this effect so you can customize it perfectly.

If you’d like to follow the complete CSS tutorial but want to brush up on you basic CSS skills first, feel free to use our Ultimate Guide for Working with CSS in Divi.

All right, let’s get started!

Free Resources for Divi Lovers

Join our newsletter to get the good stuff!

We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Sign up to download

Get access to this layout and all the free resources made exclusively for our subscribers!

Already subscribed?

Fill the signup form and if you’re on the list it’ll get you straight to the download page! 

Can’t see the form? Click here
Step 1

Create a button trigger

We can use the Divi Button module as a trigger. To make it work, add a custom CSS class of dl-popup-trigger to the Button Settings -> Advanced tab.

Make sure that the Button Link URL in the Content tab is an anchor link and uses the ID of the popup section with the hashtag symbol. In our example it’s #contact.

Step 2

Create a popup section

Add a new section which will be hidden initially. Make sure to set the correct CSS ID in the Advanced tab. It needs to match the Button URL from Step 1. In our example the ID is contact (without the hash symbol this time). The section also needs the CSS class of dl-popup-content.

Set the min-height to 100% in the Design tab to make sure the section background stretches to full-screen when the popup is visible.

Step 3

Add the CSS Snippet

Place the CSS code in yout Theme Options or child theme stylesheet:

/* Show/hide the popup overlay wrapper when "is-visible" class changes, apply the CSS to frontend only */
body:not(.et-fb) .dl-popup-wrapper {
  transition: all .5s cubic-bezier(.14,.06,.41,1.39);
body:not(.et-fb) .dl-popup-wrapper.popup-is-visible {

/* Allow the content inside the popup wrapper to scroll */
.dl-popup-inside {
  overflow-y: scroll;

/* Prevent Body from Scrolling when Popup is visible */
body.dl-noscroll {
  overflow: hidden;

/* Center Align Popup Content inside the Section */
.dl-popup-content {
  justify-content: center;
.dl-popup-content .et_pb_row {

/* Adjust the position of the popup overlay for admin bar */
@media (min-width:600px) and (max-width:782px) {
  body:not(.et-fb).admin-bar .dl-popup-wrapper {
@media (min-width:783px) {
  body:not(.et-fb).admin-bar .dl-popup-wrapper {

/* Mave the popup on top of other elements */
.et_builder_inner_content.popup-is-visible {

/* Add a hand cursor to the close trigger element */
.dl-popup-close {

/* Add Row animation when popup is triggered */
.dl-popup-wrapper.popup-is-visible .et_pb_row:not(.dl-popup-close) {animation:scale-in .5s cubic-bezier(.14,.06,.41,1.39) both; animation-delay: .5s; }
@keyframes scale-in{0%{transform:scale(0.3);opacity:0}100%{transform:scale(1);opacity:1}}
Step 4

Add the jQuery code

The jQuery script can be placed inside a Code module directly on your page, or (if it’s a functionality you’d like to use globally in various places on your website) inside the Theme Options Integration tab.

jQuery(document).ready(function($) {
		$(this).wrap('<div class="dl-popup-wrapper"><div class="dl-popup-inside">');
	$('.dl-popup-trigger, .dl-menu-popup > a').off().click(function(e){
		SectionID = $(this).attr('href');
		var PopupVideoIframe = $(this).closest('.dl-popup-content').find('.et_pb_video_box iframe');
		var PopupVideoSrc = PopupVideoIframe.attr("src");
		PopupVideoIframe.attr("src", PopupVideoSrc);
		var PopupVideoHTML = $(this).closest('.dl-popup-content').find('.et_pb_video_box video');


Trigger the Popup from the Menu

To trigger the popup from the main navigation, you will need to add a new Menu item using the “Custom Link” block. The URL needs to match the popup section ID, and the menu item needs a custom CSS class of dl-menu-popup.


Trigger the Popup Automatically on Page load

To trigger the popup automatically on page load, you will need a second jQuery function. Copy the code below and replace the #contact with your Popup section ID. You can also replace the 3000 value to define custom delay. 3000 miliseconds is 3s.

	SectionID = $('#contact');
}, 3000);

And that’s how you add a Divi popup without plugins!

I hope you found this tutorial helpful, and I hope everything was clear and accessible. If you use these tips, please let me know in the comments! Also, which option did you use – the layout, the snippets, or the long advanced guide? Please, let me know. Your feedback is crucial and it helps me see which tutorials work best for you.

If you have any questions, you can ask them in the comments below – or in my Divi Lovers Facebook group. It’s a fantastic community of Divi users and web designers where we share useful tips and tricks.


Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!


  1. keval

    When closing video popup, the audio from the video is still playing on the background and need to stop or pause.

  2. Benny

    Hi Ania,

    where I have to add the Code, if I wan’t to load the Popup automatic?

    Thank you in advance for any help.


    • Benny

      When I include the Code in Divi Options, the Popup want’s to load on every site.

      • Benny

        Now it works! I’ve added the Code in a Seperate Section in a Code Module:

        jQuery(document).ready(function($) {
        SectionID = $(‘#contact’);
        }, 3000);

  3. Sean

    Thank you, Ania! One of the best, easiest to follow, and most helpful and thorough Divi tutorials I’ve come across in years! 🙂

  4. Rene

    Is there a way to add the class to a text link… instead of to a button or the Image module?

    Also I tried to download the layout above, but did not receive an email. Thanks

    • John

      I was able to sign up with a different email address, and downloaded the .json

      But haven’t been able to get the .json to import into a new page. It just goes to 100%, stays there, and does’t finish.

      Using Divi 4.19.1 / macOS X

    • Sean

      Hi Rene,

      Yes, I just added “dl-popup-trigger” as a class to a text link inside a text module with all of the other great coding Ania provided, and it works great!

      • Daniel

        Hi, can you show me a screen. I cant get it. :/

  5. YanaSirakova

    Hi Ania,
    I love your channel. There are many useful tips – thanks! I’m wondering about this code, is there a reason why I can’t do un image trigger popup? For me, it is only works from a button. Is there any additional code to open a popup when clicking on un image?


    • Ania Romańska

      The reason is that the code is looking for an HREF attribute of the “dl-popup-trigger” element. With Image module, the class is added to a parent, and the href is inside and A element, not direclty on the “dl-popup-trigger” as with the Button module. The “dl-menu-popup” class should work for Image module.

      • YanaSirakova

        Thanks. I will try again.

      • Jan

        Hi, I like your videos and I would like to ask if it is possible to send me the code with dl-menu-popup because I have the same problem as @YANASIRAKOVA. Thank you very much

  6. Sarah

    can this pop up be used on more than one page?

    • Ania Romańska

      Yes, you can use for mulitple popups.

      • sarah

        do I need to change the link ID for each page or can it be the same link. e.g. can they all be #gettheguide for all the pages or would I have to do #gettheguide #gettheguide1 etc

      • Ania Romańska

        If the popup is once on each page, it can use the same ID across all pages, but if you add more than one popup on a single page – they would need to use different IDs.

  7. Ines

    Awesome, thanks for the script. Unfortunately I don’t have a “close” function. Also no click outside the window closes the popup. Do you have a tip? Thanks

    • Ines

      Oh, I checked…thank you – the answere is in the video 😀

  8. Eric

    Hi Ania,

    I really enjoy your YouTube! channel as well.

    I am having trouble getting this code to work on a mobile (iOS) device. Also, the trigger CSS Class for the optional Menu configuration needs to be updated to match:

    Article: dl-popup-menu
    Code: dl-menu-popup

    Thank you in advance for any help.


    • Ania Romańska

      Hi Eric,
      We corrected the classes in the post, thank you. As you can see, our demo version works correctly on mobile, so this has to be something specific to your setup. I’m afraid it’s not possible to guess what might be wrong without seeing the URL. Did you try using (and editing) the JSON layout we’ve included in the article?


Submit a Comment

Your email address will not be published. Required fields are marked *

Enjoing our content?

You might find this interesting…

License Details


Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.


Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.


Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements


  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)


  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module


  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.