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.
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.
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
Fügen Sie ein Textmodul hinzu
Fügen Sie in der Zeile einer Spalte ein neues Textmodul hinzu.
Inhalt des Textmoduls
Innen Inhalt des Körpers fügen Sie die folgende H2-Überschrift hinzu:
<h2>Section Avec Séparateurs</h2>
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)
Fügen Sie einen zweiten Inhaltsabschnitt hinzu
Fügen Sie im vorherigen Abschnitt einen neuen regulären Abschnitt hinzu.
Fügen Sie eine Zeile hinzu
Fügen Sie im neuen Abschnitt einer Spalte eine Zeile hinzu.
Fügen Sie ein Textmodul hinzu
Fügen Sie dann der Zeile ein neues Textmodul hinzu.
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
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
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.
Kontext des Abschnitts
Entfernen Sie erneut die Standardhintergrundfarbe des Abschnitts, aktualisieren Sie jedoch Folgendes:
- Hintergrundfarbe: rgba (0,0,0,0)
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
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
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
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 .
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)
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)
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.
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.