Articles on: Website

Image module

Content

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

Upload a new image
Use existing image from File Library
Use image from Global Data

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.

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.

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.

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:

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.

Updated on: 07/03/2024

Was this article helpful?

Thank you!