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.

Dieses Tutorial führt Sie durch die Erstellung einer vertikalen Sticky Sidebar in Elementor mit Navigationselementen, Ankerlinks und individuellem Styling, das zur Ästhetik Ihrer Website passt.

Vorbereitung

Bevor Sie beginnen, stellen Sie Folgendes sicher:

1. Elementor Pro Installiert und Aktiviert: Der Sticky-Effekt erfordert Elementor Pro.
2. Seite einrichten: Entweder eine neue oder eine bestehende Seite, auf der Sie die vertikale Seitenleiste hinzufügen möchten.
3. 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

Wir beginnen mit der Erstellung einer einzelnen Seitenvorlage und richten diese für den Container ein, der als vertikale Seitenleiste dienen soll.

1. Navigieren Sie zu Vorlagen

Gehen Sie in Ihrem WordPress-Dashboard zu Elementor > Vorlagen > Neu hinzufügen.

2. Vorlagentyp auswählen

Wählen Sie in dem Popup-Fenster Einzelne Seite als Vorlagentyp und geben Sie ihr einen Namen, z.B. "Business Service Page Template".

3. Seitentyp auswählen

Wählen Sie oben in der Vorlagenbibliothek die Option Seiten Registerkarte.

Durchsuchen Sie die verfügbaren Vorlagen, um einen passenden Stil zu finden. Sie können die Suchleiste verwenden, um Vorlagen für bestimmte Zwecke zu finden, z. B. "Dienstleistungen" oder "Unternehmen". Wenn Sie diese Seitenleiste für einen bestimmten Seitentyp erstellen, können Sie in den Anzeigeeinstellungen auch Bedingungen festlegen, um ihr Erscheinen auf bestimmte Seiten zu beschränken.

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.

1. 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.

2. 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.

3. Containerbreite definieren

In der Stil passen Sie die Breite an die Bedürfnisse der Seitenleiste an, z.B. 200px oder weniger, je nach Ihren Designvorlieben. Wenn Sie sicherstellen, dass die Seitenleiste möglichst wenig Platz auf der Seite einnimmt, bleibt der Fokus auf dem Hauptinhalt.

Schritt 3: Erstellen Sie die vertikale klebrige Seitenleiste

1. Titel und Navigationselemente einfügen

Hinzufügen Überschrift Widget innerhalb des Containers mit einem Titel wie "Schnellnavigation" oder "Inhalt".

2. Listenelemente hinzufügen

Einfügen einer Icon-Liste oder Schaltfläche Widget unterhalb der Überschrift, um Navigationselemente zu erstellen. Hier verwenden wir eine Icon-Liste für ein schlankes Erscheinungsbild, das Platz zwischen den einzelnen Elementen in der Seitenleiste lässt.

3. 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.

4. Ankerlinks setzen

Fügen Sie Ankerlinks zu jedem Navigationselement hinzu, indem Sie Ankerpunkte auf der Seite einrichten. Für einen Abschnitt "Über uns" verwenden wir beispielsweise 1TP5Über unsund ähnliche Verankerungen für andere Abschnitte.

Einen Anker für "Über uns" hinzufügen

Suchen Sie in Elementor die Option Menü-Anker Widget. Ziehen Sie es direkt über den Titel für den Abschnitt "Über uns" oder an eine andere geeignete Position. Geben Sie dem Anker in den Einstellungen einen Namen (z.B. über-uns), damit Sie ihn später leicht verlinken können.

Verknüpfen Sie den Anker mit der Navigation

Kehren Sie zum Element "Über uns" in der Symbolliste zurück und verknüpfen Sie es, indem Sie die URL als #about-us festlegen. Benutzer, die auf dieses Navigationselement klicken, werden sofort zu diesem Abschnitt springen.

Wiederholen Sie diesen Vorgang für die übrigen Menüpunkte.

5. 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.

6. Stil der Seitenleiste anpassen

Sie können die Schriftart, die Farben und die Abstände im Fenster Stil um den Stil Ihrer Website anzupassen. Sie können auch eine 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:

1. 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;
  • Richten Sie die Seitenleiste am linken Rand des Ansichtsfensters aus und positionieren Sie sie bündig mit der linken Seite der Seite.

• 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;
  • Legt fest, dass die Höhe der Seitenleiste die gesamte Höhe des Ansichtsfensters einnimmt (100% der Höhe des Ansichtsfensters). Dadurch wird sichergestellt, dass die Seitenleiste vom oberen bis zum unteren Rand des Bildschirms reicht.

• Breite: 200px;
  • Setzt die Breite der Seitenleiste auf 200px. Dieser Wert kann je nach Designbedarf angepasst werden.

• z-index: 10;
  • Legt die Stapelreihenfolge der Seitenleiste fest. Ein höherer z-Index stellt sicher, dass die Seitenleiste über anderen Elementen erscheint, die sich überlappen könnten.

• 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;
  • Sie ermöglicht einen vertikalen Bildlauf innerhalb der Seitenleiste, wenn der Inhalt deren Höhe überschreitet. Dadurch wird sichergestellt, dass der Inhalt zugänglich bleibt, ohne das Gesamtlayout der Seite zu beeinträchtigen.

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.