Support Tutorials

Find help without having to contact us.

Image gallery widget

In our brand new editor, we now offer you the possibility to add an image gallery to your website.

STEP 1. Drag the widget onto your page

?name=media_1398601906819.png

1. Click on the Add content button at the top of your editor
2. Click on the Image Gallery and drag it to your page

?name=media_1398602052262.png

Hover over your Image Gallery and click on the picture icon to add some photos to your widget.

STEP 3. Select your images

?name=media_1394798724387.png

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 them in the order you want them to show in your gallery.

How it will look like

?name=media_1394800192850.png

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.

?name=media_1394798856130.png

After clicking on one of your images, a lightbox 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 lightbox by clicking on the cross at the bottom (2).

?name=media_1394799021002.png

To drag the image gallery across your site or to place it inside a column, just click on the drag icon and move it.

(OPTIONAL) Make the thumbnails smaller

?name=media_1394802473373.png

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 your site.

Was this article helpful?

Related Articles