How to Create a Popup in Divi Without a Plugin

by Jun 15, 2021Design Hacks7 comments

Today, we’re going to show you how to take Divi’s lightbox functionality and use it to display a Divi popup of sections, rows, and modules.

This method of creating a popup with Divi requires ZERO plugins to accomplish. There is obviously nothing wrong with plugins (we love Divi plugins), but sometimes you want to add a quick popup without needing to install an extra plugin.

The Divi page builder already comes with a lightbox, and you can see examples of this in image and gallery modules.

With just a bit of jQuery code and CSS, we’ll be taking what Divi already has the power to do, and use it to create customized popups to display opt-in forms, call-to-actions, messages, images, videos, tabs, login modules, whole rows and sections, shortcodes, literally anything! Any Divi section, row, or module can be included in the popup!

The best part is how easy it is to implement. Keep in mind that this tutorial is for basic yet simple click-triggered popups. If you’re wanting a Divi popup solution with a lot of features (and without touching code), then take a look at Divi Overlays (our plugin from Divi Life). It’s the market leader when it comes to creating popups for Divi.

Let’s Look at Some Example Divi Popups

Click the elements below to see examples of what we’ll be creating in today’s tutorial.

Trigger the Lightbox with any link

Example:

<a href=”#” class=”lightbox-trigger-8″>Click Here</a>

Pretty cool huh?

Divi Popup Hack in a Nutshell

Since Divi already has the bulk of the popup functionality included already, there’s just a few small things we need to do to take advantage of the popup functionality for our own use.

Here’s an overview of what we’ll be doing in this tutorial create our custom Divi popups:

  1. Add the Custom Script to Enable Our Classes
  2. Add the Custom CSS
  3. Create your trigger element (button, CTA, image, blurb, etc) and add the class lightbox-trigger-element
  4. Create the Divi popup content (any section, row, or module) and add the class lightbox-content-element

Done! Pretty simple, right?

Keep on reading and we’ll walk you through it.

Step One: Add the Custom Script to Enable Our Popup Classes

Since Divi already has the lightbox functionality, we just need to enable the classes that we’ll be using so we can take advantage of the existing functionality.

The first thing we need to do is add the jQuery. This script will essentially tell the browser that we want to use Divi’s existing lightbox feature to open our custom popups using our custom classes.

Copy and paste the following script into the head of your website. You can add it to the head of your website via Divi’s Integration tab in Divi Theme Options.

<script type="text/javascript">
jQuery(document).ready(function(t){t('div:not(.et_mobile_menu) .lightbox-content, div:not(.et_mobile_menu) [class*="lightbox-content-"]').addClass("mfp-hide"),t("div:not(.et_mobile_menu) .lightbox-trigger").magnificPopup({items:{src:"div:not(.et_mobile_menu) .lightbox-content",type:"inline"}}),t('div:not(.et_mobile_menu) [class*="lightbox-trigger-"]').each(function(){var i=".lightbox-content-"+Array.prototype.find.call(this.classList,function(t){return t.indexOf("lightbox-trigger-")>-1}).split("lightbox-trigger-")[1];t(this).magnificPopup({items:{src:i,type:"inline"}})}),t(this).click(function(){t(".mfp-wrap").attr("id","et-boc")}),t('[class*="lightbox-content"]').prepend('<div class="lightbox-overlay"></div>')});</script>

Step Two: Copy and Paste the Following CSS

There’s not much to the CSS below. It essentially includes some minor positioning and the popup close button styling.

Copy and paste the CSS to the Custom CSS box within Divi Theme Options, or wherever you like to add custom CSS, such as a Divi Child Theme. You can learn how to create a Divi Child Theme in our child theme guide.

/****** Lightbox Styling *******/ 
[class*="lightbox-trigger-"] {cursor:pointer;}
[class*="lightbox-content-"] {position:relative; z-index: unset !important;}
[class*="lightbox-content-"] .mfp-close {color:#999999 !important;}
[class*="lightbox-content-"] .mfp-close:active {top:0px !important;}

Step Three: Create Your Trigger and Add the Custom CSS Class

Now that we’ve added the custom jQuery and CSS, we can create the popup trigger. To be clear, the trigger is what will make the popup open when clicked. The trigger can be a button, an image, text, or anything else you want to open the popup when clicked.

Once you’ve added the element to your page that you want to be the popup trigger, then you will add the following CSS class to the element:

lightbox-trigger-<value>

(replace <value> with any number or word)

In this example, I’ve added the class lightbox-trigger-bluecta to a button module as shown in the screenshot below:

Step Four: Create Your Popup Content & Add the Corresponding CSS Class

Now that we’ve created the popup trigger and added the custom CSS class to the trigger, we need to create the content on the page that will become our popup. It becomes the popup content when the corresponding CSS class is added to the custom CSS field of the Advanced tab of the section, row, or module.

So create the section, row, or module that you want to show inside the Divi popup or lightbox. It can be anywhere on the same page.

Note: once the class is added to the section, row, or module, it will be hidden by default when viewing the page on the front end, but will remain visible in visual builder.

After you’ve created the section, row, or module that you want to become the popup content, then you will add the following CSS class:

lightbox-content-<value> 

Again, replace <value> with the same number or word you used in step 3. In this example, I’ve added lightbox-content-bluecta to a CTA module.

Let’s try it out! Below is the button in step three, and when clicked, it will open the popup content we created in step four!

How to Add Multiple Lightbox Popups on the Same Page

Now, if you want to add multiple popups on the same page, just add a different word or number after lightbox-trigger- or lightbox-content-

Remember, the word or number you add to the end of the trigger and content classes must be the same for both classes in order for the popup to work correctly.

How to Customize the Popup Background Overlay

By default the background overlay for your popups will be solid black with no transparency.

If you’d like to customize this, you can add this custom CSS. Just change the background color value to your desired color. Use an rgba color value to set your desired opacity/transparency.

/****** Lightbox Background Overlay Styling *******/ 

.lightbox-overlay {
    background: rgb(0 0 0 / 60%) !important;

Get this Divi Popup Hack plus hundreds of other CSS and jQuery hacks that power up your Divi website!

Wrapping Up

That’s it, we’re done! Now you have awesome click-triggered popups that are built with Divi, WITHOUT having to use a plugin.

This hack is great for quick click triggered popups. If you’d like to do this without having to touch code, then take a look at the Divi Hacks plugin. It comes with hundreds of CSS & jQuery Hacks that will power up your Divi website :)

But if you need more features, such as the ability to set global popups on a timed delay and a bunch of other awesome triggers and features (& popup templates!), then we highly recommend the Divi Popup plugin (aka Divi Overlays). You can also take a look at our other popular Divi Plugins for additional tools that help you extend Divi even further.

Thanks for reading! If you have any questions leave a comment below!

7 Comments

  1. Avatar

    I try to put a wordpress image gallery on the pop up section but it doesn’t work correctly. Is there a bug?

    Reply
    • Charlie Wedel

      Hi :) I see what you mean. You would have to disable lightbox on the gallery images as the lightbox is already being used to display the custom lightbox section.

      Reply
  2. works perfectly thanks, very straightforward. And extensible :)

    Reply
  3. Hey – I cannot get it to work at all. I’m pretty sure the js is the culprit as the lightbox-content- modules don’t even disappear on page load (I can read the js to see what it’s supposed to do.) I am putting it in the right place, in the header.

    What’s happening is: on click, I just get a page reload, exactly as would happen if I clicked any normal href=”#”.

    I don’t use a gallery on the page like the other commenter.

    Reply
    • Charlie Wedel

      Hey Rob :) Do you have a link that I could inspect? Also, sometimes people have issues when copy and pasting the jquery. Make sure all the ” quotes don’t get formatted as that will make the jQuery not work properly.

      Reply
    • Charlie Wedel

      Hey Joey, thanks for letting me know. This code was slightly outdated. I revised it and it should work now. Can you let me know how it works on your site? Thanks, Charlie

      Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.