Gallery Module

The Gallery Module allows the visualization of multiple images at the same time in a dynamic and interactive way. It is possible to find the Gallery Module in the Basic Modules menu, add it to your website by dragging it from the top bar to a row or column of your preference. Watch the video below for a tutorial on the Gallery Module!

 

 

Edit the Gallery Module

To open the editing menu, double-click on top of the gallery or hover the mouse on top of it to find the blue module and click on the Edit option. 

 

1. Content

On this tab you should add the images you wish to display in the gallery - either by uploading from your computer of choosing them from Library. Once the images have been uploaded or selected, you can easily move them by dragging them to your preferred order, add alternative text and a caption if you wish to do so. Note that all the images you upload we'll be saved on the File Manager for future use.


1.1. Image Settings

Once you have uploaded your images or chosen them from your File Library, you can find two icons on the bottom left corner and right corner of the image thumbnail.


1.1.1. Move Images

By holding and dragging the image from the bottom left corner icon you will be able to move and rearrange the images in the gallery in your preferred order.


1.1.2. Settings

By clicking on the icon on the bottom right corner, a new section will expand where you will have the chance to edit the image in the integrated Image Editor, replace the image with another one from the fIle Manager, remove overall the image for the gallery and define:


Alt-Text

In this section you can add the alternative text for that image. Read more about Alt-Text here!


Caption

In this section you can add a small caption for the image, which you can then choose to display underneath the image in the Gallery and/or as a pop-overlay when you expand the image full screen. Click here to read all about Images Caption!


1.2. Use Global Data Image

Instead of manually uploading images to each gallery, you can use images that you have previously uploaded to Global Data. To activate this option, simply toggle on in the right side. When you use Global Data images, you only need to upload the pictures once and you could then use it on your website as many times as you want. Learn more about Global Data here!

 



2. Styling


2.1. Background

Choose a solid background for the gallery background.

 

2.2. Border

Personalize the outside border of the gallery regarding color, width, style and radius.


2.3. ARROWS

In case you have enabled arrow navigation (see 3.5), in this section it is possible to style the arrows. You can define the arrow's background width and height as well as its color in all states - normal and hover. It is also possible to define the actual icon (arrow) size as well as its color in all states. The last styling option is the border radius where it is possible to round up the icon background.


2.4. CIRCLE PAGINA

In case you have enabled circle pagina (see 3.6), in this section it is possible to style the width and height of the dots as well as their background and border color in all states - normal, hover and active. It is also possible to define the border width and radius, which dictates how rectangular or round the icons should be.

 

2.5. Spacing

Adjust the spacing of the gallery - both in terms of margin and padding.


2.6. Caption with Thumbnail

In this section it is possible to style the caption underneath the Image Thumbnail in the Gallery. You can style it in terms of font color, size, family, weight, line height, letterspacing, text decoration, italic, uppercase and alignment options, as well as set the spacing, both in terms of margin and padding.

 

3. Settings

3.1. Columns

Decide the number of columns the gallery will have. Write them down in the box or use the slider moving it to the left or right to decrease or increase the number of columns, respectively.

 

3.2. Amount of Images Shown

This will ultimately dictate how many images are shown, given the amount of columns. For example, if you want 12 pictures to be displayed and you have chosen 4 columns, the gallery will automatic design 3 rows. 

 

3.3. Margin Between Images

Choose how big the margin between images should be. Write it down in the box or use the slider moving it to the left or right to decrease or increase the margin size, respectively.

 

3.4. Show Uncropped Thumbs

By default the gallery crops the pictures so the thumbnails fully fit the gallery spaces. By enabling this option, the gallery will show the uncropped thumbnails.

 

3.5. Arrow Navigation

When this option is enabled, the navigation between pictures of the gallery will be done through an arrow on each side, moving the pictures on the respective direction. 

 

3.6. Circle Pagina Navigation

When this option is enabled, the navigation will be done with circles (dots) on the bottom of the gallery. 

 

3.7. Pause on Hover

When this option is enabled, the slides will stop automatically changing if someone is hovering their mouse over the pictures. Once they hover somewhere else in the page, the slides will go back to automatically changing.

  

3.8. Auto Change of Slides

When this option is enabled, the navigation in the gallery will be done automatically. The group of pictures shown will automatically change, sliding to the side and showing the next group of pictures.

 

3.9. Caption with Thumbnail

If you wish to display the image caption underneath the image thumbnail in the gallery, simply enable this setting. You will be able to style the caption as described in section 2.6. 


3.10. Caption in Popup Overlay

If you wish to display the image caption in the popup overlay when the image is shown full-screen, simply enable this setting.Click here to read how to style this type of caption!


3.11. Transition

With this option you can define the transition animation for your gallery - "slide", in which each slide moves horizontally; "slow fade", in which the slide fades for 800 milliseconds; and "fast fade", in which the slide fades for 200 milliseconds.

 

3.12. Transition Interval

By default the transition interval is 5000 milliseconds. Choose a smaller value if you want the transition interval to be shorter and a bigger value if you want the transition interval to be bigger.


3.13. Hover effects

You can enable hover effects on your images, which is an overlay that appears when you hover the image. Hover effects are a way of adding interactive design features to your website to make it more alive and interesting for your customers. To learn more about hover effects, please click here.

 

4. Gallery Global Styling

Instead of individually styling each Gallery module it is possible to do it automatically with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Galleries menu. Click here to read all about Gallery Global Styling!

 

Anything we’ve not covered?

Contact Us