Sticky Sidebar-Menüs verleihen einer Website nicht nur einen modernen Design-Touch, sondern bieten den Besuchern auch ein intensiveres Scroll-Erlebnis. In diesem Artikel erfahren Sie, wie Sie die Elementor im Gesang antworten Elementor Pro Erstellen Sie ein leistungsstarkes Seitenleistenmenü.

Was ist ein klebriges Seitenleistenmenü?

Sticky Sidebar-Menüs unterscheiden sich von den traditionellen horizontalen Navigationsmenüs, die auf der linken oder rechten Seite einer Website vertikalen Platz einnehmen. Solche Menüs sind immer auf der Seite vorhanden, auch wenn der Nutzer auf der Seite nach unten scrollt, dieDas Menü wird auch in der Seitenposition fixiertDies bietet kontinuierliche Navigationsmöglichkeiten.

Sticky Sidebar-Menüs sind in der Regel standardmäßig minimiert und nehmen nur wenig Platz in Anspruch. Die Nutzer können auf ein Symbol klicken, um das Menü zu erweitern und mehr Navigationslinks anzuzeigen. Dieses Design ist besonders für Desktop- und Tablet-Nutzer geeignet, aber ein traditionelles horizontales Menü kann für mobile Geräte immer noch die bessere Option sein.

Vorteile von klebrigen Seitenleistenmenüs

1. Spart vertikalen PlatzSticky-Sidebar-Menüs platzieren die Navigationselemente vertikal, wodurch der vertikale Raum oben frei wird und der Inhalt der Website die Höhe des Bildschirms optimal nutzen kann.
2. Verbessertes BenutzererlebnisDieses Menüdesign bietet ein einzigartiges und modernes Scrolling-Erlebnis, bei dem die Benutzer leichter auf die Navigationsoptionen zugreifen können, ohne zum Anfang der Seite zurückkehren zu müssen.
3. Bessere Organisation des InhaltsVertikales Layout: Durch das vertikale Layout können die verschiedenen Teile der Website übersichtlicher und geordneter dargestellt werden, was sich besonders für inhaltsreiche Websites eignet.

Benötigte Tools zur Erstellung von Sticky Sidebar Menüs mit Elementor

Bevor Sie mit der Erstellung eines klebrigen Seitenleistenmenüs beginnen, müssen Sie die folgenden Tools und Funktionen vorbereiten:

1. ElementorDies ist ein beliebter WordPress Page Builder, der eine Fülle von Design- und Layout-Optionen bietet.
2. Elementor ProUm Sticky-Sidebar-Menüs zu implementieren, müssen Sie einige der erweiterten Funktionen von Elementor Pro verwenden, wie z. B. Popups und Themenvorlagen.
3. Normale KopfzeilenvorlagenDies ist eine Kopfzeilenvorlage, die für Besucher von Mobilgeräten entwickelt wurde, um eine großartige Navigationserfahrung auf dem Handy zu gewährleisten.
4. Teilweise VorlageSidebar-Menüs: Wird verwendet, um minimierte Seitenleistenmenüs als Grundlage für Sticky Sidebars zu erstellen.
5. Pop-up-FensterNavigation: Dient zur Anzeige des vollständigen Navigationsmenüs, das ein Popup auslöst, wenn der Benutzer auf das minimierte Symbol der Seitenleiste klickt.

Schritte zum Erstellen eines klebrigen Seitenleistenmenüs

1. allgemeine Überschriften in der Desktop- und Tablet-Ansicht ausblenden

Erstens: Sie benötigenSicherstellen, dass bestehende Kopfzeilenvorlagen nur auf mobilen Geräten und nicht auf Desktops und Tablets angezeigt werden. Führen Sie dazu die folgenden Schritte aus:

• Gehen Sie zum Theme Builder von Elementor (Templates → Theme Builder → Titles), wählen Sie Ihre Titelvorlage aus und bearbeiten Sie sie mit Elementor.

• Wählen Sie im Elementor-Editor den Titelbereich aus und gehen Sie zu "hohes Niveau"Tab.
• Aktivieren Sie "Auf dem Desktop ausblenden" und "Auf dem Tablet ausblenden" in den Reaktionseinstellungen.

Auf diese Weise wird sichergestellt, dass Desktop- und Tablet-Nutzer nur das Seitenleistenmenü und nicht die reguläre horizontale Kopfzeile sehen.

2. die Erstellung einer Teilvorlage für die Navigation in der Seitenleiste

Als Nächstes erstellen wir eine neue Vorlage, mit der wir den minimierten Zustand des Seitenleistenmenüs festlegen. Das ist das, was der Benutzer sieht, wenn er die Seite zum ersten Mal lädt.

• Gehen Sie im Backend von WordPress in den Bereich Vorlagen, wählen Sie die Registerkarte "Abschnitte" und klicken Sie auf "Neu hinzufügen".
• Erstellen Sie einen neuen Abschnitt mit einer Spalte und konfigurieren Sie die Einstellungen wie folgt:
  • Breite des Inhalts: volle Breite
  • Säulenabstand: kein Abstand
  • Höhe → Mindesthöhe: 100vh (so dass die Seitenleiste die gesamte Fläche des Bildschirms einnimmt)vertikale Höhe)
  • Position der Säule: Streckung
  • HTML-Tags: Titel (optional, aber hilfreich für SEO)

Auf der Registerkarte Stile können Sie die Hintergrundfarbe oder den Farbverlauf der Seitenleiste so konfigurieren, dass sie mit dem Rest der Website übereinstimmen.

3. die Spalteneinstellungen konfigurieren und Widgets hinzufügen

Fügen Sie einigen Vorlagen einige grundlegende Widgets hinzu, z. B. Website-Logos, Navigationssymbole (zur Erweiterung des vollständigen Menüs) und Symbole für soziale Medien.

• Fügen Sie ein Logo mit Hilfe des Bild-Widgets hinzu.
• Verwenden Sie das Icon-Widget, um ein Icon hinzuzufügen, das zum Auslösen des Popup-Navigationsmenüs verwendet werden soll. Sie können ein beliebiges geeignetes Symbol auswählen, z. B. das Symbol "Balken", und dessen Farbe und Hover-Effekt konfigurieren.
• Verwenden Sie das Widget Soziale Symbole, um Links zu sozialen Medien hinzuzufügen, und achten Sie darauf, dass sie vertikal ausgerichtet sind.

Nachdem Sie die Konfiguration abgeschlossen haben, veröffentlichen oder aktualisieren Sie einige der Vorlagen.

4. die Erstellung einer neuen einseitigen Vorlage mit Seitenleistennavigation

Als Nächstes muss eine neue einseitige Vorlage mit dem Elementor-Theme-Builder erstellt werden, die den Inhalt Ihrer Website und die Kopfzeilen der Sticky-Seitennavigation enthält.

Gehen Sie dazu bitte aufVorlagen → Theme Builder:

• umschalten"Einzelne Seite" Registerkarten
• Klicken (mit einer Maus oder einem anderen Zeigegerät)"Neu hinzufügen"
• Stellen Sie sicher, dass Selecteinzige Seite Als Vorlagentyp
• Nennen Sie es.Seiten für die feste Seitennavigation

Erstellen Sie im Elementor-Editor einen Abschnitt mit zwei Spalten:

• linke Spalte- Dies ermöglicht die Anbringung von klebrigen Seitenleisten
• rechte Spalte- Dieser wird den regulären Inhalt Ihrer Website enthalten

Konfigurieren Sie die rechte Spalte (Inhalt)

Um der rechten Spalte allgemeine Inhalte hinzuzufügen, fügen Sie die "Inhalt posten"Widget.

Konfigurieren Sie die linke Spalte (Kopfzeile der Seitenleiste)

Um die Kopfzeile der Seitenleiste zum linken Menü hinzuzufügen, fügen Sie das Vorlagen-Widget hinzu. Wählen Sie dann die Vorlage, die Sie im vorherigen Schritt erstellt habenKlebevorlage für die Seitenleiste.

Darüber hinaus werden Überweisungen in diese SpalteErweiterte Einstellungen, setzen Sie dieZ-IndexDer Wert wird festgelegt auf10000  (zehntausend) und wirdreaktionsschnellDie Steuerung ist auf "Aktivieren" eingestellt."Versteckt auf mobilen Geräten".. Dadurch wird sichergestellt, dass nur Desktop- und Tablet-Besucher die Kopfzeile der Seitennavigation sehen.

Spaltenabstände/Layout konfigurieren

Die Seitenleiste nimmt 50% der Seite ein. 50% können Sie beheben, indem Sie die linke Spalte (mit der Seitenleiste) auswählen und dieRegisterkarte "Layout" auf seineSpaltenbreiteeingestellt auf5%. Dadurch wird die rechte Spalte automatisch gleich95%.

Durch die Einstellung des z-index-Wertes wird sichergestellt, dass das Popup-Fenster für die vollständige Navigation, das Sie im nächsten Schritt erstellen, unter die Seitennavigation gleitet.

Selektor {
    Breite: 60px;
}

Copy This CSS stellt sicher, dass die Seitennavigation immer schmal ist, indem es die Breite auf 60 Pixel festlegt. Sie können diese Zahl nach Belieben anpassen, aber weichen Sie nicht zu sehr von 60 Pixel ab.

Konfiguration Sport-Effekt

Jetzt wollen wir sicherstellen, dass die Seitennavigation immer auf dem Bildschirm fixiert ist.

Klicken Sie dazu in der rechten Spalte auf Vorlagen:

• umschalten"Fortgeschritten" Tab.
• Klicken (mit einer Maus oder einem anderen Zeigegerät)"Auswirkungen der Bewegung".
• Setzen Sie "oben"Eingestellt auf"Oben".
• Oberbefehlshaber (Militär) "Klebrig".eingestellt auf"Schreibtisch".im Gesang antworten"Tablet"..

Veröffentlichen Sie nun Ihre einseitige Vorlage und verwenden Sie dieBedingungen anzeigenum festzulegen, wo sie angezeigt werden soll. Wenn Sie die Sticky-Seitennavigation auf jeder Seite verwenden möchten, legen Sie fest, dass sie im BereichAlle SeitenAuf.

Wenn Sie eine Website hinzufügen, auf der bereits einige Seitenvorlagen vorhanden sind, müssen Sie alle vorhandenen Vorlagen auf den Status "Entwurf" ändern, um sie zu deaktivieren und mögliche Konflikte zu vermeiden.

5. die Konfiguration von Pop-up-Navigationsmenüs

Damit der Benutzer das vollständige Navigationsmenü ausklappen kann, müssen wir ein Popup-Fenster erstellen. Dieses Popup-Fenster wird angezeigt, wenn der Benutzer auf das Symbol in der Seitenleiste klickt.

• Gehen Sie zu Templates → Popups, klicken Sie auf "Add New" und erstellen Sie ein neues Popup.
• Konfigurieren Sie die Einstellungen für das Popup-Fenster, wie Breite, Eingangsanimation, Ausgangsanimation usw., und fügen Sie entsprechende Ränder hinzu.
• Fügen Sie ein Navigationsmenü-Widget in das Popup-Fenster ein und achten Sie darauf, dass die Menüpunkte vertikal ausgerichtet sind.

Nachdem Sie das Popup veröffentlicht haben, kehren Sie zur Seitenleistenvorlage zurück und konfigurieren die dynamische Beschriftung des Symbols auf "Pop-up-Fenster" und wählen Sie das soeben erstellte Popup-Menü aus.

6. die Prüfung und Optimierung

Jetzt ist Ihr klebriges Seitenleistenmenü fast fertig. Öffnen Sie die Website-Seite und testen Sie die Funktionalität und das Aussehen des Seitenleistenmenüs, um sicherzustellen, dass es wie erwartet funktioniert.

Sollten beim Testen Probleme auftreten, empfiehlt es sich, das Hello-Theme von Elementor zu verwenden, um sicherzustellen, dass es keine Konflikte mit anderen Themes gibt.

Zusammenfassungen

Sticky-Sidebar-Menüs bieten ein völlig neues Design- und Navigationserlebnis für WordPress-Websites. Indem Sie die Leistung von Elementor und Elementor Pro nutzen, können Sie ganz einfach ein flexibles und ästhetisch ansprechendes vertikales Navigationsmenü erstellen, das Ihren Besuchern ein besseres Browsing-Erlebnis bietet.