Jul 16, 2020 | Divi Resources

Create Divi lightbox for videos, images & more

Want to display video, images, and more in a lightbox on your Divi theme website? And finding it hard to achieve? Then, in this article, we’re going to see how we can create Divi lightbox for videos, images, text, and more using Divi Plus Modal.

So, without any further due, let’s get started!

Preview 1

Interested in the above Divi lightbox for video and want to see it working first? Then, click here.

Things required

To start creating a lightbox for video and other media in Divi, we need Divi Modal. For that, we need to purchase Divi Plus, which we can do from here.

Once purchased, download the plugin, then install and activate it.

After activating the plugin, make sure that Modal is active in the Divi Plus panel. Settings > Divi Plus on your WordPress dashboard.

Modules' panel of Divi Plus plugin

Layout used

In this tutorial, I have used the Divi’s premade Cyber Security layout to create the above modal. If you want the same design and style, you can also use that.

Divi cyber security layout

Insert Divi Modal on the page

After successfully activating the plugin and Modal, it’s time to create Divi lightbox.

To do that, first, create a page or edit an existing one, where you want to show video in the modal. Then, load the Divi page builder and insert the DP Modal.

Divi Plus modal in Divi module library

Modal content customization for Divi lightbox

After inserting the module on the page, you get the content setting window for customizing the video lightbox. It combines many options that can help you to make your video modal window’s content promising. The following are the options available in the content tab.

Configure Modal Trigger

As soon as you add the module to the page, you get the following Divi modal window. It allows you to customize the modal’s content and what you want to display on it and what’s not.

Divi modal configuration settings with element trigger type

Do configuration as follows,

  • Trigger Type: Element
  • Trigger Element Type: Icon
  • Icon: See the screenshot

Other modal trigger type & elements

In addition to the Element trigger type, with Modal, you also get Page Load trigger type.

Divi Modal trigger type options

Plus, for elements, you get more options in addition to the icon trigger element type. All the elements trigger types are Button, Image, Icon, Text, and Element CSS ID.

Divi modal element trigger type options

Modal Header

Using this Divi modal setting, you can choose whether or not your Divi modal window display header, title, and close icon. Under this setting, you can also set the title of the modal.

Divi Plus modal header content settings

Modal Body

This setting of the Divi Plus Modal, allows you to select the content of your modal. It provides support for Video, Image, Text, and Divi Library Layouts to display in the lightbox.

Modal body settings

For video lightbox, choose video and upload the corresponding file you want to display in the video popup.

Divi modal for video lightbox body content settings

Modal Footer

Using this setting of the Divi Plus Modal, you’d be able to choose whether or not your video lightbox would display footer. Plus, you can also use this setting to input text for the close button.

Divi modal footer settings

However, for this tutorial, we will keep the modal footer option disable. So, if you’re following this tutorial, then don’t forget to check Show Footer as “No.”

Background

Here, you’d be able to customize the background style of modal’s elements. It’s a complete settings panel for each and every element of the modal for background customization. Apply changes as follows,

Divi modal background settings

Trigger Element Background: None

Modal Background: 

Gradient 1: #47D7FF

Gradient 2: #0F61E2

Type: Radial

Radial Direction: Top Right, and leave other settings as they are.

Modal Header Background: None

Body Background: None

Modal Footer Background: None

Modal design customization for Divi lightbox

Using the Content tab of the Divi Plus Modal, we’ve customized the content of our Divi video lightbox. Now, using the option available in its Design tab, we’re going to make it look attractive and engaging. The options available in the Design tab for creating impressive video popup for Divi are,

Alignment

This first setting of Modal’s Design tab allows you to make changes in the trigger element’s placement location. Using this setting, you’d be able to place your trigger element on the left, right, and center.

Modal trigger alignment

Trigger Icon

Using this particular setting, you can make changes in the size and color of the Divi lightbox trigger element.

Divi modal icon trigger options

Trigger Icon Font Size: 100px

Trigger Icon Color: #FFFFFF

Modal Title Text

It allows you to customize the appearance of modal title. This Divi modal setting provides you with all the necessary parameters to make a text look more engaging and attractive.

Modal Title Heading Level: H2 (This is best practice. Whenever, you create a Divi pop up keep heading level H2.)

Title Font: Acme

Font Weight: Bold

Title Alignment: See screenshot

Title Font Color: #FFFFFF

Box Shadow

In addition to the title text setting, the Box Shadow setting of the module provides you with the option to add a box-shadow on each modal element. However, for this tutorial, we’re only going to add a shadow on the modal. Therefore, keep other elements’ box-shadow unchecked, and for modal, look in the screenshot.

Border

Just like the Box Shadow setting, this setting of Divi Modal allows you to add and customize the border of the trigger element and pop up modal.

Modal Rounded Corners: 10px for each corner.

Modal Sizing and Alignment

Using Modal Sizing and Alignment, you can make changes in the position of the popup Divi modal. Plus, it also provides you with the option to make changes in the modal width and height.

Keep Modal Alignment & Sizing as default.

Spacing

Here, you’d be able to make changes in the margin and padding of the module and its elements as well as module too. Keep spacing as default.

Once these settings applied on the modal, it will appear like the below image.

Animation

This setting would allow you to add animation on the entrance of Divi pop up for video in the modal. Apply customization as follows,

Modal Animation Style: Fade

Animation Duration: 1100ms

Modal Animation Starting Opacity: Default 0%

Modal Animation Speed Curve: Ease-In-Out

CSS used for pulse animation

Following the above steps, we have almost created the lightbox layout shown in this blog post. However, to add pulse animation, we need to add a custom CSS. For that, go to the module’s Advanced tab and add el-icon as CSS Class.

Divi modal pulse animation class name

 

After giving the class name to the module, go to the Advanced tab of the Section Settings and input CSS Class as modal-example-1.

Once added class name for the section, finally, go to the Advanced tab of Page Settings and add pulse animation custom CSS in the same manner shown in the below screenshot.

Divi modal pulse animation css in page advanced setting

Add below custom CSS in the above setting appropriately.

Examples of Divi lightbox for video, images and more

Below are some examples of Divi video lightbox and other body content, created using Divi modal of the Divi Plus plugin.

Design Your Home

Click the image to see the image in the lightbox.

Q

Design Your Home

Organic Tea Shop

Tea For Two

Q

Divi Plus Image Hotspot

I
Q

Divi How To SChema Module

Hello, I’m Jane

A Conceptual Copywriter

Click Here to See my profile
Q

Hello, I'm Jane

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.

Click anywhere to see the Divi Layout as lightbox

Welcome to Divi Elementary
Welcome to Divi Elementary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Posted By:
Vishvendra
Vishvendra believes in the keep learning process and applying those learnings into work. Other than technical writing, he likes to write fiction, non-fiction, songs, and comic ideas. He loves what he writes and writes what he loves. Search his name with "Nathawat," and you'll easily find him over the internet.

0 Comments

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.

0 Comments

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.

Divi Facebook modules to Share, Update, Like, Comment, and much more

Divi Facebook modules to Share, Update, Like, Comment, and much more

Over the last decade, Facebook has become one of the online platforms that can bring huge profits to any business. Nevertheless, Facebook alone doesn't create the buzz about your business in the world, but the community behind it makes the difference. The comments you...

Divi Sticky feature & everything you can do with it

Divi Sticky feature & everything you can do with it

The Divi 4.6 update brought an impressive feature to the theme, which was missing for a very long time. The Divi sticky element option for every module. Using this particular option, you can now stick any module of the builder on the edge of the browser. Furthermore,...

How to create Divi post carousel & recent posts slider

How to create Divi post carousel & recent posts slider

Post carousels are very useful when it comes to increasing user sessions on a blog. You can add a recent post slider at the bottom of an article, and when users interact with it, they might navigate to it. That's it, from one blog post, you've brought readers to...