Block-Themes: Mobile Navigation mit eigenem Overlay gestalten

Mobile Navigation mit Standard-Overlay

Auf schmalen Bildschirmen wird die Desktop-Navigation standardmäßig durch ein Symbol aus zwei oder drei Strichen ersetzt. Ein Klick auf dieses Symbol zeigt die Navigation in einem bildschirmfüllenden Overlay-Fenster.

Overlay heißt dieses Fenster deshalb, weil es sich nach dem Antippen des Menü-Symbols über die Website legt.

Das Standard-Overlay zeigt dieselben Links wie die Desktop-Navigation, und man kann keine zusätzlichen Inhalte wie ein Website-Logo oder den Website-Titel hinzuzufügen.

Außerdem gibt es für das Standard-Overlay beim Gestalten nur sehr eingeschränkte Möglichkeiten, die Co-Autorin Annette im Beitrag Block-Themes: Mobiles Menü gestalten beschrieben hat.

Anders ausgedrückt: die Erstellung einer Navigation ist bei Block-Themes sowieso nicht gerade intuitiv, aber die Gestaltung der mobilen Navigation war lange Zeit richtig sch…

Bis WordPress 7.0 kam.

Die Optionen für die mobile Navigation

Seit WordPress 7.0 gibt es die Möglichkeit, ein eigenes sogenanntes Overlay-Template zu erstellen, das man nach Belieben mit Inhalten füllen und gestalten kann. Die folgende Abbildung zeigt den Header im Editor mit markierter Hauptnavigation.

In der rechten Seitenleiste können Sie im Block-Inspektor im Bereich Overlay drei Dinge erledigen:

1. Festlegen, wann die mobile Navigation gezeigt werden soll. Aus zeigt kein Overlay an, Mobil nur auf mobilen Geräten und Immerauch am Desktop.
2. Im grauen Bereich können Sie wählen, ob ein Icon-Button mit zwei oder drei Strichen oder der Text Menü angezeigt werden soll (beides geht immer noch nicht …).
3. Im Bereich Overlay-Template können Sie ein neues Overlay erstellen. 

Mobile Navigation mit eigenem Overlay

In wenigen Schritten erstellen Sie ein neues Overlay und gestalten es dann nach Ihren Wünschen.

1. Öffnen Sie den Header zur Bearbeitung im Editor.
2. Markieren Sie den Navigationsblock, wechseln Sie im Block-Inspektor auf das Register Einstellungen, und scrollen Sie zum Bereich Overlay.
3. Klicken Sie auf die Schaltfläche Overlay erstellen (siehe Abbildung 2). WordPress erstellt dann ein neues Template-Teil mit dem Namen Navigations-Overlay, das Sie im Editor nach Belieben gestalten können.
4. Sie können auf dem Register Template-Teil im Bereich Design eine der angebotenen Vorlagen auswählen und anpassen. Eine gute Grundlage für die in Abbildung 3 gezeigte mobile Navigation ist die Vorlage Overlay mit Website-Informationen und Handlungsaufforderung.
5. Blenden Sie die Listenansicht ein, löschen Sie nicht benötigte Blöcke, und ändern Sie Farbe und Typografie nach Wunsch.
6. Speichern Sie die Änderungen, und klicken Sie in der oberen Werkzeugleiste auf den Link < Zurück am Anfang des hellgrauen Bereichs, um wieder zurück zur Bearbeitung des Headers zu kommen.
7. Testen Sie die mobile Navigation auf einem mobilen Gerät oder auf einem Desktop-Rechner in einem schmalen Browserfenster.

Die folgende Abbildung zeigt die mobile Navigation mit einem eigenen Overlay-Template inklusive farblicher Gestaltung, Website-Titel (als Link zur Homepage), Untertitel und Navigationsblock mit dem Menü Hauptnavigation, das vertikal dargestellt wird.

Dieses Overlay-Template wird im Website-Editor im Bereich Vorlagen > Template-Teile gespeichert, und dort können Sie es auch verwalten und bearbeiten.

Exkurs: das Plugin »Ollie Menu Designer«

Die pfiffige Idee, das Overlay als Template-Teil zu speichern, stammt vom Plugin Ollie Menu Designer , und das WordPress-Team hat sich davon inspirieren lassen.

Der Ollie Menu Designer kann mit jedem Block-Theme genutzt werden, und bietet viele zusätzliche Optionen zur Gestaltung der Navigation. Anders als in WordPress kann man damit z. B. nicht nur die mobile Navigation gestalten, sondern auch die Desktop-Navigation.

Das Plugin stammt von Mike McAllister, der auch das Theme Ollie entworfen hat. Daher ist es nicht überraschend, das der Ollie Menu Designer zusammen mit Ollie besonders benutzerfreundlich ist. So bringt das Theme unter anderem bereits viele fertige Vorlagen für die Overlay-Templates mit.

Mit Ollie und dem Ollie Menu Designer kann man so z. B. im Handumdrehen ein Mega-Menü erstellen, bei dem das Overlay ein mehrspaltiges Layout mit Bildern, Text und Links enthält. Die folgende Abbildung zeigt ein Mega-Menü auf meiner Website groningen-info.de.

Wenn Sie das Plugin Ollie Menü Designer mit einem anderen Theme verwenden, können Sie auch Mega- oder beliebige anderes Menüs für die Desktop-Navigation erstellen, aber Sie müssen diese dann selbst bauen (sofern das verwendete Theme keine Vorlagen dafür anbietet).