Das Erstellen von Bildlaufeffekten mit dem Abschnittsteiler ist eine einfache und unterhaltsame Technik, die Ihrem Leben Leben einhauchen kann Website Verwendung der Wordpress-Theme Divi. Ein Abschnittsteiler ist nach wie vor ein vielseitiges Gestaltungselement, das nützlich ist, um Ihren Übergängen einen Hauch von Kreativität zu verleihen Inhalt de Seite. 

Aber mit den Scroll-Effekten von Divi werden Abschnittstrenner noch interessanter! Der Trick besteht darin, einen Abschnitt zu isolieren, der dem Teilerstil Ihrer Wahl gewidmet ist. Anschließend können Sie dem Abschnitt alle Arten von durch Scrollen erzeugten Bewegungen hinzufügen, um wunderschöne Scrolleffekte als Hintergrund für zu erstellen Inhalt Seite.

Fangen wir an!

Mögliches Ergebnis

Hier ist eine Übersicht über die Designs, die wir nach Abschluss dieses Tutorials erzielen können.

Divi Animation

So erstellen Sie mit Divi animierte Teiler für Bildlaufabschnitte

Erstellung der beiden Inhaltsbereiche

Fügen Sie eine Zeile hinzu

Erstellen Sie zunächst eine Zeile mit einer Spalte im Standardabschnitt.

Divi-Abschnitt hinzufügen

Abschnittsrand (für Tests)

Fügen Sie zu Testzwecken dem Abschnitt einen oberen Rand hinzu, damit wir Platz zum Scrollen haben. Öffnen Sie die Abschnittseinstellungen und fügen Sie Folgendes hinzu:

  • Oberer Rand: 80vh
Konfigurieren Sie den Abstand der Teilabschnitte

Fügen Sie ein Textmodul hinzu

Fügen Sie in der Zeile einer Spalte ein neues Textmodul hinzu.

Divi Textmodul

Inhalt des Textmoduls

Innen Inhalt des Körpers fügen Sie die folgende H2-Überschrift hinzu:

<h2>Section Avec Séparateurs</h2>

Abschnitt mit Teiler

Textmodul-Design

Aktualisieren Sie unter den Designeinstellungen Folgendes:

  • Textschrift: Roboto
  • Textausrichtung: Mitte
  • Punkt 2 Textfarbe: # bae0d8
  • Header 2 Textgröße: 80px (Desktop), 50px (Tablet), 30px (Telefon)
Divi Schriftkonfiguration

Fügen Sie einen zweiten Inhaltsabschnitt hinzu

Fügen Sie im vorherigen Abschnitt einen neuen regulären Abschnitt hinzu.

Teilerabschnitt Teiler-Bildlaufeffekte

Fügen Sie eine Zeile hinzu

Fügen Sie im neuen Abschnitt einer Spalte eine Zeile hinzu.

Divi Abschnitt 1 hinzufügen

Fügen Sie ein Textmodul hinzu

Fügen Sie dann der Zeile ein neues Textmodul hinzu.

Divi-Textmodul hinzufügen

Textmodul-Design

Wir können den Standard-Padding-Inhalt vorerst im Body behalten. Fahren wir mit der Registerkarte Design fort und aktualisieren Folgendes:

  • Textschrift: Roboto
  • Text Textfarbe: #dddddd
  • Textgröße: 16px
  • Textzeilenhöhe: 1,5 em
  • Textausrichtung: links
  • Maximale Breite: 400 px
  • Ausrichtung des Moduls: Mitte
Passen Sie das Divi-Modul im Textstil an

Abschnittseinstellungen

Stellen Sie sicher, dass Sie die Standardhintergrundfarbe des Abschnitts entfernen, ihm jedoch einen vollständig transparenten Hintergrund geben. Dann können wir die obere Polsterung entfernen und einen unteren Rand für Scroll-Testzwecke hinzufügen.

Öffnen Sie dazu die Abschnittseinstellungen und aktualisieren Sie Folgendes:

  • Hintergrundfarbe: rgba (0,0,0,0)
  • Unterer Rand: 80vh
  • Auffüllung: 0px
Konfiguration des Divi-Abstandsabschnitts

Erstellung des animierten Abschnitts-Trennzeichens

Sobald zwei Inhaltsabschnitte abgeschlossen sind, können wir den Abschnitt für unsere animierten Abschnittsteiler hinzufügen.

Einen neuen Abschnitt hinzufügen

Erstellen Sie einen neuen regulären Abschnitt in der Mitte der beiden Inhaltsbereiche.

Fügen Sie reguläre Abschnittsdivi hinzu

Kontext des Abschnitts

Entfernen Sie erneut die Standardhintergrundfarbe des Abschnitts, aktualisieren Sie jedoch Folgendes:

  • Hintergrundfarbe: rgba (0,0,0,0)
Personnalsier Hintergrund Abschnitt divi

Abschnittsteiler Design

Keine Sorge, wir erstellen unsere Hintergrundfarbe mit den Abschnittsunterteilungen. Klicken Sie dazu auf die Registerkarte Design und fügen Sie dem Abschnitt einen oberen und unteren Teiler wie folgt hinzu:

Überlegenes Trennwanddesign

  • Top Divider Style: siehe Screenshot
  • Farbe des oberen Teilers: # 524fbf
  • Höhe des oberen Teilers: 20vw
  • Horizontale Wiederholung des oberen Teilers: 0,6x
  • Umdrehen des oberen Teilers: horizontal
Konfiguration des Divi-Abschnittsrandes

Design des unteren Teilers

  • Stil des unteren Teilers: siehe Screenshot
  • Farbe des unteren Trennzeichens: # 524fbf
  • Höhe des unteren Teilers: 20vw
  • Horizontale Wiederholung des unteren Teilers: 0,5x
  • Neigung des unteren Teilers: horizontal und vertikal
Unterer Teilerwähler
Schnitthöhe und Polsterung

Da dieser Abschnitt nur für das Design von Teilern gedacht ist, können wir die Höhe und die Polsterung entfernen, sodass nur der Stil des Teilers angezeigt wird und kein unnötiger Platz zwischen den beiden Inhaltsabschnitten entsteht. Aktualisieren Sie Folgendes:

  • Höhe: 0px
  • Auffüllen: 0px hoch, 0px niedrig
Low Divider Section Divi
Abschnittstrenner-Bildlaufeffekte

Geben Sie dem Abschnitt dann die folgenden Bildlaufeffekte:

Unter der Registerkarte Horizontale Bewegung ...

  • Horizontale Bewegung aktivieren: JA

Wir können die Standardeinstellungen für diese in der Ansicht der beibehalten Büro .

Horizontal Scroll Divi

Aktualisieren Sie dann die horizontalen Bewegungsparameter auf dem tablette :

  • Startversatz: 3 (bei 0% des Fensters)
  • Durchschnittlicher Versatz: 0 (bei 50% des Ansichtsfensters)
  • Endversatz: -3 (bei 100% des Ansichtsfensters)
Horizontale Verunreinigungstabelle divi

Unter der Registerkarte Skalieren nach oben und unten Effekt Aktualisieren Sie Folgendes auf der Büro ...

  • Startskala: 200% (bei 0% des Fensters)
  • Durchschnittliche Skala: 150% (bei 45% -65% des Ansichtsfensters)
  • Endskala: 150% (bei 100% des Ansichtsfensters)
Layoutkonfiguration

Aktualisieren Sie dann den Effekt "Skalieren nach oben und unten" auf dem tablette wie folgt:

  • Startskala: 400% (bei 0% des Fensters)
  • Durchschnittliche Skala: 300% (bei 45% -65% des Ansichtsfensters)
  • Endskala: 400% (bei 100% des Ansichtsfensters)

Der Hauptgrund, warum wir die Bewegungseffekte auf dem Tablet (und dem Telefon) anpassen müssen, liegt in den horizontalen Bewegungswerten unter Verwendung von Pixellängeneinheiten (d. H. 3 = 300 Pixel) absolut und nicht an die Breite des Browsers anpassen.

Lassen Sie uns nun das Endergebnis unseres durch Scrollen animierten Abschnittsteilers sehen.

Mögliches Endergebnis divid

Abschließende Gedanken

Das Animieren von Abschnittsunterteilungen auf der Schriftrolle ist eine unterhaltsame und effektive Möglichkeit, eine Webseite zum Leben zu erwecken. Ich hoffe, dies gibt Ihnen Inspiration, um selbst noch kreativere Designs hervorzubringen.