Table of Contents
What is the image gallery widget?
Updated Oct 31st, 2017 at 12:42 GMT
In Website Builder, we offer the possibility to add an image gallery to your website
Step 1. Drag the widget onto your page
- Click on the Widgets tab on the left
- Click on the Image Gallery and drag it to your page
Step. 2 Go to your image gallery settings
Hover over your Image Gallery and click on the picture icon to add some photos to your widget.
Step 3. Select your images
If you want to add all the images you have in your album, just tick the box that says 'Select all in album'. The order in which the images will appear in the widget is the same as in which you are looking at them here. If you want to change the order of your images, you'll have to add them one by one by clicking on the in the order you want them to show in your gallery.
How it will look like
The widget will occupy the whole width of your work area, meaning each image will be around 310px wide as the image gallery shows the photos in 3 columns. There is no way of setting how many columns the image gallery has as it all depends on which device you are using to see your site.
Navigating through your gallery
After clicking on one of your images, a light box will appear showing a bigger view of your image. Click on the arrow icon (1) to move through the images in the gallery, or close the light box by clicking on the cross at the bottom (2).
Dragging your image gallery
To drag the image gallery across your site or to place it inside a column, just to click on the drag icon and move it.
(OPTIONAL) Make the thumbnails smaller
The images in your gallery are set to occupy 33.3% of the 100% width of your page, so they will get divided into 3 columns. If you want to divide them into more columns, therefore making the thumbnails smaller, you will need to drag an Embed Widget onto your page (place it at the bottom, it won't be visible for your users) and paste the following code inside of it:
<style> .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*/ } </style>
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 its not working in your published site you'll need to log out, clean your browser cache, log in, add the code again into your embed widget and re publish the site.