Hey, what answers do you need?
Chapter
< Contents
Print

Image elements

Image elements are the best way to insert an image into your layout. There are two different elements: The banner element and the image. Both are identical in their properties, the banner element spans the entire width of the page while the simple image element is square.

SCREENSHOT: Icon for the screen element

Note: If you want to insert an image into a text, place the cursor at the corresponding position in the text box and select the "Insert image" function in the toolbar.

Select and upload image files

To upload an image file, click once on the image:

SCREENSHOT: Select and upload image element

To upload an image, click on Upload image... and select an image file. The image file should be in one of the following formats:

  • .jpg / .jpeg
  • .gif
  • .png

Other formats are either too large or cannot be displayed correctly everywhere. This applies in particular to vector graphics, e.g. in SVG format. The maximum file size for images is 2MB.

If possible, the image file should be twice as wide as the desired width so that the image is also displayed sharply on screens with Retina resolution.

When you select an image, in addition to the properties of a normal element, it shows a button to select an image file and a white dot at the bottom right with which you can change the size of the image. The aspect ratios are retained when you change the image size, unless you simultaneously press Shift on the keyboard.

The following style properties are available for images:

Image

SCREENSHOT: Image properties

Image URL is the URL from which the image originates. You can also enter the URL of an image saved on your homepage here. You can upload a new image using the button to the right of the field. 

With the Alt text to specify an alternative text that is displayed if the image is not loaded. 

Hyperlink

Offers the same options that are available when inserting a link. 

Alignment

Provides the option to rotate the image 90° to the left or right. If you want to align an image left, right or centered, place it in a layout element and select the corresponding alignment in the properties of the layout element.

SCREENSHOT: Image alignment 

Size

In contrast to headings, images offer the option of determining both the height and width of an image. 

SCREENSHOT: Image size for image elements

However, it is advisable to only specify the width of an image and leave the height as empty as possible. In responsive mode, the width of images is scaled on mobile devices. If a fixed height is specified, distortions may occur.