How to add a Lightbox to your site

The lightbox component lets you display images (with or without captions) in a full-screen modal when the user clicks them. You can also create immersive galleries by linking several lightboxes together.

Plus, the Lightbox looks and works great on every device, from the smallest smartphone to the biggest desktop display.

What makes up the lightbox component

The lightbox is made up of a simple lightbox wrapper that holds a single thumbnail image. That thumbnail can be the same image you want to show in a full-screen view, or serve as a cover photo for other content (like a video).

You can also add additional items, like text blocks, to this lightbox wrapper so you can really customize how your images display.

How to add images or videos to your lightbox

Step 1: Drag the lightbox on to the canvas

Open the Add panel and drag the lightbox into position. You’ll see a single thumbnail placeholder like the example below.

Step 2: Choose the image you want to display

Swap out the thumbnail image by double clicking on it, or click it once and upload an image from the Settings panel.

You can also add other elements to the lightbox component, including text blocks for captions, additional images, videos, and more.

Step 3: Add more content

Now that your thumbnail’s in place, it’s time to add the content people will see in the full-screen view. You can add as many images as you want (but keep an eye on file size, so you don’t slow down your site).

To add a video, just paste in the URL (from YouTube or Vimeo, for example) and you're all set. This will help keep your page size low and your loading time fast.