So verwenden Sie transformierte Bewegungsformen als Hintergründe mit Divi

Die neuen Scroll-Effekte von Divi wurden entwickelt, damit Sie Ihr Webdesign-Erlebnis auf die nächste Stufe heben können. Natürlich können Sie es direkt auf Elemente in Ihrem Abschnitt anwenden, aber Sie können auch darunter liegende Elemente mit Bewegung versehen. Wenn Sie sich für einen zugrunde liegenden Ansatz entscheiden, können Sie den Inhalt statisch halten, während die Hintergrundbewegung ausgeführt wird. In diesem Tutorial verwenden wir transformierte Bewegungsformen als zugrunde liegende Elemente, um einen animierten Abschnitt zu erstellen. Wir werden zwei verschiedene Beispiele behandeln, aber die Möglichkeiten sind wirklich endlos. 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.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Laden Sie das Layout für transformierte Bewegungsformen KOSTENLOS herunter

Um das kostenlose Layout für transformierte Bewegungsformen 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!

Allgemeine Schritte

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

• Farbe 1: #ffffff
• Farbe 2: #97c6fc
• Verlaufstyp: Linear
• Verlaufsrichtung: 306deg
• Startposition: 50%
• Endposition: 50%

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und verwenden Sie einige benutzerdefinierte Werte für Rand und Abstand.

• Linker Rand: 4%
• Rechte Marge: 4%
• Obere Polsterung: 11%
• Untere Polsterung: 11%

Box Schatten

Wir verwenden auch einen subtilen Kastenschatten.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.1)
• Position des Boxschattens: Äußerer Schatten

Sichtweite

Und wir vervollständigen die Abschnittseinstellungen, indem wir die Überläufe auf ausgeblendet setzen. Dadurch wird sichergestellt, dass die transformierten Bewegungsformen, wenn wir sie hinzufügen, den Abschnittscontainer nicht überschreiten.

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

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie Ihrem Abschnitt eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Größe

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

• Maximale Breite: 1580px

Spalte 1 Abstand

Wir fügen auch den Abstandseinstellungen der ersten Spalte einige obere Abstände hinzu.

• Obere Polsterung: 9%

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H2-Inhalt hinzufügen

Nachdem Sie die Zeileneinstellungen abgeschlossen haben, können Sie Module hinzufügen, beginnend mit einem Textmodul in Spalte 1. Fügen Sie H2-Inhalte Ihrer Wahl hinzu.

H2-Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftart: Abril Fatface
• Überschrift 2 Textfarbe: #7206a0
• Überschrift 2 Textgröße: 80px (Desktop), 65px (Tablet), 50px (Telefon)

Textmodul #2 zu Spalte 1 hinzufügen

Texteinstellungen

Fügen Sie direkt unter dem vorherigen ein weiteres Textmodul mit einem beliebigen Beschreibungsinhalt Ihrer Wahl hinzu.

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

• Textschriftart: Open Sans
• Textfarbe: #7206a0
• Textzeilenhöhe: 2em

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir in Spalte 1 benötigen, ist ein Button-Modul. Geben Sie eine Kopie Ihrer Wahl ein.

Tasteneinstellungen

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

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 20px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #077bff
• Breite des Tastenrahmens: 0px

• Button-Schriftart: Abril Fatface

Abstand

Wir fügen auch einige benutzerdefinierte Füllwerte hinzu.

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

Bildmodul zu Spalte 2 hinzufügen

Bild hochladen

In der zweiten Spalte der Zeile ist das einzige Modul, das wir brauchen, ein Image-Modul. Laden Sie eine Illustration Ihrer Wahl hoch. Wenn Sie genau das verwenden möchten, das wir in diesem Tutorial verwendet haben, finden Sie es in dem Download-Ordner, den Sie am Anfang dieses Beitrags herunterladen konnten.

Ausrichtung

Wechseln Sie als nächstes zum Design-Tab des Moduls und ändern Sie die Bildausrichtung.

• Bildausrichtung: Rechts

Größe

Vervollständigen Sie die Moduleinstellungen, indem Sie die Breite über verschiedene Bildschirmgrößen ändern.

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

Beispiel 1 neu erstellen

Textmodul oben in Spalte 1 hinzufügen

Sobald alle regulären Module vorhanden sind, ist es an der Zeit, die transformierten Bewegungsformen hinzuzufügen! Wir erstellen das erste Beispiel neu, indem wir oben in der ersten Spalte ein neues Textmodul hinzufügen. Lassen Sie das Inhaltsfeld leer.

Hintergrund mit Farbverlauf

Fügen Sie dem Modul als nächstes einen Verlaufshintergrund hinzu.

• Farbe 1: rgba(255,255,255,0)
• Farbe 2: #00fff6
• Verlaufstyp: Linear
• Verlaufsrichtung: 306deg
• Startposition: 54%
• Endposition: 54%

Größe

Ändern Sie auch die Größeneinstellungen.

• Breite: 165%
• Höhe: 270%

Abstand

Gehen Sie dann zu den Abstandseinstellungen und verwenden Sie einige benutzerdefinierte Abstandswerte.

• Unterer Rand: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Obere Polsterung: 29%
• Untere Polsterung: 29%

Transformieren Drehen

Als nächstes drehen wir das Modul.

• Links: 270 Grad

Schiefe transformieren

Wir wenden auch einen Transformationsversatzwert an.

• Unten: 16deg
• Rechts: 16 Grad

Position

Wechseln Sie dann zur Registerkarte Erweitert und ändern Sie die Positionseinstellungen wie folgt:

• Position: Absolut
• Ort: Oben links
• Vertikaler Versatz: -50%
• Horizontaler Versatz: -50%

Scroll-Effekt mit vertikaler Bewegung

Als Nächstes fügen wir die Bildlaufeffekte hinzu, beginnend mit einer vertikalen Bewegung.

• Vertikale Bewegung aktivieren: Ja
• Startversatz: 4
• Mittlerer Offset: 0 (bei 50%)
• Endversatz: -4

Horizontaler Bewegungs-Scroll-Effekt

Und wir vervollständigen die Moduleinstellungen, indem wir auch horizontale Bewegungen hinzufügen!

• Horizontale Bewegung aktivieren: Ja
• Startversatz: 4
• Mittlerer Offset: 0 (bei 50%)
• Endversatz: -4%

Beispiel 2 neu erstellen

Textmodul oben in Spalte 1 hinzufügen

Möchten Sie stattdessen das zweite Beispiel neu erstellen? Fügen Sie oben in der ersten Spalte ein Textmodul hinzu.

Hintergrundfarbe

Öffnen Sie die Moduleinstellungen und wenden Sie eine Hintergrundfarbe an.

• Hintergrundfarbe: #00fff6

Größe

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Größeneinstellungen.

• Breite: 165%
• Höhe: 270%

Abstand

Wir fügen auch einige benutzerdefinierte Abstandswerte hinzu.

• Unterer Rand: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Obere Polsterung: 29%
• Untere Polsterung: 29%

Schief drehen

Und wir wenden in den Transformationseinstellungen einen Transformations-Schrägeffekt an.

• Rechts: -54 Grad

Position

Dann gehen wir zur Registerkarte "Erweitert" und ändern die Positionseinstellungen des Moduls.

• Position: Absolut
• Ort: Oben links
• Vertikaler Versatz: -50%
• Horizontaler Versatz: -50%

Scroll-Effekt mit vertikaler Bewegung

Wir werden dann die Scroll-Effekte hinzufügen. Beginnen Sie mit einer vertikalen Bewegung.

• Vertikale Bewegung aktivieren: Ja
• Startversatz: 4
• Mittlerer Offset: 0 (bei 50%)
• Endversatz: -4

Horizontaler Bewegungs-Scroll-Effekt

Und wir vervollständigen die Moduleinstellungen, indem wir auch horizontale Bewegungen hinzufügen!

• Horizontale Bewegung aktivieren: Ja
• Startversatz: 4
• Mittlerer Offset: 0 (bei 50%)
• Endversatz: -4

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

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Ihrem Abschnittsdesign auf kreative Weise transformierte Bewegungsformen hinzufügen können. Die zugrunde liegenden transformierten Bewegungsformen tragen dazu bei, Ihren Schnittdesigns subtile Animationen hinzuzufügen. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen 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.