Eine vertikale klebrige Seitenleiste ist ein praktisches Designelement, das an der Seite positioniert wird und innerhalb des Ansichtsfensters sichtbar bleibt, wenn Benutzer nach unten scrollen. Diese fest positionierte Seitenleiste kann ein effizientes Instrument sein, um Besucher durch Ihren Inhalt zu führen, indem sie einen schnellen Zugriff auf bestimmte Seitenabschnitte ermöglicht. Bei Websites mit umfangreichen Informationen, wie z. B. Service-Seiten, Portfolios oder Blog-Beiträgen, verbessert eine Sticky Sidebar die Benutzerfreundlichkeit, da sie ein praktisches Navigationstool darstellt, das es dem Benutzer erleichtert, zu den gewünschten Abschnitten zu springen, ohne lange scrollen zu müssen.
This tutorial will guide you through creating a vertical sticky sidebar in Elementor with navigation items, anchor links, and custom styling to match your website’s aesthetic.
Vorbereitung
Bevor Sie beginnen, stellen Sie Folgendes sicher:
- Elementor Pro Installiert und Aktiviert: Der Sticky-Effekt erfordert Elementor Pro.
- Seite einrichten: Entweder eine neue oder eine bestehende Seite, auf der Sie die vertikale Seitenleiste hinzufügen möchten.
- Vertrautheit mit Elementor Containern: Wir empfehlen die Zusammenarbeit mit Flexbox Containermodus für eine flexiblere Steuerung für dieses Tutorial.
Schritt 1: Erstellen Sie eine einzelne Seitenvorlage
We’ll begin by creating a single page template and setting it up to house the container that will serve as our vertical sticky sidebar.
- Navigieren Sie zu Vorlagen
Gehen Sie in Ihrem WordPress-Dashboard zu Elementor > Vorlagen > Neu hinzufügen.
- Vorlagentyp auswählen
Wählen Sie in dem Popup-Fenster Einzelne Seite as the template type and give it a name, like “Business Service Page Template.”
- Seitentyp auswählen
Wählen Sie oben in der Vorlagenbibliothek die Option Seiten Registerkarte.
Browse the available templates to find a suitable style. You can use the search bar to find templates for specific purposes, such as “Services” or “Company.” If you’re creating this sidebar for a particular type of page, you may also configure conditions in the display settings to limit its appearance to specific pages.
Sie können wählen, ob Sie eine vorhandene Vorlage einfügen möchten, und wenn Sie eine seitliche Sticky-Navigation zu einer Ihrer Seiten hinzufügen möchten, können Sie die Seite direkt bearbeiten.
Schritt 2: Erstellen Sie den Container in Elementor
Dieser Container dient als Basis für die vertikale klebrige Seitenleiste.
- Fügen Sie den Container hinzu
Klicken Sie im Seiteneditor auf Neuen Container hinzufügen und ziehen Sie ihn in Ihren Designbereich. Dieser Container wird als Hauptstruktur für die Sticky Sidebar dienen.
- Legen Sie die Richtung des Containers fest
Wählen Sie den Container aus und setzen Sie seine Ausrichtung im Einstellungsfenster links auf Vertikal. Eine vertikale Ausrichtung ermöglicht es, die Elemente der Seitenleiste von oben nach unten zu stapeln, was für die Erstellung eines vertikalen Seitenleistenlayouts unerlässlich ist.
- Containerbreite definieren
In der Stil tab, adjust the width to fit the sidebar’s needs, such as 200px or less, depending on your design preferences. Ensuring it takes up minimal space on the page helps maintain focus on the main content.
Schritt 3: Erstellen Sie die vertikale klebrige Seitenleiste
- Titel und Navigationselemente einfügen
Hinzufügen Überschrift widget inside the container with a title like “Quick Navigation” or “Contents.”
- Listenelemente hinzufügen
Einfügen einer Icon-Liste oder Schaltfläche widget below the heading to create navigation items. Here, we’ll use an Icon List for a streamlined look, allowing space between each item in the sidebar.
- Navigationslinks hinzufügen
Fügen Sie für Ihre Seitenleistennavigation Elemente wie z.B.:
- Über uns: Dies ist ein Link zur Unternehmensübersicht.
- Unsere Dienstleistungen: Führt zum Abschnitt Dienste.
- Testimonials: Führt zum Kundenfeedback-Bereich.
- Kontaktieren Sie uns: Links zum Kontaktformular oder zum Informationsbereich.
Passen Sie die Namen und Symbole nach Belieben an, um Ihr Seitenlayout wiederzugeben. Löschen Sie das Symbol oder gehen Sie zur Symbolgalerie, um es auszuwählen.
- Ankerlinks setzen
Add anchor links to each navigation item by setting up anchor points on the page. For example, for an “About Us” section, we’ll use 1TP5Über unsund ähnliche Verankerungen für andere Abschnitte.
Add an Anchor for “About Us”
Suchen Sie in Elementor die Option Menü-Anker widget. Drag it just above the title for the “About Us” section or to any appropriate position. Name the anchor (for example, about-us) in the settings for easy linking later.
Verknüpfen Sie den Anker mit der Navigation
Return to the Icon List item for “About Us” and link it by setting the URL as #about-us. Users clicking on this navigation item will immediately jump to the section.
Wiederholen Sie diesen Vorgang für die übrigen Menüpunkte.
- Breite der Seitenleiste festlegen
Um ein einheitliches Layout beizubehalten, setzen Sie die Breite sowohl des Containers für die Symbolliste als auch des Hauptcontainers auf einen festen Wert, z. B. 200px.
- Stil der Seitenleiste anpassen
Sie können die Schriftart, die Farben und die Abstände im Fenster Stil tab to match your site’s style. You may also add a Hintergrundfarbe, Polsterung und Schatteneffekte, um die Seitenleiste visuell hervorzuheben.
Schritt 4: Aktivieren Sie den Klebeeffekt
Um die Seitenleiste zu fixieren, während der Benutzer scrollt, gehen Sie folgendermaßen vor:
- CSS-ID für die Navigationsleiste und den Inhaltsbereich festlegen
Wählen Sie den Container der Navigationsleiste aus und fügen Sie auf der Registerkarte Erweitert eine CSS-ID hinzu; setzen Sie die ID beispielsweise auf den Wert Seitenleiste-Menü.
- Hinzufügen von benutzerdefiniertem CSS-Code
Öffnen Sie Custom CSS in Elementor (eine globale Einstellung oder Custom CSS für den Container der Navigationsleiste). Fügen Sie den folgenden Code hinzu:
#sidebar-menu {
position: fixed; /* Fixiert die Seitenleiste an ihrem Platz, damit sie sich beim Scrollen nicht verschiebt */
left: 0; /* Richtet die Seitenleiste am linken Rand der Seite aus */
top: 0; /* Positioniert die Seitenleiste am oberen Rand der Seite */
height: 100vh; /* Setzt die Höhe der Seitenleiste auf die volle Höhe des Viewports */
width: 200px; /* Passt die Breite der Seitenleiste nach Bedarf an */
z-index: 10; /* Sorgt dafür, dass die Seitenleiste über den anderen Elementen bleibt */
background-color: #e0f7fa; /* Legt die Hintergrundfarbe der Seitenleiste fest */
color: #FFF; /* Legt die Textfarbe innerhalb der Seitenleiste fest */
padding-top: 250px; /* Fügt Polsterung am oberen Rand der Seitenleiste hinzu */
overflow-y: auto; /* Ermöglicht das Scrollen, wenn der Inhalt der Seitenleiste zu lang ist */
}
Erläuterung
- Position: fest;
- Hält die Seitenleiste in einer festen Position auf dem Bildschirm, wenn der Benutzer scrollt. Sie bleibt immer im Ansichtsfenster sichtbar, unabhängig vom Scrollen der Seite.
- Links: 0;
- Align the sidebar to the viewport’s left edge, positioning it flush with the page’s left side.
- oben: 0;
- Damit wird die Seitenleiste so eingestellt, dass sie am oberen Rand des Ansichtsfensters beginnt und am oberen Rand der Seite ausgerichtet ist.
- Höhe: 100vh;
- Sets the sidebar’s height to occupy the entire viewport height (100% of the viewport height). This ensures the sidebar spans from the top to the bottom of the screen.
- Breite: 200px;
- Sets the sidebar’s width to 200px. This value can be adjusted based on design needs.
- z-index: 10;
- Sets the sidebar’s stacking order. A higher z-index ensures the sidebar appears above other elements that might overlap.
- Hintergrundfarbe: #e0f7fa;
- Hier wird die Hintergrundfarbe der Seitenleiste festgelegt. Hier wurde ein helles Pastellblau (#e0f7fa) gewählt, um den Eindruck von Ruhe und Sauberkeit zu vermitteln.
- Farbe: #FFF;
- Setzt die Textfarbe innerhalb der Seitenleiste auf Weiß (#FFF). Dies sorgt für einen Kontrast zum pastellblauen Hintergrund und verbessert die Lesbarkeit.
- padding-top: 250px;
- Fügt am oberen Rand der Seitenleiste eine Füllung hinzu. Dies kann nützlich sein, wenn Sie möchten, dass der Hauptinhalt der Seitenleiste (z. B. Navigationslinks) weiter unten beginnt und oben Platz für Marken oder Logos bleibt.
- overflow-y: auto;
- It allows vertical scrolling inside the sidebar if the content exceeds its height. This ensures the content remains accessible without affecting the page’s overall layout.
Eine vertikale Sticky Sidebar ist ein Designelement, das beim Scrollen einer Webseite an der Seite fixiert bleibt und eine schnelle Navigation zu bestimmten Abschnitten ermöglicht. Dieses Tutorial führt Sie durch die Erstellung einer Sticky Sidebar in Elementor, wobei Sie Navigationselemente, Ankerlinks und benutzerdefiniertes Styling für ein nahtloses Benutzererlebnis verwenden. Wenn Sie Elementor Pro installiert haben, werden Sie eine einzelne Seitenvorlage erstellen, einen Container für die Seitenleiste einrichten, Navigationselemente hinzufügen und Ankerlinks zuweisen. Durch Hinzufügen von benutzerdefiniertem CSS bleibt die Seitenleiste schließlich im Ansichtsfenster fixiert, was die Zugänglichkeit auf inhaltslastigen Seiten wie Service- oder Portfolioseiten verbessert.