Die meisten mobilen WordPress-Menüs sehen gut aus, bis Sie sie auf Ihrem Handy überprüfen. Links sind zusammengepfercht, das Hamburger-Symbol öffnet sich nicht, oder Sie zeigen ein Desktop-Menü mit 10 Einträgen auf einem kleinen Bildschirm an.
In diesem Leitfaden zeige ich Ihnen, wie Sie das beheben. Sie lernen, wie Sie das Hamburger-Symbol aktivieren, steuern, was auf Mobilgeräten angezeigt wird, und ein separates Menü für kleine Bildschirme einrichten. Ich behandle auch die häufigsten Probleme mit mobilen Menüs.
So bearbeiten Sie das mobile Menü in WordPress
Müssen Sie ändern, welche Links in Ihrem Menü angezeigt werden? Sehen Sie hier, wie Sie Ihr WordPress-Menü bearbeiten. Möchten Sie das Design oder die Farben Ihres Menüs ändern? Sehen Sie hier, wie Sie Ihr WordPress-Menü anpassen.
Die erste Methode in diesem Leitfaden verwendet SeedProd für die vollständige visuelle Kontrolle (SeedProd Pro erforderlich). Die zweite verwendet das kostenlose Responsive Menu Plugin. Klicken Sie unten, um zu Ihrer Methode zu springen:
Mobile Menüs mit dem SeedProd Website Builder anpassen
Ich verwende SeedProd auf meiner eigenen Website, und die mobilen Sichtbarkeitssteuerungen gehören zu den Funktionen, auf die ich mich am meisten verlasse. Um loszulegen, zeige ich Ihnen, wie Sie SeedProd verwenden, um mobile Menüs visuell und ohne Code anzupassen und zu bearbeiten.
Es enthält Hunderte von vorgefertigten Vorlagen, eine Drag-and-Drop-Oberfläche und unzählige Designelemente, um die Anpassung jeder WordPress-Seite mühelos zu gestalten. Egal, ob sich Ihr Menü in Ihrer Kopfzeile, Fußzeile oder WordPress-Seitenleiste befindet, Sie können es mit dem Builder von SeedProd einfach bearbeiten.
Darüber hinaus ermöglichen die leistungsstarken Sichtbarkeitsoptionen dieses Plugins, bestimmte Designelemente auf mobilen oder Desktop-Bildschirmen auszublenden. Infolgedessen können Sie Ihre Navigationsmenüs an verschiedene Bildschirmgrößen anpassen.
Schritt 1. SeedProd installieren und aktivieren
Um zu beginnen, müssen Sie das Plugin von der Website von SeedProd herunterladen. Obwohl SeedProd eine kostenlose Version hat, werden wir SeedProd Pro für seine Theme-Builder-Funktionen von WordPress verwenden.
Hinweis: SeedProd Pro ist für den Theme Builder erforderlich. Wenn Sie das SeedProd-Theme aktivieren, ersetzt es Ihr aktuell aktives Theme. Sie können jederzeit über das Theme Builder-Dashboard zu Ihrem vorherigen Theme zurückwechseln.
Wenn Sie Hilfe benötigen, können Sie sich diesen Leitfaden zum Installieren eines WordPress-Plugins ansehen.
Nach der Aktivierung gehen Sie zu SeedProd » Einstellungen, wo Sie Ihren Plugin-Lizenzschlüssel eingeben können. Diese Informationen finden Sie im Download-Bereich Ihres SeedProd-Kontos.
Fügen Sie Ihren Schlüssel in das leere Feld ein und klicken Sie auf die Schaltfläche Schlüssel überprüfen, um Ihre Lizenz zu speichern.
Schritt 2. Wählen Sie eine vorgefertigte Vorlage
Wählen Sie als Nächstes ein vorgefertigtes Design als Ausgangspunkt. Sie können entweder mit dem Theme Builder ein komplett neues WordPress-Theme von Grund auf neu erstellen oder einzelne Seiten mit dem Landingpage-Builder erstellen.
Für diesen Leitfaden verwenden wir den Theme Builder, aber wenn Sie lieber eine Landingpage erstellen möchten, können Sie dieser Anleitung folgen, wie Sie eine Landingpage in WordPress erstellen.
Um ein vorgefertigtes Design für Ihr WordPress-Theme auszuwählen, navigieren Sie zu SeedProd » Theme Builder in Ihrem WordPress-Dashboard 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.
Scrollen Sie einfach durch die Designs, bis Sie eine Vorlage gefunden haben, die Ihnen gefällt, und klicken Sie dann auf das Häkchen-Symbol, um sie zu importieren.
Sobald Sie Ihr Website-Kit importiert haben, sehen Sie alle Vorlagenteile Ihres Themes in einer Liste wie dieser:
Dies sind die einzelnen Vorlagen, aus denen Ihr vollständiges Theme besteht, und Sie können jede davon mit dem Drag-and-Drop-Page-Builder von SeedProd anpassen.
Das zeigen wir Ihnen als Nächstes! Es ist super einfach und erfordert keine HTML-, Jquery- oder benutzerdefinierten CSS-Codes.
Schritt 3. Anpassen der Header-Vorlage
Da sich das zu bearbeitende WordPress-Menü im Header befindet, scrollen Sie durch Ihre Vorlagenteile, bis Sie die Header-Vorlage finden. Fahren Sie dann mit der Maus darüber und klicken Sie auf den Link „Design bearbeiten“.
Wenn es sich öffnet, sehen Sie ein Layout mit einer Live-Vorschau Ihres Headers auf der rechten Seite und WordPress-Blöcken auf der linken Seite. Sie können jeden Block per Drag & Drop in die Vorschau ziehen, um ganz einfach neue Elemente zu Ihrer Seite hinzuzufügen.
Wenn Sie Elemente in Ihrem Header anklicken, sehen Sie deren Einstellungen in der linken Seitenleiste. Wenn Sie beispielsweise den Logo-Block auswählen, werden Optionen zum Ändern des Logo-Bildes und seiner Größe, Ausrichtung und seines Links angezeigt.
Wenn Sie auf den Navigationsmenü-Block klicken, werden verschiedene Menüeinstellungen angezeigt.
Zum Beispiel können Sie mit dem Block zwischen „Einfach“ oder „WordPress-Menü“ wählen.
Die einfache Option ermöglicht es Ihnen, neue Menüpunkte innerhalb der Page-Builder-Oberfläche hinzuzufügen. Sie können Links zu jeder Seite, jedem Beitrag, jeder Kategorie, jedem Tag oder jeder externen Webseite hinzufügen.
Da dies ein einfacher Ansatz zum Erstellen von Menüs ist, können Sie keine Dropdown-Menüs hinzufügen, keine benutzerdefinierten Menüs auswählen, die Sie bereits erstellt haben, oder ein benutzerdefiniertes mobiles Menü zuweisen.
Sie können jedoch die Menüausrichtung, Schriftgröße, Abstände und Trennzeichen anpassen. Außerdem können Sie im Tab „Erweitert“ zwischen horizontalen und vertikalen Menüs wählen und Typografie, Hintergrundfarben, Rahmen, CSS-Klassen und mehr anpassen.
Die Option „WordPress-Menü“ hat einen anderen Ansatz. Sie können vorhandene Menüpositionen aus dem Dropdown-Menü auswählen und den Schalter für die mobile Navigation für kleine Bildschirmgrößen aktivieren.
Wenn Sie diese Einstellung aktivieren und zur mobilen Ansicht wechseln, sehen Sie, dass Ihr mobiles Menü ein Hamburger-Symbol anstelle von Standard-Menü-Links hat, was für die mobile Benutzererfahrung viel besser ist.
Es hat auch einen Link zur Standard-WordPress-Menüseite, um Ihr Menülayout zu bearbeiten. Wie das einfache Menü verfügt die Registerkarte "Erweitert" über Anpassungs- und Animationsoptionen, und im Gegensatz zum einfachen Menü können Sie Ihre Untermenü-Stylingoptionen anpassen.
Schritt 4. Bearbeiten Sie Ihre Header-Sichtbarkeitseinstellungen
Bisher wissen Sie, wie Sie Ihr Hauptmenü bearbeiten und ein Hamburger-Menü für mobile Bildschirme aktivieren. Aber was ist, wenn es Elemente in Ihrem Header 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 den Call-to-Action (CTA) Ihres Headers auf Mobilgeräten ausblenden, da er die Benutzererfahrung beeinträchtigt. In diesem Fall können Sie zum Tab "Erweiterte Einstellungen" dieses Blocks gehen und den Schalter "Auf Mobilgeräten ausblenden" im Menü "Gerätesichtbarkeit" aktivieren.
Wenn Sie eine Vorschau Ihres Headers in der mobilen Ansicht anzeigen, sehen Sie, dass er ausgegraut ist, was bedeutet, dass die Schaltfläche für mobile Besucher nicht sichtbar ist.
Passen Sie Ihre mobilen Menüoptionen weiter an, bis Sie mit dem Aussehen zufrieden sind. Klicken Sie dann auf die Schaltfläche Speichern , um Ihre Änderungen zu speichern.
Schritt 5. Passen Sie Ihr WordPress-Theme weiter an
Sobald Ihr mobiles Menü funktioniert, verwenden Sie den Builder von SeedProd, um den Rest Ihres Themes anzupassen. Sie können Ihren Footer, Ihre Homepage und jeden anderen Vorlagenteil vom selben Dashboard aus bearbeiten.
Schritt 6. Veröffentlichen Sie Ihre Änderungen
Wenn Sie bereit sind, Ihre Änderungen auf Ihrer WordPress-Website live zu schalten, gehen Sie zurück zum SeedProd Theme Builder Dashboard und suchen Sie nach dem Schalter namens "SeedProd Theme aktivieren". Schalten Sie diesen einfach auf "Ja", um Ihr SeedProd Theme zu aktivieren.
Jetzt können Sie Ihre Website besuchen und Ihr mobiles Menü in Aktion sehen.
Alternative: Mobile Menüs mit einem kostenlosen WordPress-Plugin bearbeiten
Eine weitere Möglichkeit, Ihre mobilen Menüs 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 sich auf mobilen Bildschirmen ausklappt.
Zuerst müssen Sie das WordPress-Plugin Responsive Menu herunterladen, installieren und aktivieren.
Nachdem das Plugin aktiviert ist, sehen Sie eine neue Bezeichnung namens "Responsive Menu" in Ihrer WordPress-Adminleiste. Ein Klick darauf führt Sie zur Menüseite, um ein neues responsives Menü hinzuzufügen.
Klicken Sie also auf die Schaltfläche Neues Menü erstellen . Sie sehen ein Popup mit verschiedenen Menü-Themes zur Auswahl, darunter Standard, Electric Blue, Full-Width und mehr.
Wählen Sie ein Theme aus, das Ihnen gefällt, und klicken Sie dann auf die Schaltfläche Weiter .
Sie können jetzt einen Namen für Ihr Menü eingeben, ein vorhandenes WordPress-Menü zum Anzeigen auswählen und auf die Schaltfläche Menü erstellen klicken.
Jetzt sehen Sie eine visuelle Oberfläche, auf der Sie Ihre responsiven Menüoptionen bearbeiten können. Sie können verschiedene Elemente ein- und ausblenden und die minimale und maximale Breite für mobile responsive Bildschirme ändern.
Das Responsive Menu Plugin bietet viele weitere Optionen für mobile Menüs, um das Verhalten und Aussehen Ihres Menüs zu ändern. Sie können diese 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 ein anderes Menü auf Mobilgeräten an
Mobiltelefone machen mittlerweile fast 60 % des globalen Webverkehrs aus, dennoch zeigen die meisten WordPress-Sites auf jedem Gerät dasselbe Menü an. Sie können ein kürzeres, einfacheres Menü auf Mobilgeräten anzeigen und gleichzeitig das vollständige Menü auf Desktops beibehalten.
Ich finde das sehr nützlich, wenn ein Desktop-Menü zu viele Elemente enthält, um auf einem kleinen Bildschirm gut zu funktionieren.
Option 1: Verwenden Sie den mobilen Menüstandort Ihres Themes.
Einige Themes unterstützen einen separaten Menüstandort nur für Mobilgeräte.
Gehen Sie zu Darstellung » Menüs, erstellen Sie ein vereinfachtes zweites Menü und weisen Sie es unter Menüeinstellungen » Anzeigeort dem mobilen Standort zu. Sehen Sie wie Sie Ihr WordPress-Menü bearbeiten für die vollständige Schritt-für-Schritt-Anleitung.
Option 2: Verwenden Sie die Geräte-Sichtbarkeit von SeedProd.
Öffnen Sie in SeedProd Theme Builder Ihren Header und fügen Sie zwei Navigationsmenü-Blöcke hinzu.
Stellen Sie einen so ein, dass er nur auf Desktops angezeigt wird, und einen, dass er nur auf Mobilgeräten angezeigt wird. Jeder Block kann ein anderes WordPress-Menü anzeigen, sodass Sie die Kontrolle pro Gerät unabhängig voneinander haben.
Um dies einzurichten, klicken Sie auf den Navigationsmenü-Block, gehen Sie zur Registerkarte Erweitert und verwenden Sie die Einstellung Geräte-Sichtbarkeit. Dies habe ich in Schritt 4 oben behandelt. Die Konfiguration dauert etwa zwei Minuten, sobald Ihr zweites Menü erstellt ist.
Option 3: Verwenden Sie das Responsive Menu Plugin. Das kostenlose Responsive Menu Plugin (im alternativen Verfahren oben behandelt) erstellt ein reines Mobilmenü, das nur auf kleinen Bildschirmen erscheint. Ihr vorhandenes Desktop-Menü bleibt unberührt.
Fehlerbehebung bei häufigen Problemen mit mobilen Menüs
Ich erhalte viele Fragen zu mobilen Menüs, die nicht richtig funktionieren. Hier sind die häufigsten Probleme und wie man sie behebt.
Hamburger-Symbol reagiert nicht unter iOS. Ein Caching-Plugin ist normalerweise die Ursache. Leeren Sie Ihren Cache in W3 Total Cache, WP Rocket oder einem anderen Plugin, das Sie verwenden, und testen Sie es dann erneut auf Ihrem Telefon.
Mobiles Untermenü öffnet sich nicht. Dies ist fast immer ein JavaScript-Konflikt mit Ihrem Theme. Versuchen Sie, vorübergehend zu einem Standard-WordPress-Theme zu wechseln. Wenn das Untermenü funktioniert, liegt das Problem in den JS-Dateien Ihres Themes.
Menüänderungen werden nach dem Speichern nicht angezeigt. Ihr Caching-Plugin liefert die alte Seitenversion aus. Leeren Sie den Cache und führen Sie einen Hard Refresh in Ihrem Browser durch (Strg+Umschalt+R unter Windows, Cmd+Umschalt+R auf dem Mac).
Menü bricht nach einem Theme-Update. Theme-Updates setzen manchmal die Zuweisungen von Menüstandorten zurück. Gehen Sie zu Darstellung » Menüs, öffnen Sie das Panel Menüeinstellungen und weisen Sie Ihr Menü erneut dem richtigen Anzeigeort zu.
FAQs zur Bearbeitung mobiler Menüs in WordPress
Ich hoffe, dieser Leitfaden hat Ihnen geholfen zu lernen, wie man mobile Menüs in WordPress bearbeitet. Hier sind einige andere Tutorials, die Sie ebenfalls hilfreich finden könnten, einschließlich der folgenden:
- So fügen Sie eine benutzerdefinierte Alarmmeldung zu WordPress hinzu
- Beste WordPress-Plugins: Top 25 unverzichtbare Tools
- So erstellen Sie eine Autorenseite in WordPress ohne Code
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.
