Divi 5 Popups (No Plugins!) | Site-Wide Canvas Popup with Advanced Triggers

Introduction

In this tutorial, you will learn how to create a site-wide popup using Divi 5 without relying on third-party plugins. This method utilizes the Divi 5 Canvas and introduces advanced, session-based triggers for a better user experience. By the end of this guide, you'll be able to build a customizable popup with various triggers and control its visibility across your site.

Step 1: Build the Popup Using Divi 5 Canvas

1. Access the Divi Builder:

   • Go to the page where you want to create the popup.
   • Enable the Divi Builder.

2. Create a New Section:

   • Add a new section by clicking the "+" icon.
   • Choose "Regular Section" and select "Canvas" as the layout type.

3. Design Your Popup:

   • Add modules (text, images, buttons) to your canvas section that will serve as your popup content.
   • Customize styles such as background color, padding, and borders to make the popup visually appealing.

4. Set Visibility Options:

   • Under the section settings, go to the "Advanced" tab.
   • Set the section to be hidden on all pages by default. Use the following CSS to hide it:

     display: none;
     

Step 2: Make the Popup Site-Wide Using Global Footer

1. Create a Global Footer:

   • Navigate to Divi > Theme Builder.
   • Add a new template and select "Add Global Footer".

2. Insert Your Popup Section:

   • In the footer, insert the popup section you created in Step 1.
   • This makes the popup available throughout your entire site.

Step 3: Add Advanced Triggers

1. Implement Exit-Intent Trigger:

   • Use JavaScript to detect when a user is about to leave the page.
   • Add the following script in the footer of your site:

     document.addEventListener('mouseleave', function(e) {
         if (e.clientY < 0) {
             document.querySelector('.your-popup-class').style.display = 'block';
         }
     });
     

2. Add Scroll-Percentage Trigger:

   • Create a trigger that activates the popup once a user scrolls a certain percentage down the page.
   • Use this script:

     window.onscroll = function() {
         if ((document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) && !sessionStorage.getItem('popupShown')) {
             document.querySelector('.your-popup-class').style.display = 'block';
             sessionStorage.setItem('popupShown', true);
         }
     };
     

3. Implement Time-Delay Trigger:

   • Set a timer for when the popup should appear after the user has been on the page.
   • Use the following code:

     setTimeout(function() {
         if (!sessionStorage.getItem('popupShown')) {
             document.querySelector('.your-popup-class').style.display = 'block';
             sessionStorage.setItem('popupShown', true);
         }
     }, 10000); // Adjust the time as needed (in milliseconds)
     

Step 4: Combine Triggers

• To ensure that only one trigger fires per session:
  • Modify the scripts above to check if the popup has already been shown (using sessionStorage).
  • This prevents the popup from appearing multiple times during a single session, enhancing user experience.

Step 5: Control Page Visibility

• If you want to limit the popup's visibility to specific pages:
  • Add conditional logic in your JavaScript to check the current URL.
  • For example:

    if (window.location.pathname === '/specific-page/') {
        // Show popup logic here
    }
    

Conclusion

You have successfully created a site-wide popup in Divi 5 using only the built-in features and custom JavaScript. You now have a versatile popup that employs various triggers for enhanced user engagement. Experiment with different designs and triggers to see what works best for your audience. For further learning, consider exploring the free Divi 5 course linked in the video description.