So gestalten Sie WordPress-Navigationsmenüs (aktualisiert)

Ein gut gestaltetes Menü kann einen großen Unterschied machen. Es kann das Gesamtbild Ihrer Website verbessern, es den Besuchern erleichtern, das zu finden, wonach sie suchen, und sie sogar dazu ermutigen, auf bestimmte Seiten zu klicken.

Hier bei WPBeginner haben wir alle möglichen kreativen Wege gesehen, um Menüs zu gestalten. Wir haben auch im Laufe der Jahre mehrmals mit der Gestaltung unserer eigenen Navigationsmenüs experimentiert. Daher möchten wir teilen, was für verschiedene Situationen am besten funktioniert.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihr WordPress-Navigationsmenü auf 5 verschiedene Arten gestalten können.

Warum Ihr WordPress-Navigationsmenü gestalten?

Ihr WordPress-Navigationsmenü ist die Roadmap Ihrer Website und leitet Besucher zu den wichtigsten Seiten. Es erscheint am oberen Rand der meisten Websites und ist somit ein idealer Ort, um Aufmerksamkeit zu erregen und zu beeinflussen, wie Benutzer Ihre Inhalte erkunden.

Das Styling Ihres Navigationsmenüs geht über das reine Aussehen hinaus. Es kann die Benutzererfahrung Ihrer Website erheblich verbessern und wiederum Ihre Suchmaschinenoptimierung (SEO) steigern.

Wenn Ihr Menüdesign schwer zu bedienen ist, haben Besucher möglicherweise Schwierigkeiten, das zu finden, wonach sie suchen, und verlassen Ihre Seite frustriert. Auf der anderen Seite kann ein klares und visuell ansprechendes Menü sie dazu ermutigen, zu verschiedenen Bereichen zu navigieren und mehr Zeit auf Ihrer Website zu verbringen.

Infolgedessen kannst du die Seitenaufrufe deiner Website erhöhen und die Absprungrate reduzieren.

Diese Anleitung erläutert verschiedene Methoden zum Gestalten Ihres Navigationsmenüs, abhängig von Ihrem WordPress-Theme und Ihrem Komfortlevel. Sie können die Schnelllinks unten verwenden, um durch dieses Tutorial zu navigieren und die Methode zu finden, die am besten für Sie geeignet ist:

• Methode 1: Passen Sie Ihr Navigationsmenü mit dem Full-Site-Editor an (Block-Themes)
• Methode 2: Passen Sie Ihr Navigationsmenü mit dem Theme Customizer an (klassische Themes)
• Methode 3: Passen Sie Ihr Navigationsmenü mit einem Page-Builder-Plugin an (empfohlen)
• Methode 4: Passen Sie Ihr Navigationsmenü mit dem visuellen CSS-Editor an (anpassbarer)
• Method 5: Customize Your Navigation Menu With Code (Advanced)

Methode 1: Passen Sie Ihr Navigationsmenü mit dem Full-Site-Editor an (Block-Themes)

Wenn Sie ein Block-Theme verwenden und Ihr Website-Navigationsmenü mit dem Full-Site-Editor gestalten möchten, ist dies die richtige Methode für Sie.

First, head over to your WordPress dashboard and navigate to Appearance » Editor.

Hier sehen Sie Optionen, um verschiedene Teile Ihres Block-Themes anzupassen.

Klicken Sie auf „Navigation“.

Klicken Sie auf der nächsten Seite auf das Bleistift-Symbol „Bearbeiten“.

Dies öffnet den Block-Editor, wo Sie Ihren Navigationsblock bearbeiten können.

Sobald Sie sich im Block-Editor befinden, klicken Sie auf den Block 'Seitenliste', der die Seiten Ihrer WordPress-Website als Navigationsmenüpunkte anzeigt.

Klicken Sie dann auf „Bearbeiten“.

Ein Popup-Fenster wird nun angezeigt und informiert Sie, dass Sie den Seitenlisten-Block bearbeiten können. Sie können Menüeinträge bearbeiten, entfernen, neu anordnen und neue hinzufügen.

Klicken Sie auf „Bearbeiten“, um fortzufahren.

Der Block-Editor für das Navigationsmenü funktioniert wie beim Bearbeiten einer Seite oder eines Beitrags. Sie können gerne weitere Menüelemente hinzufügen, wie z. B. benutzerdefinierte Links, eine Call-to-Action-Schaltfläche, ein Suchformular, ein Website-Logo und vieles mehr.

Wenn Sie tiefer in die Verwaltung von Menüs mit dem Full-Site-Editor eintauchen möchten, lesen Sie den Abschnitt über die Bearbeitung Ihres Navigationsmenüs in unserem Leitfaden zum Full-Site-Editing. Dieser Abschnitt behandelt auch die Erstellung von Untermenüs.

Nun kommen wir zum Styling. Klicken Sie auf einen beliebigen Block, um zu beginnen.

Je nach Block bietet die Werkzeugleiste möglicherweise einige Anpassungsoptionen. Wenn Sie beispielsweise einen Seitenlink auswählen, können Sie ihn bei Bedarf fett, kursiv, durchgestrichen und neu anordnen.

You can use these tools to highlight a single menu item from the rest.

Wechseln Sie im Einstellungsbereich auf der rechten Seite zum Tab „Block“ und navigieren Sie darunter zum Tab „Stile“.

Hier können Sie die Farbe, Typografie, Abmessungen, Rahmen und Schatten Ihres Blocks anpassen.

Blöcke haben oft Standard-Stileinstellungen. Wenn Sie beispielsweise einen Seitenlink bearbeiten, sehen Sie möglicherweise nur Optionen wie 'Schriftgröße' und 'Breite'.

Aber keine Sorge. Klicken Sie einfach auf das Drei-Punkte-Menü neben diesen Optionen, um weitere Anpassungsmöglichkeiten zu aktivieren, wie z. B. die Änderung der Schriftfamilie und des Buchstabenabstands.

Ähnlich, wenn Sie einen Button-Block in Ihrem Navigationsmenü haben, wird durch Klicken darauf Optionen zum Anpassen von Stil, Text, Hintergrundfarbe, Typografie, Abmessungen, Rahmen und sogar Schatten angezeigt.

Sie können unseren Leitfaden zum Hinzufügen einer Call-to-Action-Schaltfläche für weitere Informationen lesen.

Wenn Sie die Hintergrundfarbe Ihres Navigationsmenüs ändern möchten, müssen Sie dies durch Bearbeiten der Header-Vorlage Ihres Themes tun.

Um es zu öffnen, klicken Sie einfach auf das Befehlssuchfeld oben, das 'Navigation' sagt. Geben Sie dann 'Header' ein und drücken Sie die Eingabetaste.

Now, open the List View and select Group.

Diese Gruppe besteht aus dem Website-Titel und dem Navigationsmenü deines Headers.

Öffnen Sie dann den Tab „Styles“ in der Seitenleiste der Blockeinstellungen und klicken Sie im Abschnitt „Farbe“ auf „Hintergrund“.

Wählen Sie danach einfach eine Hintergrundfarbe für Ihre Header-Vorlage.

Wenn Sie mit dem Stil Ihres Navigationsmenüs zufrieden sind, klicken Sie einfach auf die Schaltfläche „Speichern“, und Ihr neues Menü und Header werden auf Ihrem WordPress-Blog oder Ihrer Website live geschaltet.

So sieht unser Navigationsmenü auf unserer Demoseite aus:

Keep in mind that the style choices you will have depend on your specific theme’s overall styling options.

Wenn Sie die globalen Stile Ihres Themes anpassen möchten, müssen Sie oben rechts auf die Schaltfläche „Stile“ klicken.

Von hier aus können Sie die Typografie, Farben und das Layout für die gesamte Website ändern.

Weitere Informationen finden Sie im Abschnitt über die Änderung der globalen Stile Ihrer Website in der Anleitung zur vollständigen Website-Bearbeitung.

Methode 2: Passen Sie Ihr Navigationsmenü mit dem Theme Customizer an (klassische Themes)

Diese Methode ist für Benutzer mit klassischen WordPress-Themes gedacht, die ihr Navigationsmenü mit dem integrierten Theme Customizer gestalten möchten.

Wie bei der vorherigen Methode konzentrieren wir uns auf die Gestaltung des Menü-Erscheinungsbilds und nicht auf die Verwaltung der Menüpunkte selbst.

Wenn Sie lernen möchten, wie Sie Menüs in klassischen Themes erstellen und verwalten, lesen Sie unseren Leitfaden zum Hinzufügen eines Navigationsmenüs in WordPress. Er behandelt die Erstellung von Menüs mit dem Customizer, die Zuweisung zu verschiedenen Menüpositionen und das Hinzufügen von Menüs als Widgets.

Um den Theme Customizer zu verwenden, gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Darstellung » Anpassen. Klicken Sie dann auf die Schaltfläche 'Anpassen' neben Ihrem aktiven Theme.

Hier sehen Sie Optionen zur Anpassung verschiedener Aspekte Ihres Themes, die vom verwendeten Theme abhängen. In den meisten Fällen haben WordPress-Themes eine Option namens 'Menüs', aber Drittanbieter können auch andere Einstellungen hinzufügen.

Zum Beispiel hat das Sydney Theme einen dedizierten Header-Builder für die Menüanpassung. Konsultieren Sie unbedingt die Dokumentation Ihres Themes, um zu sehen, ob spezielle Menüeinstellungen hinzugefügt werden.

Wenn Ihr Theme keine solchen Anpassungsoptionen hat, machen Sie sich keine Sorgen. Wir können das Menü einfach mit benutzerdefiniertem CSS gestalten.

Klicken Sie zuerst auf den Abschnitt 'Menüs'.

Klicken Sie auf der nächsten Seite auf das Zahnradsymbol „Einstellungen“ und wählen Sie dann „CSS-Klassen“ aus.

Dies ermöglicht es Ihnen, jedem Menüpunkt eine eindeutige CSS-Klasse zuzuweisen, sodass Sie diese später individuell gestalten können.

Scrollen Sie als Nächstes nach unten im Panel.

Öffnen Sie dann Ihr primäres Menü.

Was Sie jetzt tun möchten, ist, den Menüpunkt zu finden, den Sie ändern möchten, und darauf zu klicken, um ihn zu erweitern.

Sie sehen eine neue Option zum Hinzufügen einer benutzerdefinierten CSS-Klasse. Im folgenden Beispiel fügen wir unserer Kontaktseite einfach die CSS-Klasse contact-us hinzu.

Sobald Sie Ihren Menüpunkten CSS-Klassen zugewiesen haben, kehren Sie zum Hauptmenü im Theme Customizer zurück.

Klicken Sie dann auf 'Zusätzliches CSS'.

Hier können Sie benutzerdefinierten CSS-Code hinzufügen, um Ihr Navigationsmenü zu gestalten.

Lassen Sie uns einige Beispiele untersuchen, und ändern Sie gerne die CSS-Klassen und den Hex-Farbcode:

Hintergrundfarbe des Menüpunkts ändern

Der folgende Code-Schnipsel ändert die Hintergrundfarbe des Menüpunkts mit der CSS-Klasse contact-us zu Grün (#E3FFA8) und fügt abgerundete Ecken hinzu (border-radius: 5px):

.contact-us {
  background-color: #E3FFA8;
  border-radius: 5px;
}

Standard-Menü-Linkfarbe ändern

Dieser Code-Schnipsel ändert die Farbe aller Menülinks in der primären Menüliste (#primary-menu-li a) zu Rot (#ff0000):

.primary-menu li a {
    color: #ff0000; 
}

Beachten Sie, dass die CSS-Klasse für das primäre Menü Ihres Themes anders aussehen kann als unsere.

Um zu sehen, welche CSS-Klasse Ihr primäres Menü hat, können Sie das Inspektionswerkzeug in Ihrem Navigationsmenübereich verwenden.

Suchen Sie dann nach einem HTML-Code, der 'menu' oder 'navigation-menu' sagt. Daneben sollte eine CSS-Klasse stehen, die ihn definiert.

Hover-Effekte zu Menüpunkten hinzufügen

Dieser Code-Schnipsel zielt auf alle Menüpunkte innerhalb der primären Menüliste (#primary-menu li) ab und fügt einen Hover-Effekt hinzu:

.primary-menu li a:hover {
  background-color: #a6e4a5;
	color: #666;
	border-radius: 5px;
	}

Wenn ein Benutzer mit der Maus über das Menüelement fährt, ändert sich die Hintergrundfarbe zu einem hellen Grün (#a6e4a5), die Textfarbe zu einem dunklen Grau (#666) und es werden abgerundete Ecken hinzugefügt (border-radius: 5px).

Transparente Navigationsmenüs in WordPress erstellen

Dieser CSS-Code-Schnipsel kann Ihr Navigationsmenü transparent machen:

#site-navigation { 
background-color:transparent; 
}

Die Verwendung dieses Effekts wird es mit dem Hintergrundbild verschmelzen lassen, um Ihrer Website ein sauberes, modernes Gefühl zu verleihen.

Für weitere Inspirationen können Sie sich unsere Anleitungen unten ansehen:

• So fügen Sie der WordPress-Menüelemente die erste und letzte CSS-Klasse hinzu
• So heben Sie ein Menüelement in WordPress hervor

Denken Sie daran, dass dies nur einige Beispiele sind, um Ihnen den Einstieg zu erleichtern. Wenn Sie dieselben Methoden verwenden möchten, aber den Abschnitt Zusätzliches CSS nicht finden können, lesen Sie unseren Leitfaden, wie Sie das Problem mit dem fehlenden Theme Customizer beheben können.

Methode 3: Passen Sie Ihr Navigationsmenü mit einem Page-Builder-Plugin an (empfohlen)

Diese Methode ist perfekt für diejenigen, die mehr Kontrolle über das Erscheinungsbild ihres Navigationsmenüs wünschen, aber dennoch eine anfängerfreundliche Erfahrung bevorzugen. Sie ist auch eine großartige Option, wenn Sie sich noch in den frühen Phasen des Website-Aufbaus befinden und diese noch nicht gestartet haben.

Ein Page Builder-Plugin ermöglicht es Ihnen, das Layout Ihrer Website visuell zu gestalten, indem Sie Drag-and-Drop-Funktionen verwenden, ohne Code schreiben zu müssen. Das macht es ideal für absolute Anfänger.

In diesem Abschnitt verwenden wir SeedProd als unser Page-Builder-Plugin. SeedProd bietet eine benutzerfreundliche Oberfläche und enthält zusätzliche Blöcke und Funktionen, um Ihr Navigationsmenü hervorzuheben.

Schritt 1: SeedProd installieren und aktivieren

Installieren und aktivieren Sie zuerst das SeedProd-Plugin auf Ihrer WordPress-Website. Sie können unseren Leitfaden zur Installation eines WordPress-Plugins für weitere Informationen lesen.

Once activated, navigate to SeedProd » Settings from your WordPress dashboard. Then, enter your SeedProd license key and click the ‘Verify key’ button.

Schritt 2: Wählen Sie ein SeedProd Theme Template Kit

Gehen Sie nun zu SeedProd » Theme Builder. Hier können Sie ein benutzerdefiniertes WordPress-Theme von Grund auf neu erstellen.

Klicken Sie auf die Schaltfläche „Theme-Vorlagen-Kits“, um eine Galerie mit vordefinierten Vorlagen zu durchsuchen.

Für dieses Tutorial verwenden wir das Smile Craft Medical Website Theme. Sie können jedoch gerne eine Vorlage wählen, die zu Ihrem Unternehmen passt.

Sie können diese Theme-Template-Kits in der Vorschau anzeigen, indem Sie auf das Lupensymbol klicken, um zu sehen, welches zum Stil Ihrer Website passt.

Sobald Sie eine Theme-Vorlage gefunden haben, die Ihnen gefällt, klicken Sie auf das orangefarbene Häkchen-Symbol, um die Vorlagen-Teile zu importieren.

SeedProd erstellt nun die wesentlichen Website-Bereiche wie Header, Footer, Homepage und so weiter. Diese können alle visuell mit dem Drag-and-Drop-Builder bearbeitet werden.

Schritt 3: Menüdesign anpassen

Sobald die Theme-Vorlage installiert ist, kehren Sie zur Theme Builder-Seite zurück.

In einer SeedProd-Theme-Vorlage befindet sich das Navigationsmenü im Header-Vorlagenteil.

Um Ihre Header-Vorlage zu bearbeiten, bewegen Sie einfach die Maus darüber und klicken Sie auf den Link 'Design bearbeiten'. Dies öffnet die Vorlage im Drag-and-Drop-Editor.

Sie sehen nun einen Header-Bereich, der aus dem Navigationsmenü-Block (Ihrem Navigationsmenü) und anderen Blöcken besteht, je nach Theme.

Um das Menü zu bearbeiten, klicken Sie auf den Navigationsmenü-Block. Die linke Seitenleiste zeigt Ihnen dann eine Liste der Blockeinstellungen an.

Standardmäßig verwendet SeedProd das 'Einfache' Menü, um ein Menü basierend auf dem von Ihnen verwendeten Theme-Template zu erstellen. Sie können jedoch auch die Option 'WordPress-Menü' wählen, um ein bereits vorhandenes Menü zu verwenden, das Sie mit dem Standard-WordPress-Menüeditor (Darstellung » Menüs) erstellt haben.

Lassen Sie uns den Unterschied zwischen den beiden aufschlüsseln. Die einfache Methode ermöglicht es Ihnen, Links direkt in der Page Builder-Oberfläche hinzuzufügen, zu bearbeiten und zu entfernen.

Um einen neuen Menüpunkt zu erstellen, klicken Sie auf die Schaltfläche „+ Neuen Eintrag hinzufügen“.

Hier können Sie die Textbeschriftung und die Link-URL eingeben.

Wählen Sie dann aus, den Link in einem neuen Fenster zu öffnen und fügen Sie ein nofollow-Attribut hinzu (falls erforderlich). So:

Sie können die Menüpunkte auch neu anordnen, indem Sie auf die Schaltfläche mit den drei Linien neben einem Punkt klicken und ihn nach oben oder unten ziehen.

Um einen Menüpunkt zu löschen, fahren Sie einfach mit der Maus darüber und klicken Sie auf das Papierkorbsymbol daneben.

Der Nachteil dieser Option ist, dass du keine Dropdown-Menüs erstellen kannst. Deshalb heißt sie 'Simple'.

On the other hand, the ‘WordPress Menu’ option doesn’t allow you to manage menu items directly from the SeedProd editor. You have to do that in the menu editor.

Die gute Nachricht ist, dass Sie, wenn Ihr bestehendes Menü ein Dropdown-Menü ist, es mit dieser Methode anzeigen können.

Welche Methode Sie auch wählen, Sie können die Schriftgröße und den Abstand zwischen den Menüpunkten anpassen, einen Textteiler hinzufügen oder die Ausrichtung ändern.

Der Tab 'Erweitert' bietet noch mehr Anpassungsoptionen.

Sie können das Listenlayout von horizontal zu vertikal ändern, die Typografie anpassen, Text- und Hoverfarben ändern und sogar Textschatten hinzufügen.

Wenn Sie nach unten scrollen, können Sie Abstände und Ränder für Desktop-, Tablet- und Mobilgeräte steuern.

Auf diese Weise ist Ihr Menü auf jeder Bildschirmgröße einfach zu navigieren.

Möchten Sie Ihr Menü hervorheben?

SeedProd ermöglicht es Ihnen, Animationen für eine ansprechendere Benutzererfahrung hinzuzufügen. Sie können unsere Schritt-für-Schritt-Anleitung unter CSS-Animationen in WordPress hinzufügen lesen, um weitere Informationen zu erhalten.

Wenn Sie einen neuen Call-to-Action-Button in Ihre Navigationsleiste einfügen möchten, können Sie den Button-Block von SeedProd verwenden.

Öffnen Sie einfach den Block-Finder in der linken Seitenleiste und suchen Sie den Button-Block in der linken Seitenleiste.

Ziehen Sie dann den Block irgendwo in Ihren Header.

Sobald Sie fertig sind, passen Sie einfach den Call-to-Action-Button, den Link, das Styling und andere Einstellungen an.

Sie können auch ein Sticky-Menü erstellen, das beim Scrollen des Benutzers am oberen Rand der Seite bleibt. So müssen sie nicht jedes Mal nach oben gehen, wenn sie zu einer anderen Seite wechseln möchten.

Um dies zu tun, fahren Sie einfach mit der Maus über den Abschnitt, bis eine lila Linie erscheint, und klicken Sie dann auf das Zahnradsymbol „Einstellungen“.

Wechseln Sie nun zur Registerkarte „Erweitert“.

Dann scrollen Sie nach unten zum Menü „Position“.

Wählen Sie hier „Sticky“.

Fügen Sie danach eine Null zum oberen Offset und eine hohe z-index-Nummer (wie 999) hinzu. Dies stellt sicher, dass der Header immer direkt über der Seite erscheint.

Wenn Sie mit Ihrem angepassten Navigationsmenü zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“.

Schritt 4: Veröffentlichen Sie Ihr benutzerdefiniertes WordPress-Theme

An diesem Punkt sind Sie bereit, Ihr neues benutzerdefiniertes WordPress-Theme zu verwenden. Um es zu aktivieren, gehen Sie zurück zur Seite „Theme Builder“ und aktivieren Sie den Schalter „SeedProd Theme aktivieren“.

Alles, was Sie jetzt noch tun müssen, ist, Ihre Website zu besuchen und Ihr neues benutzerdefiniertes Navigationsmenü anzusehen.

So sieht unser Navigationsmenü auf unserer Demoseite aus:

Methode 4: Passen Sie Ihr Navigationsmenü mit dem visuellen CSS-Editor an (anpassbarer)

Diese Methode bietet mehr Anpassungsoptionen als die integrierten WordPress-Funktionen, ist aber nicht ganz so flexibel wie die Verwendung eines Page-Builder-Plugins. Dennoch ist sie eine großartige Lösung, wenn Sie einige Design-Änderungen an Ihrem Navigationsmenü vornehmen möchten, ohne Ihr Theme komplett zu ersetzen.

Diese Methode ist auch eine gute Alternative für diejenigen, die klassische Themes verwenden, denen Styling-Optionen fehlen, die aber mit der CSS-Bearbeitung in Methode 2 nicht vertraut sind.

Hier führen wir Sie durch die Verwendung eines Premium-WordPress-Visual-CSS-Editor-Plugins namens CSS Hero. Es ermöglicht Ihnen, Ihre Website visuell zu gestalten, ohne Code schreiben zu müssen. Es sind keine HTML- oder CSS-Kenntnisse erforderlich.

Installieren Sie zuerst das CSS Hero Plugin in WordPress. Sie können unsere Anleitung unter Anleitung zur Installation eines WordPress-Plugins für weitere Informationen lesen.

Sobald Sie das CSS Hero Plugin aktiviert haben, sehen Sie eine neue Schaltfläche namens 'CSS Hero' in Ihrer WordPress Admin-Werkzeugleiste. Klicken Sie auf diese Schaltfläche, um den visuellen Editor zu starten.

CSS Hero verwendet eine WYSIWYG-Oberfläche. Wenn Sie auf die Schaltfläche klicken, wird Ihre Website zusammen mit dem CSS Hero-Bereich auf der linken Seite Ihres Bildschirms geöffnet.

Um Ihr Navigationsmenü zu bearbeiten, können Sie die Maus darüber bewegen. CSS Hero hebt es dann mit einem Rahmen hervor. Klicken Sie auf den hervorgehobenen Bereich, um mit der Anpassung des Menüs zu beginnen.

CSS Hero ermöglicht es Ihnen, verschiedene Aspekte Ihres Navigationsmenü-Containers zu bearbeiten, einschließlich Hintergrund, Typografie, Rahmen, Abstände, Listen und sogar zusätzliche Effekte.

Wenn Sie beispielsweise die Hintergrundfarbe des Menüs ändern möchten. Ein Klick auf 'Hintergrund' öffnet eine benutzerfreundliche Oberfläche, in der Sie eine neue Farbe, einen Farbverlauf oder ein Bild auswählen können.

Während Sie Änderungen vornehmen, sehen Sie, wie diese in der Live-Vorschau der Website auf der rechten Seite widergespiegelt werden.

Oder Sie können Ihren Menüpunkten einen Box-Schatten hinzufügen, um sie auffälliger zu gestalten.

Navigieren Sie dazu zum Reiter 'Extra'.

Klicken Sie dann auf „Schatten erstellen“.

Hier können Sie die Schatteneinstellungen bearbeiten.

Jetzt können Sie einfach mit dem Aussehen des Schattens spielen.

Sie können die Ausrichtung, Unschärfe und Streuungsqualität sowie die Position des Schattens frei verschieben.

Sie können mit der Benutzeroberfläche von CSS Hero alles ändern, was Sie möchten, sodass Sie experimentieren können, um herauszufinden, was für Ihre Website am besten funktioniert.

Wenn Sie mit Ihrem angepassten Menü zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“, um Ihre Änderungen zu speichern.

Sie können diese Anleitungen lesen, um mehr darüber zu erfahren, was Sie mit CSS Hero tun können:

• So ändern Sie die Größe Ihres WordPress-Logos (funktioniert mit jedem Theme)
• So fügen Sie Bild-Hover-Effekte in WordPress hinzu (Schritt für Schritt)

Methode 5: Passen Sie Ihr Navigationsmenü mit Code an (Fortgeschritten)

Diese Methode ist besser für Benutzer geeignet, die mit Code vertraut sind. Sie ermöglicht es Ihnen auch, ein benutzerdefiniertes Menü zu erstellen, wenn Ihr Theme standardmäßig keines enthält.

Das Hinzufügen benutzerdefinierter Code-Snippets mag zunächst entmutigend erscheinen, da es die Bearbeitung von Theme-Dateien wie functions.php und header.php beinhaltet. Es gibt jedoch Möglichkeiten, dies zu erleichtern.

Wir empfehlen die Verwendung eines Plugins namens WPCode. Es bietet eine sichere und benutzerfreundliche Möglichkeit, benutzerdefinierten Code zu Ihrer WordPress-Site hinzuzufügen, ohne Kern-Dateien zu ändern.

Unser Leitfaden zum Hinzufügen eines benutzerdefinierten Navigationsmenüs in WordPress-Themes kann Sie durch die Schritte zur Erstellung eines Menüs mit WPCode führen.

Sobald Sie das Menü erstellt haben, können Sie diese Tutorials erkunden.

• So fügen Sie Bildsymbole mit Navigationsmenüs in WordPress hinzu
• So fügen Sie einen Button zu Ihrem WordPress-Header-Menü hinzu
• So erstellen Sie ein Sticky Floating Navigation Menü in WordPress

Jede einzelne enthält eine Methode zur Anpassung des Menüs mit WPCode.

Ultimative Anleitungen zur Anpassung des WordPress-Navigationsmenüs

Nachdem Sie nun die Grundlagen des Stylings Ihres WordPress-Navigationsmenüs erkundet haben, finden Sie hier weitere Anleitungen, die Sie lesen können, um Ihr Menü auf die nächste Stufe zu heben:

• So fügen Sie ein Mega-Menü auf Ihrer WordPress-Website hinzu. Mega-Menüs ermöglichen es Ihnen, Unterkategorien einzubinden, was eine benutzerfreundliche Möglichkeit zur Organisation umfangreicher Website-Inhalte darstellt.
• How to Create a Mobile-Ready Responsive WordPress Menu. This guide walks you through how to create a responsive menu that adapts to different screen sizes.
• So fügen Sie ein Vollbild-Responsive Menü in WordPress hinzu. Dieses Tutorial zeigt Ihnen, wie Sie ein Vollbildmenü implementieren, das sich beim Aktivieren über den gesamten Bildschirm erstreckt und ein kühnes Navigationserlebnis bietet.
• So fügen Sie ein Slide-Panel-Menü in WordPress-Themes hinzu. Slide-Panel-Menüs sind eine platzsparende Lösung, die die Hauptnavigation verbirgt, bis ein Benutzer wischt oder auf eine Schaltfläche klickt, um sie anzuzeigen.
• Erstellen eines vertikalen Navigationsmenüs in WordPress. Vertikale Navigationsmenüs können eine großartige Möglichkeit sein, eine große Anzahl von Menüpunkten in einer Seitenleiste oder einem anderen vertikalen Bereich Ihrer Website anzuzeigen.
• So fügen Sie Social-Media-Icons zu WordPress-Menüs hinzu. Integrieren Sie Social-Media-Icons direkt in Ihr Navigationsmenü, damit Besucher einfach mit Ihnen in Kontakt treten können.
• So erstellen Sie ein aufklappbares Seitenmenü in WordPress. Haben Sie viele Seiten? Erleichtern Sie den Benutzern die Navigation auf Ihrer Website, indem Sie ein aufklappbares Menü zu Ihrer Seitenleiste hinzufügen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie WordPress-Navigationsmenüs gestalten. Möglicherweise möchten Sie auch unseren ultimativen Leitfaden zu WordPress-Designelementen und unseren Anfängerleitfaden zum Erstellen einer benutzerdefinierten Seite in WordPress lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.