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.
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:
From there, select Pages in the left-hand menu.
Choose the Popups tab from the menu that appears and then select New Popup.
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.
Give your popup a name and then click Add Popup.
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.
Now that your popup is empty, select Widgets from the left-hand menu.
Scroll down to the Media section and then drag and drop the Image widget into your popup.
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.
Congratulations, you’ve created your first lightbox! Feel free to repeat the above steps for each image you have.
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.
Scroll down to the Media section, and then drag and drop the Photo Gallery widget wherever you want it to appear on your page.
From the pop-up window that appears, tick the option Enable links on gallery images.
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.
Once your gallery has been set up, select one of your images and then click Edit link.
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.
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.
