Ein sperriges Desktop-Menü auf einem Telefon anzubieten, ist ein sicherer Weg, Besucher zu frustrieren. Und ein verwirrendes mobiles Menü kann dazu führen, dass sie genauso schnell wieder gehen.
Ein Slide-out-Panel-Menü löst dieses Problem, indem es Ihrer Website ein sauberes, App-ähnliches Gefühl verleiht, das auf kleineren Bildschirmen hervorragend funktioniert. Es erleichtert das Auffinden von Inhalten und hält die Besucher bei der Stange.
Nach dem Testen mehrerer Plugins für diese spezielle Aufgabe haben wir eine fantastische kostenlose Option gefunden, die sowohl leistungsstark als auch einfach einzurichten ist. Sie können ein professionell aussehendes Slide-Menü erstellen, ohne eine einzige Codezeile anfassen zu müssen.
In diesem Leitfaden zeigen wir Ihnen Schritt für Schritt, wie Sie Ihrer WordPress-Vorlage ein Schiebe-Panel-Menü hinzufügen.
🎨 Wichtigster Punkt: Verwenden Sie das kostenlose Responsive Menu Plugin, um ein mobilfreundliches ausklappbares Panel zu erstellen, ohne Code anfassen zu müssen.
Warum ein Slide-Panel-Menü in WordPress-Themes hinzufügen?
Ein Slide-Panel-Menü macht die Navigation auf Mobilgeräten reibungsloser und intuitiver. Es verleiht Ihrer WordPress-Website ein sauberes, App-ähnliches Gefühl und hilft Besuchern, schnell zu finden, wonach sie suchen, ohne sich verloren oder frustriert zu fühlen.
Es bietet auch größere Berührungsflächen für Finger und hält Ihren Bildschirm übersichtlich, was zu höherem Engagement und mehr Verkäufen führen kann.
Glücklicherweise enthalten viele WordPress-Themes bereits integrierte Stile, die auf kleineren Bildschirmen automatisch mobilfreundliche Menüs anzeigen.
Sie möchten Ihre mobile Navigation jedoch möglicherweise noch weiter anpassen, indem Sie ein vollbildschirmiges responsives Menü oder ein animiertes Slide-Panel-Menü hinzufügen.
In diesem Sinne zeigen wir Ihnen, wie Sie ein Slide-Panel-Menü in WordPress-Themes hinzufügen. Hier ist ein kurzer Überblick über alle Themen, die wir in dieser Anleitung behandeln werden:
Fangen wir an.
So fügen Sie ein Slide-Panel-Menü in WordPress-Themes hinzu
Als Erstes müssen Sie das Plugin Responsive Menu installieren und aktivieren. Wir haben es für dieses Tutorial getestet, und es ist unglaublich einfach zu bedienen.
Gehen Sie in Ihrem WordPress-Adminbereich zu Plugins » Plugin hinzufügen.
💡 Hinweis: Sie können diesem Tutorial mit dem kostenlosen Plugin folgen. Wenn Sie zusätzliche Themes und erweiterte Funktionen wie bedingte Logik wünschen, können Sie auf die Premium-Version des Responsive Menu-Plugins upgraden.
Dann müssen Sie nur noch das Plugin über das Suchfeld finden und mit der Installation fortfahren. Wenn Sie Hilfe benötigen, sehen Sie sich unsere Schritt-für-Schritt-Anleitung an, wie man ein WordPress-Plugin installiert.
Nach der Aktivierung gehen Sie in Ihrem WordPress-Dashboard zu Responsive Menu » Menüs. Von dort aus sollten Sie oben auf dem Bildschirm auf die Schaltfläche „Neues Menü erstellen“ klicken.
Sie sehen dann 4 Themes, die Sie für Ihr neues responsives Menü verwenden können. Zusätzliche Themes sind käuflich zu erwerben.
Für dieses Tutorial verwenden wir das automatisch ausgewählte Theme. Sie können dann auf die Schaltfläche „Weiter“ klicken.
Dies führt Sie zur Seite „Menü-Einstellungen“.
Hier können Sie einen Namen für Ihr responsives Menü eingeben und dann auswählen, welches WordPress-Menü im Panel angezeigt werden soll. Wir haben zum Beispiel das Menü „Navigation“ gewählt.
Wenn Sie ein neues Menü erstellen müssen, können Sie lernen, wie das geht, indem Sie unserer Anleitung folgen: So fügen Sie ein Navigationsmenü in WordPress hinzu.
Sie können auch das normale Menü ausblenden, das mit Ihrem WordPress-Theme geliefert wird, sodass Ihre mobilen Benutzer nur das neue Slide-Panel-Menü sehen. Dies tun Sie, indem Sie CSS-Code in das Feld „Theme-Menü ausblenden“ eingeben.
Keine Sorge, dies blendet das Menü nur auf Mobilgeräten aus – Ihr Desktop-Menü bleibt vollständig erhalten.
Der Code, den Sie hier eingeben müssen, variiert je nach Theme (gängige Selektoren sind .main-navigation oder #site-navigation), und Sie können weitere Details erfahren, indem Sie auf den Link „Mehr erfahren“ klicken.
✋ Experten-Tipp: Sie können Ihre spezifische Menüklasse finden, indem Sie mit der rechten Maustaste auf Ihr Menü in einem Browser klicken und das Tool „Inspizieren“ auswählen. Suchen Sie nach HTML-Tags wie <nav> oder <ul>, die Klassen wie menu-toggle oder site-navigation enthalten.
Wenn Sie die Pro-Lizenz haben, stehen Ihnen einige zusätzliche Einstellungen zur Verfügung. Sie können beispielsweise die Geräte und Seiten auswählen, auf denen das Menü angezeigt werden soll.
Wenn Sie mit den Einstellungen zufrieden sind, sollten Sie unten auf der Seite auf die Schaltfläche „Menü erstellen“ klicken. Dies führt Sie zu einer Seite, auf der Sie die Anpassung Ihres Menüs abschließen können.
Sie sehen eine Vorschau Ihrer Website auf der rechten Seite des Bildschirms. Unten gibt es Schaltflächen, um zwischen Telefon-, Tablet- und Desktop-Ansichten zu wechseln, um sicherzustellen, dass Ihr Menü mobilfreundlich bleibt. Auf der linken Seite finden Sie auch Anpassungsoptionen.
Möglicherweise stellen Sie fest, dass oberhalb des Menüs Text angezeigt wird. Dies ist der Titel des Menüs und eine Textzeile, die das Plugin als „zusätzlichen Inhalt“ bezeichnet.
Sie können den Text bearbeiten oder ausblenden, indem Sie auf „Mobile Menu“ und dann auf „Container“ im Menü auf der linken Seite der Seite klicken.
Zusätzlich können Sie in das Feld „Titeltext“ alles eingeben, was Sie möchten, z. B. „Hauptmenü“ oder „Navigation“. Wenn Sie keinen Titel anzeigen möchten, schieben Sie einfach den Schalter „Titel“ auf die Aus-Position.
Danach möchten Sie nach unten zum Einstellungsfeld „Zusätzlicher Inhalt“ scrollen.
Von hier aus können Sie diese Einstellung umschalten oder alternativen Inhalt eingeben. Im Screenshot unten werden Sie feststellen, dass der Schalter umgeschaltet wurde, sodass die Wörter „Fügen Sie hier weiteren Inhalt ein…“ nun ausgeblendet sind.
Wenn Sie mit den Menüeinstellungen zufrieden sind, stellen Sie sicher, dass Sie unten auf der Seite auf die Schaltfläche „Aktualisieren“ klicken, um Ihre Einstellungen zu speichern.
Das Responsive Menu Plugin bietet viele weitere Optionen zur Änderung des Verhaltens und Erscheinungsbilds Ihres Slide-Panel-Menüs. Sie können diese Optionen auf der Einstellungsseite des Plugins erkunden und sie nach Bedarf anpassen.
Besuchen Sie nun Ihre Website, um das Menü in Aktion zu sehen. So sieht es auf unserer Demo- WordPress-Website aus. Sie werden feststellen, dass das Plugin sogar die aktuelle Seite, auf der sich Ihr Besucher befindet, mit einem schicken Farbbalken hervorhebt:
✋ Experten-Tipp: Das Styling Ihres WordPress-Navigationsmenüs kann das Erscheinungsbild und die Benutzerfreundlichkeit Ihrer Website verbessern. Ein gut gestaltetes Menü hilft Besuchern, leicht zu finden, was sie brauchen, und fördert Klicks.
Weitere Informationen zu diesem Thema finden Sie in unserer Anleitung zu verschiedenen Möglichkeiten, Ihr WordPress-Navigationsmenü zu gestalten.
Häufig gestellte Fragen zu Slide-Panel-Menüs
Haben Sie noch Fragen dazu, wie Slide-Panel-Menüs in WordPress funktionieren? Hier sind Antworten auf einige häufig gestellte Fragen:
Kommen alle WordPress-Themes mit einem mobilen Menü?
Die meisten modernen WordPress-Themes sind responsiv und enthalten daher ein mobilfreundliches Menü. Das gesagt, es ist normalerweise nur ein einfaches Dropdown. Wenn Sie ein schlankes Slide-Out-Panel-Menü wünschen, benötigen Sie ein Plugin.
Verlangsamt das Hinzufügen eines Slide-Panel-Menü-Plugins meine Website?
Nicht, wenn Sie ein gut codiertes Plugin wie Responsive Menu wählen. Diese Plugins sind darauf ausgelegt, leichtgewichtig zu sein und sollten die Geschwindigkeit Ihrer Website nicht merklich beeinträchtigen.
Kann ich auf Mobilgeräten ein anderes Menü anzeigen als auf Desktops?
Ja! Sie können ein separates Mobilmenü erstellen, indem Sie ein Plugin wie WP Mobile Menu oder benutzerdefiniertes CSS verwenden, sodass Ihre mobilen Besucher eine andere Navigation als Desktop-Benutzer sehen. Dies ermöglicht es Ihnen, Links zu vereinfachen, Werbeaktionen hervorzuheben oder Konversionen speziell für mobile Geräte zu verbessern.
Weiterführende Lektüre: Weitere Ressourcen zur Anpassung von Website-Menüs
Nun, da Sie erfolgreich ein ausklappbares Panel für Ihre mobilen Benutzer implementiert haben, möchten Sie vielleicht andere Möglichkeiten zur Verbesserung Ihrer Website-Navigation erkunden. Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie ein Slide-Panel-Menü in WordPress-Themes hinzufügen.
Um Ihre Benutzererfahrung noch weiter zu verbessern, lesen Sie unsere anderen hilfreichen Anleitungen zu:
- So erstellen Sie ein Sticky Floating Navigation Menü in WordPress
- So fügen Sie ein Mega-Menü zu Ihrer WordPress-Website hinzu (Schritt für Schritt)
- So fügen Sie bestimmte Beiträge zum WordPress-Navigationsmenü hinzu
- So fügen Sie benutzerdefinierte Navigationsmenüs in WordPress-Themes hinzu
- So zeigen Sie eingeloggten Benutzern in WordPress unterschiedliche Menüs an
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.
Jiří Vaněk
Ich habe ein Slide-Menü mit Elementor und Pop-up-Fenstern mit einem Sliding-Menü-Effekt erstellt. Es funktioniert großartig, aber leider kann ich Elementor PRO nicht auf allen Websites, die ich verwalte, wegen seines Preises nutzen. Dies ist eine fantastische Alternative zur Erstellung eines solchen Menüs, und wenn es möglich ist, das Plugin in einer kostenlosen Version zu verwenden, ist das wirklich erstaunlich. Für Websites ohne Elementor ist das für mich eine Rettung.
Moinuddin Waheed
Dies ist eine Rettung für mich, da ich Schwierigkeiten hatte, ein ausklappbares Panel für ein mobilfreundliches Menü zu bekommen.
Zuvor habe ich Code-Schnipsel verwendet und diese in den WP-Code eingefügt.
Aber dieses Plugin bietet mehr Anpassungsmöglichkeiten und die Pro-Version scheint in Bezug auf die Anpassungssteuerung leistungsfähiger zu sein.
Ich werde dieses Plugin auf jeden Fall ausprobieren.
Mohammad Kashif
Super!
Kann ich einen Schließen-Button im Popout hinzufügen?
Luke Marshall
Ich warte immer noch auf eine Antwort von Ihnen auf ein Support-Ticket bezüglich genau dieses Bedarfs! Das, das Sie anbieten, ist nur auf der rechten Seite, ohne offensichtliche Möglichkeit, es nach links zu ändern. Ich bin froh, dass ich das gefunden habe.
Cynthia
Ändern Sie die Funktion „left“ in „right“ an den beiden Stellen, an denen sie im Funktionscode verwendet wird.
Ru
Haben Sie eine Demo dafür?
Ich möchte es vorher prüfen
Daniel Jarosz
sauber & einfach, vielen Dank für diesen Tipp!
Ann
Hallo, dieser Code funktioniert perfekt, wenn ich meine Website lokal ausführe, aber nicht, wenn sie live ist. Gibt es eine mögliche Erklärung dafür? Ich habe die Bildlinks aktualisiert, bin mir aber nicht sicher, was sonst noch aktualisiert werden muss, da sich die Ordner nicht geändert haben.
Madiha
es funktioniert nicht auf meiner Website, bitte besuchen Sie und sagen Sie die Lösung
http://www.dailynewscompany.com
Mattia
Hallo, interessanter Artikel… Haben Sie eine DEMO davon oder eine URL zu einer Online-Seite, auf der Sie es implementiert haben? Es wäre interessant, es in einem echten Fall zu sehen, bevor ich versuche, es zu verwenden! Vielen Dank
Jim
Ist es möglich zu zeigen, wie das Skript modifiziert werden könnte, damit das Schließen-Ereignis durch Klicken irgendwo anders als auf der Navigation ausgelöst werden kann?
Mit anderen Worten, damit der Benutzer nicht nur auf das Toggle-Menü-Symbol klicken muss, um die Navigationsseitenleiste zu schließen?
Danke.
Karl
Ich suche überall nach einem Plugin oder der Möglichkeit, die Art von Menü zu implementieren, die Sie derzeit oben auf Ihrer Seite haben. Sie haben einen „Play“-Button auf der rechten Seite Ihres Headers. Wenn Sie ihn drücken, gleitet ein Inhaltsbereich aus Ihrem Header-Bereich heraus. Ich möchte diese Art von Menü wirklich auf meiner Website verwenden. Wenn Sie mir auch nur einen Link geben könnten, wo diese Art von Menü erklärt wird, werde ich es von dort aus weiterverfolgen, und vielen Dank. Das ist ein fantastisches Tutorial!
WPBeginner Support
Karl, Sie können mit der rechten Maustaste auf die Wiedergabetaste klicken und „Element untersuchen“ auswählen und unseren Quellcode studieren. Wir werden dies auch bald auf WPBeginner als Tutorial behandeln.
Admin
Shubham Dubey
Entschuldigung für die Antwort hier (Kommentare sind nicht verfügbar)
Hallo! Ich benutze das Genesis-Framework mit seinem Child-Theme, ich kann die Datei header.php dort nicht finden.
i just copied the header.php file from genesis to my child themes folder, but after opening header.php file didn’t found any lines
WIE MACHT MAN DAS MIT CHILD THEMES, BITTE ERKLÄREN.
Jim
Ausgezeichnete Anleitung. Ich bin mit einer Testimplementierung fast fertig, aber ich frage mich… kann ich im sidepanel.js-Datei einen relativen Pfad anstelle des absoluten Pfads verwenden?
Ich habe versucht, dies zu tun, aber ich kann es nicht herausfinden. Sollte der relative Pfad relativ zur HTML-Datei sein, die das JavaScript aufruft?
Danke
krish
Es ist guter und nützlicher Inhalt. Der Screenshot und die Codierung sind leicht verständlich und auf meiner Website anwendbar. Gute Arbeit, Mann!!!
Håkon Stillingen
Interessanter Artikel. Wie würde ich den Standard-Header im Genesis Framework ersetzen?