Vorschau
patterns/footer-navigation-dynamic.php
patterns/footer-newsletter-dynamic.php
patterns/footer-social-dynamic.php
patterns/contact-info-static.php
Adresse und Kontaktdaten sind in ein eigenes Pattern ausgelagert, da diese häufig auch an anderer Stelle benötigt werden – z.B. in Contact Image.
patterns/back-to-top.php
Der Back-to-top-Button wird als eigenes Pattern unter dem Footer im selben Templates Part (footer.html) geladen.
Figma
Doku
Achte darauf, dass die Navigationsmenüs einen korrekten »accessible name« besitzen. Dieser leitet sich in WordPress aus dem Namen des zugewiesenen Navigationsmenüs ab.
Funktionsweise
Die Footer-Pattern sind als <div> angelegt. Das ist korrekt, da sie im Template Part für Footer innerhalb von <footer> inkludiert sind.
Die Navigationsbereiche im Footer verwandeln sich – je nach Pattern – auf kleinen Viewports in Accordions. Das Verhalten wird aktiviert, wenn folgende Voraussetzungen erfüllt sind:
- Es gibt ein Container-Element mit der Klasse
.navigation-container--is-collapsible - Innerhalb des Containers befinden sich ein
<p>-Tag mit der Klasse.navigation-titleund das gewünschte Navigationsmenü.
Zu beachten
- Wenn eine Sprachauswahl im Footer untergebracht wird (Empfehlung gegenüber der Positionierung im Header), dann sollte ein Skiplink direkt auf diese Navigation verweisen.
- Impressum und Datenschutzhinweise sind rechtlich verpflichtend.
- Die Datenschutz-Seite sollten nicht auf externe Website verweisen, da dort i.d.R. andere technische Rahmenbedingungen vorliegen – z.B. für Cookies.