#
Back to blog page

How to Create Divi Popup without Plugin?

by | Apr 23, 2024 | Divi

How to Create Divi Popup without Plugin
Table of Contents

To make a popup in Divi, you have two options: use a Divi-specific plugin like Divigear Popup or create the popup manually by using JavaScript and CSS code.

While popup plugins are great, sometimes you might need a quick popup solution without installing extra plugins or spending money. 

That’s why in this guide, we will show you how to create a popup in Divi without a plugin. 

This method lets you create a popup with any Divi section, row, or module and use it to display opt-in forms, call-to-actions, or anything else you want!

Step 1: Create and Design the Popup

First, we need to create the popup section. You can build this section using any modules you like, customizing and styling it according to your preferences. In this example, we’ll use an Email Opt-In Form as the content for our popup.

To begin with, enable the visual builder first. Then, add a new section to the bottom of your page.

In this section, we’ll insert a single row to house the email opt-in form, but feel free to choose any row layout that fits your design. Next, add an Email Optin module to this row, which will serve as the foundation of our popup.

You can further customize this section by adding a background, modifying the content, incorporating extra form elements, and designing the button to match your page’s aesthetics.

In this example, we’ll start by adjusting the background of the section using the section settings. Then, we’ll modify the title within the email opt-in module settings. Finally, we’ll customize the appearance of the button and input field until they look like this.

To make this section into a popup, we need to assign a CSS ID and CSS Class. 

Navigate to the Advanced tab, then to the CSS ID & Classes section. Enter ‘popup-section’ in the CSS ID field and ‘popup-content’ in the CSS Class field.

We will now create a close button using the Icon module, giving users the ability to exit the popup easily. Simply navigate to the Advanced tab and locate the Position block. Set the position to Absolute and choose the top-right corner icon from the Location field.

Lastly, go to the CSS ID & Classes block under the Advanced tab and add the ‘popup-close’ CSS class to the CSS Class field for proper styling.

Step 2: Add CSS Snippet

After finishing the popup design, the next step is to include a CSS snippet. We’ve prepared a CSS code for you; simply copy and paste it. 

Here’s the code:

body:not(.et-fb) .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) .popup-wrapper.popup-is-visible {
  opacity:1;
  visibility:visible;
}

.popup-inside {
  height:100%;
  overflow-y: scroll;
}

body.noscroll {
  overflow: hidden;
}

.popup-content {
  display:flex;
  flex-direction:column;
  justify-content: center;
	height: inherit;
}
.popup-content .et_pb_row {
  margin-top:0;
  margin-bottom:0;
}

@media (min-width:600px) and (max-width:782px) {
  body:not(.et-fb).admin-bar .popup-wrapper {
    top:46px;
  }
}
@media (min-width:783px) {
  body:not(.et-fb).admin-bar .popup-wrapper {
    top:32px;
  }
}

.et_builder_inner_content.popup-is-visible {
  z-index:99999;
}

.popup-close {
  cursor: pointer;
}

To add the CSS code, go to your WordPress Dashboard and follow these steps: Click on Divi, then Theme Options. Under the General tab, find the Custom CSS section and paste your code there.

After you’ve pasted the code, click “Save Changes.”

Step 3: Add JavaScript Snippet

Next, we will need to add some JavaScript code. Simply copy and paste the below code.

<script>
jQuery(document).ready(function($) { 
  $('.popup-content').each(function(){
    $(this).wrap('<div class="popup-wrapper"><div class="popup-inside">');
  });   
  $('.popup-trigger, .popup-menu > a').off().click(function(e){
    e.preventDefault();
    SectionID = $(this).attr('href');
    $(SectionID).closest('.popup-wrapper').addClass('popup-is-visible');
    $(SectionID).closest('.et_builder_inner_content').addClass('popup-is-visible');
    $('body').addClass('noscroll');        
  });       
  $('.popup-close').click(function(e){
    e.preventDefault();
    $('.popup-is-visible').removeClass('popup-is-visible');
    $('body').removeClass('noscroll');   
    var PopupVideoIframe = $(this).closest('.popup-content').find('.et_pb_video_box iframe');
    var PopupVideoSrc = PopupVideoIframe.attr("src");
    PopupVideoIframe.attr("src", PopupVideoSrc);  
    var PopupVideoHTML = $(this).closest('.popup-content').find('.et_pb_video_box video');
    PopupVideoHTML.trigger('pause');
  });
});
</script>

Navigate to Divi > Theme Options > Integration, and paste the code into the box labeled “Add code to the <head> of your blog.” Click “Save Changes” afterward.

Step 4: Call the Popup to Trigger

It’s time to activate the popup. According to our design needs, the popup will appear when clicked, so we need to link a button to it. If there isn’t already a section where you want the popup to show up, you’ll have to create one.

After setting up the button, navigate to the Advanced tab in the settings panel. Look for the CSS ID & Classes section and enter popup-trigger in the CSS Class field.

Then, switch to the Content tab, and in the Link block, insert #popup-section into the Button Link URL field.

To finish, either update or publish your page.

Conclusion

By following these steps and adding the CSS code, you can create a popup in Divi without plugins. You are always welcome to customize the CSS further to style the popup’s appearance (background color, borders, etc.) and animation effects (if desired).

However, making a Divi popup without a plugin has some limitations. You won’t have as many options for customizing things like how the popup appears when it shows up, or how it works on mobile devices.

Instead, you might consider using DiviGear Divi Popup Maker, a plugin that offers everything you need for popups at a reasonable price.

If you encounter any issues, please leave a comment below. We’ll do our best to help you out.

Team DiviGear

At DiviGear, we are more than just a team – we are a collective of Dev Experts, Word Artists, Design Virtuosos, and Marketing Maestros, all united by our profound expertise in Divi and WordPress. Our mission is to provide you with accurate, insightful, and in-depth content aimed at enriching your understanding of Divi, WordPress, and the art of web design.

0 Comments

Submit a Comment

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