Image List Module

The Image List Module allows the visualization of multiple images at the same time in a dynamic and interactive way, with the possibility to add links to the images. It is possible to find the Image List Module in the Basic Modules menu. Add it to your website by dragging it from the top bar into a row or column of your preference.

 


Edit the Image List Module

To open the editing menu, double-click on top of the image list 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 - either by uploading from your computer of choosing them from Library. Note that all the images you upload we'll be saved in the File Library for future use. Once the images have been uploaded or selected, you can easily move them by dragging them into your preferred order and edit some characteristics. When you are done, don't forget to click on Apply Changes to save your progress.

 

1.1. Edit, Replace, Remove

Here you can edit the image with the integrated image editor, remove or replace the image. 

 

1.2. Alternative Text

For SEO purposes, you should add alternative text to your images, which you should do in this field. Learn more about Alt-Text here!


1.3. Caption

Caption is a text that you can set to appear when users hover on the image. See sections 2.4 and 3.11 for information on how to enable and style this feature.    


1.4. Clickthrough URL

In this section you can add a link to your image. You can define the behavior of the image - linking it to an internal page, an external page, an email or a file. It is also possible to define whether the link should be opened in a new tab or not; note that by default, external links are always set to open in a new tab.


1.5 Set "NoFollow" Property

In this section it is possible to set a "nofollow" property to that specific link. This is a particularly relevant setting if you do not want search engines to consider that hyperlink and, therefore, when this setting is enabled, your link will not affect the target's ranking in the search engine index.


1.6 Custom Tracking Name

With the editor it is possible to track your visitors behavior regarding that specific image. Attribute a custom tracking name to the image in this field and you will be able to track its action and statistics on the Home dashboard of the editor, under Custom Actions. Read more about Visitor Statistics here!

 

2. Styling


2.1. Background

Choose a solid background for the image list background.

 

2.2. Overlay on Hover

Determine background and border settings of hover effects on your images in the module. Hover Mode needs to be enabled from the Settings tab in order for any hover effects to be active (see section 3.11) 


2.3. Icon on Hover

If you want an icon to appear when hovering on images, you can set icon size, colour, background and border here. 


2.4. Caption Text on Hover

If you want the image caption text to appear on hover, use this menu to specify font settings and spacing. Remember, caption text will only appear if you have inputted text in the Caption field in the Content tab (see 1.3).


2.5. Border

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

 

2.6. 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.7. 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.8. Spacing

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

 

3. Settings

3.1. Columns

Decide the number of columns the image list 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 image list will automatically create 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 image list module crops the pictures so the thumbnails fully fit the gallery spaces. By enabling this option, the image list will show the uncropped thumbnails.

 

3.5. Arrow Navigation

When this option is enabled, the navigation between pictures of the image list will be done with an arrow on each side, moving the pictures in 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 image list. 

 

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 elsewhere on the page, the slides will continue automatically changing.

 

3.8. Auto Change of Slides

When this option is enabled, the navigation on the image list 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. Transition

With this option you can define the transition animation for your image list - "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.10. 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.11. Hover Mode

In this menu you can enable hover effects on your image. Hover effects are a way of adding interactive design features to your website to make it more dynamic  for your visitors. To learn more about hover effects settings, please click here.


4. Image List Global Styling

Instead of individually styling each Image List 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 Image Lists menu. Click here to read all about Image List Global Styling!

 

5. Files Supported by Image List Module

In you have associated the file option with your link, the following list includes all the file types supported by the module: .png, .gif, .jpeg, .jpg, .xls, .xlsx, .doc, .docx, .pdf

 

Anything we’ve not covered?

Contact Us