Child pages
  • How To Manage The Image Gallery Widget

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

STEP 1. Drag the widget onto your page

Image Modified

1. Click on the Widgets tab on the left
2. Click on the Image Gallery and drag it to your page

 

STEP 2. Go to your image gallery settings

Image Modified

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

 

STEP 3. Select your images

Image Modified

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

Image Modified

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 way of setting how many columns the image gallery has as it all depends on which device you are using to see your site.

 

STEP 4: Navigating through your gallery

Image Modified

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).

 

STEP 5: Dragging your image gallery

Image Modified

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

 

STEP 6: (OPTIONAL) Make the thumbnails smaller

Image Modified

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 yourbrowser cache, log in, add the code again into your embed widget and re publish your site.

...