So erzählen Sie Ihre Geschichte beim Scrollen mit Divi

Ihre About-Seite ist eine der wichtigsten Seiten auf Ihrer Website. Es ermöglicht den Leuten, Sie besser kennenzulernen und zu entscheiden, ob sie den nächsten Schritt tun möchten. Wenn Sie nach einer reibungslosen Möglichkeit suchen, Storytelling in Ihre About-Seite aufzunehmen, werden Sie dieses Tutorial lieben. Wir werden die Scroll-Effekte von Divi verwenden, um beim Scrollen einen reibungslosen Übergang zum Geschichtenerzählen zu schaffen. Sobald ein Teil der Geschichte ausgeblendet wird, wird ein anderer Teil eingeblendet. Dies gibt dem Besucher das Gefühl, eine interessante Geschichte zu lesen. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abonnieren Sie unseren Youtube-Kanal

Laden Sie The About Page Story im Scroll-Layout KOSTENLOS herunter

Um die kostenlose Info-Story im Scroll-Layout in die Hände zu bekommen, müssen Sie sie 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!

1. Erstellen Sie den ersten Vollbildbereich der Seite

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, Ihrer About-Seite einen ersten Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe in Schwarz.

• Hintergrundfarbe: #000000

Größe

Schalten Sie den Abschnitt als nächstes in den Vollbildmodus, indem Sie in den Größeneinstellungen eine Mindesthöhe hinzufügen.

• Mindesthöhe: 100vh

2. Animierte Zeile hinzufügen

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie dann Ihrem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen, indem Sie die Größeneinstellungen ändern.

• Breite: 100%
• Maximale Breite: 100%

Abstand

Fügen Sie dann für verschiedene Bildschirmgrößen einige linke und rechte Polster hinzu.

• Linke Polsterung: 20vw (Desktop), 10vw (Tablet & Telefon)
• Rechte Polsterung: 20vw (Desktop) 10vw (Tablet & Telefon)

Animation

Um den Storytelling-Effekt zu erhöhen, verwenden wir auch eine Fade-Animation für die Zeile.

• Animationsstil: Ausblenden
• Animationsdauer: 3000ms
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

Position

Und zu guter Letzt stellen wir sicher, dass die Zeile zentral im Abschnittscontainer positioniert wird, indem wir die Positionsoptionen ändern.

• Position: Absolut
• Ort: Zentrum

3. Titel mit Scroll-Effekten einfügen

Textmodul Nr. 1 zur Spalte hinzufügen

H1-Inhalt hinzufügen

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Textmodul mit einigen H1-Inhalten.

Überschrift 1 Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H1-Texteinstellungen wie folgt:

• Überschrift Schriftart: Nunito
• Schriftstärke der Überschrift: Halbfett
• Textfarbe der Überschrift: #ffffff
• Überschriftstextgröße: 7vw (Desktop), 9vw (Tablet), 11vw (Telefon)

Vertikale Bewegung

Wir werden auch eine subtile vertikale Animation hinzufügen.

• Vertikale Bewegung aktivieren: Ja
• Startversatz: 0 (bei 50%)
• Mittlerer Offset: 10 (bei 100%)
• Endversatz: 10

Ein- und Ausblenden des Scroll-Effekts

Zusammen mit einem Ein- und Ausblendeffekt.

• Ein- und Ausblenden aktivieren: Ja
• Anfangsdeckkraft: 100 %
• Mittlere Deckkraft: 100 % (bei 55 %)
• Endopazität: 0% (bei 62%)

Scroll-Effekt nach oben und unten skalieren

Zu guter Letzt werden wir auch einen Skalierungseffekt nach oben und unten verwenden.

• Skalierung nach oben und unten aktivieren: Ja
• Startskala: 100 % (bei 40 %)
• Mittlere Skala: 95 % (bei 74 %)
• Endskala: 90%

4. Gesamten Abschnitt einmal klonen und Beschreibungstext mit Scroll-Effekten einschließen

Inhaltsüberschrift ändern und kopieren

Sobald Sie den ersten Abschnitt abgeschlossen haben, können Sie ihn vollständig klonen. Öffnen Sie das Textmodul im Container für doppelte Abschnitte und verwenden Sie eine H2-Kopie.

Ändern Sie die Texteinstellungen des Textmoduls H2

Ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftart: Nunito
• Überschrift 2 Schriftstärke: Halbfett
• Überschrift 2 Textfarbe: #ffffff
• Überschrift 2 Textgröße: 5vw (Desktop), 7vw (Tablet), 8vw (Telefon)
• Überschrift 2 Zeilenhöhe: 1em (Desktop), 1,2em (Tablet & Telefon)

Textmodul #2 zur Spalte hinzufügen

Inhalt hinzufügen

Als nächstes fügen Sie der Spalte ein weiteres Textmodul mit einem beliebigen Beschreibungsinhalt Ihrer Wahl hinzu.

Texteinstellungen

Ändern Sie die Texteinstellungen des Textmoduls wie folgt:

• Textschriftart: Open Sans
• Textfarbe: #ffffff
• Textgröße: 1vw (Desktop), 2.5vw (Tablet), 3vw (Telefon)
• Textzeilenhöhe: 3.1em (Desktop), 2.5em (Tablet & Telefon)

Abstand

Verwenden Sie auch einen oberen Rand.

• Oberer Rand: 8vw

Ein- und Ausblenden des Scroll-Effekts

Wechseln Sie dann zu den Bildlaufeffekten auf der Registerkarte Erweitert und verwenden Sie die folgenden Ein- und Ausblendeinstellungen:

• Ein- und Ausblenden aktivieren: Ja
• Anfangsdeckkraft: 100 %
• Mittlere Deckkraft: 0% (bei 31%)
• Endopazität: 0% (bei 35%)

Scroll-Effekt nach oben und unten skalieren

Fügen Sie auch einen Skalierungseffekt nach oben und unten hinzu.

• Skalierung nach oben und unten aktivieren: Ja
• Startskala: 100 % (bei 40 %)
• Mittlere Skala: 95 % (bei 74 %)
• Endskala: 90%

5. Klonen Sie den zweiten Abschnitt so oft Sie wollen

Ändern Sie den Inhalt, während Sie gehen

Sobald Sie den zweiten Abschnitt auf Ihrer Seite abgeschlossen haben, können Sie ihn je nach Storyline Ihrer About-Seite beliebig oft klonen. Stellen Sie sicher, dass Sie den Inhalt in jedem Abschnitt ändern.

6. Komplette Seite mit CTA-Abschnitt

Abstand zwischen Beschreibung und Textmodul ändern

Vervollständigen Sie die Infoseite mit einem CTA-Abschnitt am Ende. Öffnen Sie das Beschreibungstextmodul und ändern Sie den oberen und unteren Rand.

• Oberer Rand: 4vw
• Unterer Rand: 4vw

Schaltflächenmodul hinzufügen

Kopie hinzufügen

Fügen Sie dann auch ein Button-Modul mit einer Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Schaltflächeneinstellungen wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Tastentextgröße: 1vw (Desktop), 2.5vw (Tablet), 3.5vw (Telefon)
• Schaltflächentextfarbe: #000000
• Hintergrundfarbe der Schaltfläche: #FFFFFF
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 100px
• Schaltflächenschrift: Nunito
• Schriftstärke der Schaltfläche: Fett

Abstand

Vervollständigen Sie die Einstellungen für das Schaltflächenmodul, indem Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzufügen.

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 3vw (Desktop), 6vw (Tablet), 8vw (Telefon)
• Rechte Polsterung: 3vw (Desktop), 6vw (Tablet), 8vw (Telefon)

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den integrierten Scroll-Effekten von Divi eine Geschichte auf Ihrer About-Seite erzählen. Der von uns erzeugte Effekt ermöglicht das Ein- und Ausblenden aufeinanderfolgender Kopien, wodurch Besucher den Eindruck erwecken, sie würden eine Geschichte lesen. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.