Search

How to Create a Popup in Divi (Without Plugin)

Well, you’re in the right article if you’re looking for information about how to create popups in Divi Builder. As we already know, the popup has many benefits for the website if the popup is assembled correctly. Popups must be simple, attractive, and show at the right time. Unfortunately, Divi doesn’t have a feature to create popups by default. So, you need to install Divi plugins to create a popup (read: 5 Divi Plugins to Create a Popup).

But what if you don’t want to install the plugins? Good news for you, you can still create a popup in Divi Builder without the help of any plugins, and this article will show you how to do that.

Steps to Create Popup in Divi (Without Plugin)

Before starting the tutorial, we will inform you how the popup works. We know popups are display boxes that appear “on top” of a page in various formats. But the interesting is they can be configured to appear with different triggers, such as the below:

  • On-Click

The popup will appear upon the user clicking a specific link or button on the page.

  • Time Delay

The popup will appear automatically on the page after setting the specified time.

  • Exit Intent

It triggers a popup before users leave the website.

  • Scroll-point

A popup will appear when the user has scrolled to a certain percentage of the page.

On-Click and Time Delay are the most popular popup triggers on the website, and this article will focus on how to create those popups.

Step 1: Add the CSS Snippet

To create popups in Divi Builder without the help of any plugins, first, we need to add the CSS snippet into the Divi Theme Options.

On your WordPress dashboard, go to Divi -> Theme Options. Once you enter the Theme Options page, navigate to the General tab -> Custom CSS. Afterward, copy the CSS snippet below and paste it into the Custom CSS field.

/* 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;
}

/* Add Row animation when popup is triggered */
.wpb-popup-wrapper.popup-is-visible .et_pb_row:not(.wpb-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 2: Add the jQuery Snippet

Once you add the CSS snippet to create popups in Divi Builder without the help of any plugins, you also need the jQuery snippet in the Theme Options.

On the Divi Theme Options page, navigate to the Integration tab. Next, paste the jQuery snippet below into the Add code to the < body > (good for tracking codes such as google analytics) section.

<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>

Step 3: Create the Popup Section

Well, it’s time to create the Popup section. You can create the section with any modules, edit and style up the section as you prefer. In this example, we add a Contact Form module as popup content and an Icon module as a close button for popup content.

To make this section a Popup section, we must add the CSS ID and CSS Class. On the section settings, navigate to the Advanced tab -> CSS ID & Classes. Please add popup-section to the CSS ID field and wpb-popup-content to the CSS Class field.

As mentioned, we added an Icon module as a close button for the popup.

Add an Icon module to the section, then edit and style up with your preference. Once you edit and style up the icon, set the position to Absolute and adjust that icon’s location by editing the Vertical and Horizontal Offset.

Next, we will add a CSS Class into the Icon module to integrate with the codes (CSS and jQuery) we added previously. Add wpb-popup-close to the CSS Class field.

Note: Please ensure the section’s minimum height is 100%. That will make the popup section will stretch over the page.

How to Display the On-Click and the Time Delay Popups in Divi Without Plugins

Before continuing the tutorial, please ensure you’ve already added the CSS and jQuery snippet to your Divi Theme Builders (steps one and two) and already created a popup section (step three).

1. On-Click Popup

Here, we will show you the on-click popup in two ways; button trigger and menu item trigger.

Button Trigger

In this example, we use the Button module to trigger the popup. Go to the Divi Builder editor and add a Button module into the canvas area. Once you add a Button module, you can edit and style up the button to your preference.

To make a button become a trigger of the popup, you need to integrate this module with the jQuery snippet you added and with the popup section you created.

  • Integration with the jQuery Snippet

On your module settings, navigate to the Advanced tab -> CSS ID & Classes. Afterward, add wpb-popup-trigger to the CSS Class field.

  • Integration with the Popup Section

On your module settings, navigate to the Content -> Link. Afterward, add the #popup-section to the Button Link URL field. Adding that URL will anchor your popup section.

To see how the popup works, save your project, exit from the visual builder, and test the button.

As you can see from the GIF above, when you exit from the visual builder, the popup works perfectly when you click the button, and a popup will close when you click the close button, and the popup section is also hidden on the page.

Menu Item Trigger

We will show you how to create the on-click popup with a menu item as a trigger.

Go to the Menus on your WordPress site dashboard. Afterward, you must add a new menu item by adding the Custom Links.

  • URL field: Add #popup-section into the field; it makes the menu item anchor/ jumps to the popup section we made.
  • Links Text: Add any text you want to display as a menu item.

Click the Add to Menu button once you have finished filled those fields.

Next, ensure you’ve enabled the CSS Classes option to show in advanced menu properties. Click the Screen Options button, then check the CSS Classes option.

Lastly, you must add a CSS class to the menu item you created with custom links. Please add wpb-popup-menu to the CSS Classes field.

Once you add the CSS class to the menu item, apply the changes by clicking the Save Menu button, and then go to your site to see how the popup works when you click the specific menu item you prepared for the popup.

2. Time Delay Popup

Users will spend time on your site when you have engaging content. You can further leverage their time spending by creating time-delayed popups. Creating a time delay popup in Divi Builder is easy; you only need to add a simple code below inside the jQuery snippet you previously added.

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);

Note: In this example, we set the time delay at 5000 Milliseconds (five seconds). You can adjust the time delay by editing that value.

Once you add the code inside the jQuery snippet, apply the changes by clicking the Save Changes button, then go to your site to see how the time-delayed popups work.

The Bottom Line

This article shows how easily you can create popups in Divi Builder without the help of any plugins. Before including popups in your website, you must ensure that popups are tasteful, so your users are not offended and distracted.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

5 thoughts on “How to Create a Popup in Divi (Without Plugin)”

  1. Hi Akbar! Thank you so much for this nice tutorial! With your help I made a popup for one page of a website and it works realy good.
    The problem I now have is, that every other page of the website stops scrolling after 5 seconds, even if there is no popup. May you could help me out for fixing this?

    Reply
    • Hi Sabrina,
      Thanks for visiting our site.

      Regarding your question, it refers to a Time Delay popup, right?

      Please ensure to create the Popup Section on the Divi Theme Builder by setting the popup as a template.

      Thank you

      Reply
      • Thank you for your reply. Yes, it is a popup with time delay and I made it as a template which I wanted to use at the moment only on the starting page.

        Reply
    • I solved the problem with putting the jquery inside a code modul on the page itself. Don’t know if this is a clean solution but it works. 😅

      Reply

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.