Follow these steps to add an image gallery to your website.
- Click the Add content button at the top of your editor.
- Click the Image Gallery and drag it to your page.
Hover over your Image Gallery and click on the picture icon to add some photos to your widget.
If you want to add all the images you have in your album, just tick the box that says Select all in album. If you want to change the order of your images, you'll have to add them one by one by clicking on them in the order you want them to show in your gallery.
The widget will occupy the whole width of your work area, meaning each image will be around 310px wide as the image gallery show the photos in 3 columns. There is no button for setting how many columns the image gallery has as it all depends on which device you are using to see your site.
After clicking on one of your images, a lightbox will appear showing a bigger view of your image. Click the arrow icon to move through the images in the gallery, or close the lightbox by clicking the cross at the bottom.
To drag the image gallery across your site or to place it inside a column, just click the drag icon and move it.
The images in your gallery are set to occupy 33.3% of the width of your page, so they will get divided into 3 columns. If you want to divide them into more columns, you will need to drag an Embed Widget onto your page and paste the following code inside of it:
.widget.gallery ul li
padding-bottom: 12.5%; /*This will set the height of every image inside your widget*/
width: 12.5%; /*This will set the width of every image inside your gallery*/
You can change the percentage values depending on the number of columns you want. For example, if you want 5 columns, then the values should be 20%.
If you added the code but it's not working in your published site, you'll need to log out, clean your browser cache, log in, add the code again into your embedded widget and re-publish your site.