At the core of building a website, there’s an intense story made of images and photos.

Images play an important role in the website’s graphic structure, contributing to the user’s browsing experience.

For this reason you will have several image components available with different features, for every need:

- Single image;
- Gallery;
- Carousel;
- Slideshow;

    Image slideshow
    Image showcase
    Text slider
    Hover image
- Showcase;
- Text Slider;
- Hover Image.

Add an image 

Through the editor you can add images within your website.

1. Click on the Elements bar on the left;
2. Click on Media 
3. Click on Image 
4. Drag the component onto the workspace

You can easily add or edit your image.

1. Click on the image 
2. Click on Edit Image
3. Click on Search Image if you want to add or replace your image. You have three options:

- You can upload a personal image directly from your PC
- You can upload an image from Pixabay. Enter a keyword in the search bar and select the image you prefer
- You can upload an image from your Facebook account

Good to know: By holding down the Shift key on the keyboard while resizing the image, you allow the system to keep the image proportions, without it being accidentally cropped.

N.B: To optimize images with alt-tags, you need to go to Site Management->Site Indexing. The Alt Tag is a very useful tool to optimize your website images as it describes the image and the function the image itself has within the page. Google gives great importance to the Alt Tag because it extracts information about the image and the other contents of the page.
To assign an Alt Tag, within the Site Indexing panel, you will find Image Optimization on each page. Enter the keyword in the dedicated field of each image and finally click Save. Remember that you can assign a different Alt Tag for each language of your website.

Add a link

1. Click on the Image component
2. Click on Edit Image
3. Click on the chain icon
4. You can add four types of link:

- You can link the image to an existing page of your site
- You can link the image to an external link
- You can link the image to a component on the same page
- You can link the image to a pop up 

 
If you decide to link the image to a component on the same page, you will need to select, from the list, the component to use as the anchor for your link. I recommend using the Layers feature to quickly find the right component.

Parallax

Here you can enable the Parallax option, which improves visual perception by providing a certain depth of field while the image scrolls.

1. Click on the Image component
2. Click on the gear icon
3. Click on Parallax
4. Check Enable

Hover effects

You can choose an effect to apply to images on mouse hover.

1. Click on the Image component
2. Click on the gear icon
3. Click on Hover effect
4. Choose the hover effect

Overlay

You can add an overlay color or apply a gradient through the Overlay function.

1. Click on the Image component
2. Click on the gear icon
3. Click on Overlay

Frames

You can add a frame to apply to the image by choosing from the proposed ones and changing its color as you like.

1. Click on the Image component
2. Click on the gear icon
3. Click on Frames

Shadow

You can add a shadow, choosing the color and the position of the shadow itself.

1. Click on the Image component
2. Click on the gear icon
3. Click on Shadow
 

Good to know: if you want to display the image full screen, by right-clicking the mouse and going to Size, you will find the 100% Width function, which lets you show the photo full screen. The modified size will be only the width and not the height, therefore the image may appear cropped on very large screens.