Wie man ein Slide-Panel-Menü in WordPress-Themes hinzufügt

Das Hinzufügen eines Slide-Panel-Menüs zu Ihrer WordPress Website kann die Navigation verbessern, insbesondere auf mobilen Geräten. Diese Funktion bietet eine sanfte, schöne Animation, wenn Benutzer auf das Menüsymbol tippen.

Ein responsives Menü erleichtert es den Besuchern, Ihre Website auf ihren Handys oder Tablets zu erkunden. Es sorgt für ein nahtloses Browsing-Erlebnis und hält Ihr Publikum bei der Stange.

In diesem Artikel zeigen wir Ihnen, wie Sie ein Slide-Panel-Menü zu Ihrem WordPress Theme hinzufügen. Das Beste daran ist, dass Sie dies tun können, ohne Code zu schreiben.

Warum ein Slide Panel Menü in WordPress Themes hinzufügen?

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, eine Vorschau der mobilen Version Ihrer WordPress Website zu erstellen, um zu sehen, wie Ihr Navigationsmenü auf kleineren Ansichten aussieht.

Glücklicherweise verfügen viele WordPress Themes über integrierte Stile, die automatisch mobilfreundliche Menüs anzeigen, wenn sie auf einer kleinen Ansicht angezeigt werden.

Vielleicht möchten Sie Ihre mobile Navigation jedoch noch weiter anpassen und ein reaktionsfähiges Vollbildmenü oder ein animiertes Slide-Panel-Menü hinzufügen.

Sehen wir uns also an, wie man in WordPress-Themes ein Slide-Panel-Menü hinzufügt.

Hinzufügen eines Slide-Panel-Menüs in WordPress Themes

Als erstes müssen Sie das Responsive Menu Plugin installieren und aktivieren. Falls Sie ein Plugin benötigen, können Sie unsere Schritt-für-Schritt-Anleitung zur Installation eines WordPress Plugins einsehen.

Es gibt eine Premium-Version des Responsive Menu Plugins mit zusätzlichen Themes und zusätzlichen Funktionen wie der bedingten Logik. Aber für dieses Tutorial werden wir das kostenlose Plugin verwenden.

Nach der Aktivierung navigieren Sie von Ihrem WordPress-Dashboard zu Responsive Menu “ Menüs. Dort klicken Sie auf den Button „Neues Menü erstellen“ oben in der Ansicht.

Sie sehen dann 4 Themes, die Sie für Ihr neues responsives Menü verwenden können. Weitere Themes sind zum Kauf verfügbar.

Für dieses Tutorial werden wir das automatisch ausgewählte Thema verwenden. Sie können dann auf die Schaltfläche „Weiter“ klicken.

Dadurch gelangen Sie auf die 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 nachlesen.

Sie können auch das normale Menü Ihres WordPress-Themes ausblenden, so dass Ihre Nutzer nur noch das neue Slide-Panel-Menü sehen. Dazu müssen Sie CSS-Code in das Feld „Theme-Menü ausblenden“ eingeben.

Der Code, den Sie hier eingeben müssen, variiert von Thema zu Thema, und Sie können weitere Einzelheiten erfahren, indem Sie auf den Link „Mehr erfahren“ klicken.

Wenn Sie mit den Einstellungen zufrieden sind, sollten Sie unten auf der Seite auf die Schaltfläche „Menü erstellen“ klicken. Dadurch gelangen Sie auf eine Seite, auf der Sie die Anpassung Ihres Menüs abschließen können.

Auf der rechten Seite der Ansicht sehen Sie eine Vorschau Ihrer Website, und am unteren Rand befinden sich Buttons, mit denen Sie zwischen Telefon-, Tablet- und Desktop-Ansicht wechseln können. Auf der linken Seite finden Sie außerdem Optionen zur individuellen Anpassung.

Sie werden feststellen, dass über dem Menü ein Text angezeigt wird. Dies ist der Titel des Menüs und eine Textzeile, die das Plugin „zusätzlicher Inhalt“ nennt.

Sie können den Text bearbeiten oder ausblenden, indem Sie auf „Mobiles Menü“ und dann auf „Container“ im Menü links auf der Seite klicken.

Außerdem können Sie in das Feld „Titeltext“ alles eingeben, was Sie möchten, z. B. „Hauptmenü“ oder „Navigation“. Wenn Sie keinen Titel anzeigen lassen möchten, schieben Sie den Schalter „Titel“ einfach in die Position „Aus“.

Danach müssen Sie nach unten zur Einstellung „Zusätzliche Inhalte“ blättern.

Von hier aus können Sie diese Einstellung ausschalten oder alternative Inhalte eingeben. Auf dem Screenshot unten sehen Sie, dass der Schalter ausgeschaltet wurde, so dass die Worte „Hier weiteren Inhalt hinzufügen…“ jetzt ausgeblendet sind.

Wenn Sie mit den Menüeinstellungen zufrieden sind, klicken Sie auf den Button „Aktualisieren“ am unteren Rand der Seite, um Ihre Einstellungen zu speichern.

Das Responsive Menu Plugin bietet viele weitere Optionen, um das Verhalten und das Design Ihres Slide-Menüs zu ändern. Sie können diese Optionen auf der Seite mit den Einstellungen des Plugins erkunden und nach Bedarf anpassen.

Jetzt können Sie Ihre Website besuchen, um das Menü in Aktion zu sehen. Hier sehen Sie, wie es auf unserer Demo-Website aussieht. Beachten Sie, dass die aktuelle Seite im Menü mit einem Farbband hervorgehoben ist.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat zu lernen, wie man ein Slide-Panel-Menü in WordPress Themes einfügt. Als Nächstes möchten Sie vielleicht auch erfahren, wie man ein Dropdown-Menü erstellt und wie man angemeldeten Benutzern in WordPress verschiedene Menüs anzeigt.

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.