Editing Images

In the website editor, you have the possibility to edit images and adapt them to your needs.

You can either upload your own images or you can select free and royalty-free images from the integrated stock photos library that you can find under Files. 

Everywhere where you work with images, e.g. the image element or the gallery element, you will see a toolbar appearing above the image when you select it. There you will have the following options: 

• Select: Select an image directly from the Media Manager, or choose a suitable image from the stock photos.
• Crop mode: Crop your image so that it appears exactly as you want it on the website.
• Rotate 90 degrees left
• Rotate 90 degrees right
• Change alignment: Change the orientation of your image in the element
  

• Blur: Set how much you want to change the contrast of the image and blur your image.

• Grayscale: Add a special touch to your image in grayscale.

Click on the checkmark icon to confirm your changes. When you have selected the image element by double-clicking it further editing options open in the left settings panel. These relate to the representation of the image in the container element.

Here you have the following editing options:

• Width: This setting determines how much space the image takes up in the width of the element.
• Fit image: If you activate the checkbox, the image is automatically adjusted to the size and width of the element.
• Height: This setting determines the height of the image in the container.
• Alignment: This function determines the alignment of the image in the container
• Lazyload: Lazyload determines whether the image is to be loaded when the page is loaded or only afterward
• Lightbox: This checkbox activates the lightbox function for the image.
• Optimized: With this function you determine whether the image should be automatically compressed and optimized by the website editor.  If you disable optimized, the image will be loaded in its original size and the responsive setting is no longer available since this would interfere with loading the original size. 
• Responsive: This function optimizes your image for mobile viewports
• Use as headline: This function inserts the image into an H1 heading.
• Position: This function positions the image in the container according to certain values that you can set here.

And in the separate Text section below it is possible to add an alternative text and an image description. This improves the accessibility of your website and contributes to better SEO.