Springe zum Hauptinhalt

So erstellen Sie Section Divider Scroll-Effekte in Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Das Erstellen von Bildlaufeffekten mit dem Abschnittsteiler ist eine unterhaltsame und einfache Technik, mit der Sie Ihrer Website mithilfe des Divi WordPress-Themas Leben einhauchen können. Ein Abschnittsteiler ist weiterhin ein vielseitiges Gestaltungselement, mit dem Sie Ihren Seiteninhaltsübergängen einen Hauch von Kreativität verleihen können. 

Aber mit den Scrolling-Effekten von Divi werden die Abschnittsunterteiler noch interessanter! Der Trick besteht darin, einen Abschnitt zu isolieren, der dem Stil des Teilers Ihrer Wahl gewidmet ist. Anschließend können Sie dem Abschnitt alle Arten von durch Scrollen generierten Bewegungen hinzufügen, um schöne Scroll-Effekte als Hintergrund für den Seiteninhalt zu erstellen.

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.

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

Fügen Sie innerhalb des Körperinhalts den folgenden H2-Titel hinzu:

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

Abschnitt mit Teiler

Textmodul-Design

Aktualisieren Sie unter den Designeinstellungen Folgendes:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • 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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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 ...

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

  • 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.

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.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren