How to Create a Divi Popup with any Divi Section, Row, or Module

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.

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!

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 from Divi Life. It’s the market leader when it comes to creating popups for Divi.


Trigger the Lightbox with any link


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

Divi Popup Hack in a Nutshell

1. Create your trigger element (button, CTA, image, blurb, etc) and add the class lightbox-trigger-element

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

  Since Divi already has the lightbox functionality, we just need to enable the classes that we’ll be using.

The first thing we need to do is add the jQuery and CSS.

Copy and paste the following script into the head of your website.

<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-",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>
   Copy and paste the following CSS into the Custom CSS box.
/****** 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;}

   Set the Trigger Element by adding lightbox-trigger-<value> as a class name of the element you want to be the trigger. You can replace <value> with any number or word. just In this example, I’ve added the class lightbox-trigger-bluecta to a button module.

   Now create the section, row, or module that you want to show inside the Divi popup or lightbox anywhere on the same page. (This element will be hidden by default when viewing the page, but will remain visible in visual builder).

Set the Divi popup or lightbox content by adding lightbox-content-<value> as a class name of the element you want to be inside the lightbox or popup. 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.

Adding Multiple Lightboxes

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-

Get this Divi popup hack plus hundreds of other CSS and jQuery hacks that power up your Divi website


This hack is great for quick click triggered popups. But if you need more features, such as the ability to set global popups on a timed delay, then we highly recommend the Divi Popup plugin from Divi Life (aka Divi Overlays).

Give this page a share, like, or comment if this worked for you! Leave a comment if you have a question or want to share some love 😀