The Elementor Lightbox opens images, galleries, carousels, and videos in a 100% mobile responsive lightbox popup window
The lightbox feature is turned on by default. You can switch it off by going to Dashboard > Elementor > Settings > Style, and uncheck the checkbox.
You can also turn the lightbox on or off globally and customize the lightbox design in the following way:
- Click the hamburger icon located in the upper left corner of the panel, and choose Global Settings.
- Choose the Lightbox tab.
The lightbox tab enables you to adjust the following settings:
- Image Lightbox: Slide the switch to enable or disable the lightbox globally.
- Enable in Editor: Slide the switch to enable or disable the lightbox within the editor.
- Background Color: Choose the background color and opacity of the lightbox.
- UI Color: Choose the UI Color. This affects the lightbox arrow and dot navigations, the Close button, etc.
- UI Hover Color: Choose the UI Hover Color. This affects the lightbox arrow and dot navigations, the Close button, etc. when the user hovers over each.
The Image Lightbox opens all image links in a lightbox popup window. The lightbox will automatically work on any link that leads to an image file, as long as the ‘Link to’ setting for the image is set to ‘Media File’.
Once ‘ Media File’ is chosen, an additional option called ‘Lightbox’ appears. Here, you’ll notice the lightbox feature for this image is set to Default, which reflects the status set in the Elementor > Settings > Style section. You can optionally change the setting for this image from ‘Default’ to ‘Yes’ or ‘No’.
- Inside the editor, drag and drop the Image widget onto the page, and choose an image.
- Change the Link to option to ‘Media file’ (This has to be done for the lightbox to work.)
- Set the Lightbox drop down to Yes
- Preview the lightbox changes by clicking on the image