3 mühelose Scroll-Motion-Effekte, die Sie mit Divi . zu Ihren Schlagzeilen hinzufügen können

Die neuen Scroll-Effekte von Divi bringen unzählige neue Gestaltungsmöglichkeiten für die von Ihnen erstellten Seiten. Sie können jedem Container einen benutzerdefinierten Scroll-Effekt hinzufügen und die Effekte entsprechend synchronisieren. Diese Gestaltungsfreiheit hilft Ihnen, bestimmte Inhalte auf elegante Weise hervorzuheben. In diesem Tutorial zeigen wir Ihnen, wie Sie Ihren Überschriften Scroll-Motion-Effekte hinzufügen. Auf diese Weise können Sie Ihre Schlagzeilen besonders hervorheben und Ihre Besucher involvieren. Sie können die JSON-Dateien auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Beispiel #3

Desktop

Handy, Mobiltelefon

Laden Sie die Layouts für die Scroll-Bewegungseffekte KOSTENLOS herunter

Um die kostenlosen Abschnittslayouts in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

1. Erstellen Sie Ihr Hero Section Design auf einer neuen oder bestehenden Seite

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe in Weiß.

• Hintergrundfarbe: #FFFFFF

Abstand

Wechseln Sie zur Registerkarte Design und ändern Sie auch die Abstandswerte.

• Obere Polsterung: 15vw (Desktop), 20vw (Tablet), 25vw (Telefon)
• Untere Polsterung: 0vw

Überläufe

Und um sicherzustellen, dass die Scroll-Effekte keine horizontalen Scroll-Balken verursachen, blenden wir auch die Überläufe des Abschnitts aus.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Breite und die maximale Breite in den Größeneinstellungen.

• Breite: 90%
• Maximale Breite: 100%

Abstand

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

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Textmodul Nr. 1 zur Spalte hinzufügen

H1-Inhalt hinzufügen

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Textmodul mit einigen H1-Inhalten.

H1-Texteinstellungen

Ändern Sie die H1-Texteinstellungen des Moduls entsprechend:

• Überschrift Schriftart: Playfair Display
• Schriftstärke der Überschrift: Fett
• Ausrichtung des Überschriftentextes: Mitte
• Überschriftstextfarbe: #000000
• Überschriftstextgröße: 6vw

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie dann eine weitere Zeile mit der folgenden Spaltenstruktur hinzu:

Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und verwenden Sie einen Hintergrund mit Farbverlauf.

• Farbe 1: #444444
• Farbe 2: #000000
• Verlaufstyp: Linear
• Verlaufsrichtung: 237deg

Größe

Ändern Sie auch die Größeneinstellungen der Zeile.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Fügen Sie dann eine benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 0vw
• Untere Polsterung: 10vw (Desktop), 15vw (Tablet), 20vw (Telefon)

Textmodul #2 zur Spalte hinzufügen

Inhalt hinzufügen

Das erste Modul, das wir in dieser Zeile benötigen, ist ein Textmodul mit etwas Inhalt.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschrift: Playfair Display
• Textfarbe: #dddddd
• Textgröße: 6vw
• Textzeilenhöhe: 1em
• Stärke der Textschattenunschärfe: 0.29em
• Textschattenfarbe: #ffffff
• Textausrichtung: Mitte

Textmodul Nr. 3 zur Spalte hinzufügen

Inhalt hinzufügen

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

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

• Textschriftart: Open Sans
• Textfarbe: #e8e8e8
• Textgröße: 0,9 vw (Desktop), 2 vw (Tablet), 2,5 vw (Telefon)
• Textzeilenhöhe: 2em
• Textausrichtung: Mitte

Größe

Ändern Sie auch die Größeneinstellungen.

• Breite: 40% (Desktop), 90% (Tablet & Telefon)
• Modulausrichtung: Mitte

Abstand

Und schließen Sie einen oberen und unteren Rand für verschiedene Bildschirmgrößen ein.

• Obere Marge: 10vw (Desktop), 15vw (Tablet), 20vw (Telefon)
• Unterer Rand: 3vw (Desktop), 8vw (Tablet), 13vw (Telefon)

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir brauchen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Ausrichtung

Fahren Sie fort, indem Sie die Schaltflächenausrichtung auf der Registerkarte "Design" ändern.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Stylen Sie dann die Schaltfläche wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0,8 vw (Desktop), 1,5 vw (Tablet), 2,5 vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Farbe des Knopfrahmens: #ffffff
• Schaltflächenrandradius: 1px
• Schaltflächenschrift: Open Sans
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: Großbuchstaben

Abstand

Und fügen Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 2.5vw (Desktop), 5vw (Tablet), 8vw (Telefon)
• Rechte Polsterung: 2.5vw (Desktop), 5vw (Tablet), 8vw (Telefon)

2. Scroll-Effekte anwenden

Beispiel 1

Textmodul #1

Horizontale Bewegung

Nachdem wir nun das allgemeine Erscheinungsbild unseres Heldenbereichs entworfen haben, ist es an der Zeit, die verschiedenen Scrollbewegungseffekte auf unsere Kopie anzuwenden. Um das erste Beispiel neu zu erstellen, öffnen Sie das erste Textmodul und verwenden Sie die folgende horizontale Bewegung:

• Horizontale Bewegung aktivieren: Ja
• Startversatz: 0
• Mittenversatz: 0
  • 0 % – 80 % (Desktop)
  • 0% – 95% (Tablet & Telefon)
• Endversatz: -10

Ein- und Ausblenden

Wir werden auch einen Ein- und Ausblendeffekt hinzufügen.

• Ein- und Ausblenden aktivieren: Ja
• Anfangsdeckkraft: 100 %
• Mittlere Deckkraft: 100%
  • 0 % – 70 % (Desktop)
  • 0% – 95% (Tablet & Telefon)
• Endopazität: 0%

Textmodul #2

Horizontale Bewegung

Öffnen Sie dann das zweite Textmodul in Ihrem Abschnitt und wenden Sie die folgende horizontale Bewegung an:

• Horizontale Bewegung aktivieren: Ja
• Startversatz: 10
• Mittenversatz: 0
  • 10% – 70% (Desktop)
  • 10% – 95% (Tablet & Telefon)
• Endversatz: 10

Ein- und Ausblenden

Zusammen mit einem passenden Ein- und Ausblendeffekt:

• Ein- und Ausblenden aktivieren: Ja
• Anfangsdeckkraft: 0%
• Mittlere Deckkraft: 100%
  • 35 % – 60 % (Desktop)
  • 35 % – 95 % (Tablet & Telefon)
• Endopazität: 0%

Beispiel #2

Textmodul #1

Vertikale Bewegung

Möchten Sie stattdessen den zweiten Bildlaufeffekt nachbilden? Öffnen Sie das erste Textmodul in Ihrem Abschnitt und fügen Sie die folgende vertikale Bewegung hinzu:

• Vertikale Bewegung aktivieren: Ja
• Startversatz: 0
• Mittenversatz: 0
  • 90% (Desktop)
  • 95% (Tablet & Telefon)
• Endversatz: -8

Skalieren nach oben und unten

Fügen Sie auch einen Skalierungseffekt nach oben und unten hinzu.

• Skalierung nach oben und unten aktivieren: Ja
• Startskala: 20 %
• Mittlere Skala: 100 %
  • 20% – 80% (Desktop)
  • 20% – 95% (Tablet & Telefon)
• Endskala: 20 %

Textmodul #2

Vertikale Bewegung

Öffnen Sie dann das zweite Textmodul und verwenden Sie die folgenden vertikalen Bewegungseinstellungen:

• Vertikale Bewegung aktivieren: Ja
• Startversatz: 0
• Mittenversatz: 0
  • 15% – 70% (Desktop)
  • 15% – 90% (Tablet & Telefon)
• Endversatz: -8

Skalieren nach oben und unten

Fügen Sie als nächstes einen Skalierungseffekt nach oben und unten hinzu.

• Skalierung nach oben und unten aktivieren: Ja
• Startskala: 0%
• Mittlere Skala: 100 %
  • 30% – 70% (Desktop)
  • 30% – 90% (Tablet & Telefon)
• Endskala: 100%

Verwischen

Und vervollständigen Sie den Scroll-Effekt, indem Sie dem zweiten Textmodul Ihres Abschnitts einen Unschärfe-Effekt hinzufügen.

• Unschärfe aktivieren: Ja
• Anfangsunschärfe: 10px
• Mittlere Unschärfe: 0px
  • 40% – 73% (Desktop)
  • 40% – 95% (Tablet & Telefon)
• Endunschärfe: 100px

Beispiel #3

Textmodul #1

Horizontale Bewegung

Zu guter Letzt zeigen wir Ihnen, wie Sie den dritten Scroll-Motion-Effekt nachbilden. Öffnen Sie das erste Textmodul des Abschnitts und fügen Sie einen horizontalen Bewegungseffekt hinzu.

• Horizontale Bewegung aktivieren: Ja
• Startversatz: 0
• Mittenversatz: 0
  • 0 % – 90 %
• Endversatz: 10

Ein- und Ausblenden

Verwenden Sie auch für dieses Modul einen Ein- und Ausblendeffekt.

• Ein- und Ausblenden aktivieren: Ja
• Anfangsdeckkraft: 100 %
• Mittlere Deckkraft: 100%
  • 0 % – 90 % (Desktop)
  • 0% – 95% (Tablet & Telefon)
• Endopazität: 0%

Rotierend

Und wir wenden auch einen rotierenden Effekt an.

• Drehen aktivieren: Ja
• Startrotation: 0°
• Mittlere Drehung: 0°
  • 0 % – 90 % (Desktop)
  • 0% – 95% (Tablet & Telefon)
• Enddrehung: 90°

Textmodul #2

Horizontale Bewegung

Öffnen Sie dann das zweite Textmodul in Ihrem Abschnitt und wenden Sie die folgenden horizontalen Bewegungseinstellungen an:

• Horizontale Bewegung aktivieren: Ja
• Startversatz: 0
• Mittenversatz: 0
  • 0 % – 90 %
• Endversatz: -10

Ein- und Ausblenden

Fahren Sie fort, indem Sie einen Ein- und Ausblendbewegungseffekt verwenden.

• Ein- und Ausblenden aktivieren: Ja
• Anfangsdeckkraft: 100 %
• Mittlere Deckkraft: 100%
  • 0 % – 80 % (Desktop)
  • 0% – 95% (Tablet & Telefon)
• Endopazität: 0%

Rotierend

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie auch einen rotierenden Scroll-Effekt hinzufügen.

• Drehen aktivieren: Ja
• Startrotation: 0°
• Mittlere Drehung: 0°
  • 0 % – 80 % (Desktop)
  • 0% – 90% (Tablet & Telefon)
• Enddrehung: -90°

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Beispiel #3

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie die neuen Scroll-Effekte von Divi verwenden, um Ihrer Überschrift Scroll-Bewegungseffekte hinzuzufügen. Wir haben drei verschiedene Beispiele behandelt, aber die Möglichkeiten sind wirklich endlos. Sie konnten die JSON-Dateien auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.