Wenn Sie nach einer Möglichkeit suchen, mit den integrierten Bildlaufeffekten von Divi flüssige Animationen zu erstellen, werden Sie dieses Tutorial lieben. Wir zeigen Ihnen, wie Sie den Scroll-Snap mit den integrierten Bewegungseffekten von Divi kombinieren, um Abschnitte mit voller Höhe zu erstellen, durch die Sie auf einmal scrollen können. 

Wir beginnen mit der Erstellung des ersten Abschnitts. Wir werden diesen Abschnitt daher im gesamten Design unserer Seite wiederverwenden. Um das Scroll-Snapping zu aktivieren, verwenden wir die CSS-Scroll-Snap-Eigenschaften, die wir den Abschnitten, HTML, Kopf- und Fußzeilen unserer Seite zuweisen. 

Mögliches Ergebnis

Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Divi Scroll Snapping Desktop Vorschau

1. Erstellen Sie eine neue Seite und beginnen Sie mit dem Entwerfen des ersten Abschnitts

Fügen Sie eine neue Seite hinzu und wechseln Sie zu Visual Builder

Fügen Sie zunächst eine neue Seite hinzu. Geben Sie den Seitentitel ein, veröffentlichen Sie die Seite und wechseln Sie zu Visual Builder.

Fügen Sie einen Divi-Artikel hinzu
Erstellungsartikel divi

Abschnittseinstellungen

Sizing

Öffnen Sie auf der neuen Seite den bereits vorhandenen Abschnitt und ändern Sie die Größeneinstellungen.

  • Min. Höhe: 100vh
Teilung

Hauptelement

Wir fügen dem Abschnitt auch zwei Zeilen CSS-Code hinzu. Diese Zeilen CSS-Code helfen uns, den Abschnitt in einen Fangpunkt für den Bildlauf-Fang zu verwandeln.

Scroll-Snap-Align: Start; Scroll-Snap-Stop: Normal;

Inhalt CSS Divi Abschnitt

Sichtbarkeit

Um sicherzustellen, dass sich nichts außerhalb des Abschnittscontainers befindet, werden die Abschnittsüberläufe ausgeblendet.

  • Horizontaler Überlauf: versteckt
  • Vertikaler Überlauf: versteckt
Masuer Abschnitt divi

Zeile 1 hinzufügen

Spaltenstruktur

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

Wählen Sie die Spaltenstruktur

Sizing

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größe wie folgt, ohne noch Module hinzuzufügen:

  • Benutzerdefinierte Dachrinnenbreite verwenden: Ja
  • Dachrinnenbreite: 1
  • Breite: 100%
  • Maximale Breite: 100%
Konfiguration des Spaltenabstands

Abstand

Wir entfernen auch die standardmäßige obere und untere Polsterung des Abschnitts.

  • Top Polsterung: 0px
  • Bodenpolsterung: 0px
Konfigurieren Sie den Divi-Abstand

Position

Und wir werden die Zeile entsprechend neu positionieren:

  • Position: Absolut
  • Ort: Unten Mitte
Konfiguration der Divi-Spaltenposition

Fügen Sie der Spalte ein Textmodul hinzu

Inhaltsfeld leer lassen

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Textmodul. Stellen Sie sicher, dass Sie das Inhaltsfeld des Moduls leer lassen.

Divi Textmodul

Hintergrundfarbe

Ändern Sie dann die Hintergrundfarbe.

  • Hintergrundfarbe: # ffee00
Divi Hintergrundfarbe Textkonfiguration

Texteinstellungen

Wir werden auch die Textzeilenhöhe des Moduls entfernen.

  • Textzeilenhöhe: 1em
Textanpassung für die Höhe der Teilzeile

Größe

Dann gehen wir zu den Größeneinstellungen und ändern die Breite.

  • Breite: 30%
Abstand der Divi-Textmodule

Abstand

Wir werden das Modul in ein Quadrat verwandeln, indem wir auch eine obere Polsterung hinzufügen.

  • Top Polsterung: 30%
Internes Abstands-Divi-Modul

Fügen Sie Zeile 2 hinzu

Spaltenstruktur

In der nächsten Zeile. Verwenden Sie die folgende Spaltenstruktur:

Wählen Sie Layout Zeile 2 Divi

Sizing

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen auf der Registerkarte Design, ohne noch Module hinzuzufügen.

  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1
  • Breite: 60vw
  • Maximale Breite: 100%
Divi-Konfiguration für Spalte 2

Abstand

Fügen Sie dann einen benutzerdefinierten oberen Rand für verschiedene Bildschirmgrößen hinzu.

  • Oberer Rand: 20vh (Desktop), 5vw (Tablet und Telefon)
Abstand Konfiguration des Divi-Säulenmoduls

Spalte 2 Abstand

Dann öffnen wir die Einstellungen in Spalte 2 und fügen benutzerdefinierte Füllwerte hinzu.

  • Obere Polsterung: 2vh (Tablet und Telefon)
  • Linke Polsterung: 2vw
  • Rechte Polsterung: 2vw
Konfiguration des Spaltenabstands 2 Divi-Modul

Fügen Sie Spalte 1 ein Bildmodul hinzu

Bild hochladen

Es ist Zeit, Mods hinzuzufügen, einen Image-Mod zu Spalte 1 hinzuzufügen und ein Bild Ihrer Wahl hochzuladen.

Diiv-Bild hochladen

Sizing

Wir werden dann die volle Breite auf das Modul erzwingen.

  • Volle Breite erzwingen: Ja
Divi in ​​voller Breite erzwingen

Fügen Sie den Textbaustein # 1 in die Spalte 2 ein

Fügen Sie H2-Inhalte hinzu

In der zweiten Spalte benötigen wir als erstes Modul ein Textmodul mit Inhalt H2.

Textmodul Spalte 2

H2-Texteinstellungen

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

  • Überschrift 2 Schriftart: Anton
  • Punkt 2 Textgröße: 5vw (Desktop), 7vw (Tablet), 9vw (Telefon)
Ändern Sie die Diiv-Schriftart

Fügen Sie den Textbaustein # 2 in die Spalte 2 ein

Inhalt hinzufügen

Fügen Sie direkt unter dem vorherigen einen weiteren Textbaustein hinzu und fügen Sie den ein Inhalt der Beschreibung Ihrer Wahl.

Fügen Sie dem Divi-Textmodul Inhalt hinzu

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

  • Textschrift: Öffnen Sie Sans
  • Textgröße: 0.8vw (Desktop), 2vw (Tablet), 2.5vw (Telefon)
  • Textzeilenhöhe: 1,8 em
Divi-Ausrichtungskonfiguration

Abstand

Fügen Sie den Abstandseinstellungen einen benutzerdefinierten oberen und unteren Rand hinzu.

  • Oberer Rand: 2vw
  • Unterer Rand: 2vw
Abstand Konfiguration des Divi-Textmoduls

Fügen Sie der 2-Spalte ein Schaltflächenmodul hinzu

Kopie hinzufügen

Das nächste und letzte Modul, das wir in dieser Spalte benötigen, ist ein Schaltflächenmodul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Fügen Sie eine Divi-Schaltfläche hinzu

Tasteneinstellungen

Gestalten Sie die Schaltfläche entsprechend:

  • Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
  • Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Textfarbe der Schaltfläche: # 333333
  • Farbe des Schaltflächenrahmens: # 333333
  • Tastenradius: 1px
Divi-Tasteneinstellungen
  • Button Font: Anton
  • Schaltflächenstil: Großbuchstaben
Divi-Modul-Tastenstil

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie einen benutzerdefinierten Wert basierend auf den Bildschirmgrößen hinzufügen.

  • Hohe interne Marge: 1 VW (Desktop), 2 VW (Tablet), 3 VW (Telefon)
  • Niedriger interner Spielraum: 1 VW (Desktop), 2 VW (Tablet), 3 VW (Telefon)
  • Linker interner Rand: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
  • Rechter Internet-Rand: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
Konfiguration des Divi-Tastenabstands

2. Fügen Sie verschiedenen Elementen Bildlaufeffekte hinzu

Textmodul in Zeile 1

Vertikale Animation

Sobald alle Elemente vorhanden sind, ist es Zeit, die Bildlaufeffekte hinzuzufügen. Öffnen Sie das Textmodul in Ihrer ersten Zeile und verwenden Sie eine vertikale Bewegung.

  • Vertikale Bewegung aktivieren: Ja
  • Startversatz: 4
  • Mittlerer Versatz: 0
  • Endversatz: -4
  • Bewegungseffekt-Trigger: Mitte des Elements
Divi Textmodul Animation

Zeile 2

Spalte 1

Horizontale Animation

Öffnen Sie dann die erste Spalte Ihrer zweiten Zeile und fügen Sie eine horizontale Bewegung hinzu.

  • Horizontale Bewegung aktivieren: Ja
  • Startoffset: -3
  • Durchschnittlicher Offset: 0 (von 40% bis 60%)
  • Endversatz: -3
  • Bewegungseffekt auslösen: Mitte des Elements
Horizontale Animation
Ein- und Ausblenden

Wir wenden auch einen Ein- und Ausblendeffekt auf dieselbe Spalte an.

  • Ein- und Ausblenden aktivieren: Ja
  • Anfangsopazität: 0%
  • Durchschnittliche Deckkraft: 100%
  • Endopazität: 100%
  • Bewegungseffekt auslösen: Mitte des Elements
Animation verblassen

Spalte 2

Horizontale Bewegung

Dann öffnen wir die Parameter der zweiten Spalte und wenden die folgenden horizontalen Bewegungsparameter an:

  • Horizontale Bewegung aktivieren: Ja
  • Startoffset: 3
  • Durchschnittlicher Offset: 0 (von 40% bis 60%)
  • Endversatz: 3
  • Bewegungseffekt auslösen: Mitte des Elements
Horizontale Bewegungsspalte 2
Ein- und Ausblenden

Mit einem eingehenden und ausgehenden Fade-Effekt.

  • Ein- und Ausblenden aktivieren: Ja
  • Anfangsopazität: 0%
  • Durchschnittliche Deckkraft: 100%
  • Endopazität: 100%
  • Bewegungseffekt auslösen: Mitte des Elements
Fondue-Ausgabe

4. Verwenden Sie den ersten Abschnitt erneut

Abschnitt viermal klonen

Sobald Sie den ersten Abschnitt und seine Bildlaufeffekte abgeschlossen haben, können Sie ihn beliebig oft klonen.

Abschnitt klonen

Ändern Sie die Hintergrundfarben aller anderen Abschnitte

Wir werden die Hintergrundfarbe aller anderen Abschnitte ändern.

  • Hintergrundfarbe: # 111111

5. Fügen Sie CSS-Code hinzu, um die Bildlauferfassung in Seiten-HTML zu aktivieren

Fügen Sie dem letzten Abschnitt der Seite ein Codemodul hinzu

Um nun die Bildlauferfassung im HTML-Code unserer Seite zu aktivieren, fügen wir an einer beliebigen Stelle im letzten Abschnitt unserer Seite ein Codemodul hinzu.

Einfügen eines Codemoduls

Fügen Sie HTML-CSS-Code ein

Diese Zeilen CSS-Code helfen uns, die Bildlaufausrichtung auf den HTML-Code unserer Seite anzuwenden:

<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>

Hinzufügen von Scroll Snapping Start zu Kopf- und Fußzeile

Wir werden sicherstellen, dass unsere Kopf- und Fußzeile auch Bildlauferfassungspunkte sind (genau wie unsere Abschnitte), indem wir auch die folgenden Zeilen CSS-Code hinzufügen:

Kopf- und Fußzeile {scroll-snap-align: start;}

zu beenden

In diesem Artikel haben wir Ihnen gezeigt, wie Sie flüssige Animationen erstellen, indem Sie den Bildlauf-Snap mit den in Divi integrierten Bewegungseffekten kombinieren. Dies ist eine großartige Möglichkeit, um Scroll-Effekte mit nur einem Scroll zu aktivieren. 

Scroll-Capture hilft Besucher um mühelos die verschiedenen Teile Ihres zu durchsuchen Website. Wir haben es mit einem Abschnittsdesign in voller Höhe kombiniert. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.