Nachdem du ein Menü erstellt und Links hinzugefügt hast, möchtest du vielleicht das Erscheinungsbild des Menüs anpassen. In diesem Ratgeber werden häufige Änderungen beschrieben, die du am Design deines Menüs vornehmen kannst.
Bei Website-Editor-Themes kannst du das Menüdesign über den Editor unter Design in deinem Dashboard vollständig anpassen. Classic-Themes bieten im Customizer unter Design in deinem Dashboard nur eingeschränkte Optionen für das Menüdesign.
Um herauszufinden, welchem Abschnitt dieses Ratgebers du folgen solltest, öffne dein WordPress.com-Dashboard und sieh unter Design auf der linken Seite nach. Wenn dort Editor angezeigt wird, folge dem Abschnitt Website-Editor in diesem Ratgeber. Andernfalls verwende die Customizer-Anleitung.
Wenn dein Theme den Website-Editor verwendet (dir also Design → Editor im Dashboard angezeigt wird), kannst du das Menüdesign über die Einstellungen des Navigationsblocks mit den folgenden Schritten steuern:
- Navigiere in deinem Website-Dashboard zu Design → Editor.
- Wähle Vorlagen aus und öffne ein Template, das dein Menü enthält, zum Beispiel „Startseite“ oder „Homepage“.
- Öffne die Listenansicht links oben auf deinem Bildschirm (das ist das Icon, das aus drei waagerechten Linien übereinander besteht).
- Wähle den Navigationsblock in der Listenansicht aus.
- Wenn kein Navigationsblock angezeigt wird, kannst du einen erstellen.
- Sieh dir rechts auf dem Bildschirm die Einstellungen des Navigationsblocks an.
- Passe die Stile des Navigationsblocks über das Einstellungs-Icon oder das Stile-Icon an.
- Klicke auf den Button „Speichern“, um die Änderungen zu speichern.
Erfahre in unserem Ratgeber zu den Einstellungen des Navigationsblocks, wie du die einzelnen Einstellungen verwendest, unter anderem:
- Stile des Navigationsblocks, wie Farbe, Typografie und Abmessungen.
- Layout-Einstellungen des Navigationsblocks, wie Ausrichtung, Orientierung und Menüanzeige.
Dieses Video zeigt, wie du auf den Navigationsblock zugreifst und Einstellungen sowie Stile änderst. Diese Funktion ist in unseren vollständig anpassbaren Website-Editor-Themes verfügbar. Du kannst das Video über die Steuerelemente in der unteren rechten Ecke verlangsamen oder beschleunigen, nachdem du auf den Wiedergabe-Button geklickt hast.
Dieser Abschnitt gilt für Websites, die mit dem KI-Website-Builder erstellt wurden (alle kostenpflichtigen Tarife), oder für Websites, auf denen der WordPress-Agent aktiviert wurde (alle kostenpflichtigen Tarife). Öffne den WordPress-Agenten, indem du auf das KI-Icon (ein vierspitziger Stern) am unteren Bildschirmrand klickst.
Der WordPress-Agent kann das Erscheinungsbild und Verhalten deines Menüs direkt anpassen. Hier sind einige Beispiele, worum du ihn bitten kannst:
- „Ändere die Farbe meines Navigationsmenüs passend zu meiner Marke.“
- „Stelle meine Dropdown-Menüs so ein, dass sie sich bei Klick statt bei Hover öffnen.“
- „Zeige mein Menü auf allen Bildschirmgrößen als Hamburger-Menü an.“
- „Füge dem Menüeintrag ‚Kontakt‘ eine CSS-Klasse namens ‚featured-link‘ hinzu.“
In allen Website-Editor-Themes kannst du die Position des Menüs ändern. Website-Editor-Themes verwenden den Editor unter Design, um dir die volle Kontrolle über das Layout zu geben – einschließlich der Menüposition deiner Website.
Auch wenn die Position des Menüs in einem Website-Editor-Theme vollständig anpassbar ist, kann es hilfreich sein, zunächst nach einem Theme zu suchen, das das Menü an einer für dich passenden Stelle anzeigt. Weitere Informationen findest du in unserem Ratgeber zum Wechseln von Themes.
Wenn du bereits ein Website-Editor-Theme ausgewählt hast und die Position des Menüs ändern möchtest, hast du folgende Möglichkeiten:
- Erfahre, wie du den Navigationsblock auswählst und verschiebst, oder springe direkt zum Video-Tutorial.
- Füge deinem Template ein neues Menü hinzu.
- Füge einer einzelnen Seite oder einem Beitrag mit dem Seitenlisten-Block eine Seitenliste hinzu.
- Füge innerhalb einer Seite oder eines Beitrags eine Navigation mit dem Inhaltsverzeichnis-Block hinzu.
Wenn du ein Theme verwendest, das den Editor unter Design in deinem Dashboard nicht nutzt, wirf einen Blick auf unsere vollständig anpassbaren Website-Editor-Themes.
Auf Desktop-Bildschirmen wird ein Menü normalerweise als Liste von Textlinks in einer einzelnen Zeile angezeigt. Auf kleineren Bildschirmen (Tablets und Mobilgeräten) ist möglicherweise nicht genügend Platz, um alle Textlinks so anzuzeigen, dass Besucher problemlos darauf tippen können.
Stattdessen werden die Menüeinträge häufig hinter einem Button ausgeblendet, der als „Overlay“- oder „Hamburger“-Menü bezeichnet wird (der Name kommt daher, dass die drei horizontalen Linien einem Hamburger ähneln).
In den Einstellungen des Navigationsblocks im Website-Editor kannst du die Anzeige des Overlay-Menüs anpassen. Gehe wie folgt vor, um die Anzeige des Overlay-Menüs anzupassen:
- Navigiere in deinem Dashboard zu Design → Editor.
- Wähle Vorlagen aus und öffne ein Template, das dein Menü enthält, zum Beispiel Startseite oder Homepage.
- Rufe links oben auf deinem Bildschirm die Listenansicht auf (das ist das Icon, das aus drei waagerechten Linien übereinander besteht).
- Wähle in der Listenansicht den Navigationsblock aus.
- Sieh dir rechts auf dem Bildschirm die Einstellungen des Navigationsblocks an.
- Klicke auf das Einstellungs-Icon (das Zahnrad-Icon).
- Wähle unter Anzeige deine Overlay-Menü-Einstellungen:
- Mobil: Die Standardeinstellung. Das Overlay-Menü wird nur auf Bildschirmen in Mobilgerätgröße angezeigt.
- Aus: Es wird kein Overlay-Menü angezeigt.
- Immer: Das Overlay-Menü wird immer angezeigt, unabhängig von der Bildschirmgröße.
- Mit dem Overlay-Template kannst du das Design des Vollbild-Overlays anpassen, das auf Mobilgeräten angezeigt wird. Lies unseren Ratgeber zum Anpassen des Navigations-Overlays.
- Klicke auf den Button „Speichern“, um die Änderungen zu speichern.
Nutzer sind auf Mobilgeräten an ein Icon oder Hamburger-Menü gewöhnt. Wenn du das Desktop-Menü anzeigst, also das Overlay-Menü deaktivierst, kann es für deine Besucher schwierig werden, auf Mobilgeräten durch deine Website zu navigieren.
Im Ratgeber zum Navigationsblock erfährst du, wie du alle Funktionen des Blocks nutzen kannst.
Classic-Themes und Drittanbieter-Themes verwenden möglicherweise eigene Standardeinstellungen für die Anzeige des Menüs auf Mobilgeräten. Sieh in der Dokumentation des von dir gewählten Themes nach, um mehr zu erfahren.
Du kannst steuern, ob ein Dropdown-Menü geöffnet wird, wenn ein Besucher mit der Maus über einen Menüeintrag fährt, darauf klickt oder ob es dauerhaft sichtbar bleibt.
Gehe wie folgt vor, um die Sichtbarkeit von Untermenüs festzulegen:
- Navigiere in deinem Dashboard zu Design → Editor.
- Wähle Vorlagen aus und öffne ein Template, das dein Menü enthält, zum Beispiel Startseite oder Homepage.
- Rufe links oben auf deinem Bildschirm die Listenansicht auf.
- Wähle deinen Navigationsblock aus.
- Klicke in der Seitenleiste mit den Blockeinstellungen auf das Einstellungs-Icon (das Zahnrad-Icon).
- Suche unter Anzeige die Einstellung „Sichtbarkeit von Untermenüs“ und wähle eine der folgenden Optionen:
- Hover: Das Dropdown-Menü öffnet sich, wenn ein Besucher mit der Maus über den übergeordneten Menüeintrag fährt. Optional kannst du die Einstellung zum Anzeigen eines Pfeils neben dem Menü deaktivieren.
- Klick: Das Dropdown-Menü öffnet sich, wenn ein Besucher auf den übergeordneten Menüeintrag klickt.
- Klicke auf den Button „Speichern“, um die Änderungen zu speichern.
Dieser Abschnitt des Ratgebers gilt für Websites mit unseren WordPress.com-Tarifen Personal, Premium, Business und Commerce. Für kostenlose Websites kannst du deinen Tarif upgraden, um auf diese Funktion zuzugreifen.
CSS-Klassen sind eine erweiterte Menüeigenschaft, mit der du eine CSS-Klasse auf individuelle Menüeinträge anwenden kannst.
Um herauszufinden, welchem Abschnitt dieses Ratgebers du folgen solltest, rufe dein WordPress.com-Dashboard auf und sieh links unter Design nach. Wenn du Editor siehst, verwende den Abschnitt Block-Themes dieses Ratgebers. Andernfalls verwende die Anleitung für Classic-Themes.
Um eine CSS-Klasse im Website-Editor hinzuzufügen, gehe wie folgt vor:
- Navigiere in deinem Dashboard zu Design → Editor.
- Wähle Vorlagen aus und öffne ein Template, das dein Menü enthält, zum Beispiel Startseite oder Homepage.
- Rufe links oben auf deinem Bildschirm die Listenansicht auf (das ist das Icon, das aus drei waagerechten Linien übereinander besteht).
- Wähle in der Listenansicht den Navigationsblock aus.
- Wenn du keinen Navigationsblock siehst, kannst du einen erstellen.
- Sieh dir rechts auf dem Bildschirm die Einstellungen des Navigationsblocks an.
- Klicke auf das Einstellungs-Icon (Zahnrad) ⚙️ und öffne den Abschnitt „Erweitert“.
- Füge deine CSS-Klasse hinzu.
Du kannst auch eine CSS-Klasse für einzelne Links im Navigationsblock festlegen. Wähle den einzelnen Link aus, bevor du den Abschnitt „Erweitert“ aufrufst.
Im Ratgeber zum Navigationsblock erfährst du alles über die Funktionen des Blocks.
Erfahre mehr über das Hinzufügen von individuellem CSS.
Support 