Divi Hacks Plugin

Examples & Documentation

Custom Lightbox Popups

Divi Hacks includes the ability to create custom popup lightboxes. Using the built in CSS class (lightbox-content), you can turn any section row or module into a popup, then trigger it with a click using the CSS trigger class (lightbox-trigger).

Follow the instructions below to create gorgeous Divi popups using Divi builder content!

Note: For more popup features, we recommend checking out our Divi Overlays popup plugin. It’s the original popup plugin for Divi and includes dozens of incredible features (and popup templates) for creating beautiful popups with Divi. You can take a look at the Divi Popup demo site to see everything the plugin can do.

  • lightbox-trigger
  • lightbox-content


  1. Add lightbox-trigger to the Module’s CSS Classes Box. For example, a button module.
  2. Add lightbox-content to the Section’s CSS Classes box, Row’s CSS Classes box, or Module’s CSS Classes box.

For Multiple Lightboxes on the same page

  • lightbox-trigger-<value>
  • lightbox-content-<value>

You can replace <value> with anything. The trigger will find the content that has the same value.

Note: The lightbox content must be on the page in order to appear in the lightbox. It will be hidden until triggered.


Trigger the Lightbox with any link


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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat… read more…

This is an example of using an image as a lightbox trigger.

To modify the color of the Close (X) icon in the lightbox, add and modify the following CSS variable:


Change the color of the lightbox background by adding this CSS variable to the Main Element CSS of the lightbox-content element: