Laden Sie einen KOSTENLOSEN bunten Spritzer-Animations-Heldenabschnitt für Divi . herunter

Die Art und Weise, wie Sie den Hero-Bereich Ihrer Seite gestalten, bestimmt die Erwartungen an den Rest Ihrer Seite. Wenn Sie eine Landingpage entwerfen, die etwas feiert, sei es ein Jubiläum oder ein Sale, kann dies definitiv helfen, die festliche Stimmung in Ihr Design zu bringen. Eine Möglichkeit, dies zu erreichen, besteht darin, dem Hintergrund Ihres Heldenabschnitts eine bunte Spritzer-Animation hinzuzufügen. Der Fokus liegt weiterhin auf der von Ihnen bereitgestellten schriftlichen Kopie und dem CTA. In diesem Tutorial zeigen wir Ihnen, wie Sie mit den integrierten Einstellungen von Divi einen schönen bunten Spritzer-Animationsabschnitt erstellen. 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

Laden Sie The Spatter Animation Hero Section Layout KOSTENLOS herunter

Um das kostenlose Spritzer-Animations-Held-Bereich-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!

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und wenden Sie einen Farbverlaufshintergrund Ihrer Wahl an.

• Farbe 1: #070a49
• Farbe 2: #6f00f7
• Verlaufstyp: Linear
• Verlaufsrichtung: 148deg

Größe

Wechseln Sie zur Registerkarte Design des Abschnitts und fügen Sie den Größeneinstellungen eine Mindesthöhe hinzu. Dadurch wird unser Abschnitt in den Vollbildmodus geschaltet.

• Mindesthöhe: 100vh

Abstand

Als nächstes entfernen wir alle standardmäßigen oberen und unteren Auffüllungen.

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

Sichtweite

Und um sicherzustellen, dass in unserem Design keine horizontale Bildlaufleiste angezeigt wird, blenden wir die Überläufe des Abschnitts aus.

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

Zeile 1 hinzufügen

Spaltenstruktur

Nachdem die Abschnittseinstellungen vorgenommen wurden, fügen Sie eine erste Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie zu, dass die Zeile sowohl die linke als auch die rechte Seite des Abschnittscontainers berührt, indem Sie die Größeneinstellungen wie folgt ändern:

• Breite: 100%
• Maximale Breite: 100%

Abstand

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

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

Hauptelement-CSS

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

display: flex;

Spalte 1 Animation

Sobald die allgemeinen Zeileneinstellungen vorhanden sind, öffnen Sie die Einstellungen von Spalte 1 und fügen Sie eine Animation hinzu.

• Animationsstil: Zoom
• Animationsrichtung: Zentrum
• Animationsintensität: 100%

Spalte 2 Animation

Fügen Sie als nächstes eine Animation in die zweite Spalte ein.

• Animationsstil: Zoom
• Animationsrichtung: Zentrum
• Animationsverzögerung: 250ms
• Animationsintensität: 100%

Spalte 3 Animation

Und wir verwenden Animationen auch für die dritte Spalte.

• Animationsstil: Zoom
• Animationsrichtung: Zentrum
• Animationsverzögerung: 500 ms
• Animationsintensität: 100%

Bildmodul zu Spalte 1 hinzufügen

Spritzerbild hochladen

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie das Spritzerbild hoch, das Sie im Download-Ordner finden, den Sie zu Beginn dieses Tutorials herunterladen konnten.

Größe

Wechseln Sie zur Design-Registerkarte des Moduls und erzwingen Sie die volle Breite in den Größeneinstellungen.

• Volle Breite erzwingen: Ja

Filter

Ändern Sie dann die Farben des Moduls mithilfe der Filtereinstellungen.

• Farbton: 303deg
• Sättigung: 200%

Maßstab transformieren

Wir skalieren das Bild auch in den Transformationseinstellungen.

• Unten: 150%
• Rechts: 150%

Scroll-Effekt mit vertikaler Bewegung

Wechseln Sie als Nächstes zur Registerkarte Erweitert und aktivieren Sie einige vertikale Bewegungen.

• Vertikale Bewegung aktivieren: Ja
• Startversatz: 0
• Mittlerer Versatz:
  • Desktop: 0 (bei 50%)
  • Tablette: 0 (bei 70%)
  • Telefon: 0 (bei 85%)
• Endversatz: 2
• Bewegungseffekt-Trigger: Unterseite des Elements

Horizontaler Bewegungs-Scroll-Effekt

Wir verwenden auch eine horizontale Bewegung.

• Horizontale Bewegung aktivieren: Ja
• Startversatz:
  • Desktop: -10
  • Tablet & Telefon: 0
• Mittenversatz: 0
• Endversatz: 4
• Bewegungseffekt-Trigger: Unterseite des Elements

Scroll-Effekt nach oben und unten skalieren

Zusammen mit einem Skalierungseffekt nach oben und unten.

• Skalierung nach oben und unten aktivieren: Ja
• Startskala: 100 %
• Mittlere Skala: 150%
• Endskala: 200%
• Bewegungseffekt-Trigger: Unterseite des Elements

Bildmodul zweimal klonen und Duplikate in die verbleibenden Spalten der Zeile platzieren

Sobald das erste Image-Modul fertiggestellt ist, können Sie das gesamte Modul zweimal klonen und die Duplikate in die verbleibenden Spalten der Zeile einfügen.

Bildmodul in Spalte 2 ändern

Abstand

Öffnen Sie das Bildmodul in Spalte 2 und fügen Sie auf Tablet und Telefon einen oberen Rand hinzu.

• Höchste Marge: 50 % (nur Tablet und Telefon)

Filter

Ändern Sie auch den Farbton in den Filtereinstellungen.

• Farbton: 55 Grad

Bildmodul in Spalte 3 ändern

Filter

Öffnen Sie dann das Bildmodul in der dritten Spalte und ändern Sie die Filtereinstellungen entsprechend:

• Farbton: 309 Grad
• Helligkeit: 0%

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe. Verwenden Sie die folgende Spaltenstruktur:

Position

Öffnen Sie die Zeileneinstellungen und ändern Sie die Positionseinstellungen der Zeile auf der Registerkarte Erweitert.

• Position: Absolut
• Ort: Zentrum

Textmodul Nr. 1 zur Spalte hinzufügen

H1-Inhalt hinzufügen

Es ist an der Zeit, Module hinzuzufügen, beginnend mit einem Textmodul mit H1-Inhalten Ihrer Wahl.

H1-Texteinstellungen

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

• Überschrift Schriftart: Rubik
• Textfarbe der Überschrift: #ffffff
• Überschriftstextgröße: 80px (Desktop), 50px (Tablet), 35px (Telefon)

• Überschrift Text Schatten Vertikale Länge: 0.08em
• Stärke der Überschriftstext-Schattenunschärfe: 0em
• Überschriftstextschattenfarbe: #1a005b

Textmodul #2 zur Spalte hinzufügen

Inhalt hinzufügen

Fügen Sie dann ein weiteres Textmodul mit Beschreibungsinhalten hinzu.

Texteinstellungen

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

• Textschriftart: Muli
• Textfarbe: #dddddd
• Textgröße: 15px (Desktop), 14px (Tablet & Telefon)
• Textzeilenhöhe: 2.1em

• Textschattenfarbe: #1a005b

Größe

Ändern Sie als nächstes die Breite des Moduls.

• Breite: 60% (Desktop), 100% (Tablet & Telefon)

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie bei verschiedenen Bildschirmgrößen einen oberen und unteren Rand hinzufügen.

• Höchste Marge: 6 % (Desktop), 10 % (Tablet), 14 % (Telefon)
• Untere Marge: 6 % (Desktop), 10 % (Tablet), 14 % (Telefon)

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir in unserer Spalte benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Wechseln Sie dann zur Registerkarte Design und gestalten Sie die Schaltfläche wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 17px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #ea01a6
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 100px

• Button-Schriftart: Rubik
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: Großbuchstaben

Abstand

Fügen Sie auch einige benutzerdefinierte Abstandswerte in den Abstandseinstellungen hinzu.

• Obere Polsterung: 20px
• Untere Polsterung: 20px
• Linke Polsterung: 60px
• Rechte Polsterung: 60px

Box Schatten

Und vervollständigen Sie die Moduleinstellungen, indem Sie einen Boxschatten hinzufügen.

• Horizontale Position des Kastenschattens: 5px
• Vertikale Position des Kastenschattens: 5px
• Schattenfarbe: #30005b

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 integrierten Animations- und Scrolleffekten kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie für eine Landingpage, die Sie für einen besonderen Anlass einrichten, einen bunten Spritzer-Animations-Heldenabschnitt erstellen. Dieser Anlass kann Ihr Firmenjubiläum oder ein Sonderverkauf sein, ist aber nicht darauf beschränkt. 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.