Der Seitenheader ist eine der zentralsten Komponenten in headful. Er definiert den visuellen und inhaltlichen Einstieg einer Seite und kombiniert Media-Elemente mit Titel, Zusatzinformationen und optionalem Einführungstext.
Der Seitenheader kann enthalten:
ein Bild, Video oder Webvideo
ein optionales Datum
eine Headline
eine Subline
einen Copytext
einen Badge
Alle Elemente lassen sich flexibel ein- oder ausblenden und bieten so eine vielseitige Komponente.
Bildanordnung
Zu Beginn wird festgelegt, wie das Visual in Relation zum Titelbereich angeordnet wird:
Bild über dem Titel
Bild links vom Titel
Bild rechts vom Titel
Ohne Bild
Diese Entscheidung beeinflusst maßgeblich die spätere Textstruktur und Gestaltungsmöglichkeiten.
Visual-Einstellungen
Unter „Visual“ wird definiert, ob ein Bild, Video aus dem Medien Archiv oder Webvideo verwendet wird.
Bei Bildern können Zuschnitt und Fokus angepasst werden.
Bei Videos stehen Wiedergabeoptionen wie Autoplay, Controls, Loop und das Deaktivieren des Play-Buttons zur Verfügung.
Badge
Der Badge ist ein optionaler visueller Akzent im Seitenheader. Er kann ein- oder ausgeblendet und mit den üblichen Verlinkungsoptionen versehen werden.
Wichtig: Die Farbe des Badges wird automatisch aus der Hintergrundfarbe der Hauptfarben des Colored-Farbschemas gezogen und kann nicht separat definiert werden.
Headline, Subline & Copytext
Die Headline wird nur angezeigt, wenn das entsprechende Feld befüllt ist. Bleibt es leer, erscheint sie nicht.
Die Subline kann entweder über das Feld selbst oder über das Augen-Icon ein- oder ausgeblendet werden.
Der Copytext wird über einen Rich-Text-Editor gepflegt und kann ebenfalls ein- oder ausgeblendet werden.
Datum
Über einen Toggle
kann festgelegt werden, ob das Datum im Seitenheader angezeigt wird.
Farbschema
Für den gesamten Seitenheader kann ein Farbschema angewendet werden. Dieses beeinflusst Typografie und Hintergrundflächen der Komponente.
Hinweise zur Formatierung
Wenn die vordefinierte Formatierung von Headline oder Subline gestalterisch nicht passend ist, kann der Copytext genutzt werden, um eine individuelle Titelstruktur zu erstellen.
Dabei wird der gewünschte Titel im Rich-Text-Editor formatiert. Diese Vorgehensweise ist jedoch nur bei der Anordnung „Bild links“ oder „Bild rechts“ sinnvoll. Bei „Bild oben“ kann es zu unsauberen Umbrüchen kommen.
Tipps & Tricks
Wähle die Bildanordnung bewusst, da sie die spätere Textstruktur stark beeinflusst.
Achte bei Video-Visuals auf ausreichenden Kontrast zur Headline.
Halte Headline und Subline prägnant, da der Seitenheader die visuelle Hierarchie der gesamten Seite definiert.