With Visual modules you can add images and videos to your website. You find these modules under the category Visuals in the Add module menu.

0__Overview.jpg 

 

Image

Use the Image module to include single images on your website. If you want to include a group of images, use either the Image List module or the Gallery module

Hover the module and click on ContentDesign or Settings on the dropdown to edit your Image module. 

1__Image_p1.jpg 

Content

There are three ways of adding an image to the module:

  • Upload a new image: click on Add or drop image to select an image from your computer or drag and drop your image on the outlined area. 
  • Use existing image from File Library: click on Select from File Library and choose one of your existing images from the File Library.
  • Use image from Global Data: toggle the option Use Global Data source and select either to include your cover photo or your logo that you've previously uploaded in Global Data

Remember to add an Alt text (alternative text) to your image as this will ensure that search engines can "read" your image. An Alt text should be brief and clearly describe what the image illustrates. 

  Why include an Alt text?

Alt text enables search engines to read and compare your image with user searches on for example Google. Your image will thereby appear in the Image tab on Google if it's found relevant, driving additional traffic to your website.

Once you've added your image, you have the option to edit the image directly in the Editor. Click on Edit next to your image to get to the Image Editor. Read more about using the Image Editor here.

If you regret adding the image to your website, you can either click on Replace to add a different image or click Remove

Add a link to your image: when using an image on your website, you have the option to add a link on it and make the image clickable for your visitors. To add a link to your image, toggle Enable link on image and a number of link options will become visible. 

2__image-link.gif

 

Choose the type of link you want on your image from the dropdown. You have the following four link options:

  • External URL: add a URL to an external page. This link type will by default activate the setting Open link in new tab to ensure that the visitor doesn't completely leave your website when they click your image.
  • Internal page: link to a page on your website.
  • Email: add an email address in the field. When the visitor clicks on the image, their default email client will open.
  • File: include a file by clicking on Add or drop file to open your computer files or drop your file on the outlined area. When the visitor clicks on the image, they'll download the file.

Tick the option Open link in new tab to open your image in a new browser tab when clicked. Activate Set "nofollow" property if you don't want search engines to follow the hyperlink. When this setting is enabled, your link will not affect the target's search engine ranking.

Design

The Design section is where you change the background, border and spacing on your Image module. For more specific styling options, click more local design options or edit the Global Design of the Image module. In the Design section, you can also change image size and alignment. For a more thorough introduction to styling, see our dedicated styling guide

The size of the image refers to how much space it takes up within the column where it's placed. When the image size is set to 100% it spans the entire column width. Use the slider or type in your specific percentage in the field to adjust the size. The column height depends on the image dimensions. 

3__image_Design.jpg

 
Image alignment allows you to choose the position of your image within the column. You have the option to left align, right align or centre your image. Use the float function to float your image left or right and allow other content to wrap around it.

  Adjustments after adding float to an image

When adding float to your image it's recommended to add margin on the right or left depending on the float direction. Add margin to the bottom as well to push the wrapped element away from the floated image.

Example of float:

4__Float_Left.jpg

 

Settings

In the Settings section you can add hover effects on your image. You can either use the hover effect as a purely graphical feature or to display the image caption text on top of the image. Read more about hover effects here.

 

 

Image List

Use the Image List module to display several images on your website with the option to add dynamic features to the presentation of your images. To edit your Image List module, hover the module and click on ContentDesign or Settings on the dropdown.

5__image_list.png 

Content

There are two ways of adding images to the module:

  • Upload new images: click on Add or drop file to add files from your computer or drag and drop your image on the outlined area. You can add several images at once.
  • Use existing image from File Library: click on Select from File Library and choose from  your existing images in the File Library. You can add several images at once.

  Change the order of your images

Rearrange the order of how your images appear by dragging on the six-dotted symbol on the individual images.

Once you've added images to the module, you have the option to add specific information to each image by clicking the arrow next to the file name. 

  • Edit: once you've added your image, you have the option to edit the image directly in the Editor. Click on Edit next to your image to open up the Image Editor. Read more about using the Image Editor here.
  • Replace and remove: if you regret adding the image to your website you can either click Replace to add a different image or click Remove.
  • Alternative text: include an Alt text (alternative text) to help search engines "read" your images.
  • Caption text: the caption text becomes visible on your image when you enable hover effects with caption on your image list.
  • Link: choose the type of link you want on your image from the dropdown. You can choose from External URL, Internal page, Email and File. Read more about the four link types under the Image module. Enable the option Open link in new tab to open the linked content in a new browser tab when clicked. Activate Set "nofollow" property if you don't want search engines to follow the hyperlink. When this setting is enabled, your link will not affect the target's search engine ranking.
  • Custom tracking name: track number of clicks on a specific image by adding a custom tracking name. The statistics will be visible on your dashboard.

     

Design

The Design section is where you change the background, border and spacing of your Image List module. For more specific styling options, click more local design options or edit the Global Design of the Image List module. For a more thorough introduction to styling, see our dedicated styling guide

Settings

Here you can change the appearance of your image list. Choose how many images you want to be visible at a time, the amount of columns (1-12) you want images divided into, and margin between your images. If Amount of images shown is set to 0, the module will display all your images.  

6__Image-List_p2.jpg

 

If you choose to not display all of your images in the list at the same time, the Editor automatically adds arrows on each side of the module so visitors can flip through the images. You can adjust the following transition settings:

  • Show arrow navigation: arrows are added on the sides of your Image List.
  • Show pagination dots: dots are added at the bottom of your Image List to help visitors navigate between slides.
  • Auto change of slides: your images will automatically transition without the visitor clicking on the module.  
  • Pause transition on hover: the auto change of slides will pause when a visitor hovers the Image List.

Choose how you want your Image List to change images with the slide transition type setting. You have three different options: sliding, slow fade and fast fade.  

Cropped or uncropped thumbnails: you can decide whether you want your images to be cropped or uncropped thumbnails. See the difference between the two settings here.

In the Settings section you can also add hover effects on your images. You can either use the hover effect as a purely graphical feature or to display the image caption text on top of the image. Read more about hover effects here.

  

 

Gallery

Use the Gallery module to show several images on your website with the option for visitors to open the images individually in an overlay when clicked. To edit your Gallery module, hover the module and click on ContentDesign or Settings on the dropdown.

7__gallery.png 

Content

There are three ways of adding images to the module:

  • Upload new images: click on Add or drop file to add a file from your computer or drag and drop your image on the outlined area. You can add several images at once.
  • Use existing images from File Library: click on Select from File Library and choose existing images from the File Library. You can add several images at once.
  • Use images from Global Data: toggle the option Use Global Data source to select gallery images that you've previously uploaded in Global Data

  Change the order of your images

Rearrange the order of how your images appear by dragging on the six-dotted symbol on the individual images.

Once you've added images to the module, you have the option to add specific information to each image by clicking the arrow next to the file name: 

  • Edit: When you've added your image, you have the option to edit it directly in the Editor. Click on Edit next to your image to open up the Image Editor. Read more about using the Image Editor here
  • Replace and remove: if you regret adding the image to your website you can either click Replace to add a different image or click Remove.
  • Alternative text: include an Alt text (alternative text) to help search engines "read" your images.
  • Caption text: the caption text becomes visible on your image when you enable hover effects with caption on your gallery.

  When using Global Data

If you're using Global Data as a source for your Gallery module, remember to add information to your images in the Gallery tab in Global Data where you have the exact same options as mentioned above.


Design

The Design section is where you change the background, border and spacing of your Gallery module. For more specific styling options, click more local design options or edit the Global Design of the Gallery module. For a more thorough introduction to styling, see our dedicated styling guide.
 

Settings

Here you can change the appearance of your gallery. Choose how many images you want to be visible at a time, the amount of columns (1-12) you want images to be divided into, and margin between your images. If Amount of images shown is set to 0, the module will display all your images.  

8_-Gallery_p2.jpg

If you choose to not display all of your images in the list at the same time, the Editor automatically adds arrows on each side of the module so visitors can flip through the images. You can adjust the following transition settings:

  • Show arrow navigation: arrows are added on the sides of your gallery.
  • Show pagination dots: dots are added at the bottom of your gallery to help visitors navigate between images.
  • Auto change of slides: your images will automatically transition without the visitor clicking on the module.  
  • Pause transition on hover: the auto change of slides will pause when a visitor hovers the gallery.

Choose how you want your gallery to change images with the slide transition type setting. You have three different options: sliding, slow fade and fast fade.

Tick the box Show caption with thumbnail if you want to display the caption text below your images. You also have the opportunity to add the same caption on the image overlay, just remember to tick Show caption in overlay as well. 

9__ezgif.com-video-to-gif.gif

Cropped or uncropped thumbnails: you can set whether you want your images to be cropped or uncropped thumbnails. See the difference between the two settings here

In the Settings section you can also add hover effects on your images. You can either use the hover effect as a purely graphical feature or to display the image caption text on top of the image. Read more about hover effects here.

 

 

Transition types and thumbnails

Choose how you want your Image List or Gallery to change images with the Slide transition type setting available on both of the modules. You have three different options: sliding, slow fade and fast fade.

Sliding

10__image_slide.gif

 

Slow fade

11__imgage_slow_fade.gif

 

Fast fade

12__image_fast_fade.gif

The time between transitions is by default 5000 milliseconds (5 seconds). Change the interval to a higher value if you want the images to be visible for a longer time and a lower value if you want the images to slide faster. Remember to input the value in milliseconds (1000 milliseconds = 1 second).

Note that the transitions on the images in the examples above are set to 2000 milliseconds (2 seconds).

 

Thumbnails

Cropped or uncropped thumbnails: You have the option to choose whether you want your images to be cropped or uncropped thumbnails. See the example below for a visual comparison of the two settings.

 13__thumbnails_p1.jpg

 

 

Difference: Image List vs Gallery

The Gallery and Image List modules look very similar when you add them to your website. The difference between the two modules lies in the behavior when a visitor clicks the images. When using the Gallery module to display images, an image will enlarge and be shown in an overlay when clicked. Clicking an image from the Image List module, the visitor will be directed to another page/website/email/file if you have added a link to the image (if no link has been added, nothing happens when the image is clicked).

14__Difference_p1.jpg

 
The two modules also differ in terms of image sources. The Gallery module can fetch images from the Gallery content in Global Data whereas the Image List module cannot be set up to fetch Global Data content.  

 

 

Video 

Use the Video module to include videos from external websites on your website to make it more interactive. To edit your Video module, hover the module and click on ContentDesign or Settings on the dropdown. 

16__video_giff.gif 

Content 

There are two ways of adding videos:

  • Upload a new video: paste your video URL in the input field. 
  • Use video from Global Data: toggle Use Global Data source to use a video you have previously uploaded in Global Data. A dropdown appears where you can choose between the videos that you've added.

17__video_module_globa_ldata_gif.gif

 

  Supported video sources 

The Video module supports URLs from YouTube and Vimeo, and links with the following video formats: MP4, WEBM and OGG. If you want to include a video that's hosted on another platform or in another format, you can embed it using the HTML module instead.

 

Design

The Design section is where you change the background, border and spacing of your Video module.

Was this article helpful?
0 out of 0 found this helpful