So passen Sie die Stile Ihres WordPress-Menüs auf 3 einfache Arten an 

Ich habe im Laufe der Jahre viele WordPress-Menüs angepasst, und eines fällt mir immer wieder auf: Wie sehr sich der Standardstil im Hintergrund verliert. Es funktioniert, aber es passt nicht wirklich zu Ihrer Marke oder hebt Ihre Website hervor.

Ein paar kleine Änderungen an Ihrem Menü können Ihre gesamte Website polierter und leichter navigierbar machen.

In diesem Leitfaden zeige ich Ihnen Schritt für Schritt 4 Möglichkeiten, Ihr WordPress-Menü anzupassen – ganz ohne Code.

Der schnellste Weg, Ihr WordPress-Menü anzupassen, ist über Darstellung → Menüs in Ihrem Dashboard. Fügen Sie Elemente hinzu, legen Sie eine Anzeigeoption fest und speichern Sie. Für die volle Designkontrolle über Schriftarten, Farben und Layout verwenden Sie den Drag-and-Drop-Builder von SeedProd. Für Block-Themes verwenden Sie den WordPress-Seiteneditor.

Wie passe ich ein WordPress-Menü mit dem Standardeditor an?

Der einfachste Einstieg ist der integrierte Menüeditor unter Darstellung → Menüs. Er funktioniert mit klassischen Themes und den meisten Nicht-Block-Themes, und Sie benötigen keine zusätzlichen Plugins.

Ich benutze diesen Editor seit Jahren, und er ist immer noch der schnellste Weg, eine grundlegende Navigationsstruktur zu erstellen.

Schritt 1. Neues Menü erstellen

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung → Menüs. Geben Sie oben einen Menünamen ein, z. B. „Hauptmenü“, und klicken Sie auf Menü erstellen.

Schritt 2. Seiten, Beiträge oder benutzerdefinierte Links hinzufügen

Wählen Sie auf der linken Seite die Seiten oder Beiträge aus, die Sie hinzufügen möchten, und klicken Sie auf Zum Menü hinzufügen. Verwenden Sie den Bereich Benutzerdefinierte Links, um eine beliebige URL mit benutzerdefiniertem Linktext hinzuzufügen.

Schritt 3. Eine Anzeigeoption zuweisen

Scrollen Sie nach unten zu Menüeinstellungen und wählen Sie eine Anzeigeoption, z. B. Primärmenü. Verfügbare Optionen hängen von Ihrem Theme ab.

Sie können Elemente auch per Drag & Drop neu anordnen oder verschachteln, um Dropdown-Untermenüs zu erstellen.

Schritt 4. Menü speichern

Klicken Sie auf Menü speichern und Ihr Menü erscheint an der von Ihnen gewählten Position.

Diese Methode behandelt die grundlegende Struktur und Reihenfolge, bietet aber nur begrenzte Styling-Möglichkeiten. Für die volle Designkontrolle über Schriftarten, Farben und Layout probieren Sie die untenstehende SeedProd-Methode.

Wie passe ich mein WordPress-Menü mit einem Seitenersteller an?

Für mehr Kontrolle über das Aussehen Ihres Menüs ist ein Seitenersteller-Plugin die beste Wahl. Ich verwende in diesem Beispiel SeedProd, aber ähnliche Prinzipien gelten für jeden anderen Seitenersteller.

SeedProd ist ein Drag-and-Drop-Website-Builder für WordPress, mit dem Sie benutzerdefinierte Seiten, Menüs und ganze Themes erstellen können, ohne Code schreiben zu müssen. Zu den Funktionen gehören:

• Drag-and-Drop-Seitenersteller
• WordPress Theme Builder
• Vorgefertigte Vorlagen
• Anpassbare Menüs
• Social-Media-Integration
• Und mehr.

Sie können es sogar verwenden, um benutzerdefinierte Menüs zum Footer, Header, zur Seitenleiste und zum Seiteninhalt Ihrer Website hinzuzufügen. 

Diese Methode ermöglicht es Ihnen, Menüs unabhängig von Ihrem WordPress-Theme anzupassen. Befolgen Sie die folgenden einfachen Schritte, um loszulegen.

Schritt 1. SeedProd installieren

Laden Sie zuerst das SeedProd-Plugin herunter und installieren und aktivieren Sie es auf Ihrer WordPress-Site.

Hilfe zu diesem Schritt finden Sie in unserer Anleitung, wie Sie SeedProd installieren.

Schritt 2. Wählen Sie eine Landingpage-Vorlage

Nachdem das Plugin aktiviert ist, navigieren Sie in Ihrem WordPress-Dashboard zu SeedProd » Landing Pages und klicken Sie auf die Schaltfläche Neue Landing Page hinzufügen.

Dies öffnet eine Bibliothek von Landingpage-Vorlagen, die Sie zum schnellen Erstellen einer benutzerdefinierten Seite verwenden können. 

Jede Vorlage ist vollständig anpassbar, um verschiedenen Website-Nischen gerecht zu werden. Wenn Sie beispielsweise auf die Registerkarte „Lead Squeeze“ oben klicken, werden Vorlagen angezeigt, die sich am besten zum Erstellen von Squeeze Pages eignen.

Wenn Sie ein Design finden, das Ihren Anforderungen entspricht, fahren Sie mit der Maus darüber und klicken Sie auf das orangefarbene Häkchensymbol.

Nun erscheint ein Fenster, in dem Sie einen Seitennamen und eine URL eingeben können. Nachdem Sie diese Details eingegeben haben, klicken Sie auf die Schaltfläche Speichern und Seite bearbeiten.

Schritt 3. Passen Sie Ihren Seiteninhalt an

Der nächste Bildschirm zeigt Ihre Landingpage im visuellen Seitenersteller von SeedProd. Auf der linken Seite befinden sich Blöcke, Abschnitte und Einstellungen, auf der rechten Seite eine Vorschau Ihrer Seite.

Alle Änderungen, die Sie an Ihrer Seite vornehmen, werden automatisch in Echtzeit angezeigt. So können Sie sicherstellen, dass sie gut aussieht, bevor Sie die Änderungen veröffentlichen.

Das Anpassen des Vorlageninhalts ist so einfach wie Zeigen und Klicken. Um beispielsweise Textinhalte zu ändern, klicken Sie darauf, löschen Sie den vorhandenen Text und ersetzen Sie ihn durch Ihren eigenen.

Um Ihrer Seite neue Funktionen hinzuzufügen, wie z. B. ein Bild oder eine Call-to-Action-Schaltfläche, suchen Sie den Block im linken Bereich und ziehen Sie ihn auf die Seite.

Ersetzen Sie weiterhin den Vorlageninhalt durch Ihren eigenen, bis Sie ein Design haben, mit dem Sie zufrieden sind. Weitere Anpassungshilfen finden Sie in unserer Anleitung, wie Sie eine Landingpage in WordPress erstellen.

Schritt 4. Passen Sie das WordPress-Menü an

Nachdem Sie Ihre Seite angepasst haben, können Sie Menüs erstellen und sie einfach anpassen. Meine Vorlage enthält keinen Header-Bereich, daher muss ich zuerst einen erstellen.

Finden Sie dazu den Spalten-Block und ziehen Sie ihn an den oberen Rand Ihrer Seite.

Wählen Sie als Nächstes ein Layout. In diesem Fall verwenden wir ein 3-Spalten-Layout.

Richten wir nun den Header-Bereich mit einem Bildblock ein, um Ihr Website-Logo anzuzeigen.

Um Ihr Logo-Bild hochzuladen, klicken Sie im Einstellungsbereich des Blocks auf die Schaltfläche „Eigenes Bild verwenden“. Dadurch können Sie ein Bild aus Ihrer WordPress-Mediathek auswählen oder eines von Ihrem Computer hochladen.

Als Nächstes finden Sie den Block Nav Menu und ziehen Sie ihn in eine andere Spalte in Ihrer Kopfzeile. Hier können Sie Menüpunkte hinzufügen, auf die Benutzer klicken können, um andere Seiten Ihrer Website zu besuchen.

In den Blockeinstellungen gibt es 2 Möglichkeiten, Ihr Menü anzuzeigen.

Der Menütyp Einfach ermöglicht es Ihnen, einzelne Menülinks hinzuzufügen, ohne den Page Builder zu verlassen. Fügen Sie einfach einen Menünamen hinzu und fügen Sie Ihren benutzerdefinierten Link ein.

Sie können den Link auch als No-Follow kennzeichnen und ihn in einem neuen Tab öffnen.

Der Menütyp WordPress Menü ermöglicht es Ihnen, Menüs anzuzeigen, die Sie bereits in WordPress erstellt haben. Wenn Sie auf das Dropdown-Menü klicken, werden alle auf Ihrer Website verfügbaren Menüs angezeigt, wie z. B. das Primärmenü oder das Hauptmenü.

Alles, was Sie tun müssen, ist, Menüs auszuwählen, um sie in Ihrer Kopfzeile anzuzeigen.

SeedProd bietet erweiterte Anpassungsoptionen für beide Menütypen. Im Tab Erweitert können Sie Menüfarben, Schriftarten, Textschatten, Hover-Farben und mehr ändern.

Sie können Ihre Menüs sogar in einem vertikalen oder horizontalen Layout anzeigen. Das vertikale Design eignet sich hervorragend für Sidebar-Widget-Bereiche und Menüpositionen im Footer.

Um Ihre Menüs zu verwalten, klicken Sie auf den Link Menüseite oder navigieren Sie zu Design » Menüs in Ihrem WordPress-Adminbereich.

Hier können Sie Ihre Menüstruktur bearbeiten, neue Menüpunkte und Untermenüs durch Klicken auf die Kontrollkästchen hinzufügen und Standorte verwalten. Sie können auf dieser Seite sogar ein neues Menü erstellen.

Denken Sie daran, auf die Schaltfläche Menü speichern zu klicken, um Ihre Menüfunktionen zu speichern.

Viele Websites verwenden Schaltflächen in der Website-Navigation, um zu einer bestimmten Handlungsaufforderung aufzurufen. Mit dem Button-Block von SeedProd können Sie mit wenigen Klicks eine Menü-Schaltfläche erstellen.

Finden Sie einfach den Button-Block und fügen Sie ihn zu Ihrem Header-Bereich hinzu.

Dann können Sie in den Blockeinstellungen Ihren Menülink hinzufügen und den Stil der Schaltfläche anpassen.

Schritt 5. Veröffentlichen Sie Ihre benutzerdefinierte Seite

Wenn Sie mit dem Aussehen Ihrer Seite zufrieden sind, klicken Sie oben rechts auf dem Bildschirm auf Speichern und Veröffentlichen.

Von dort aus können Sie die Seite besuchen, um Ihr benutzerdefiniertes WordPress-Menü in Aktion zu sehen.

Wie passe ich ein Menü mit dem WordPress-Seiteneditor an?

Die erste Methode ist eine ausgezeichnete Lösung für jede Website, unabhängig davon, welches Theme Sie verwenden. Wenn Sie jedoch ein blockbasiertes WordPress-Theme wie Twenty Twenty Three verwenden, bevorzugen Sie möglicherweise die Verwendung des WordPress-Site-Editors, um Ihr Menü anzupassen.

Bitte beachten Sie: Diese Methode funktioniert nicht mit jedem Theme und ermöglicht nicht die Anpassung jedes Teils des Menüs.

Um den Site-Editor zu öffnen, navigieren Sie in Ihrem WordPress-Dashboard zu Design » Editor.

Klicken Sie auf dem nächsten Bildschirm auf den Tab Muster. In WordPress 6.5 und höher suchen Sie unter Muster → Vorlagenteile, wenn Sie die Option Kopfzeile nicht sofort sehen.

Klicken Sie von dort auf die Option Kopfzeile und wählen Sie Ihre Header-Vorlage aus.

Hier können Sie per Drag & Drop die Menüposition neu anordnen oder Elemente aus dem Menü entfernen.

Sie können auch auf das Stiftsymbol klicken, um die Menügestaltung zu bearbeiten.

Sie können beispielsweise die Hintergrundfarbe des Menüs, Schriftarten, Abstände, Ränder, Rahmen und mehr anpassen.

Wenn Sie zum Tab Erweitert scrollen, können Sie benutzerdefinierte CSS-Klassen eingeben.

Um eine weitere Menüoption hinzuzufügen, wie z. B. eine Header-Schaltfläche, klicken Sie auf das Symbol Block hinzufügen.

Jetzt können Sie nach einem Block suchen und darauf klicken, um ihn zu Ihrem Menü hinzuzufügen und ihn wie jeden anderen WordPress-Block anzupassen.

Wenn Sie mit den Menüeinstellungen und Anpassungen zufrieden sind, klicken Sie auf die Schaltfläche Speichern.

Sie können Ihre Website jetzt besuchen, um Ihr benutzerdefiniertes Menü anzuzeigen.

Wie füge ich ein benutzerdefiniertes Menü in WordPress ohne Plugin hinzu?

Wenn Sie kein Page-Builder-Plugin einrichten möchten und kein WordPress-Block-Theme haben, können Sie immer Code verwenden, um ein benutzerdefiniertes Navigationsmenü hinzuzufügen.

Dafür empfehle ich die Verwendung eines WordPress-Code-Snippet-Plugins wie WPCode. Es ist der sicherste und einfachste Weg, benutzerdefinierten Code zu WordPress hinzuzufügen, ohne die Kern-WordPress-Dateien wie Ihre functions.php-Datei zu bearbeiten.

Installieren Sie dazu das kostenlose WPCode-Plugin und gehen Sie dann in Ihrem WordPress-Dashboard zu Code-Snippets » Snippet hinzufügen .

Auf dieser Seite sehen Sie vorgefertigte Snippets, die Sie mit wenigen Klicks zu Ihrer Website hinzufügen können.

Für dieses Tutorial möchte ich unser eigenes Snippet erstellen. Bewegen Sie daher den Mauszeiger über „Eigene Codes hinzufügen“ und klicken Sie auf die Schaltfläche Snippet verwenden.

Geben Sie nun einen Titel für Ihr Snippet ein, öffnen Sie das Dropdown-Menü „Code-Typ“ und klicken Sie auf PHP-Snippet.

Fügen Sie als Nächstes das folgende Snippet in den Code-Editor ein:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Dieses Snippet fügt Ihrem Theme einen neuen Menüstandort hinzu: „Mein benutzerdefiniertes Menü“.

Wenn Sie dies getan haben, scrollen Sie nach unten zu den Einfügeoptionen und wählen Sie die Methode „Automatisch einfügen“, um das Snippet auf Ihrer gesamten Website einzufügen.

Öffnen Sie von dort das Dropdown-Menü „Standort“ und klicken Sie auf Überall ausführen.

Nun können Sie zum oberen Bildschirmrand scrollen und auf den Schalter „Inaktiv“ klicken, um ihn in „Aktiv“ zu ändern.

Klicken Sie abschließend auf Speichern, um das Snippet live zu schalten.

Gehen Sie nun zu Design » Menüs und sehen Sie den Bereich „Anzeigestandort“.

In diesem Bereich sollten Sie eine neue Option „Mein benutzerdefiniertes Menü“ sehen, zu der Sie Menüpunkte hinzufügen können.

Der nächste Schritt ist das Hinzufügen Ihres benutzerdefinierten Menüs zu Ihrem WordPress-Theme.

Sie können ein benutzerdefiniertes Navigationsmenü überall auf Ihrer Website anzeigen lassen, indem Sie Code in die Vorlagendatei Ihres Themes einfügen.

Gehen Sie einfach zu Design » Theme-Datei-Editor.

Finden Sie dann im rechten Menü die Vorlage, in die Sie das Menü einfügen möchten, z. B. den Header Ihrer Website.

Nun müssen Sie eine wp_nav_menu-Funktion hinzufügen und den Namen Ihres benutzerdefinierten Menüs angeben. Im folgenden Code-Snippet fügen wir beispielsweise Mein benutzerdefiniertes Menü zum Header des Themes hinzu:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

Nachdem Sie den Code hinzugefügt haben, klicken Sie auf die Schaltfläche Datei aktualisieren, um Ihre Änderungen zu speichern.

Wenn Sie Ihre Website nun besuchen, sehen Sie das benutzerdefinierte Menü in Aktion. Sie werden jedoch feststellen, dass es als einfache Aufzählungsliste angezeigt wird.

Sie können das Menü so gestalten, dass es besser zu Ihrem WordPress-Theme oder Branding passt, indem Sie benutzerdefinierten CSS-Code zu Ihrer Website hinzufügen.

Um dies zu tun, gehen Sie zu Darstellung » Anpassen und klicken Sie im WordPress Customizer auf Zusätzliches CSS.

Dies öffnet einen Editor, in den Sie Ihr benutzerdefiniertes CSS eingeben können.

Jetzt können Sie Ihr Menü mit der CSS-Klasse gestalten, die Sie Ihrer Theme-Vorlage hinzugefügt haben. In unserem Beispiel ist es .custom_menu_class.

Im folgenden Code fügen wir Abstände hinzu, setzen die Textfarbe auf Schwarz und ordnen das Menü horizontal an:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
    display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 
 
div.custom-menu-class a {
    color:#000;
}

Der WordPress Customizer aktualisiert sich automatisch, sodass Sie sehen können, wie das Menü mit dem neuen Stil aussieht. Wenn Sie mit den Änderungen zufrieden sind, klicken Sie auf Veröffentlichen, um sie live zu schalten.

Häufig gestellte Fragen

Wie passe ich mein WordPress-Navigationsmenü an?

Der schnellste Weg ist, in Ihrem WordPress-Dashboard zu Darstellung → Menüs zu gehen. Fügen Sie die gewünschten Seiten oder Beiträge hinzu, weisen Sie das Menü einem Anzeigeort wie Primäres Menü zu und klicken Sie auf Menü speichern. Für mehr Designkontrolle über Schriftarten, Farben und Layout verwenden Sie den Drag-and-Drop-Builder von SeedProd oder den WordPress Site Editor für Block-Themes.

Wie bearbeite ich das Navigationsmenü auf einer WordPress-Website?

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung → Menüs und wählen Sie das Menü aus, das Sie bearbeiten möchten. Fügen Sie Elemente hinzu oder entfernen Sie sie, ordnen Sie sie per Drag & Drop neu an und klicken Sie auf Menü speichern. Wenn Sie ein Block-Theme verwenden, nutzen Sie den WordPress Site Editor unter Darstellung → Editor, um den Navigationsblock direkt zu bearbeiten.

Kann ich ein WordPress-Menü ohne Plugin anpassen?

Ja. WordPress verfügt über einen integrierten Menü-Editor unter Darstellung → Menüs, der ohne Plugins funktioniert. Für Block-Themes verwenden Sie den WordPress Site Editor. Um einen benutzerdefinierten Menüstandort hinzuzufügen, verwenden Sie einen kurzen PHP-Snippet mit einem Code-Plugin wie WPCode. Keine manuelle Dateibearbeitung erforderlich.

Wie füge ich ein Dropdown-Menü in WordPress hinzu?

Ziehen Sie in Darstellung → Menüs ein Menüelement leicht nach rechts unter ein übergeordnetes Element. WordPress rückt es ein und behandelt es als Dropdown. Sie können bis zu drei Ebenen tief verschachteln. Für die Kontrolle über den visuellen Stil des Dropdowns bietet der Navigationsmenü-Block von SeedProd integrierte Hover-Effekte, Farben und Layout-Optionen.

Weitere Tipps zur WordPress-Navigation

Wenn Sie die volle Designkontrolle über Ihre WordPress-Navigation wünschen, erleichtert SeedProd den Aufbau benutzerdefinierter Menüs, Header und Layouts, ohne Code anfassen zu müssen. SeedProd jetzt holen

• So bearbeiten Sie mobile Menüs in WordPress (Anfängerleitfaden)
• So fügen Sie ein WooCommerce-Warenkorbsymbol zu Menüs hinzu
• Navigation auf Landingpages ist tot: Hier ist der Grund
• So bearbeiten Sie die Navigationsleiste in WordPress Schritt für Schritt
• So erstellen Sie eine Landing Page ohne Navigation (einfache Methode)

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.