Die Seite, die über Sie spricht (über) ist eine der wichtigsten Seiten von Ihnen Website. Dadurch können die Leute Sie besser kennenlernen und entscheiden, ob sie den nächsten Schritt gerne wagen. Wenn Sie nach einer einfachen Möglichkeit suchen, Kommentare auf dieser Seite einzufügen, werden Sie dieses Tutorial lieben. Wir verwenden die Scroll-Effekte von Divi, um beim Scrollen einen sanften Erzählübergang zu erzeugen. Sobald ein Teil der Geschichte verblasst, erscheint ein anderer Teil. Dies gibt die Besucher das Gefühl, eine interessante Geschichte zu lesen. 

Mögliches Endergebnis

Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.

1. Erstellen Sie den ersten Vollbildabschnitt der Seite

Einen neuen Abschnitt hinzufügen

Hintergrundfarbe

Fügen Sie zunächst einen ersten Abschnitt zu Ihrer Info-Seite hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe in Schwarz.

• Hintergrundfarbe: # 000000

Sizing

Drehen Sie dann den Abschnitt in den Vollbildmodus, indem Sie den Größenparametern eine Mindesthöhe hinzufügen.

• Min. Höhe: 100vh

2. Fügen Sie eine animierte Linie hinzu

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie dann Ihrem Abschnitt eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Sizing

Öffnen Sie die Linienparameter und lassen Sie die Linie die gesamte Breite des Abschnittscontainers einnehmen, indem Sie die Bemaßungsparameter ändern.

• Breite: 100%
• Maximale Breite: 100%

Abstand

Fügen Sie dann die linke und rechte Füllung auf verschiedenen Bildschirmgrößen hinzu.

• Linke Polsterung: 20vw (Schreibtisch), 10vw (Tablet und Telefon)
• Rechte Polsterung: 20vw (Schreibtisch) 10vw (Tablet und Telefon)

Animation

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

• Animationsstil: Ausblenden
• Animationsdauer: 3000ms
• Animationsgeschwindigkeitskurve: Easy-In-Out
• Animation wiederholen: einmal

Position

Schließlich stellen wir sicher, dass die Linie in der Mitte des Abschnittscontainers positioniert ist, indem wir die Positionsoptionen ändern.

• Position: absolut
• Ort: Zentrum

3. Fügen Sie einen Titel mit Bildlaufeffekten ein

Fügen Sie der Spalte den Textbaustein # 1 hinzu

Fügen Sie H1-Inhalte hinzu

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

Titel 1 Texteinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die H1-Texteinstellungen wie folgt:

• Titelschrift: Nunito
• Schriftgröße des Titels: Halb fett
• Kopfzeilentextfarbe: #ffffff
• Kopfzeilentextgröße: 7vw (Desktop), 9vw (Tablet), 11vw (Telefon)

Vertikale Bewegung

Wir werden auch eine subtile vertikale Animation hinzufügen.

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

Eingehender und ausgehender Bildlaufeffekt

Mit einem eingehenden und ausgehenden Fade-Effekt.

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

Skalieren des Scroll-Effekts nach oben und unten

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

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

4. Klonen Sie einen ganzen Abschnitt einmal und fügen Sie Beschreibungstext mit Bildlaufeffekten hinzu

Titel und Inhalt bearbeiten

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 Textparameter des H2-Textmoduls

Ändern Sie die H2-Texteinstellungen entsprechend:

• Titel 2 Polizei: Nunito
• Schrifttitel 2: halb fett
• Punkt 2 Textfarbe: #ffffff
• Punkt 2 Textgröße: 5vw (Desktop), 7vw (Tablet), 8vw (Telefon)
• Höhe der Linie 2: 1em (Büro), 1.2em (Tablet und Telefon)

Fügen Sie der Spalte den Textbaustein # 2 hinzu

Inhalt hinzufügen

Als nächstes fügen Sie der Spalte mit a einen weiteren Textbaustein hinzu Inhalt Beschreibung Ihrer Wahl.

Texteinstellungen

Ändern Sie die Texteinstellungen für das Textmodul wie folgt:

• Textschrift: Öffnen Sie Sans
• Textfarbe: #ffffff
• Textgröße: 1vw (Desktop), 2.5vw (Tablet), 3vw (Telefon)
• Höhe der Textzeile: 3.1 em (Schreibtisch), 2.5 em (Tablet und Telefon)

Abstand

Verwenden Sie auch einen oberen Rand.

• Oberer Rand: 8vw

Eingehender und ausgehender Bildlaufeffekt

Wechseln Sie als Nächstes zu Bildlaufeffekten auf der Registerkarte "Erweitert" und verwenden Sie die folgenden Einstellungen zum Ein- und Ausblenden:

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

Skalieren des Scroll-Effekts nach oben und unten

Fügen Sie außerdem einen Skalierungseffekt hinzu.

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

Sie können diesen letzten Abschnitt nun so oft wie möglich klonen. Allerdings müssen Sie das anpassen Inhalt der einzelnen Abschnitte für Ihre Bedürfnisse.

Übersicht

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit den integrierten Scrolleffekten von Divi eine Geschichte auf Ihrer About-Seite erzählen. Der von uns erstellte Effekt ermöglicht das Ein- und Ausblenden der nachfolgenden Kopie, wodurch das Ergebnis entsteht Besucher wie 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.