How Do I Add a Lightbox?


How Do I Launch a Lightbox From a Button?

  1. Add a new lightbox button by dragging and dropping the lightbox widget from the panel on the left into the Builder.
  2. Select your button and click "Edit Lightbox".

  3. Add/edit your content just like you would with your other Unbounce pages.


 You'll see this if you have a new lightbox that you haven't edited yet.

 You'll see this if you have either a lightbox with no links to it, or you've reached the maximum amount of lightboxes.

How Do I Launch a Lightbox From an Image?

  1. Add a new lightbox button by dragging and dropping the widget from the panel on the left.

  2. Under the "Appearance" section of the Properties pane on the right, click the "Style" drop-down menu and select "Image".
  3. In the "Choose Image" window that appears, select or upload the image you would like to display as your Lightbox button image preview.

    The image will not be editable within the Page Builder, so you will need to ensure the image is already sized as desired.

  4. Remove the default button styling (e.g. remove border, remove label text, modify corner radius to "0") as desired to create a plain image look.

    Now go forth and add images to your lightboxes!

Related articles:

Loading a Form into a Lightbox
Adding an Image Preview in a Lightbox

Why Won't My Lightbox Load? 

If you click your lightbox on the live page and it loads a blank, you may be dealing with a mixed content error. 

To prevent this, ensure that both your page and the contents inside your page (links, images, etc) are secured using https://.

If you're using a Cloudflare SSL certificate on your domain, this will also stop your lightbox and Form Confirmation Dialog from loading. To prevent this from happening, disable your Cloudflare SSL certificate.

If you're still experiencing issues, feel free to contact our friendly support team!