At the base of the creation of a website, there is an intense story made up of images and photos.
Images play an important role in the graphic structure of the website, contributing to the user's browsing experience.
For this reason you will have several image components with different functionalities, for your every need:
- Single image;
- Tunnel;
- Carousel;
- Slideshow;
Image slideshow
Showcase of images
Slider with text
Hover image
- Dispay window;
- Slider with Text;
- Hover image.
Add an image
Through the editor you can add images to your website.
1. Left click on the Elements bar;
2. Click on Media
3. Click on Image
4. Drag the component to the workspace
You can easily add or edit your image.
1. Click on the image
2. Click Edit Image
3. Click 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 maintain the aspect ratio of the image, without it being accidentally cut.
To know: if you intend to show the image in full screen, by clicking with the right mouse button and positioning yourself on Dimensions, you will find the 100% width function, which allows you to show the photo in full screen. The changed size will only be the width and not the height, so the image may appear cropped on very large screens.
NB: 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 the images of your website as it describes the image and the function that the the image covers itself within the page. Google gives great importance to the Alt Tag because it extrapolates information about the image and other content on the page.
To assign an Alt Tag, within the Site Indexing panel, you will find Image Optimization on each page. Enter the keyword here in the appropriate field of each image and finally click on Save. Remember that you can assign a different Alt Tag for each language on your website.
Add a link
1. Click on the Image component
2. Click Edit Image
3. Click on the chain icon
4. You can add four types of links:
- You can link the image to an existing page on 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 the component to use as the anchor of your link from the list. I recommend that you use the Levels feature to find the right component right away.
Parallax
Here you can activate the Parallax option, which allows you to improve visual perception by providing a certain depth of field as the image scrolls.
1. Click on the Image component
2. Click on the wheel icon
3. Click on Parallax
4. Check Enable
Hover effects
You can choose an effect to apply to images on hover.
1. Click on the Image component
2. Click on the wheel icon
3. Click Hover Effect
4. Choose the hover effect
Overlay
You can insert a color overlay or apply a gradient through the Overlay function.
1. Click on the Image component
2. Click on the wheel icon
3. Click on Overlay
Frames
You can add a frame to apply to the image by choosing from those proposed and changing the color as desired.
1. Click on the Image component
2. Click on the wheel icon
3. Click on Frames
Shadow
It is possible to insert a Shadow by choosing the color and positioning of the shadow itself.
1. Click on the Image component
2. Click on the wheel icon
3. Click on Shadow