Die meisten mobilen Menüs in WordPress sehen gut aus, bis man sie auf dem Handy überprüft. Die Links sind zu eng beieinander, das Hamburger-Symbol lässt sich nicht öffnen oder es wird ein Desktop-Menü mit zehn Einträgen auf einem kleinen Bildschirm angezeigt.
In dieser Anleitung zeige ich Ihnen, wie Sie das beheben können. Sie erfahren, wie Sie das Hamburger-Symbol aktivieren, steuern, was auf Mobilgeräten angezeigt wird, und ein separates Menü für kleine Bildschirme einrichten. Außerdem gehe ich auf die häufigsten Probleme mit mobilen Menüs ein.
Wie man das mobile Menü in WordPress bearbeitet
Möchten Sie ändern, welche Links in Ihrem Menü angezeigt werden? Erfahren Sie, wie Sie Ihr WordPress-Menü bearbeiten können. Möchten Sie das Design oder die Farben Ihres Menüs ändern? Erfahren Sie, wie Sie Ihr WordPress-Menü anpassen können.
Die erste Methode in dieser Anleitung nutzt SeedProd für eine vollständige visuelle Kontrolle (SeedProd Pro erforderlich). Die zweite Methode nutzt das kostenlose Plugin „Responsive Menu“. Klicken Sie unten, um zu Ihrer Methode zu springen:
Mobile Menüs mit dem SeedProd Website Builder anpassen
Ich nutze SeedProd auf meiner eigenen Website, und die Einstellungen für die Darstellung auf Mobilgeräten gehören zu den Funktionen, auf die ich mich am meisten verlasse. Zu Beginn zeige ich euch, wie ihr mit SeedProd mobile Menüs visuell und ohne Programmierkenntnisse anpassen und bearbeiten könnt.
Es enthält Hunderte von vorgefertigten Vorlagen, eine Drag-and-Drop-Schnittstelle und unzählige Designelemente, mit denen Sie jede WordPress-Seite mühelos anpassen können. Egal, ob sich Ihr Menü in der Kopfzeile, der Fußzeile oder der WordPress-Seitenleiste befindet, Sie können es mit dem SeedProd-Builder einfach bearbeiten.
Außerdem können Sie mit den leistungsstarken Sichtbarkeitsoptionen dieses Plugins bestimmte Designelemente auf mobilen oder Desktop-Bildschirmen ausblenden. Auf diese Weise können Sie Ihre Navigationsmenüs an unterschiedliche Bildschirmgrößen anpassen.
Schritt 1. Installieren und Aktivieren von SeedProd
Um loszulegen, müssen Sie das Plugin von der SeedProd-Website herunterladen. Obwohl es eine kostenlose Version von SeedProd gibt, werden wir SeedProd Pro wegen seiner Funktionen zur Erstellung von WordPress-Themen verwenden.
Hinweis: Für den Theme Builder ist SeedProd Pro erforderlich. Wenn Sie das SeedProd-Theme aktivieren, ersetzt es Ihr derzeit aktives Theme. Sie können jederzeit über das Theme Builder-Dashboard wieder zum vorherigen Theme zurückwechseln.
Wenn Sie Hilfe benötigen, können Sie diese Anleitung zur Installation eines WordPress-Plugins lesen.
Nach der Aktivierung gehen Sie zu SeedProd " Einstellungen, wo Sie Ihren Plugin-Lizenzschlüssel eingeben können. Sie finden diese Informationen im Abschnitt "Downloads" in Ihrem SeedProd-Konto-Dashboard.
Fügen Sie Ihren Schlüssel in das leere Feld ein und klicken Sie auf die Schaltfläche Schlüssel prüfen, um Ihre Lizenz zu speichern.
Schritt 2. Wählen Sie eine vorgefertigte Vorlage
Als Nächstes müssen Sie sich für ein vorgefertigtes Design entscheiden, das Sie als Ausgangspunkt verwenden möchten. Sie können entweder ein ganz neues WordPress-Theme von Grund auf mit dem Theme Builder erstellen oder einzelne Seiten mit dem Landing Page Builder erstellen.
Für diese Anleitung werden wir den Theme Builder verwenden. Wenn Sie jedoch lieber eine Landing Page erstellen möchten, können Sie diese Anleitung zum Erstellen einer Landing Page in WordPress befolgen.
Um ein vorgefertigtes Design für Ihr WordPress-Theme auszuwählen, navigieren Sie in Ihrem WordPress-Dashboard zu SeedProd " Theme Builder und klicken Sie auf die Schaltfläche Theme Template Kits.
Dies öffnet die Bibliothek von SeedProd mit vorgefertigten Website-Vorlagen, die Sie mit einem Klick installieren können.
Blättern Sie einfach durch die Designs, bis Sie eine Vorlage finden, die Ihnen gefällt, und klicken Sie dann auf das Häkchen, um sie zu importieren.
Sobald Sie Ihr Website-Kit importiert haben, sehen Sie alle Vorlagenteile Ihres Themas in einer Liste wie dieser:
Dies sind die einzelnen Vorlagen, aus denen Ihr komplettes Thema besteht, und Sie können jede von ihnen mit dem Drag-and-Drop-Seiten-Builder von SeedProd anpassen.
Wir zeigen Ihnen als Nächstes, wie Sie das machen können! Es ist supereinfach und erfordert kein Schreiben von HTML, Jquery oder benutzerdefiniertem CSS-Code.
Schritt 3. Anpassen der Kopfzeilenvorlage
Da sich das WordPress-Menü, das wir bearbeiten möchten, in der Kopfzeile befindet, scrollen Sie durch Ihre Vorlagenteile, bis Sie die Kopfzeilenvorlage finden. Bewegen Sie dann den Mauszeiger darüber und klicken Sie auf den Link „Design bearbeiten“.
Wenn es sich öffnet, sehen Sie ein Layout mit einer Live-Vorschau Ihrer Kopfzeile auf der rechten Seite und WordPress-Blöcken auf der linken Seite. Sie können jeden Block in die Vorschau ziehen, um Ihrer Seite ganz einfach neue Elemente hinzuzufügen.
Wenn Sie auf ein Element in Ihrer Kopfzeile klicken, können Sie dessen Einstellungen in der linken Seitenleiste sehen. Wenn Sie z. B. das Logo auswählen, werden Optionen zum Ändern des Logobildes, seiner Größe, Ausrichtung und Verknüpfung angezeigt.
In ähnlicher Weise zeigt ein Klick auf den Block Nav Menu verschiedene Menüeinstellungen an.
So können Sie beispielsweise zwischen einem "einfachen" und einem "WordPress-Menü" wählen.
Mit der Option "Einfach" können Sie neue Menüelemente innerhalb der Seitenerstellungsoberfläche hinzufügen. Sie können Links zu jeder Seite, jedem Beitrag, jeder Kategorie, jedem Tag oder jeder externen Webseite hinzufügen.
Da es sich um einen einfachen Ansatz zur Menüerstellung handelt, können Sie keine Dropdown-Menüs hinzufügen, bereits erstellte Menüs auswählen oder ein benutzerdefiniertes mobiles Menü zuweisen.
Sie können jedoch die Menüausrichtung, die Schriftgröße, den Abstand und die Trennlinie anpassen. Außerdem können Sie auf der Registerkarte "Erweitert" zwischen horizontalen und vertikalen Menüs wählen und die Typografie, Hintergrundfarben, Rahmen, CSS-Klassen und mehr anpassen.
Die WordPress-Menü-Option hat einen anderen Ansatz. Sie können vorhandene Menüpositionen aus der Dropdown-Liste auswählen und das Umschaltmenü für die mobile Navigation für kleine Bildschirmgrößen aktivieren.
Wenn Sie diese Einstellung aktivieren und zur mobilen Ansicht wechseln, werden Sie sehen, dass Ihr mobiles Menü ein Hamburger-Symbol anstelle der Standard-Menü-Links hat, was für die mobile Benutzererfahrung viel besser ist.
Es enthält auch einen Link zur Standard-WordPress-Menüseite, um Ihr Menü-Layout zu bearbeiten. Wie das einfache Menü bietet auch die Registerkarte "Erweitert" Anpassungs- und Animationsoptionen, und im Gegensatz zum einfachen Menü können Sie die Gestaltungsoptionen für Ihre Untermenüs anpassen.
Schritt 4. Bearbeiten Sie die Einstellungen für die Sichtbarkeit der Kopfzeile
Bis jetzt wissen Sie, wie Sie Ihr Hauptmenü bearbeiten und ein Hamburger-Menü für mobile Bildschirme aktivieren können. Was aber, wenn es in Ihrer Kopfzeile Elemente gibt, die Sie auf kleineren Bildschirmen nicht anzeigen möchten?
Die gute Nachricht ist, dass Sie die Sichtbarkeitseinstellungen für jedes Seitenelement bearbeiten und auswählen können, was auf verschiedenen Bildschirmgrößen angezeigt wird.
Nehmen wir an, Sie möchten die Aufforderung zum Handeln (CTA) in Ihrer Kopfzeile auf mobilen Geräten ausblenden, weil sie die Benutzerfreundlichkeit beeinträchtigt. In diesem Fall können Sie die Registerkarte "Erweiterte Einstellungen" dieses Blocks aufrufen und im Menü "Gerätesichtbarkeit" die Option "Auf Mobilgeräten ausblenden" aktivieren.
Wenn Sie eine Vorschau Ihrer Kopfzeile in der mobilen Ansicht anzeigen, sehen Sie, dass sie ausgegraut ist, was bedeutet, dass die Schaltfläche für mobile Besucher nicht sichtbar ist.
Fahren Sie mit der Anpassung der Optionen für Ihr mobiles Menü fort, bis Sie mit dem Aussehen zufrieden sind. Klicken Sie dann auf die Schaltfläche Speichern, um Ihre Änderungen zu speichern.
Schritt 5. Setzen Sie die Anpassung Ihres WordPress-Themes fort
Sobald Ihr mobiles Menü funktioniert, können Sie den Rest Ihres Themes mit dem Builder von SeedProd anpassen. Über dasselbe Dashboard können Sie Ihre Fußzeile, die Startseite und alle anderen Vorlagenelemente bearbeiten.
Schritt 6. Veröffentlichen Sie Ihre Änderungen
Wenn Sie bereit sind, Ihre Änderungen auf Ihrer WordPress-Website live zu schalten, kehren Sie zum SeedProd-Theme-Builder-Dashboard zurück und suchen Sie nach dem Kippschalter "SeedProd-Theme aktivieren". Schalten Sie diesen Schalter einfach auf die Position "Ja", um Ihr SeedProd-Theme zu aktivieren.
Jetzt können Sie Ihre Website besuchen und Ihr mobiles Menü in Aktion sehen.
Alternative: Bearbeiten Sie mobile Menüs mit einem kostenlosen WordPress-Plugin
Eine weitere Möglichkeit, Ihre Menüs für Mobilgeräte zu bearbeiten, ist die Verwendung eines WordPress-Menü-Plugins. Mit dem Plugin, das wir als Nächstes verwenden werden, können Sie beispielsweise ein Hamburger-Menü erstellen, das auf Mobilgeräten ausgeklappt wird.
Zunächst müssen Sie das Responsive Menu WordPress-Plugin herunterladen, installieren und aktivieren.
Sobald das Plugin aktiviert ist, sehen Sie in Ihrer WordPress-Verwaltungsleiste ein neues Label namens "Responsive Menu". Wenn Sie darauf klicken, gelangen Sie zum Menübildschirm, um ein neues responsives Menü hinzuzufügen.
Klicken Sie also einfach auf die Schaltfläche Neues Menü erstellen. Es wird ein Popup-Fenster mit verschiedenen Menüthemen angezeigt , aus denen Sie wählen können, darunter Standard, Electric Blue, Full-Width und weitere.
Wählen Sie ein Thema, das Ihnen gefällt, und klicken Sie dann auf die Schaltfläche Weiter.
Sie können nun einen Namen für Ihr Menü eingeben, ein vorhandenes WordPress-Menü zur Anzeige auswählen und auf die Schaltfläche Menü erstellen klicken.
Jetzt sehen Sie eine visuelle Schnittstelle, auf der Sie Ihre responsiven Menüoptionen bearbeiten können. Sie können verschiedene Elemente ein- und ausblenden und die Mindest- und Höchstbreite für die mobile Darstellung ändern.
Das responsive Menü-Plugin bietet viele weitere Optionen für mobile Menüs, mit denen Sie das Verhalten und Aussehen Ihres Menüs ändern können. Sie können sie auf dieser Seite erkunden und nach Bedarf anpassen.
Vergessen Sie nicht, auf die Schaltfläche "Aktualisieren" zu klicken, um Ihre Einstellungen zu speichern.
Von dort aus können Sie Ihre Website besuchen, um das responsive Menü in Aktion zu sehen.
So zeigen Sie auf Mobilgeräten ein anderes Menü an
Fast 60 % des weltweiten Webverkehrs entfallen mittlerweile auf Mobilgeräte, doch die meisten WordPress-Seiten zeigen auf jedem Gerät dasselbe Menü an. Sie können auf Mobilgeräten ein kürzeres, übersichtlicheres Menü anzeigen, während Sie auf dem Desktop das vollständige Menü beibehalten.
Ich finde das sehr praktisch, wenn ein Desktop-Menü zu viele Einträge enthält, um auf einem kleinen Bildschirm zu funktionieren.
Option 1: Verwenden Sie die Position des mobilen Menüs Ihres Themes.
Einige Designs bieten eine eigene Menüposition speziell für Mobilgeräte.
Gehen Sie zu „Darstellung“ » „Menüs“, erstellen Sie ein vereinfachtes zweites Menü und weisen Sie es unter „Menüeinstellungen“ » „Anzeigeposition“ der mobilen Ansicht zu. Eine vollständige Schritt-für-Schritt-Anleitung finden Sie unter „So bearbeiten Sie Ihr WordPress-Menü “.
Option 2: Nutzen Sie die Gerätesichtbarkeit von SeedProd.
Öffne im SeedProd Theme Builder deine Kopfzeile und füge zwei Navigationsmenü-Blöcke hinzu.
Stellen Sie einen so ein, dass er nur auf dem Desktop angezeigt wird, und einen so, dass er nur auf Mobilgeräten angezeigt wird. Jeder Block kann ein anderes WordPress-Menü anzeigen, sodass Sie die Steuerung für jedes Gerät separat vornehmen können.
Um dies einzurichten, klicken Sie auf den Block „Navigationsmenü“, wechseln Sie zur Registerkarte „Erweitert “ und nutzen Sie die Einstellung „Gerätesichtbarkeit “. Ich habe dies oben in Schritt 4 behandelt. Die Konfiguration dauert etwa zwei Minuten, sobald Ihr zweites Menü erstellt ist.
Option 3: Verwenden Sie das Plugin „Responsive Menu“. Das kostenlose Plugin „Responsive Menu“ (das oben unter „Alternative Methode“ beschrieben wurde) erstellt ein Menü, das ausschließlich auf Mobilgeräten angezeigt wird und nur auf kleinen Bildschirmen erscheint. Ihr bestehendes Desktop-Menü bleibt davon unberührt.
Fehlerbehebung bei häufigen Problemen mit dem mobilen Menü
Ich bekomme viele Fragen zu mobilen Menüs, die nicht richtig funktionieren. Hier sind die häufigsten Probleme und wie man sie behebt.
Das Hamburger-Symbol reagiert unter iOS nicht. Meistens liegt das an einem Caching-Plugin. Leeren Sie den Cache in W3 Total Cache, WP Rocket oder dem von Ihnen verwendeten Plugin und testen Sie es anschließend erneut auf Ihrem Smartphone.
Das mobile Untermenü lässt sich nicht öffnen. Dies ist fast immer auf einen JavaScript-Konflikt mit deinem Theme zurückzuführen. Versuche vorübergehend zu einem Standard-WordPress-Theme zu wechseln. Wenn das Untermenü dann funktioniert, liegt das Problem in den JS-Dateien deines Themes.
Änderungen am Menü werden nach dem Speichern nicht angezeigt. Dein Caching-Plugin liefert die alte Version der Seite aus. Leere den Cache und führe in deinem Browser einen Hard-Refresh durch (Strg+Umschalt+R unter Windows, Cmd+Umschalt+R auf dem Mac).
Das Menü funktioniert nach einem Theme-Update nicht mehr. Bei Theme-Updates werden die Zuweisungen der Menüpositionen manchmal zurückgesetzt. Gehen Sie zu „Darstellung“ » „Menüs“, öffnen Sie den Bereich „Menüeinstellungen“ und weisen Sie Ihr Menü erneut der richtigen Anzeigeposition zu.
FAQs zur Bearbeitung von mobilen Menüs in WordPress
Ich hoffe, diese Anleitung hat Ihnen geholfen zu lernen, wie man mobile Menüs in WordPress bearbeitet. Hier sind ein paar andere Tutorials, die Sie vielleicht auch hilfreich finden, darunter die folgenden:
- Hinzufügen einer benutzerdefinierten Warnmeldung zu WordPress
- Beste WordPress-Plugins: Top 25 Must-Have Tools
- Wie man eine Autorenseite in WordPress ohne Programmierkenntnisse erstellt
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
