Das Kopfelement (Englisch: Header) ist ein Standardelement, das sich auf allen Seiten findet. Der Header muss nur einmalig auf oberster Sprachebene (Englisch: Root) gepflegt werden und vererbt sich automatisch auf alle Unterseiten in dieser Ebene.
Die Header-Komponente dient als Container für weitere Elemente zur Darstellung aller Kopfinformationen, dazu gehören die Image-Komponente, CTA, Sprach-Switches und die Navigation.
Der Header bestehet grundlegend aus:
Dabei sind immer die darin befindlichen Komponenten CBK-006 Image, Navigation und Language Navigation zu konfigurieren.
Die verfügbaren Komponenten in einem Header verhalten sich wie gewohnt. So können etwa im CTA wie bisher auch Icons gepflegt werden zur Unterstreichung von gewissen Verlinkungen.
Dies ist ein beispielhaft befüllter Header. Layout-Einstellung ist Default.
Alle standardmäßig verfügbaren Buttons und Navigations-Elemente sind ausgefüllt.
Auf mobilen Endgeräten wird der Header mit dem Logo und dem Burger-Menü Icon ausgegeben.
Bei Klick auf das Burger-Menü schieben sich die weiteren Inhalte ins Sichtfeld, die Reihenfolge ist dabei: Navigation Entry Point, CTA, Sprache
Diese Reihenfolge ist fix und kann nicht weiter verschoben oder versteckt werden.
Beispielansicht mobiles Endgerät Smartphone (iPhone)
Beispielansicht mobiles Endgerät Tablet (iPad)
Die Header-Komponente wird immer auf oberster Root-Ebene gesetzt und gepflegt. Eine Abwandlung für eine Unterseite oder einen Abschnitt ist nicht möglich. Ebenso ist es nicht möglich, den Header für einzelne Seiten auszublenden.
Für einen neuen Header muss die Seitenstruktur im Backend entsprechend mit neuer Root-Ebene gesetzt sein. Das sollte nicht leichtfertig geschehen, da immer die gesamte Struktur für die Seite und künftige Pflege wichtig ist.
Das Logo im Header kann den Brand Guidelines entsprechend definiert und angepasst werden.
Wichtig: Das Logo ändert sich für alle Unterseiten, auf denen dieser Header vererbt ist.
Die grundlegende Aufteilung und Position der Unterkomponenten im Header ist nicht frei wählbar. Die einzelnen Buttons im Header können aber individuell befüllt und definiert werden.
Beim Hovern über den Punkt Navigation klappt die Navigationsreihenfolge auf, sofern sich andere Seiten darunter befinden. In diesem Beispiel AEM Component Overview.
Die dargestellte Reihenfolge in dieser dargestellten Navigation spiegelt 1:1 die Reihenfolge der Seiten aus dem Backend wieder.
Diese Reihenfolge lässt sich leicht anpassen. Am einfachsten im Backend über die List View. Per Drag & Drop über die Punkte auf der rechten Symbolleiste können die Seiten in die gewünschte Reihenfolge verschoben werden. Die Anpassung greift direkt und muss nicht separat gespeichert werden. Die Navigation reflektiert dies entsprechend.
Das Verschieben der Seitenposition im Backend hat keinen Einfluss auf die URL-Struktur solange alle Seiten auf derselben Ebene bleiben.
Der Header ist responsiv und benötigt keine weitere Anpassung für mobile Endgeräte.
Farben und Schriftarten sind durch das entsprechende CSS und der Designvorlage definiert. Sie sind für Redakteur:innen nicht anpassbar.
Zunächst sollten alle Einstellungen der Unter-Komponenten überprüft werden. Dazu zählt vor allem für Navigation und Language Switch die angezeigte Tiefe. Eine zu hoch eingestellte Zahl kann das Layout des Headers überfrachten und zur fehlerhaften Ansicht führen.
Bei richtigen Einstellungen und anhaltendem Fehler sollten sich Redakteur:innen an das Support Team wenden.