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 dieser Anleitung zeigen wir Ihnen Schritt für Schritt genau, wie Sie ein Slide-Panel-Menü zu Ihrem WordPress-Theme hinzufügen. 🎨
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.
Gut gestaltete Menüs helfen Ihren Besuchern, sich auf Ihrer WordPress-Website zurechtzufinden. Viele Ihrer Besucher werden mobile Geräte verwenden, daher ist es wichtig, die mobile Version Ihrer WordPress-Website in der Vorschau anzuzeigen , um zu sehen, wie Ihr Navigationsmenü auf kleineren Bildschirmen aussieht.
Glücklicherweise verfügen viele WordPress-Themes über integrierte Stile, die beim Betrachten auf einem kleinen Bildschirm automatisch mobilfreundliche Menüs anzeigen.
Sie möchten Ihre mobile Navigation jedoch möglicherweise noch weiter anpassen und ein vollbildresponsives 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:
- So fügen Sie ein Slide-Panel-Menü in WordPress-Themes hinzu
- Häufig gestellte Fragen zu Slide-Panel-Menüs
- Weiterführende Lektüre: Weitere Ressourcen zur Anpassung von Website-Menüs
Fangen wir an.
So fügen Sie ein Slide-Panel-Menü in WordPress-Themes hinzu
Das Erste, was Sie tun müssen, ist das Responsive Menu Plugin zu installieren und zu aktivieren. Wenn Sie eines benötigen, können Sie unsere Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins sehen.
💡 Hinweis: Sie können dieses Tutorial mit dem kostenlosen Plugin verwenden. 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.
Nach der Aktivierung navigieren wir in Ihrem WordPress-Dashboard zu Responsive Menu » Menus. Dort angekommen, klicken Sie oben auf dem Bildschirm auf die Schaltfläche „Neues Menü erstellen“.
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 dies in unserer Anleitung zum Hinzufügen eines Navigationsmenüs in WordPress lernen.
Sie können auch das normale Menü, das mit Ihrem WordPress-Theme geliefert wird, ausblenden, sodass Ihre Benutzer nur das neue Slide-Panel-Menü sehen. Dies tun Sie, indem Sie CSS-Code in das Feld „Theme-Menü ausblenden“ eingeben.
Der Code, den Sie hier eingeben müssen, variiert je nach Theme. Weitere Details erfahren Sie, indem Sie auf den Link „Mehr erfahren“ klicken.
📝 Hinweis: Benutzer der Pro-Version haben einige zusätzliche Einstellungen. Pro-Benutzer 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.
Auf der rechten Seite des Bildschirms sehen Sie eine Vorschau Ihrer Website, und unten befinden sich Schaltflächen zum Wechseln zwischen Telefon-, Tablet- und Desktop-Ansichten. 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.
Jetzt können Sie Ihre Website besuchen, um das Menü in Aktion zu sehen. So sieht es auf unserer Demo-Website aus. Beachten Sie, dass die aktuelle Seite, wenn sie im Menü vorhanden ist, mit einem Farbbalken hervorgehoben wird.
✋ 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 unserem Leitfaden zu verschiedenen Möglichkeiten, Ihr WordPress-Navigationsmenü zu gestalten.
Häufig gestellte Fragen zu Slide-Panel-Menüs
Benötigen Sie noch Klärungen, wie Slide-Panel-Menüs auf 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, sodass sie ein mobilfreundliches Menü enthalten. Das gesagt, es ist normalerweise nur ein einfaches Dropdown. Wenn Sie ein elegantes, ausklappbares 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 mobiles Menü erstellen mit einem Plugin wie WP Mobile Menu oder benutzerdefiniertem CSS, sodass Ihre mobilen Besucher eine andere Navigation sehen als Desktop-Benutzer. Dies ermöglicht es Ihnen, Links zu vereinfachen, Werbeaktionen hervorzuheben oder die Konversionen speziell für mobile Geräte zu verbessern.
Weiterführende Lektüre: Weitere Ressourcen zur Anpassung von Website-Menüs
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 eine Suchleiste zum WordPress-Menü hinzu (Schritt für Schritt)
- So erstellen Sie ein Dropdown-Menü in WordPress (Anfängerleitfaden)
- So zeigen Sie eingeloggten Benutzern in WordPress unterschiedliche Menüs an
- So fügen Sie benutzerdefinierte Navigationsmenüs in WordPress-Themes hinzu
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 sie und sagen Sie mir 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?