Möchten Sie Ihre WordPress-Navigationsmenüs erstellen, um deren Farben oder Erscheinungsbild zu ändern? Während sich das WordPress-Design um das Aussehen der Navigationsmenüs kümmert, können Sie es mithilfe von CSS ganz einfach an Ihre Bedürfnisse anpassen. In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Navigationsmenüs auf Ihrer Website erstellen.
Wir zeigen Ihnen zwei verschiedene Methoden. Die erste Methode ist für Anfänger gedacht, da sie ein Plugin verwendet und keine Codekenntnisse erfordert. Die zweite Methode ist für Heimwerker gedacht, die lieber CSS-Code als Plugin verwenden.
Methode 1: Entwerfen Sie WordPress-Navigationsmenüs mithilfe eines Plugins
Ihr WordPress-Theme verwendet CSS, um Navigationsmenüs zu erstellen. Viele Anfänger mögen es nicht, Themendateien zu bearbeiten oder CSS-Code selbst zu schreiben.
Dann ist ein Plugin im WordPress-Stil praktisch. Dies verhindert, dass Sie Themendateien bearbeiten oder Code schreiben können.
Als erstes müssen 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 erstellen 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. Folgen Sie einfach den Anweisungen auf dem Bildschirm und Sie werden mit nur wenigen Klicks zu Ihrer Website weitergeleitet.
Als nächstes müssen Sie auf die Schaltfläche CSS Hero in der WordPress-Admin-Symbolleiste 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 auf das blaue Symbol oben klicken, um die Bearbeitung zu starten.
Nachdem Sie auf das blaue Symbol geklickt haben, bewegen Sie Ihre Maus zum Navigationsmenü. CSS Hero hebt es hervor und zeigt die Kanten um es herum an. Wenn Sie auf das hervorgehobene Navigationsmenü klicken, werden die Elemente angezeigt, die Sie bearbeiten können.
Im obigen Screenshot wird der Container aus dem oberen Navigationsmenü angezeigt. Angenommen, wir möchten die Hintergrundfarbe unseres Navigationsmenüs ändern. In diesem Fall wählen wir die obere Navigation aus, die das gesamte Menü betrifft.
CSS Hero zeigt 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 von Farbe, Farbverlauf, Bild 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 Ihre Ä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 Standard-WordPress-Menü-Tag verwenden, wird im Allgemeinen eine Liste ohne zugehörige CSS-Klassen angezeigt.
Ihre ungeordnete Liste hätte den Klassennamen “Menü”, wobei jedes Element in der Liste eine eigene CSS-Klasse hat.
Dies kann 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üpunkt definieren. Ihr WordPress-Theme tut dies wahrscheinlich bereits, indem Sie Navigationsmenüs mit folgendem Code hinzufügen:
