Wie man ein mobilfähiges, responsives WordPress-Menü erstellt

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

Mit jahrelanger Erfahrung in der Erstellung von WordPress Websites wissen wir, wie wichtig es ist, Ihre Website responsiv zu gestalten. Bei WPBeginner haben wir dies immer priorisiert und sichergestellt, dass unsere Websites auf jedem Gerät leicht zu navigieren sind.

Wir haben ein responsives Menü entwickelt, das sich perfekt an kleinere Ansichten anpasst, ohne überladen zu wirken, und so die Benutzerfreundlichkeit auf Smartphones und Tablets verbessert.

In dieser Anleitung zeigen wir Ihnen, wie Sie ganz einfach ein mobilfähiges, responsives WordPress-Menü erstellen können.

Warum ein mobilfähiges, responsives WordPress-Menü erstellen?

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

Mobile Nutzer machen etwa 58 % des gesamten Internetverkehrs aus. Das heißt, wenn Ihr Menü auf mobilen Geräten nicht gut aussieht oder nicht richtig funktioniert, riskieren Sie, die Hälfte Ihres Publikums aufgrund einer schlechten Nutzererfahrung zu verlieren.

Dadurch wird es schwierig, wichtige Ziele zu erreichen, wie z. B. die Vergrößerung Ihrer E-Mail-Liste, die Erzielung von Verkäufen und das Wachstum Ihres Unternehmens.

Sehen wir uns also an, wie Sie ein mobilfähiges responsives Menü erstellen können, das auf Smartphones und Tablets gut aussieht. Verwenden Sie einfach die unten stehenden Links, um direkt zur gewünschten Methode zu springen.

Methode 1: Erstellen Sie ein mobilfähiges, responsives Schiebeleistenmenü

Ein responsives Schiebepanel ist ein Navigationsmenü, das sich auf dem Bildschirm verschiebt, wenn ein Besucher auf einen Kippschalter tippt oder klickt.

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

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

Wenn das Menü ständig erweitert wird, kann es passieren, dass ein mobiler Nutzer die Links versehentlich über den Touchscreen seines Geräts auslöst. Daher sind Schiebepaneele eine gute Wahl für ein mobiles, responsives Menü.

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

Zunächst müssen Sie das Responsive Menu-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie das Plugin verwenden, um jedes WordPress-Menü, das Sie zuvor erstellt haben, anzupassen. Wenn Sie ein neues Menü erstellen müssen, lesen Sie bitte unsere Anleitung für Anfänger, wie man ein Navigationsmenü in WordPress hinzufügt.

Wenn Ihr WordPress-Theme jedoch bereits über ein integriertes mobiles Menü verfügt, müssen Sie die CSS-Klasse dieses Menüs kennen, damit Sie es ausblenden können.

Wenn Sie diesen Schritt überspringen, sehen mobile Nutzer zwei sich überlappende Menüs auf Ihrer Website. Eine schrittweise Anleitung finden Sie in unserem Leitfaden zum Ausblenden eines mobilen Menüs in WordPress.

Gehen Sie anschließend auf die Seite Responsive Menu “ Menüs in der WordPress-Admin-Seitenleiste und klicken Sie auf die Schaltfläche „Neues Menü erstellen“.

Sie sehen nun einige verschiedene mobile responsive Designs, die Sie für Ihr Menü verwenden können.

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

Sie können nun einen Namen für das Menü eingeben. Dieser dient nur als Referenz, Sie können also jeden beliebigen Namen verwenden.

Klicken Sie anschließend auf „Link WordPress Menu“ und wählen Sie das gewünschte Menü aus.

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

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

Wenn Sie mit der Gestaltung des Menüs zufrieden sind, klicken Sie auf „Menü erstellen“.

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

Um zu sehen, wie Ihre Website auf dem Handy aussieht, klicken Sie entweder auf das Handy- oder das Tablet-Symbol unten links auf dem Bildschirm.

Um das Aussehen und die Funktionsweise des Menüs auf mobilen Geräten anzupassen, wählen Sie „Mobiles Menü“.

Klicken Sie dann auf „Container“.

Hier finden Sie viele verschiedene Einstellungen.

Wenn Sie Änderungen vornehmen, wird die Live-Vorschau oft automatisch aktualisiert. Deshalb 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 Schaltfläche zum Umschalten des Menüs.

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

Sie können diesen durch Ihre eigene Nachricht ersetzen oder den Text sogar ganz entfernen. Um den Titel zu bearbeiten, klicken Sie auf , um den Abschnitt „Titel“ zu erweitern.

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

Sie können auch einen Link in den Titel einfügen oder Schriften und Bilder als Symbole hinzufügen.

Um das Aussehen des Titels anzupassen, klicken Sie auf die Registerkarte „Stile“.

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

Wenn Sie keinen Titeltext anzeigen lassen möchten, deaktivieren Sie das Kästchen neben „Titel“.

Wenn der Titel nicht unbedingt notwendig ist, kann er entfernt werden, um mehr Platz für die Links und andere Inhalte in Ihrem mobilen Navigationsmenü zu schaffen.

Wenn Sie den Text „Weitere Inhalte hier hinzufügen….“ durch Ihre eigene Nachricht ersetzen möchten, klicken Sie auf den Bereich „Zusätzliche Inhalte“, um ihn zu erweitern.

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

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

Auch hierdurch kann mehr Platz für den restlichen Inhalt des Menüs geschaffen werden. Dies ist besonders nützlich auf Smartphones und Tablets, die in der Regel kleinere Bildschirme haben.

Standardmäßig zeigt Responsive Menu alle Ihre Menüelemente in einer einzigen Liste an. Sie können es jedoch vorziehen, diese Links in mehreren Spalten anzuzeigen.

Dies kann gut funktionieren, wenn Ihre Menübeschriftungen kürzer sind, da Sie auf diese Weise mehr Einträge auf kleinerem Raum zeigen können, ohne dass das Menü unübersichtlich wirkt.

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

Sie können nun die Dropdown-Liste „Spalten des Menü-Containers“ öffnen und die Anzahl der gewünschten Spalten auswählen.

An dieser Stelle wird möglicherweise der Text „Aktualisierung erforderlich“ angezeigt. 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, nimmt aber auch wertvollen Platz auf dem Bildschirm ein.

Wenn Sie möchten, können Sie die Suchleiste für mobile Nutzer entfernen, indem Sie den Schalter neben „Suche“ deaktivieren.

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

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

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

Methode 2: Erstellen Sie ein mobiles, responsives Vollbildmenü

Eine weitere Möglichkeit ist das Hinzufügen eines responsiven Vollbildmenüs. Dabei handelt es sich um ein Menü, das sich automatisch an verschiedene Bildschirmgrößen anpasst, sodass das Navigationsmenü immer gut aussieht, egal welches Gerät der Besucher verwendet.

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

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

Als Erstes müssen Sie das FullScreen Menu-Plugin installieren und aktivieren. In unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins finden Sie weitere Einzelheiten.

Rufen Sie nach der Aktivierung die Seite Vollbildmenü-Optionen im WordPress-Menü auf und aktivieren Sie das folgende Kästchen: Animiertes Vollbildmenü aktivieren“.

Wir empfehlen außerdem, das Kontrollkästchen „Das Menü nur für Admin-Benutzer anzeigen“ zu aktivieren. So können Sie die Änderungen sehen, während Sie das Menü konfigurieren, aber die 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 Kästchen neben „Nur für Mobilgeräte“.

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

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

Wenn Sie diese Änderungen vornehmen, beachten Sie bitte, dass „Initial Background Menu“ das Umschaltsymbol des Menüs ist. Das „Geöffnete Hintergrundmenü“ ist die Farbe des erweiterten mobilen Vollbildmenüs.

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

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

Wenn Sie das getan haben, blättern Sie zu „Animationseinstellungen“.

Zunächst können Sie festlegen, wie das Menü erweitert werden soll, wenn ein Besucher auf das Umschaltsymbol 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 den Tab „Menüinhalt“, um Inhalte hinzuzufügen.

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

Wenn Sie noch kein Navigationsmenü erstellt haben, dann lesen Sie unsere Anleitung zum Hinzufügen von Navigationsmenüs in WordPress.

Wenn Sie zusätzliche Inhalte im Menü anzeigen möchten, können Sie diese im Feld „Free HTML / Shortcodes“ hinzufügen. Dies fungiert als Mini-Seiteneditor, in den Sie Text eingeben, die Formatierung ändern, Aufzählungspunkte und nummerierte Listen hinzufügen können und vieles mehr.

Es gibt auch ein Kontrollkästchen, mit dem Sie einen Link zu Ihrer Seite mit den Datenschutzrichtlinien hinzufügen können.

Als Nächstes können Sie Ihrem WordPress-Menü Symbole für soziale Medien hinzufügen. Diese Symbole werden in einer Reihe am unteren Rand des Vollbildmenüs angezeigt.

Um diese Icons hinzuzufügen, klicken Sie einfach auf das Feld „Soziales Icon 1“, um es zu erweitern.

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

Klicken Sie dann auf den Pfeil neben „Social Icon“ und wählen Sie das Symbol aus, das Sie den mobilen Besuchern zeigen möchten.

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

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

Schließlich können Sie eine WordPress-Suchleiste hinzufügen, um Besuchern die Suche zu erleichtern. Aktivieren Sie dazu einfach das Kästchen neben „Suchleiste hinzufügen“.

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

Wenn Sie zum Beispiel ein WooCommerce-Geschäft betreiben, können Sie Texte wie „Einkaufen beginnen“ oder „Produkte suchen“ verwenden.

Wenn Sie mit der Konfiguration des Menüs zufrieden sind, klicken Sie auf den Button „Änderungen speichern“.

Besuchen Sie jetzt einfach Ihre Website mit einem mobilen Gerät, um das Vollbildmenü in Aktion zu sehen.

Sie können auch eine Vorschau der mobilen Version Ihrer Website mit dem WordPress-Theme-Customizer erstellen.

Bonus: Hinzufügen eines mobilfreundlichen Menüs zu Landing Pages

Wenn Sie eine Landing Page oder eine Verkaufsseite erstellen, dann sollte das Design auf mobilen Geräten genauso gut aussehen wie auf dem Desktop.

In diesem Sinne empfehlen wir, die Seite mit SeedProd zu erstellen. Es ist der beste WordPress-Seitenersteller und verfügt über mehr als 300 professionell gestaltete Vorlagen.

Nachdem Sie ein Design mit SeedProd erstellt haben, können Sie der Seite ein mobiles Menü hinzufügen, indem Sie den vorgefertigten Nav Menu Block von SeedProd verwenden. Mit diesem Block können Sie separate Menüs sowohl für mobile Geräte als auch für Desktops erstellen.

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

Weitere Informationen finden Sie in unserer Anleitung zum Hinzufügen individueller Navigationsmenüs in WordPress.

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

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

Klicken Sie anschließend auf den Schalter „Auf dem Desktop ausblenden“, um ihn zu aktivieren. Jetzt wird dieses Menü nur noch auf mobilen Geräten angezeigt.

Sie können nun Links hinzufügen und das Layout des Menüs über die Einstellungen im linken Menü ändern.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man ein responsives WordPress-Menü für mobile Geräte erstellt. Vielleicht interessieren Sie sich auch für unsere Anleitung für Einsteiger, wie man einen Schrift-Resizer in WordPress hinzufügt, und unsere Expertentipps, wie man eine mobilfreundliche Website erstellt.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.