The image slider shows your visitors several large-format images on a rotating basis.
How the images of the image slider are displayed on your website depends on the device used by your visitors. An image might be displayed in its entirety in the desktop version but might be cropped vertically in the mobile version. This means that the top or the bottom of an image is cut off. In order to prevent the most important parts of an image getting lost in this process, you can align images in the Editor.
Skip to:
Why to align an image
You should have a look at the images before aligning them in the Editor and ask yourself: Where are the most important parts located?
Here are some examples:
In this image the most important part is the bottom. To avoid that the couple is cropped out, you should align the image to the bottom.
In this image the most important part is the top as you wouldn't like to cut off the women's head.
In this image the most important part is in the middle as this part shows the car.
If you do not manually align the images in the image slider, they will be aligned to the middle by default. For the examples above, this it how the images would be displayed on your website:
As you can see, the most important parts that were defined before are not presented perfectly: The couple and the head of the women were cut off.
If you align the images accordingly, the image slider will look like this:
So, by aligning your images you will get a better result and can present your images in a more appealing way.
How to align the images
- In the sidebar of your cockpit, navigate to Editor.
The Editor opens. - Navigate to Pages.
- Select the page to edit or add a new page.
A preview of the page opens on the right-hand side. - Either add a new image slider or hover over it and select
.
- Select the image you would like to edit.
- Under Image alignment, determine if the image should be aligned to the top
, center
or bottom
. The changes will be directly shown in the preview of your website in the background.
- Once you are done, select Save.
You have aligned the images of the image slider.