What is a lightbox and how do I create one in Website Builder?

This article will explain what a lightbox is and how you can set one up.

Lightbox Gallery

A lightbox is a slideshow image gallery that appears as a fullscreen pop-up, allowing visitors to view a larger version of the original image. Using lightboxes can be particularly helpful if you have loads of large, high-quality images that you need to showcase on one page, as it allows you to set up your own gallery without sacrificing your page loading speeds.

Although this function isn’t technically available, here’s a neat workaround that you can use.

Please note: this article only applies to Version 8 of our Website Builder. If you’re not sure which version you have, you can find out by reading this article.

To begin with, we’ll need to the pop-up window first:


Although this function isn’t technically available in Version 8, here’s a neat workaround that you can use. To begin with, we’ll need to the pop-up window first:

Step 1 of 16

Start by logging in to your Website Builder package.


Step 2 of 16

From there, select Pages in the left-hand menu.

Select Pages


Step 3 of 16

Choose the Popups tab from the menu that appears and then select New Popup.

Select New Popup


Step 4 of 16

A window will now appear which will give you a list of templates to choose from. Click Blank as this will have the most appropriate layout for our lightbox gallery.

Click Blank Popup


Step 5 of 16

Give your popup a name and then click Add Popup.

Add Popup


Step 6 of 16

Once your popup has been created, remove all its existing content by hovering your cursor over each element and clicking the red X icon that appears.

Delete Popup content


Step 7 of 16

Now that your popup is empty, select Widgets from the left-hand menu.

Select Widgets


Step 8 of 16

Scroll down to the Media section and then drag and drop the Image widget into your popup.

Drag and drop Image widget


Step 9 of 16

Once you’ve done this, the Image Picker will then appear which will feature a selection of free images as well as images that you’ve already uploaded to your site. Select which image you wish to use for your popup or click Upload to insert a new image.

Be sure to amend the design of your image widget as well, so that the entire image is incorporated into your popup.

Choose popup image

Congratulations, you’ve created your first lightbox! Feel free to repeat the above steps for each image you have.


Step 10 of 16

Once you’ve finished creating your popups, access the page you want your lightbox gallery to appear on and select Widgets in the left-hand menu.

Select Widgets


Step 11 of 16

Scroll down to the Media section, and then drag and drop the Photo Gallery widget wherever you want it to appear on your page.

Select Photo Gallery widget


Step 12 of 16

From the pop-up window that appears, tick the option Enable links on gallery images.

Enable links on gallery images


Step 13 of 16

Be sure to remove any template images by clicking the grey X icon on them and then replace them with your own selecting + Image.

From there, select which images you’d like to incorporate into your gallery and then click Done to save your choice. If you need to upload new images, select + and then find them through your file browser.

Insert own images


Step 14 of 16

Once your gallery has been set up, select one of your images and then click Edit link.

Click Edit link


Step 15 of 16

Choose Popup from the list of options and then select the popup you created earlier from the drop-down list that appears.

Repeat this step for each image in your lightbox gallery.

Select popup


Step 16 of 16

Once done, be sure to test your lightbox gallery by previewing your site and clicking any image within your gallery.

If done correctly, a popup should appear with a larger version of your image.

Preview Lightbox