How to add a lightbox for image preview in WordPress using Elementor

In this text, you will find out all the available options in Elementor for adding lightboxes in WordPress.

Option 1 – adding a lightbox for viewing images

Adding a lightbox is automatically set for all images in Elementor, so if you have an image, all you need to do is check if the option code Link selected Media File. Now, by clicking on the image, a lightbox appears.

Lightbox

Option 2 - controls all global lightbox settings

This is done by going to the hamburger icon, then clicking on Site Settings and after that on Lightbox, where the global settings are visible. Here you can turn off the lightbox, edit how the lightbox will appear, and change the background color.

Lightbox

Option 3 – turn off all lightboxes

This is easily adjusted by turning off the switch under the option Image Lightbox. When you do this, clicking on the image does not open the lightbox.

Option 4 – adding a lightbox for an individual image

So, if you turn off the lightbox in the global setting, you can always turn on the lightbox and only for one image, by clicking on the image and under the option Lightbox select Yes. Now when you click on the image a lightbox will open.

Lightbox

Option 5 – change the background color of the lightbox

This is also done globally. You can choose any color you want and by clicking on the image the background color will be the color you chose.

Lightbox

Option 6 – lightbox galleries and lightbox carousel sliders

This works similarly to single image lightboxes. By clicking on the gallery, select the Link option Media File. Do the same with the carousel slider. Now when you click on an image in the gallery, a lightbox opens and you can scroll through all the photos.

Lightbox

Option 7 – video lightbox

To turn on the video lightbox, you need to click on the video and then turn on the option switch Image Overlay and an option code switch Lightbox. Now when you click on a video, a lightbox opens.

Lightbox

Shown are the different options you can use with Lightbox in Elementor. I hope you found it useful, if you are interested in reading more freelance tips, you can check them out on ours blog, and in case you want to consult with professionals, click on this one Link.

Source: youtube

Are you interested in the services of our agency?

Leave us your details so we can contact you for more information.

Author picture

Leave a comment:
Share this article: