Variants: Vertical position of the text
The area of the image that contains the motif can be defined and therefore not be covered by text.
Depending on the size of the screen, the image is cropped differently and the image is positioned so that its area of focus is always visible.
If the image contains a protected area, the heading will be displayed below the Hero image on mobile devices.
Vertical protected areas are necessary if the object is in the centre of the background image. Text can then be pushed up or down.
This function can be activated optionally. However, it is recommended to work primarily with horizontal protected areas and to use images that represent the subject on the side or to crop them beforehand.
Responsive behaviour
On mobile devices, the text is displayed below the image if the protected object would be covered. This also preserves the impact of the image.
(default) Unprotected
By default, the text on the Hero is vertically down. However, at lower resolutions, the text can completely overlap the background image without a protected area.
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor tempor invidunt ut labore et dolore magna aliquyam erat,
Protected at the top
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
Protected at the bottom
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
Protected at both top and bottom
Vertical centring by protecting the areas above + below, for example combined with horizontal centering.
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
This is a Page with dummy text.
Content with the wording "Lorem Ipsum" is only a placeholder.