Varianten: Text-Position vertikal

Definieren Sie, welche Bereiche im Bild das Motiv enthalten und demnach nicht durch Text überdeckt werden dürfen.

Je nach Bildschirmgrösse wird das Bild unterschiedlich abgeschnitten und das Objekt so positioniert, dass es möglichst immer sichtbar ist.

Wenn das Bild einen geschützten Bereich enthält, wird die Überschrift auf mobilen Geräten unter dem Hero-Bild dargestellt.

Vertikale geschützte Bereiche sind nötig, wenn das Objekt sich im Zentrum des Hintergrundbildes befindet. Text kann dann nach oben oder unten gedrängt werden.

Diese Funktion kann optional aktiviert werden. Es wird allerdings empfohlen primar mit Horizontalen geschützten Bereichen zu arbeiten und Bilder zu verwenden welche das Motiv an der Seite darstellen oder diese vorgängig so zuzuschneiden.

Responsive Verhalten

Auf Mobilen Geräten wird der Text unterhalb des Bildes dargestellt, wenn das geschützte Objekt überdeckt würde. Dadurch bleibt auch die Bildwirkung erhalten.


Standardmässig ist der Text auf dem Hero vertikal nach unten ausgerichtet. Auf kleineren Auflösungen kann der Text aber ohne geschützten Bereich das Hintergrundbild komplett überlappen.


Storytelling

Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,



Storytelling

Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,


Storytelling

Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,

Vertikale zentrierung durch Schützung der Bereiche oben + unten, beispielhaft kombiniert mit horizontaler Zentrierung.


Storytelling

Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,


Dies ist eine Seite mit Blindtext.

Inhalt mit dem Wortlaut "Lorem Ipsum" für rein demonstrative Zwecke.