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.

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.

Lightbox Gallery

Since this feature is applicable to multiple versions of our Website Builder tool, simply select your version from the list below and follow the instructions provided to get started:

If you’re not sure which version of Website Builder you have, you can find out by reading this article.

Version 8

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

 

Version 7

Lightboxes in Website Builder 7 are automatically created for you.

Simply add the image you desire in the normal manner, and then, when you view your live site, you will be able to click each of your images and see the lightbox effect.

Version 6

Step 1 of 4

Start by logging in to your Website Builder package.

 

Step 2 of 4

From there, click the image you want to use for a lightbox and select the gear icon that appears within the provided toolbar to access its settings.

 

Step 3 of 4

A separate Image menu will now appear along the bottom of your page. Simply drag the image you wish to use from the left-hand Image menu and drop it into the Drop lightbox image above box.

 

Step 4 of 4

Your lightbox image is now set up. You can check the look of your lightbox by clicking Preview in the top-left of the main window.