In website builder WebWave lightbox is similar with functionality to a photo gallery. The difference between them is that photos are presented in slightly another way. In this tutorial you will find out how to make a website with an effective lightbox.
In order to add lightbox to your website, select Image icon from the toolbar on the left side of the builder and choose the last icon.
Next click right mouse button on lightbox then choose option "Change images". From "My images and files" select pictures that you want to show up on lightbox by clicking on them and clicking Add to images grid. If they are not in "My images and files" yet, add them from your hard drive by clicking "Select files" on right top corner of Images menager.
Change lightbox size the way you want to and photos will proportionally and symmetrically follow.
Lightbox minimum size is only limited by its thumbnails. By setting the smallest lightbox size all the thumbnails become visible but there is no space between them. If you want your lightbox to be even smaller, change thumbnails size.
After clicking on your lightbox you will able to set in pixels lightbox's thumbnails width and height through the "Lightbox size" section in the "Element settings panel".
You can also choose the way thumbnails will be displayed in the lightbox. Choose crop type. "Crop" means that an image will fully fit the lightbox and will get cropped. "Fit" means that the whole thumbnail will be displayed but it might not fill out the whole space.
After clicking on lightbox you will see "Lightbox settings" in the Settings panel.
You can set there:
You can also change the layout of your image lightbox in the item settings. You can choose between:
Fluid - you can change the distance between elements and the height of the images
Masonry vertical - you can change the space between the images and the appearance by changing the order of the images
In order to add photos to lightbox, click on it and select "Edit content" from Imgae grid settings in Settings panel.
On the top of a new window select "Media library", choose photos and press "Add lightbox" at the bottom of the window.
More about media library read here.
In order to remove photos from lightbox, click on it and select "Edit content".
Select a picture which needs to be removed and in "File details" choose "Remove from lightbox".
Click on lightbox and select "Change content.
In this window select a photo, drag and drop it in a place where you want it to be.
Select the Lightbox, and then in the "Edit" section, select "Image".
Click on the specific image which you want to set the click action, then in the settings panel go to the "Click action (link)" section and select the action you are interested in.
Our free Website Builder lets you create amazing websites effortlessly. You can build your website from scratch, start with a blank page or choose various templates from our free collection and modify it according to your needs. With WebWave you have a free design software at your fingertips.
Find us online