Hören Sie auf, Zeit und Geld zu verschwenden!

Erstellen Sie noch heute ganz einfach Ihre WordPress-Website oder Ihren Blog.

Elementor ist das einfachste und vor allem schnellste Tool, um jede Art von WordPress-Website oder -Blog zu erstellen. Keine technischen Kenntnisse ist erforderlich und eignet sich perfekt für Anfänger oder professionelle Anwender. Sie können es selbst tun, also tun Sie es!

Die Scroll-Effekte von Divi bringen eine Menge neuer Gestaltungsmöglichkeiten für die von Ihnen erstellten Websites. Die subtilen Interaktionen, die Sie hinzufügen, können wirklich dazu beitragen, das Gesamtbild Ihres zu verbessern Website. Alles wird noch besser, sobald Sie die Scroll-Effekte synchronisieren. In diesem Tutorial behandeln wir speziell das Erstellen eines schönen kollidierenden Heldenabschnitts mit Spalten beim Scrollen. Das Design des Heldenabschnitts führt zwei verschiedene Spalten auf der Schriftrolle zusammen, was wiederum dazu beiträgt, die Kopie hervorzuheben. 

Mögliches Ergebnis

Nachdem wir alle Schritte durchlaufen haben, sehen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.

Divi Abschnitt Kollision

Erstellen Sie das Layout der Heldensektion neu

Einen neuen Abschnitt hinzufügen

Anpassen der Hintergrundfarbe

Fügen Sie zunächst der Seite, an der Sie arbeiten, einen neuen Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

  • Hintergrundfarbe: # f4f2f7
Divi Abschnitt Konfiguration

Abstand

Entfernen Sie auch die standardmäßige obere und untere Polsterung aus allen Abschnitten.

  • Obere Polsterung: 0px
  • Polsterung unten: 0px
Divi-Abstandskonfiguration

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

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

Layout der Divi-Spalten

Sizing

Öffnen Sie die Linienparameter und ändern Sie die Bemaßungsparameter entsprechend, ohne noch Module hinzuzufügen:

  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1
  • Spaltenhöhen ausgleichen: Ja
  • Breite: 100%
  • Maximale Breite: 100%
Konfiguration des Divi-Zeilenabstands

Abstand

Entfernen Sie dann alle standardmäßigen oberen und unteren Polster.

  • Obere Polsterung: 0px
  • Polsterung unten: 0px
Divi Linienabstand

Überlauf

Und verstecke die Überläufe der Reihe.

  • Horizontaler Überlauf: versteckt
  • Vertikaler Überlauf: versteckt
Konfiguration der Divi-Sichtbarkeitslinie

Einstellungen für Spalte 1

Abstand

Öffnen Sie dann die Einstellungen in Spalte 1 und fügen Sie benutzerdefinierte Füllwerte hinzu.

  • Obere Polsterung: 15vw
  • Polsterung unten: 10vw
  • Linke Polsterung: 5vw
  • Rechte Polsterung: 5vw
Konfiguration des Spaltenabstands in zwei Zeilen

Z Index

Erhöhen Sie auch den z-Index der Spalte.

  • Z-Index: 12
Relative Position divi

Einstellungen für Spalte 2

Hintergrundbild

Öffnen Sie anschließend die Einstellungen in Spalte 2 und laden Sie ein Hintergrundbild Ihrer Wahl hoch.

  • Hintergrundbildgröße: Cover
  • Position des Hintergrundbildes: Mitte
  • Hintergrundbild wiederholen: keine Wiederholung
  • Hintergrundbilder mischen: Normal
Divi Spaltenhintergrund

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

Fügen Sie H1-Inhalte hinzu

Es ist Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul in Spalte 1. Fügen Sie einen beliebigen H1-Inhalt Ihrer Wahl hinzu.

Freiberufliche Assistenzabteilung

H1-Texteinstellungen

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

  • Titelschrift: Schatten im Licht
  • Schriftgröße des Titels: fett
  • Kopfzeilentextfarbe: # 000000
  • Kopfzeilentextgröße: 6vw (Desktop), 11vw (Tablet), 13vw (Telefon)
  • Kopfbuchstabenabstand: -2px
  • Kopfzeilenhöhe: 1.2em
Divi Schriftkonfiguration

Abstand

Fügen Sie auch einen oberen Rand hinzu.

  • Oberer Rand: 10vw
Konfiguration des Textabstands

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

Inhalt hinzufügen

Fügen Sie ein weiteres Textmodul mit einem Beschreibungsinhalt Ihrer Wahl ein.

Fügen Sie eine Textspalte 1 divi hinzu

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

  • Textschrift: Öffnen Sie Sans
  • Textfarbe: # 1e1e1e
  • Textgröße: 0.9vw (Desktop), 1.9vw (Tablet), 3vw (Telefon)
  • Textzeilenhöhe: 2,4 em
Anpassung der Divi-Textschrift

Abstand

Fügen Sie benutzerdefinierte Randwerte für verschiedene Bildschirmgrößen hinzu.

  • Oberer Rand: 4vw (Desktop), 8vw (Tablet), 12vw (Telefon)
  • Unterer Rand: 4vw (Desktop), 8vw (Tablet), 12vw (Telefon)
Konfiguration des Divi-Textabstands

Fügen Sie der 1-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 ein Divi-Button-Modul hinzu

Tasteneinstellungen

Ändern Sie die Parameter der Modultasten wie folgt:

  • Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
  • Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Knopftextfarbe: #ffffff
  • Hintergrundfarbe der Schaltfläche: # 000000
  • Schaltflächenrandbreite: 0px
  • Schaltflächenrandradius: 100px
Benutzerdefinierte Stil Button Divi
  • Tastenschrift: Öffnen ohne
Parametereinstellungen für die Schriftartschaltfläche

Abstand

Vervollständigen Sie die Tasteneinstellungen, indem Sie benutzerdefinierte Füllwerte auf verschiedenen Bildschirmgrößen hinzufügen.

  • Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Bodenpolsterung: 1 VW (Schreibtisch), 2 VW (Tablet), 3 VW (Telefon)
  • Linke Polsterung: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
  • Rechte Polsterung: 3vw (Schreibtisch), 5vw (Tablet), 7vw (Telefon)
Divi-Tastenabstand

Fügen Sie der 2-Spalte einen Textbaustein hinzu

Inhalt hinzufügen

In der zweiten Spalte benötigen wir nur ein Textmodul. Geben Sie den Inhalt Ihrer Wahl ein.

Textspalte 2 divi

Texteinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Texteinstellungen entsprechend:

  • Textschrift: Schatten im Licht
  • Textfarbe: rgba (0,0,0,0,25)
  • Textgröße: 9vw (Desktop), 14vw (Tablet und Telefon)
  • Textbuchstabenabstand: -3px
  • Höhe der Textzeile: 1em
  • Textausrichtung: Mitte (Büro), links (Tablet und Telefon)
Jane Doe Text Spalte 2 Divi

Abstand

Fügen Sie auch benutzerdefinierte Füllwerte hinzu.

  • Obere Polsterung: 5vw (Schreibtisch),
  • Bodenpolsterung: 60vw (Tablet und Telefon)
  • Linke Polsterung: 5vw (Tablet und Telefon)
Divi Textabstand

Wenden Sie Bildlaufanimationen an

Abschnitt

Auf- und Abstieg

Sobald alle deine Mods vorhanden sind, ist es Zeit, die Scroll-Effekte anzuwenden! Öffnen Sie zuerst die Abschnittsparameter und verwenden Sie den folgenden Skalierungseffekt:

  • Aktivieren Sie Sclaing von oben nach unten
  • Startskala: 100% (bis 49%)
  • Mittlerer Maßstab:
    • Büro: 70% (100%)
    • Tablet und Telefon: 100% (100%)
  • Endskala:
    • Büro: 70%
    • Tablet und Telefon: 100%
Scroll-Effekt-Animations-Divi

Spalte 1

Horizontale Bewegung

Öffnen Sie anschließend die Einstellungen in Spalte 1 und verwenden Sie den folgenden horizontalen Bewegungseffekt:

  • Horizontale Bewegung aktivieren: Ja
  • Startoffset: 0
  • Durchschnittlicher Offset:
    • Büro: 0 (bei 65%)
    • Tablet und Telefon: 0 (93%)
  • Endversatz:
    • Büro: 6
    • Tablet und Telefon: 0
Divi horizontale Ausrichtung

Auf- und Abstieg

Wenden Sie auch einen Skalierungseffekt auf die Spalte an.

  • Skalierung nach oben und unten aktivieren: Ja
  • Startskala:
    • Büro: 10%
    • Tablet und Telefon: 100%
  • Mittlerer Maßstab:
    • Büro: 90%
    • Tablet und Telefon: 100%
  • Endskala: 100%
Teil der Helden, die mit Säulen kollidieren

Spalte 2

Horizontale Bewegung

Öffnen Sie dann die Parameter in Spalte 2 und verwenden Sie die folgenden horizontalen Bewegungsparameter:

  • Horizontale Bewegung aktivieren: Ja
  • Startoffset: 0
  • Durchschnittlicher Offset:
    • Büro: 0 (bei 53%)
    • Tablet und Telefon: 0 (56%)
  • Endversatz:
    • Büro: -6 (bei 53%)
    • Tablet und Telefon: 0 (100%)
Horizontale Animation divi

Ein- und Ausblenden

Vervollständigen Sie die Spalteneinstellungen, indem Sie einen Ein- und Ausblendeffekt hinzufügen.

  • Ein- und Ausblenden aktivieren: Ja
  • Anfangsopazität: 100% (bei 47%)
  • Durchschnittliche Deckkraft:
    • Büro: 0% (47%)
    • Tablet und Telefon: 100% (47%)
  • Ende der Deckkraft:
    • Büro: 0%
    • Tablet und Telefon: 100%
Motion Animation Divi

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie die Bildlaufeffekte von Divi kreativ nutzen können, um einen spaltenübergreifenden Heldenabschnitt zu erstellen. Sobald Besucher scrollen, beginnen die beiden unterschiedlichen Spalten und ihre Elemente zu verschmelzen. Dadurch können Sie die Kopie noch mehr betonen.

Andere Ressourcen

Hier ist eine Liste von Inhalten, mit denen Sie mehr aus Ihrem machen können Wordpress-Theme Divi.

%d Blogger wie diese Seite: