The Lightbox combines the features of a modal and a slideshow, allowing you to embed an image gallery into your canvas and create an engaging, interactive experience for your visitors.

Lightbox vs. Slider

While both the Lightbox and Slider can display multiple images and videos, there’s a key difference: 

The Slider is an integral part of the main page, while the Lightbox appears as a pop-up triggered by a user action, with only its thumbnail visible on the page itself.

Why Use a Lightbox

User-Friendly – Lightboxes are less intrusive, allowing users to easily close them if they’re not interested in the content.

Attention-Grabbing – When triggered, the main screen dims and draws focus entirely to the Lightbox, making it the sole interactive element until closed.

Captions – Lightboxes can display captions, providing valuable context for the images or videos they contain.

Add a Lightbox

To add a Lightbox element:

1. Open the Insert panel from the Left Sidebar.

2. Go to Base Elements from the Elements section.

3. Scroll down to the Advanced section and click or drag the Lightbox element onto the canvas.

📝 Note: If you don’t see Base Elements, click on the Kirki logo at the top-left to access the main menu, go to View, and enable Show Base Elements.

Set the Thumbnail

The thumbnail is the image visitors see on the page that triggers the Lightbox when clicked.

1. Select the Lightbox element on the canvas.

2. From the Design tab on the Right Panel, click Replace Image under the Lightbox section.

3. In the panel that appears, upload an image directly or select one from the Media Manager.

To replace the thumbnail at any time, click Replace Image again.

Adding Media to the Lightbox

Once the thumbnail is set, you can add images and videos to the Lightbox gallery:

1. Click Add Media in the Right Panel.

2. Select Image or Video from the dropdown.

3. Upload your file or select one from the Media Manager.

4. Repeat to add more items.

Manage Lightbox Items

Once items are added, they appear listed in the right panel. From here you can:

Reorder Lightbox Items

1. Select the Lightbox element on the canvas.

2. From the Design tab on the Right Panel, hover over the left side of the item you want to reorder.

3. Use the toggle that appears to drag & drop the item and arrange its order in the Lightbox.

Add Captions to Lightbox Items

1. Select the Lightbox element on the canvas.

2. From the Design tab on the Right Panel, find the item you want to set the caption for.

3. Click the ellipsis (…) icon and select Add Caption to add a text overlay to that image or video.

Hide Lightbox Items

1. Select the Lightbox element on the canvas.

2. From the Design tab on the Right Panel, find the item you want to hide.

3. Click the ellipsis (…) icon and select Hide to make an item invisible in the Lightbox without deleting it.

Delete Lightbox Items

1. Select the Lightbox element on the canvas.

2. From the Design tab on the Right Panel, find the item you want to delete.

3. Click the ellipsis (…) icon and select Delete to remove an item from the Lightbox.

Styling Your Lightbox

You can further style your Lightbox using the options on the right panel. Learn More about Right Panel.