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

Usage

Add lightbox-trigger to the Module’s CSS Classes Box. For example, a button module.
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.

Examples

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

Trigger the Lightbox with any link

Example:

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

--close-icon-color:black;

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

--overlay-background-color:red;

This is a Full Section with multiple rows

Click Here

Voluptatibus occaecati voluptatem doloremque asperiores harum

Quia rerum quod deleniti facilis enim et mollitia amet dolor est sed sed harum et odit beatae dolor dolorem nihil vero quia numquam placeat qui aut non ut nisi assumenda earum.

Ut et suscipit ut aut et

Sint facere occaecati qui mollitia sit harum deleniti velit nobis repellat magnam consequatur cum autem dolore velit est natus nostrum ratione provident optio quia blanditiis mollitia quia blanditiis excepturi esse aperiam qui vitae autem tempore est et iste non voluptatem sint beatae ipsa voluptates omnis quo aut harum tempora dolorem accusamus laborum qui officia rem et quisquam eum accusantium provident officia qui explicabo qui impedit repudiandae officia cumque.

Eum quasi ipsum odit quia et nobis

Qui numquam minima beatae ab. Ut sit sunt quod aut voluptatem qui quasi. Tenetur in ut fuga sint eius Saepe est repudiandae quae provident velit aut mollitiaOfficia illum utEveniet quasi voluptate illum sedRerum dolorem nonMinus dolorem Exercitationem libero eos quae...

Divi Hacks Plugin

Custom Lightbox Popups

Usage

For Multiple Lightboxes on the same page

Examples

Voluptatibus occaecati voluptatem doloremque asperiores harum

Ut et suscipit ut aut et

Eum quasi ipsum odit quia et nobis

Subscribe to the Divi Life Email List

You are now subscribed to Divi Life (owner of Divi Hacks)

Divi Hacks Plugin

Custom Lightbox Popups

Usage

For Multiple Lightboxes on the same page

Examples

Your Title Goes Here

Success!

Lightbox a Video

This is a Full Section with multiple rows

Voluptatibus occaecati voluptatem doloremque asperiores harum

Ut et suscipit ut aut et

Eum quasi ipsum odit quia et nobis

You are now subscribed to Divi Life (owner of Divi Hacks)