Möchten Sie Ihre WordPress-Navigationsmenüs so gestalten, dass ihre Farben oder ihr Erscheinungsbild geändert werden? Während Ihr WordPress-Design das Erscheinungsbild Ihrer Navigationsmenüs übernimmt, können Sie es mithilfe von CSS ganz einfach an Ihre Anforderungen anpassen. In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Navigationsmenüs auf Ihrer Website gestalten.
Wir werden zwei verschiedene Methoden zeigen. Die erste Methode ist für Anfänger gedacht, da sie ein Plugin verwendet und keine Codekenntnisse erfordert. Die zweite Methode ist für fortgeschrittene Heimwerker gedacht, die lieber CSS-Code als ein Plugin verwenden.
Methode 1: Entwerfen Sie WordPress-Navigationsmenüs mithilfe eines Plugins
Ihr WordPress-Theme verwendet CSS zum Entwerfen von Navigationsmenüs. Viele Anfänger fühlen sich nicht wohl, wenn sie Themendateien bearbeiten oder CSS-Code selbst schreiben.
Dann ist ein Plugin im WordPress-Stil praktisch. Es erspart Ihnen das Bearbeiten von Themendateien oder das Schreiben von Code.
Als erstes sollten Sie das CSS Hero-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
CSS Hero ist ein Premium-WordPress-Plugin, mit dem Sie Ihr eigenes WordPress-Theme entwerfen können, ohne eine einzige Codezeile schreiben zu müssen (kein HTML oder CSS erforderlich). Weitere Informationen finden Sie in unserem CSS Hero-Test.
WPBeginner-Benutzer können diesen CSS Hero-Gutschein verwenden, um 34% Rabatt auf ihren Kauf zu erhalten.
Nach der Aktivierung werden Sie umgeleitet, um Ihren CSS Hero-Lizenzschlüssel zu erhalten. Befolgen Sie einfach die Anweisungen auf dem Bildschirm und Sie werden mit wenigen Klicks zu Ihrer Site weitergeleitet.
Als nächstes müssen Sie auf die Schaltfläche CSS Hero in der WordPress-Administrationssymbolleiste klicken.
CSS Hero bietet einen WYSIWYG-Editor (was Sie sehen, ist was Sie bekommen). Durch Klicken auf die Schaltfläche gelangen Sie mit einer schwebenden CSS Hero-Symbolleiste auf dem Bildschirm auf Ihre Website.
Sie müssen oben auf das blaue Symbol klicken, um die Bearbeitung zu starten.
Bewegen Sie die Maus nach dem Klicken auf das blaue Symbol in Ihr Navigationsmenü. CSS Hero hebt es hervor, indem die umgebenden Ränder angezeigt werden. Wenn Sie auf das hervorgehobene Navigationsmenü klicken, werden die Elemente angezeigt, die Sie bearbeiten können.
Im obigen Screenshot wird der Container des oberen Navigationsmenüs angezeigt. Angenommen, wir möchten die Hintergrundfarbe unseres Navigationsmenüs ändern. In diesem Fall wählen wir die oberste Navigation aus, die sich auf unser gesamtes Menü auswirkt.
CSS Hero zeigt Ihnen jetzt verschiedene Eigenschaften an, die Sie bearbeiten können, z. B. Text, Hintergrund, Rahmen, Ränder, Füllung usw.
Sie können auf jede Eigenschaft klicken, die Sie ändern möchten. CSS Hero zeigt Ihnen eine einfache Oberfläche, in der Sie Ihre Änderungen vornehmen können.
Im obigen Screenshot haben wir den Hintergrund ausgewählt und es zeigte sich eine schöne Oberfläche zur Auswahl der Hintergrundfarbe, des Verlaufs, des Bildes und mehr.
Wenn Sie Änderungen vornehmen, können Sie diese live in der Themenvorschau sehen.
Wenn Sie mit den Änderungen zufrieden sind, klicken Sie in der CSS Hero-Symbolleiste auf die Schaltfläche Speichern, um die Änderungen zu speichern.
Das Beste an dieser Methode ist, dass Sie alle vorgenommenen Änderungen problemlos rückgängig machen können. CSS Hero führt einen vollständigen Verlauf aller Ihrer Änderungen und kann zwischen diesen Änderungen wechseln.
Methode 2: WordPress-Navigationsmenüs manuell entwerfen
Diese Methode erfordert das manuelle Hinzufügen von benutzerdefiniertem CSS und ist für Zwischenbenutzer gedacht.
WordPress-Navigationsmenüs werden in einer ungeordneten Liste (Liste mit Aufzählungszeichen) angezeigt.
Wenn Sie das WordPress-Standardmenü-Tag verwenden, wird normalerweise eine Liste ohne zugehörige CSS-Klassen angezeigt.
Ihre ungeordnete Liste hätte den Klassennamen “Menü”, wobei jedes Listenelement eine eigene CSS-Klasse hat.
Dies könnte funktionieren, wenn Sie nur einen Menüpunkt haben. Die meisten Themen haben jedoch mehrere Positionen, an denen Sie Navigationsmenüs anzeigen können.
Die Verwendung nur der Standard-CSS-Klasse kann zu Konflikten mit Menüs an anderen Speicherorten führen.
Aus diesem Grund müssen Sie auch die CSS-Klasse und den Menüort definieren. Wahrscheinlich macht Ihr WordPress-Theme dies bereits, indem Sie die Navigationsmenüs mit folgendem Code hinzufügen:
