So erstellen Sie eine Hüllkurvenanimation mit Divis Scroll-Effekten

Jedes Mal, wenn eine neue Divi-Funktion herauskommt, versuchen wir, einige coole und nützliche Tutorials zu teilen, die Ihnen helfen, über den Tellerrand zu schauen und mit Divi kreativ zu werden. Das heutige Tutorial macht genau das. Wir zeigen Ihnen, wie Sie mit Divis Scroll-Effekten eine reaktionsschnelle Hüllkurven-Animation erstellen können. Dies ist beispielsweise eine großartige Möglichkeit, einen Call-to-Action-Block hervorzuheben, aber Sie können ihn auch für andere Zwecke verwenden. Sie können die JSON-Datei 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.

Desktop

Handy, Mobiltelefon

Abonnieren Sie unseren Youtube-Kanal

Laden Sie das Umschlag-Animations-Layout KOSTENLOS herunter

Um das kostenlose Umschlag-Animations-Layout in die Hände zu bekommen, müssen Sie es 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!

Elementstruktur neu erstellen

Neuen Abschnitt in der Mitte oder am Ende der Seite hinzufügen

Hintergrundfarbe

Beginnen Sie damit, einen neuen Abschnitt irgendwo in der Mitte oder am unteren Rand Ihrer Seite hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe in Weiß.

• Hintergrundfarbe: #FFFFFF

Abstand

Ändern Sie als nächstes die Abstandseinstellungen.

• Obere Polsterung: 5vw
• Untere Polsterung: 0px

Überläufe

Und blenden Sie die Abschnittsüberläufe 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:

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #FFFFFF

Größe

Wechseln Sie als nächstes zum Design-Tab der Zeile und ändern Sie die Größeneinstellungen wie folgt:

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

Abstand

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

• Obere Polsterung: 14vw (Desktop), 11vw (Tablet & Telefon)
• Untere Polsterung: 14vw (Desktop), 11vw (Tablet & Telefon)
• Linke Polsterung: 20vw (Desktop), 10vw (Tablet & Telefon)
• Rechte Polsterung: 20vw (Desktop), 10vw (Tablet & Telefon)

Grenze

Fügen Sie auch einen Randradius hinzu.

• Alle Ecken: 20px

Box Schatten

Wir verwenden auch einen subtilen Kastenschatten.

• Vertikale Position des Boxschattens: 38px
• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.08)

Z-Index

Vervollständigen Sie die Zeileneinstellungen, indem Sie den Z-Index auf der Registerkarte "Erweitert" erhöhen.

• Z-Index: 11

Textmodul Nr. 1 zur Spalte hinzufügen

H2-Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul. Geben Sie einen H2-Inhalt Ihrer Wahl ein.

H2-Texteinstellungen

Ändern Sie die H2-Texteinstellungen des Moduls wie folgt:

• Überschrift 2 Schriftart: Poppins
• Überschrift 2 Textgröße: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)

Textmodul #2 zur Spalte hinzufügen

Inhalt hinzufügen

Fügen Sie ein weiteres Textmodul direkt unter dem vorherigen hinzu und fügen Sie einen Beschreibungsinhalt Ihrer Wahl ein.

Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Texteinstellungen.

• Textschriftart: Open Sans
• Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Textzeilenhöhe: 2.6em

Abstand

Fügen Sie auch einige benutzerdefinierte obere und untere Werte für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)
• Untere Polsterung: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

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

Tasteneinstellungen

Stylen Sie dann die Schaltfläche entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #0f33ff
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 100px
• Schaltflächenschriftart: Poppins

Abstand

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzufügen.

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)
• Rechte Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)

Zeile 2 hinzufügen

Spaltenstruktur

Nachdem wir nun die Call-to-Action-Zeile eingerichtet haben, ist es an der Zeit, mit der Erstellung der Hüllkurvenform zu beginnen. Fügen Sie dazu eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Erlauben Sie der Zeile, die gesamte Breite des Abschnitts einzunehmen, indem Sie die Größeneinstellungen wie folgt ändern:

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

Abstand

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

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

Anzeige

Und um sicherzustellen, dass die Spalten auf kleineren Bildschirmgrößen nebeneinander angezeigt werden, fügen wir dem Hauptelement der Zeile eine Zeile CSS-Code hinzu.

display: flex;

Bildmodul zu Spalte 1 hinzufügen

Bildbox leer lassen

Fügen Sie in Spalte 1 ein Bildmodul hinzu und lassen Sie das Bildfeld leer.

Hintergrund mit Farbverlauf

Stattdessen verwenden wir einen Hintergrund mit Farbverlauf.

• Farbe 1: rgba(255,255,255,0)
• Farbe 2: #e8e8e8
• Verlaufstyp: Linear
• Steigungsrichtung: 150deg
• Startposition: 50%
• Endposition: 50%

Abstand

Ändern Sie die Padding-Werte des Moduls entsprechend:

• Obere Polsterung: 15vw
• Untere Polsterung: 15vw

Bildmodul in Spalte 1 klonen & Duplikat in Spalte 2 platzieren

Sobald Sie das Image-Modul in Spalte 1 ausgefüllt haben, können Sie das gesamte Modul klonen und das Duplikat in Spalte 2 platzieren.

Hintergrund mit Farbverlauf ändern

Ändern Sie den Verlaufshintergrund wie folgt:

• Farbe 1: rgba(255,255,255,0)
• Farbe 2: #effef
• Verlaufstyp: Linear
• Steigungsrichtung: 210deg
• Startposition: 50%
• Endposition: 50%

Zeile 3 hinzufügen

Spaltenstruktur

Um den unteren Rand des Umschlags zu erstellen, benötigen wir eine weitere Zeile mit der folgenden Spaltenstruktur:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:

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

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

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

Anzeige

Und lassen Sie beide Spalten nebeneinander erscheinen, indem Sie dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzufügen.

display: flex;

Z-Index

Vervollständigen Sie die Zeileneinstellungen, indem Sie den Z-Index auf der Registerkarte "Erweitert" erhöhen.

• Z-Index: 12

Bildmodul zu Spalte 1 hinzufügen

Bildbox leer lassen

Fügen Sie ein Bildmodul zu Spalte 1 hinzu und lassen Sie das Bildfeld wieder leer.

Hintergrund mit Farbverlauf

Verwenden Sie stattdessen einen Hintergrund mit Farbverlauf.

• Farbe 1: rgba(255,255,255,0)
• Farbe 2: #effef
• Verlaufstyp: Linear
• Verlaufsrichtung: 213deg
• Startposition: 40%
• Endposition: 40%

Abstand

Und erhöhen Sie die Größe des Moduls, indem Sie oben und unten etwas Polsterung hinzufügen.

• Obere Polsterung: 20vw
• Untere Polsterung: 20vw

Bildmodul in Spalte 1 klonen & Duplikat in Spalte 2 platzieren

Sobald Sie das Image-Modul in Spalte 1 fertiggestellt haben, können Sie es klonen und das Duplikat in Spalte 2 platzieren.

Hintergrund mit Farbverlauf ändern

Stellen Sie sicher, dass Sie den Farbverlaufshintergrund des Duplikats ändern.

• Farbe 1: rgba(255,255,255,0)
• Farbe 2: #e8e8e8
• Verlaufstyp: Linear
• Verlaufsrichtung: 147deg
• Startposition: 40%
• Endposition: 40%

Vertikale Bewegung zu Zeile 1 hinzufügen

Der letzte Teil, damit die Hüllkurven-Animation funktioniert, besteht darin, der ersten Zeile in Ihrem Abschnitt einen reaktionsschnellen vertikalen Bewegungs-Scroll-Effekt hinzuzufügen, und Sie sind fertig!

• Vertikale Bewegung aktivieren: Ja
• Startversatz:
  • Desktop: 0 (bei 68 %)
  • Tablette: 0,5 (bei 61 %)
  • Telefon: 0,5 (bei 43%)
• Mittlerer Versatz:
  • Desktop: 6,5 (bei 81 %)
  • Tablet & Telefon: 21,5 (bei 82%)
• Endversatz:
  • Desktop: 16 (bei 95 %)
  • Tablet & Telefon: 21,5 (bei 82%)

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divis Scroll-Effekten kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie eine Hüllkurvenanimation erstellen. Sie können diese Animation für viele Dinge verwenden, um beispielsweise Ihren CTA-Block hervorzuheben. Sie konnten die JSON-Datei 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.