So erstellen Sie ein mobilfreundliches, responsives WordPress-Menü

Mehr als die Hälfte des gesamten Website-Traffics stammt von mobilen Geräten. Wenn Ihr Navigationsmenü auf Smartphones und Tablets nicht gut funktioniert, kann ein großer Teil Ihres Publikums Schwierigkeiten haben, sich auf Ihrer Website zurechtzufinden.

Mit jahrelanger Erfahrung im Erstellen von WordPress-Websites verstehen wir, wie wichtig es ist, Ihre Website mobilfreundlich zu gestalten. Bei WPBeginner haben wir dies immer priorisiert und sichergestellt, dass unsere Websites auf jedem Gerät einfach zu navigieren sind.

Tatsächlich haben wir ein mobil-responsives Menü entwickelt, das perfekt auf kleinere Bildschirme passt, ohne überladen zu wirken, und so die Benutzererfahrung auf Smartphones und Tablets verbessert.

In dieser Anleitung zeigen wir Ihnen, wie Sie ganz einfach ein mobilfreundliches, responsives WordPress-Menü erstellen.

Warum ein mobilfreundliches, responsives WordPress-Menü erstellen?

Ein gut gestaltetes Navigationsmenü hilft Besuchern, sich auf Ihrer Website zurechtzufinden. Nur weil Ihr Menü auf Desktop-Computern gut aussieht, heißt das nicht automatisch, dass es auch auf mobilen Bildschirmen und Tablets gut aussieht.

Mobile Nutzer machen etwa 58 % des gesamten Internetverkehrs aus. Wenn Ihr Menü auf Mobilgeräten nicht gut aussieht oder nicht richtig funktioniert, riskieren Sie, die Hälfte Ihres Publikums aufgrund einer schlechten Benutzererfahrung zu verlieren.

Dies wird es schwierig machen, wichtige Ziele zu erreichen, wie z. B. Ihre E-Mail-Liste zu vergrößern, Verkäufe zu tätigen und Ihr Geschäft auszubauen.

Nichtsdestotrotz wollen wir sehen, wie Sie ein mobilfreundliches, responsives Menü erstellen können, das auf Smartphones und Tablets gut aussieht. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu springen, die Sie verwenden möchten.

• Methode 1: Erstellen Sie ein mobilfreundliches, responsives Slide-Panel-Menü
• Methode 2: Erstellen eines mobilfreundlichen, vollflächigen, responsiven Menüs
• Bonus: Wie man ein mobil-responsives Menü zu Landing Pages hinzufügt

Methode 1: Erstellen Sie ein mobilfreundliches, responsives Slide-Panel-Menü

Ein responsives Schiebepanel ist ein Navigationsmenü, das auf dem Bildschirm erscheint, wenn ein Besucher auf einen Schalter tippt oder klickt.

Auf diese Weise ist das Menü immer leicht erreichbar, nimmt aber standardmäßig keinen Platz auf dem Bildschirm ein.

Dies ist besonders wichtig, da Smartphones und Tablets im Vergleich zu Desktop-Computern deutlich kleinere Bildschirme haben.

Wenn das Menü ständig erweitert ist, kann ein mobiler Benutzer versehentlich auf seine Links tippen, indem er den Touchscreen seines Geräts verwendet. Dies macht Schiebeelemente zu einer guten Wahl für ein mobilfreundliches Menü.

Der einfachste Weg, ein mobilfreundliches Schiebepanel hinzuzufügen, ist die Verwendung von Responsive Menu.

Zuerst müssen Sie das Responsive Menu Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie das Plugin verwenden, um jedes zuvor erstellte WordPress-Menü anzupassen. Wenn Sie ein neues Menü erstellen müssen, lesen Sie bitte unseren Anfängerleitfaden zum Thema Hinzufügen eines Navigationsmenüs in WordPress.

Wenn Ihr WordPress-Theme andererseits bereits ein integriertes mobiles Menü hat, müssen Sie die CSS-Klasse dieses Menüs kennen, um es ausblenden zu können.

Wenn Sie diesen Schritt überspringen, sehen mobile Benutzer zwei überlappende Menüs auf Ihrer Website. Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zum Ausblenden eines mobilen Menüs in WordPress.

Wenn Sie dies getan haben, gehen Sie auf der WordPress-Admin-Seitenleiste zur Seite Responsive Menu » Menüs und klicken Sie auf die Schaltfläche „Neues Menü erstellen“.

Sie sehen nun einige verschiedene mobilfreundliche Themes, die Sie für Ihr Menü verwenden können.

Wir verwenden in unseren Bildern das 'Standard-Theme', aber Sie können jedes Theme verwenden, das Sie möchten. Nachdem Sie Ihre Entscheidung getroffen haben, klicken Sie auf 'Weiter'.

Sie können jetzt einen Namen für das Menü eingeben. Dies dient nur Ihrer Information, sodass Sie alles verwenden können, was Sie möchten.

Wenn dies erledigt ist, klicken Sie auf 'WordPress-Menü verknüpfen' und wählen Sie das Menü aus, das Sie verwenden möchten.

Wie bereits erwähnt, wenn Ihr Theme bereits ein integriertes Mobilmenü hat, müssen Sie dessen CSS-Klasse in das Feld „Theme-Menü ausblenden“ einfügen.

Wenn Sie auf das Premium-Plugin upgraden, erhalten Sie einige zusätzliche Einstellungen. Zum Beispiel können Pro-Benutzer das Menü auf bestimmten Seiten oder Geräten ausblenden.

Wenn Sie mit der Einrichtung des Menüs zufrieden sind, klicken Sie auf 'Menü erstellen'.

Sie sehen nun eine Vorschau Ihrer WordPress-Website auf der rechten Seite des Bildschirms und einige Einstellungen auf der linken Seite.

Um zu sehen, wie Ihre Website auf Mobilgeräten aussieht, klicken Sie auf das Symbol für Mobilgeräte oder Tablets unten links auf dem Bildschirm.

Um anzupassen, wie das Menü auf Mobilgeräten aussieht und funktioniert, wählen Sie 'Mobiles Menü'.

Klicken Sie dann auf „Container“.

Hier finden Sie viele verschiedene Einstellungen.

Während Sie Änderungen vornehmen, wird die Live-Vorschau oft automatisch aktualisiert. In diesem Sinne ist es eine gute Idee, das Menü zu erweitern, damit Sie sehen können, wie Ihr mobiles Menü aussehen wird. Klicken Sie dazu einfach auf die Menü-Umschalttaste.

Standardmäßig fügt das Plugin einen Titel und den Text „Mehr Inhalte hinzufügen…“ hinzu.

Sie können dies durch Ihre eigene Nachricht ersetzen oder den Text sogar vollständig entfernen. Um den Titel zu bearbeiten, klicken Sie, um den Abschnitt „Titel“ zu erweitern.

Sie können nun Ihre eigene Nachricht in das Feld 'Titeltext' eingeben.

Sie können auch einen Link zum Titel hinzufügen oder Icon-Schriften und Bilder hinzufügen.

Um anzupassen, wie der Titel aussieht, klicken Sie auf die Registerkarte „Stile“.

Hier können Sie die Hintergrundfarbe, die Textfarbe, die Schriftgröße und mehr ändern.

Wenn Sie keinen Titeltext anzeigen möchten, deaktivieren Sie den Schalter neben „Titel“.

Wenn der Titel nicht wesentlich ist, schafft das Entfernen davon mehr Platz für die Links und andere Inhalte in Ihrem mobilen Navigationsmenü.

Um den Text „Weitere Inhalte hier einfügen…“ durch Ihre eigene Nachricht zu ersetzen, klicken Sie, um den Bereich „Zusätzliche Inhalte“ zu erweitern.

Sie können jetzt Ihren eigenen Text eingeben, die Textfarbe ändern, die Textausrichtung ändern und mehr, indem Sie die Einstellungen im linken Menü verwenden.

Um den Text vollständig zu löschen, klicken Sie einfach, um den Schalter zu deaktivieren.

Auch hier kann mehr Platz für den Rest des Menüinhalts geschaffen werden. Dies ist besonders nützlich auf Smartphones und Tablets, die typischerweise kleinere Bildschirme haben.

Standardmäßig zeigt Responsive Menu alle Ihre Menüpunkte als eine einzige Liste an. Sie möchten diese Links jedoch möglicherweise in mehreren Spalten anzeigen.

Dies kann gut funktionieren, wenn Ihre Menübeschriftungen kürzer sind, da Sie so mehr Elemente auf kleinerem Raum anzeigen können, ohne dass das Menü überladen wirkt.

Um verschiedene Spaltenlayouts auszuprobieren, klicken Sie, um den Abschnitt „Menü“ zu erweitern.

Sie können nun das Dropdown-Menü „Menu container columns“ öffnen und die gewünschte Anzahl von Spalten auswählen.

An dieser Stelle sehen Sie möglicherweise den Text „Update erforderlich“. Wenn Sie diese Meldung sehen, klicken Sie darauf, um die Live-Vorschau mit Ihren neuen Spalteneinstellungen zu aktualisieren.

Standardmäßig fügt das Plugin auch eine Suchleiste zu Ihrem WordPress-Menü hinzu. Dies kann Besuchern helfen, interessante Inhalte zu finden, aber auch wertvollen Platz auf dem Bildschirm beanspruchen.

Wenn Sie möchten, können Sie die Suchleiste für mobile Benutzer entfernen, indem Sie den Schalter neben 'Suchen' deaktivieren.

Es gibt viele andere Einstellungen, die Sie konfigurieren können, daher möchten Sie vielleicht einige Zeit damit verbringen, die anderen Optionen durchzusehen. Dies reicht jedoch aus, um ein gut gestaltetes, mobilfreundliches Menü zu erstellen.

Wenn Sie mit der Einrichtung des Navigationsmenüs zufrieden sind, klicken Sie auf „Aktualisieren“.

Besuchen Sie nun einfach Ihr WordPress-Blog mit einem Mobilgerät, um das neue Menü in Aktion zu sehen. Sie können auch die mobile Version Ihrer WordPress-Website von Ihrem Desktop aus anzeigen.

Methode 2: Erstellen eines mobilfreundlichen, vollflächigen, responsiven Menüs

Eine weitere Option ist, ein Vollbild-Responsive-Menü hinzuzufügen. Dies ist ein Menü, das sich automatisch an verschiedene Bildschirmgrößen anpasst, sodass das Navigationsmenü unabhängig vom verwendeten Gerät des Besuchers immer gut aussieht.

Da das Menü den gesamten verfügbaren Platz einnimmt, ist die Navigation auf Smartphones und Tablets einfacher, egal wie klein der Bildschirm ist.

Der einfachste Weg, ein Vollbildmenü zu erstellen, ist die Verwendung von FullScreen Menu. Dieses Plugin ermöglicht es Ihnen, ein Vollbildmenü nur für mobile Geräte zu erstellen, oder Sie können dasselbe Menü auf Smartphones, Tablets und Desktop-Computern anzeigen lassen, sodass alle Besucher die gleiche Erfahrung haben.

Das Erste, was Sie tun müssen, ist das FullScreen Menu Plugin zu installieren und zu aktivieren. Sie können unseren Schritt-für-Schritt-Leitfaden unter so installieren Sie ein WordPress-Plugin für weitere Details einsehen.

Besuchen Sie nach der Aktivierung die Seite Fullscreen Menu Options im WordPress-Menü und aktivieren Sie das folgende Kontrollkästchen: 'Animated Fullscreen Menu aktivieren'.

Wir empfehlen auch, das Feld 'Menü nur für Admin-Benutzer anzeigen' zu aktivieren. Dies ermöglicht es Ihnen, die Änderungen zu sehen, während Sie das Menü konfigurieren, aber Besucher sehen das mobile Menü erst, wenn Sie es live schalten.

Standardmäßig zeigt das Plugin das Vollbildmenü auf allen Geräten an. Wenn Sie das Vollbildmenü nur auf Smartphones und Tablets anzeigen möchten, aktivieren Sie das Kontrollkästchen neben 'Nur mobil'.

Danach können Sie das Erscheinungsbild des Menüs durch Klicken auf die Registerkarte „Design / Erscheinungsbild“ feinabstimmen.

Hier können Sie die Farben, Schriftarten und Animationseinstellungen für das Vollbildmenü auswählen.

Wenn Sie diese Änderungen vornehmen, beachten Sie bitte, dass „Initial Background Menu“ das Umschalt-Symbol des Menüs ist. „Opened Background Menu“ ist die Farbe des erweiterten, Vollbild-Mobilmenüs.

Nachdem Sie die Menüfarben ausgewählt haben, scrollen Sie zum Abschnitt „Menü-Erscheinungsbild“. Hier können Sie die Schriftfarbe, Schriftfamilie und Schriftgröße des Menüs ändern.

Beachten Sie jedoch, dass das Laden zusätzlicher Schriftarten die Leistung und Geschwindigkeit Ihrer WordPress-Website beeinträchtigen könnte. Dies ist nicht immer eine gute Wahl für mobile Geräte, die normalerweise weniger Rechenleistung haben als Desktop-Computer. Einige Besucher haben möglicherweise auch eine schlechte mobile Internetverbindung, was dazu führt, dass Ihre Website noch langsamer geladen wird.

Scrollen Sie dann zu „Animationseinstellungen“.

Zuerst können Sie auswählen, wie sich das Menü erweitert, wenn ein Besucher auf das Umschalt-Symbol klickt. Öffnen Sie einfach das Dropdown-Menü „Animationstyp“ und wählen Sie eine Option aus der Liste, z. B. Von oben nach unten oder Von links nach rechts.

Wenn Sie mit dem Layout des Menüs zufrieden sind, klicken Sie auf die Registerkarte „Menüinhalt“, um Inhalte hinzuzufügen.

Öffnen Sie hier das Dropdown-Menü „Menü auswählen“ und wählen Sie das Menü aus, das Sie im Vollbildmodus anzeigen möchten.

Wenn Sie noch kein Navigationsmenü erstellt haben, lesen Sie unseren Leitfaden zum Hinzufügen von Navigationsmenüs in WordPress.

Wenn Sie zusätzliche Inhalte im Menü anzeigen möchten, können Sie diese in das Feld 'Kostenloser HTML / Shortcodes' eingeben. Dies fungiert als Mini-Seiten-Editor, sodass Sie Text eingeben, die Formatierung ändern, Aufzählungszeichen und nummerierte Listen hinzufügen und vieles mehr.

Es gibt auch eine Checkbox, die einen Link zu Ihrer Datenschutzseite hinzufügt. 

Als Nächstes möchten Sie vielleicht Social-Media-Icons zu Ihrem WordPress-Menü hinzufügen. Diese Icons werden in einer Reihe am unteren Rand des Vollbildmenüs angezeigt.

Um diese Symbole hinzuzufügen, klicken Sie einfach, um das Feld „Social Icon 1“ zu erweitern.

Sie können nun einen Titel für das Symbol eingeben, z. B. ‚Facebook‘.

Klicken Sie danach auf den Pfeil neben 'Social Icon' und wählen Sie das Symbol aus, das Sie mobilen Besuchern anzeigen möchten.

Geben Sie schließlich die gewünschte Adresse in das Feld „Social URL“ ein.

Um weitere Symbole hinzuzufügen, klicken Sie einfach auf die Schaltfläche „Weiteres Symbol hinzufügen“.

Schließlich möchten Sie vielleicht eine WordPress-Suche hinzufügen, um Besuchern zu helfen, das zu finden, wonach sie suchen. Aktivieren Sie dazu einfach das Kontrollkästchen neben „Suchleiste hinzufügen“.

Standardmäßig zeigt das Plugin die Meldung „Suche nach etwas…“ an. Sie können diese jedoch durch Ihre eigene benutzerdefinierte Nachricht ersetzen, indem Sie in das Feld „Platzhalter für Suchfeld“ eingeben.

Wenn Sie beispielsweise einen WooCommerce-Shop betreiben, möchten Sie möglicherweise Text wie „Jetzt einkaufen“ oder „Nach Produkten suchen“ verwenden.

Wenn Sie mit der Konfiguration des Menüs zufrieden sind, klicken Sie auf die Schaltfläche „Änderungen speichern“.

Besuchen Sie nun einfach Ihre Website mit einem Mobilgerät, um das Vollbildmenü in Aktion zu sehen.

Sie können die mobile Version Ihrer Website auch mit dem WordPress Theme Customizer in der Vorschau anzeigen.

Bonus: Wie man ein mobil-responsives Menü zu Landing Pages hinzufügt

Wenn Sie eine Landingpage oder eine Verkaufsseite erstellen, möchten Sie, dass das Design auf Mobilgeräten genauso gut aussieht wie auf Desktops.

In diesem Sinne empfehlen wir, die Seite mit SeedProd zu erstellen. Es ist der beste WordPress-Seitenersteller und wird mit über 300 professionell gestalteten Vorlagen geliefert.

Nach der Erstellung eines Designs mit SeedProd können Sie der Seite ein mobilfreundliches Menü mit dem vorgefertigten Navigationsmenü-Block von SeedProd hinzufügen. Dieser Block ermöglicht es Ihnen, separate Menüs sowohl für mobile Geräte als auch für Desktops zu erstellen.

Auf diese Weise können Sie ein anderes Layout verwenden und je nach Gerät des Benutzers sogar unterschiedliche Links anzeigen.

Weitere Informationen finden Sie in unserem Leitfaden zum Hinzufügen benutzerdefinierter Navigationsmenüs in WordPress.

Nachdem Sie den Navigationsblock zu Ihrem Design hinzugefügt haben, klicken Sie einfach auf die Registerkarte „Erweitert“.

Klicken Sie hier, um den Abschnitt „Gerätesichtbarkeit“ zu erweitern.

Klicken Sie danach auf den Schalter „Auf Desktop ausblenden“, um ihn zu aktivieren. Dieses Menü wird nun nur noch auf Mobilgeräten angezeigt.

Sie können jetzt Links hinzufügen und das Layout des Menüs mit den Einstellungen im linken Menü ändern.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein mobilfreundliches, responsives WordPress-Menü erstellen. Möglicherweise möchten Sie auch unseren Leitfaden für Anfänger zum Thema Hinzufügen einer Schriftgrößenänderung in WordPress und unsere Expertentipps zum Thema Möglichkeiten zur Erstellung einer mobilfreundlichen WordPress-Website ansehen.

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.