Erfahren Sie, wie Sie ein Sticky-Menü für die Hauptnavigation Ihrer WordPress-Website erstellen! Sticky-Menüs tragen dazu bei, das Benutzererlebnis zu verbessern, indem sie das Menü Ihrer Website für Website-Besucher leichter verfügbar machen. Darüber hinaus kann es dazu beitragen, das Gesamtbild Ihrer Website zu verbessern. Lasst uns loslegen!

Inhaltsverzeichnis

1. Navigieren Sie zum Site-Editor

Der erste Schritt in diesem Prozess besteht darin, zum „Site-Editor“ im WordPress-Administrationsbereich zu navigieren. Der Site-Editor ist für „Block-Themes“ in WordPress verfügbar, vorausgesetzt, Sie verwenden WordPress Version 5.9 oder neuer.

Um zum Site-Editor zu navigieren, gehen Sie zu Aussehen> Editor (roter Pfeil im Bild oben) aus der Hauptnavigation im WP Admin-Bereich.

Klicken Sie auf den Hauptinhaltsbereich auf der rechten Seite des Bildschirms (hellblau umrandet und im Bild oben durch den blauen Pfeil gekennzeichnet). Dadurch gelangen Sie zum Blockeditor im Site-Editor.

Auf der rechten Seite sehen Sie unter der Registerkarte „Seite“ eine Zeile mit der Bezeichnung „Vorlage“ (im Bild oben blau umrandet). Klicken Sie auf den Namen/Link der Vorlage (roter Pfeil). Klicken Sie dann auf „Vorlage bearbeiten“ (grüner Pfeil – manchmal ist „Vorlage bearbeiten“ ein kleiner blauer Textlink unter dem Dropdown-Menü, das den Namen Ihrer Vorlage anzeigt).

2. Bearbeiten Sie Ihre Vorlage

Sie befinden sich nun im Vorlageneditor für die Startseite Ihrer Website. (Wenn Sie keine Homepage für Ihre Website eingerichtet haben, können Sie dies ausprobieren In diesem Tutorial erfahren Sie, wie Sie eine statische Homepage für Ihre WordPress-Website einrichten).

Oben in der Vorlage befindet sich Ihre Hauptnavigation für Ihre Seite – auch „Kopfzeile“ Ihrer Webseite genannt. Wenn Sie mit der Maus über dieses Element fahren, sehen Sie ein violettes Kästchen, das es umrandet (roter Pfeil im Bild oben). Dies zeigt an, dass es sich bei diesem Element um ein handelt „synchronisiertes Muster“, Das bedeutet, dass bei einer Änderung an einer Instanz des Musters die Änderungen auf alle Instanzen auf der gesamten Website angewendet werden. Klicken Sie auf diesen Bereich, um das Header-Synchronisierungsmuster auszuwählen.

Wenn dies das Hauptheaderelement Ihrer Site ist, sollten Sie jetzt sehen, dass das synchronisierte Muster in der Blocksymbolleiste mit „Header“ gekennzeichnet ist.

3. Fügen Sie Ihren Header einer Gruppe hinzu

Klicken Sie in der Blocksymbolleiste für das ausgewählte Kopfzeilenmuster auf das Symbol „Optionen“ (roter Pfeil im Bild oben) und wählen Sie „Gruppe“ (grüner Pfeil). Dadurch wird das synchronisierte Muster in einem Gruppenblock verschachtelt.

Sie werden feststellen, dass die Blocksymbolleiste jetzt das Gruppenblocksymbol hat (blauer Pfeil im Bild oben) und der Umriss des Hauptnavigationsbereichs jetzt blau statt lila ist (roter Pfeil).

Beachten Sie, dass sich dadurch möglicherweise die Breite Ihres Hauptnavigationsmenüs ändert. Um die Breite anzupassen, bewegen Sie den Mauszeiger über das synchronisierte Kopfzeilenmuster und klicken Sie, um es auszuwählen (roter Pfeil).

Klicken Sie in der Blocksymbolleiste für das Header-Synchronisierungsmuster auf das Symbol „Ausrichten“ (grüner Pfeil) und ändern Sie es wieder auf die gewünschte Breite (blauer Pfeil – in meinem Fall habe ich „Breite Breite“ ausgewählt).

Um zum Gruppenblock zurückzukehren, klicken Sie auf das Symbol „Gruppe auswählen“ in der Symbolleiste des Kopfzeilenblocks (rosa Pfeil).

Vereinfachter WordPress-Kurs: So erstellen Sie leistungsstarke Websites von Davies Media Design

4. Setzen Sie die Gruppe auf „Sticky“

Navigieren Sie bei ausgewählter Gruppe zur Registerkarte „Blockieren“ in der Seitenleiste „Einstellungen“ auf der rechten Seite des Bildschirms (roter Pfeil im Bild oben).

Klicken Sie auf den Menüpunkt „Position“ (grüner Pfeil). Hier sehen Sie nun ein Dropdown-Menü mit der Bezeichnung „Standard“ (rosa Pfeil). Klicken Sie auf das Dropdown-Menü und wählen Sie die Option „Sticky“ (blauer Pfeil).

Navigieren Sie zum oberen Rand des Editors und klicken Sie auf die Schaltfläche „Speichern“ (roter Pfeil) und dann erneut auf „Speichern“. Sie haben jetzt eine Hauptnavigation im Stick-Menü für Ihre WordPress-Website!

5. Gestalten Sie das Sticky-Menü

Sie können viele Elemente des neuen Sticky-Menüs anpassen/gestalten, aber für dieses Tutorial füge ich einfach einen Hintergrund hinter dem Gruppenblock hinzu, um sicherzustellen, dass sich das Menü über die gesamte Breite der Webseite erstreckt.

Dazu navigiere ich bei ausgewähltem Gruppenblock zur Registerkarte „Stile“ der Seitenleiste „Einstellungen“ (roter Pfeil im Bild oben).

Unter „Farbe“ klicke ich auf die Option „Hintergrund“ (blauer Pfeil) und wähle dann das weiße Farbfeld aus, um die Hintergrundfarbe auf Weiß festzulegen (grüner Pfeil).

Ich klicke noch einmal zweimal auf „Speichern“, um die Änderungen zu speichern.

Beachten Sie, dass Sie die Breite, Höhe oder den Abstand der Kopfzeile Ihrer Website jederzeit im Abschnitt „Abmessungen“ mithilfe der Schieberegler „Abstand“ und „Rand“ anpassen können.

Sie können eine Vorschau Ihrer Website anzeigen, indem Sie auf das Gerätesymbol (roter Pfeil) und dann auf „Website anzeigen“ (grüner Pfeil) klicken.

Sie können durch Ihre Website scrollen und beobachten, wie das Sticky-Navigationsmenü oben an Ort und Stelle bleibt (grüner Pfeil)!

Wenn Sie mit der Bearbeitung Ihres Sticky-Menüs fertig sind, klicken Sie oben im Editor auf die Schaltfläche „Zurück“ (roter Pfeil). Dadurch kehren Sie zu Ihrer Webseite im Seiteneditor zurück.

Um zum WP Admin-Bereich zurückzukehren, klicken Sie einfach auf das Logo in der oberen linken Ecke.

Das war's mit diesem Tutorial! Wenn es Ihnen gefallen hat, können Sie das tun Lernen Sie WordPress mit meinem ausführlichen Kurs auf Udemy. Oder schauen Sie sich andere kostenlos an WordPress-Video-Tutorials und WordPress-Hilfeartikel auf meiner Website.

Pin It auf Pinterest