So erstellen Sie ein anklickbares Akkordeon mit klebrigen Seitenüberschriften in Divi

Die neuen Sticky-Positionsoptionen von Divi öffnen die Tür für viele neue und aufregende Gestaltungsmöglichkeiten. In diesem Tutorial zeigen wir Ihnen, wie Sie die Sticky-Positionsoptionen von Divi mit reibungslos scrollenden Ankerlinks kombinieren, um eine akkordeonartige Art zu indizieren und Ihre Seite zu navigieren. Die Erstellung ist mit den integrierten Optionen von Divi wirklich einfach, sodass kein zusätzliches CSS oder anderer Code erforderlich ist. Sobald Sie fertig sind, haben Sie eine einzigartige Möglichkeit, Ihre Seite zu organisieren und die Benutzererfahrung auf Desktops und Mobilgeräten zu verbessern.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Hier sehen Sie, wie die klebrigen Seitenüberschriften oben und unten im Browserfenster kleben und sich wie eine Ziehharmonika übereinander stapeln.

Hier können Sie sehen, dass das Klicken auf eine der klebrigen Überschriften (mithilfe von reibungslos scrollenden Ankerlinks) zu diesem Abschnitt der Seite ebenfalls wie ein Akkordeon springt.

Hier ist die Funktionalität auch auf dem Handy.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erstellen der Sticky Row

Lassen Sie uns für den Anfang unsere klebrige Reihe erstellen. Fügen Sie dazu dem Standardabschnitt eine einspaltige Zeile hinzu.

Öffnen Sie die Zeileneinstellungen. Aktualisieren Sie auf der Registerkarte Erweitert die Sticky-Position wie folgt:

• Klebeposition: Oben und unten kleben

Dadurch bleibt die Zeile am oberen Rand des Browserfensters hängen, wenn der Benutzer nach unten scrollt, und bleibt dann am unteren Rand des Browserfensters hängen, wenn der Benutzer nach oben scrollt.

Styling der Sticky Row

Nachdem die Sticky-Position festgelegt wurde, können wir mit der integrierten Sticky-Style-Option beginnen, die Zeile zu gestalten, die es Ihnen ermöglicht, dem Element einen bestimmten Stil zu geben, wenn die Sticky-Position aktiv (oder festgefahren) ist. Für die Zeile möchten wir, dass sich der Hintergrund in eine dunkle Farbe ändert, wenn er sich in der festgefahrenen Position befindet. Öffnen Sie dazu die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Hintergrundfarbe (Desktop): #ffffff
• Hintergrundfarbe (klebrig): #051923

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Benutzerdefinierte Dachrinnenbreite verwenden: JA
• Dachrinnenbreite: 1
• Breite (Tablet und Telefon): 100%
• Padding: 0px oben, 0px unten

Als Nächstes möchten wir der Zeile einen unteren Rand geben, der als Trennlinie zwischen der Überschrift und dem Inhalt darunter dient. Und sobald sich die Zeile in der Klebeposition befindet, möchten wir stattdessen einen linken Rand anzeigen.

Aktualisieren Sie unter dem Umschalter für die Rahmenoption Folgendes:

• Randfarbe: #6eeb83
• Breite des unteren Rands (Desktop): 8px
• Breite des unteren Rands (klebrig): 0px
• Breite des linken Rands (Desktop): 0px
• Linker Randbreite (klebrig): 8px

Erstellen des Sticky Heading-Textes

Um den Seitenüberschriftstext zu erstellen, fügen Sie der Zeile ein neues Textmodul hinzu.

Fügen Sie dann den folgenden HTML-Code in den Body-Inhalt ein.

<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>

Und aktualisiere auch die Hintergrundfarbe beim Hover…

• Hintergrundfarbe (Hover): rgba(255,255,255,0.2)

Dadurch wird deutlicher, dass die Überschriften für den Benutzer anklickbar sind.

Den Sticky Heading Text gestalten

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Textausrichtung: Links
• Überschrift 2 Textfarbe (Desktop): Standard (oder schwarz)
• Überschrift 2 Textfarbe (klebrig): #ffffff
• Überschrift 2 Textgröße: 80px (Desktop), 22px (Sticky), 28px (Telefon)
• Überschrift 2 Zeilenhöhe: 1,3 em (Desktop), 1 em (klebrig)

Aktualisieren Sie dann die Auffüllung wie folgt:

• Polsterung (Desktop): 15px oben, 15px unten
• Padding (klebrig): 10 Pixel oben, 0 Pixel unten, 20 Pixel links
• Polsterung (Tablet und Telefon): 15 Pixel oben, 15 Pixel unten, 15 Pixel links, 15 Pixel rechts

Erstellen des Inhalts der Scheinseite

Sobald die klebrige Zeile vorhanden ist, können wir eine weitere Zeile hinzufügen, die unter der Überschrift einige Scheinseiteninhalte enthält. Erstellen Sie dazu eine neue einspaltige Zeile unter der klebrigen Zeile.

Fügen Sie dann der Zeile ein neues Textmodul hinzu und fügen Sie einige simulierte Inhalte ein.

Duplizieren des Abschnitts nach Bedarf für mehr klebende Seitenüberschriften und Inhalte

An dieser Stelle haben Sie das grundlegende Design, um zusätzliche Seitenabschnitte mit klebrigen Überschriften zu erstellen, indem Sie einfach den Abschnitt duplizieren.

Abschnitt duplizieren

Um einen weiteren Abschnitt zu erstellen, duplizieren Sie den vorhandenen Abschnitt, der die klebende Zeile/Überschrift und die Zeile mit simuliertem Inhalt enthält. Dies beschleunigt den Entwicklungsprozess zum Erstellen des nächsten Abschnitts der Seite.

Aktualisieren Sie den Textinhalt und die Zeilenrahmenfarbe

Aktualisieren Sie im Duplikatabschnitt den Text im Textmodul und aktualisieren Sie dann die Farbe des Rahmens unter den Zeileneinstellungen.

Nach Bedarf wiederholen

Fahren Sie mit dem Duplizieren des Abschnitts fort und aktualisieren Sie den Textinhalt und die Zeilenrandfarbe nach Bedarf. In diesem Beispiel werden wir den Abschnitt noch zwei weitere Male duplizieren, um insgesamt vier klebrige Seitenüberschriften zu erhalten, aus denen das Akkordeon besteht.

Hinzufügen von Ankerlinks zu den Überschriften von Sticky Pages

Im Moment ermöglicht die Funktionalität dem Benutzer, auf der Seite nach unten zu scrollen und die Überschriften oben und unten wie bei einem Akkordeon zu halten. Jetzt möchten wir die Überschriften anklickbar machen, damit der Benutzer, wenn er auf eine der klebrigen Überschriften klickt, zu diesem Abschnitt der Seite weitergeleitet wird. Dies geschieht über Ankerlinks.

Um einen Anker-Link hinzuzufügen, müssen wir zunächst dem Abschnitt, zu dem der Link springen soll, eine CSS-ID hinzufügen.

CSS-ID für Abschnitt 1 hinzufügen

Öffnen Sie die Einstellungen für den Abschnitt und fügen Sie die folgende CSS-ID hinzu:

• CSS-ID: eins

Öffnen Sie dann die Einstellungen für die Sticky Row und fügen Sie die folgende Zeilenlink-URL hinzu:

• Zeilenlink-URL: #one

Wenn der Benutzer nun auf die Zeile/Überschrift klickt, springt die Seite zu diesem ersten Abschnitt.

Abschnitt 2 CSS-ID hinzufügen

Als nächstes müssen wir den Ankerlink für die zweite Überschrift hinzufügen.

Öffnen Sie die Einstellungen des zweiten Abschnitts und fügen Sie die folgende CSS-ID hinzu:

• CSS-ID: zwei

Abschnitt 1 Link-URL für Sticky Row hinzufügen

Öffnen Sie dann die Einstellungen für die Sticky Row im zweiten Abschnitt und fügen Sie die Zeilenlink-URL hinzu:

• Zeilenlink-URL: #two

Abschnitt 3 CSS-ID hinzufügen

Als nächstes müssen wir den Ankerlink für die dritte Überschrift hinzufügen.

Öffnen Sie die Einstellungen des dritten Abschnitts und fügen Sie die folgende CSS-ID hinzu:

• CSS-ID: drei

Abschnitt 1 Link-URL für Sticky Row hinzufügen

Öffnen Sie dann die Einstellungen für die Sticky Row im dritten Abschnitt und fügen Sie die Zeilenlink-URL hinzu:

• Zeilenlink-URL: #drei

Abschnitt 4 CSS-ID hinzufügen

Schließlich müssen wir den Ankerlink für die vierte Überschrift hinzufügen.

Öffnen Sie die Einstellungen des vierten Abschnitts und fügen Sie die folgende CSS-ID hinzu:

• CSS-ID: vier

Abschnitt 1 Link-URL für Sticky Row hinzufügen

Öffnen Sie dann die Einstellungen für die Sticky Row im vierten Abschnitt und fügen Sie die Zeilenlink-URL hinzu:

• Zeilenlink-URL: #vier

Endergebnis

Hier sehen Sie, wie die klebrigen Seitenüberschriften oben und unten im Browserfenster kleben und sich wie eine Ziehharmonika übereinander stapeln.

Hier können Sie sehen, dass das Klicken auf eine der klebrigen Überschriften (mithilfe von reibungslos scrollenden Ankerlinks) zu diesem Abschnitt der Seite ebenfalls wie ein Akkordeon springt.

Hier ist die Funktionalität auch auf dem Handy.

Abschließende Gedanken

Dieses Design nutzt die Sticky-Position-Option auf einzigartige Weise. Die Seitenüberschriften bleiben nicht nur beim Scrollen des Benutzers sichtbar, sondern jede Überschrift ist auch anklickbar und führt den Benutzer über Ankerlinks zu diesem bestimmten Abschnitt. Das Ergebnis ähnelt einem Akkordeon für Ihre gesamte Seite. Dieses Design wäre definitiv praktisch, um lange Inhalte zu indizieren oder einen benutzerfreundlichen One-Pager zu erstellen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!