So wenden Sie kollidierende Animationen auf Designelemente mit Divi . an

Das Hinzufügen von Animationen zu Designelementen auf Ihrer Seite kann Ihnen definitiv helfen, das Engagement zu erhöhen. In Divis Visual Builder stehen viele Animationsoptionen zur Verfügung, und sie sind recht einfach zu verwenden. Aber Sie können mit diesen Animationen auch kreativ werden und sie auf einzigartige Weise verwenden. In diesem Beitrag behandeln wir drei Beispiele für kollidierende Animationen, die wir Schritt für Schritt neu erstellen und nur die integrierten Optionen von Divi verwenden.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf die drei Beispiele, die wir in diesem Tutorial neu erstellen werden.

Beispiel #1: Kollidierender Text

Beispiel #2: Kollidierende Teiler

Beispiel #3: Kollidierendes Gitter

Schweben

Abonnieren Sie unseren Youtube-Kanal

Beispiel #1 neu erstellen: Kollidierender Text

Spezialbereich hinzufügen

Struktur

Beginnen wir mit dem ersten Beispiel! Öffnen Sie eine neue oder vorhandene Seite und fügen Sie einen neuen Spezialbereich mit der folgenden Struktur hinzu:

Größe

Öffnen Sie die Abschnittseinstellungen, ohne Module oder Zeilen hinzuzufügen, und aktivieren Sie die Option „Diesen Abschnitt in voller Breite erstellen“ in den Größeneinstellungen.

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Spezialbereich eine Zeile hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen und nehmen Sie einige Änderungen an den Größeneinstellungen vor.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Ändern Sie auch die benutzerdefinierten Abstandswerte in den Abstandseinstellungen.

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

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie der ersten Spalte der Zeile ein Textmodul hinzufügen und etwas Inhalt hinzufügen.

Überschriftstexteinstellungen

Ändern Sie als Nächstes die Texteinstellungen für die Überschrift.

• Überschrift Schriftart: Montserrat
• Schriftstärke der Überschrift: Leicht
• Überschriftstextgröße: 4.4vw (Desktop), 8.2vw (Tablet), 40px (Telefon)
• Höhe der Überschriftslinie: 0.7em

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Das zweite in Spalte 1 benötigte Modul ist ein Teilermodul. Stellen Sie sicher, dass der Teiler angezeigt wird, indem Sie die Option "Teiler anzeigen" aktivieren.

• Teiler anzeigen: Ja

Farbe

Wechseln Sie zur Registerkarte Design und ändern Sie die Trennfarbe.

• Farbe: #000000

Größe

Verringern Sie auch die Breite des Teilers.

• Breite: 91%

Abstand

Fügen Sie einen oberen Rand hinzu, um Platz zwischen dem Trennmodul und dem Textmodul zu schaffen.

• Oberer Rand: 30px

Animation

Schließlich fügen Sie dem Divider-Modul eine subtile Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Links

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Gehen Sie zur zweiten Spalte und fügen Sie das zweite Textmodul mit einem Inhalt Ihrer Wahl hinzu.

Überschriftstexteinstellungen

Ändern Sie als Nächstes die Texteinstellungen für die Überschrift.

• Überschrift Schriftart: Montserrat
• Schriftstärke der Überschrift: Leicht
• Textfarbe der Überschrift: #3f46ff
• Überschriftstextgröße: 3.8vw (Desktop), 6.5vw (Tablet), 40px (Telefon)
• Höhe der Überschriftslinie: 0.8em

Animation

Und fügen Sie diesem Modul auch eine Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsverzögerung: 600ms
• Animationsintensität: 10%

Zeile 2 hinzufügen

Spaltenstruktur

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

Verbleibende Module hinzufügen

Fügen Sie die anderen Module hinzu, die in dieser neuen Zeile angezeigt werden sollen, und passen Sie sie an Ihre Bedürfnisse an.

Beispiel #2 nachstellen: Kollidierende Teiler

Spezialbereich hinzufügen

Struktur

Auf zum nächsten Beispiel! Fügen Sie einen neuen Spezialbereich mit der folgenden Struktur hinzu:

Größe

Öffnen Sie die Abschnittseinstellungen, ohne Zeilen oder Module hinzuzufügen, und aktivieren Sie die Option "Diesen Abschnitt in voller Breite erstellen".

• Machen Sie diesen Abschnitt in voller Breite: Ja

Zeile 1 hinzufügen

Spaltenstruktur

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

Abstand

Öffnen Sie die Zeileneinstellungen und ändern Sie die benutzerdefinierten Abstandseinstellungen.

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

Textmodul hinzufügen

Inhalt hinzufügen

Fügen Sie als Nächstes ein Textmodul mit einem beliebigen Inhalt zur Zeile hinzu.

Überschriftstexteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Einstellungen für den Überschriftentext.

• Überschrift Schriftart: Montserrat
• Schriftstärke der Überschrift: Leicht
• Überschriftstextgröße: 70px (Desktop), 50px (Tablet), 40px (Telefon)
• Höhe der Überschriftslinie: 0.8em

Zeile 2 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine weitere Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

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

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 53 % (Desktop), 100 % (Tablet & Telefon)

Abstand

Ändern Sie auch die benutzerdefinierten Abstandswerte.

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

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Wenn Sie mit dem Ändern der Zeileneinstellungen fertig sind, fügen Sie der ersten Spalte ein Teilermodul hinzu und stellen Sie sicher, dass der Teiler angezeigt wird, indem Sie die Option "Teiler anzeigen" aktivieren.

• Teiler anzeigen: Ja

Farbe

Ändern Sie als nächstes die Teilerfarbe.

• Teilerfarbe: #3f46ff

Stile

Und ändern Sie den Teilerstil in den Stileinstellungen.

• Teiler-Stil: Doppel

Größe

Erhöhen Sie auch das Teilergewicht in den Größeneinstellungen.

• Teilergewicht: 8px

Animation

Schließlich fügen Sie dem Divider-Modul eine Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Rechts

Trennmodul klonen und in Spalte 2 platzieren

Sobald Sie die Einstellungen des Divider-Moduls geändert haben, klonen Sie das Modul. Platzieren Sie das Duplikat in der zweiten Spalte der Zeile.

Animation ändern

Um einen Kollisionseffekt zu erzeugen, ändern Sie die Animationsrichtung des duplizierten Teilermoduls.

• Animationsstil: Folie
• Animationsrichtung: Links

Zeile 3 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine weitere Zeile mit der folgenden Spaltenstruktur hinzufügen:

Verbleibende Module hinzufügen

Und fügen Sie so viele Module hinzu, wie Sie möchten, um das Abschnittsdesign abzuschließen.

Beispiel #3 neu erstellen: Kollidierendes Gitter

Neuen Abschnitt hinzufügen

Abstand

Auf zum nächsten und letzten Beispiel! Fügen Sie einen regulären Abschnitt hinzu und öffnen Sie die Einstellungen. Gehen Sie zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Abstandswerte hinzu:

• Obere Polsterung: 300px
• Untere Polsterung: 200px

Zeile 1 hinzufügen

Spaltenstruktur

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

Bildmodul zur Spalte hinzufügen

Geformte Bildüberlagerung hochladen

Speichern Sie das folgende geformte Bild-Overlay auf Ihrem Desktop, indem Sie mit der rechten Maustaste klicken:

Nachdem Sie das geformte Bild-Overlay gespeichert haben, gehen Sie zurück zu Ihrer Divi-Website und fügen Sie der Zeile ein Bildmodul hinzu. Laden Sie die geformte Bild-Overlay-Datei hoch, die Sie in Ihrem Download-Ordner finden.

Hintergrund mit Farbverlauf

Als nächstes fügen Sie dem Modul einen Verlaufshintergrund hinzu.

• Farbe 1: #aa2bff
• Farbe 2: #09f7eb

Ausrichtung

Ändern Sie auch die Bildausrichtung.

• Bildausrichtung: Mitte

Größe

Und aktivieren Sie die Option "Vollbreite erzwingen" in den Größeneinstellungen.

• Volle Breite erzwingen: Ja

Abstand

Fügen Sie dem Modul auch einen benutzerdefinierten Rand hinzu.

• Linker Rand: 200px
• Rechter Rand: 200px

Animation

Schließlich fügen Sie dem Modul eine Animation hinzu.

• Animationsstil: Zoom
• Animationsrichtung: Zentrum
• Animationsdauer: 3000ms
• Animationsintensität: 100%

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die zweite Reihe. Verwenden Sie die folgende Spaltenstruktur:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und nehmen Sie einige Änderungen an den Größeneinstellungen vor.

• Benutzerdefinierte Breite verwenden: Ja
• Einheit: PX
• Benutzerdefinierte Breite: 944 px
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie der ersten Spalte ein Blurb-Modul hinzufügen. Geben Sie einen Inhalt Ihrer Wahl ein.

Symbol

Wählen Sie als nächstes ein Symbol aus.

Hintergrundfarbe

Fügen Sie dem Modul auch eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: rgba(255,255,255,0,83)

Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen.

• Symbolfarbe: #000000
• Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 73px

Einstellungen für Titeltext

Ändern Sie auch die Einstellungen für den Titeltext.

• Titelschriftart: Open Sans
• Schriftstärke des Titels: Semi Bold
• Ausrichtung des Titeltextes: Mitte
• Titeltextgröße: 15px
• Abstand der Titelbuchstaben: -1px
• Höhe der Titelzeile: 1,8 em

Größe

Und verringern Sie die Inhaltsbreite in den Größeneinstellungen.

• Inhaltsbreite: 183px

Abstand

Wir werden auch einige benutzerdefinierte obere und untere Polsterung hinzufügen.

• Obere Polsterung: 50px
• Untere Polsterung: 50px

Box Schatten

Fahren Sie fort, indem Sie dem Blurb-Modul einen subtilen Kastenschatten geben.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.3)

Übergänge

Und erhöhen Sie die Übergangsdauer im erweiterten Tab.

• Übergangsdauer: 600ms

Klonen Sie das Blurb-Modul 8 Mal und platzieren Sie 3 Duplikate in jeder verbleibenden Spalte

Nachdem Sie das erste Blurb-Modul geändert haben, können Sie es 8 Mal klonen. Platziere drei Duplikate in der zweiten Spalte und drei in der dritten. Im nächsten Teil dieses Tutorials nehmen wir einzigartige Änderungen an jedem der Blurb-Module vor. Dazu folgen wir der folgenden Nummerierung:

Blurb-Modul Nr. 1 ändern

Abstand

Öffnen Sie das erste Blurb-Modul und fügen Sie einen negativen oberen Rand hinzu.

• Oberer Rand: -340px (Desktop), 0px (Tablet & Telefon)

Hover-Abstand

Ändern Sie die Randwerte beim Hover.

• Oberer Rand: -380px
• Unterer Rand: 40px
• Linker Rand: -40px
• Rechter Rand: 40px

Abgerundete Ecken

Fahren Sie fort, indem Sie '30px' zur oberen linken Ecke des Moduls hinzufügen.

Animation

Und fügen Sie eine Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsverzögerung: 200ms

Blurb-Modul Nr. 2 ändern

Hintergrundfarbe

Öffnen Sie das zweite Blurb-Modul und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: rgba(255,255,255,0.93)

Abstand

Fahren Sie fort, indem Sie dem Modul einen negativen oberen Rand hinzufügen.

• Oberer Rand: -340px (Desktop), 0px (Tablet & Telefon)

Hover-Abstand

Ändern Sie diese Randwerte beim Bewegen der Maus.

• Oberer Rand: -380px
• Unterer Rand: 40px

Animation

Und fügen Sie dem Modul eine Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsverzögerung: 400ms

Ändern Sie das Blurb-Modul #3

Abstand

Weiter zum dritten Blurb-Modul. Fügen Sie einen negativen oberen Rand hinzu.

• Oberer Rand: -340px (Desktop), 0px (Tablet & Telefon)

Hover-Abstand

Ändern Sie die Randwerte beim Hover.

• Oberer Rand: -380px
• Unterer Rand: 40px
• Linker Rand: 40px
• Rechter Rand: -40px

Abgerundete Ecken

Fügen Sie auch '30px' zur oberen rechten Ecke des Moduls hinzu.

Animation

Und fügen Sie eine Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsverzögerung: 600ms

Ändern Sie das Blurb-Modul #4

Hintergrundfarbe

Weiter zum vierten Modul. Öffnen Sie die Einstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: rgba(255,255,255,0.93)

Hover-Abstand

Fügen Sie als nächstes einige Hover-Margin-Werte hinzu.

• Linker Rand: -40px
• Rechter Rand: 40px

Animation

Und fügen Sie auch eine Animation hinzu.

• Animationsstil: Ausblenden
• Animationsverzögerung: 800 ms

Ändern Sie das Blurb-Modul Nr. 5

Animation

Weiter zum fünften Modul. Das einzige, was Sie hier tun müssen, ist eine Animation hinzuzufügen.

• Animationsstil: Ausblenden
• Animationsverzögerung: 1000ms

Ändern Sie das Blurb-Modul #6

Hintergrundfarbe

Fahren Sie fort, indem Sie das sechste Modul öffnen und die Hintergrundfarbe ändern.

• Hintergrundfarbe: rgba(255,255,255,0.93)

Hover-Abstand

Ändern Sie auch die Abstandswerte beim Hover.

• Linker Rand: 40px
• Rechter Rand: -40px

Animation

Und fügen Sie eine Animation hinzu.

• Animationsstil: Ausblenden
• Animationsverzögerung: 1200 ms

Ändern Sie das Blurb-Modul #7

Hover-Abstand

Auf zum siebten Modul. Fügen Sie den Abstandseinstellungen einige Hover-Randwerte hinzu.

• Oberer Rand: 40px
• Linker Rand: -40px
• Rechter Rand: 40px

Abgerundete Ecken

Fahren Sie fort, indem Sie '30px' des Randradius zur unteren linken Ecke des Moduls hinzufügen.

Animation

Und fügen Sie eine Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Rechts
• Animationsverzögerung: 1400 ms

Ändern Sie das Blurb-Modul #8

Hintergrundfarbe

Fahren Sie fort, indem Sie das achte Modul öffnen und die Hintergrundfarbe ändern.

• Hintergrundfarbe: rgba(255,255,255,0.93)

Hover-Abstand

Fügen Sie dem Modul als nächstes einen benutzerdefinierten Rand hinzu, wenn Sie den Mauszeiger darüber bewegen.

• Oberer Rand: 40px

Animation

Fügen Sie auch diesem Blurb-Modul eine Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Rechts
• Animationsverzögerung: 1600 ms

Ändern Sie das Blurb-Modul # 9

Hover-Abstand

Auf zum neunten und letzten Modul! Gehen Sie zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Hover-Randwerte hinzu.

• Oberer Rand: 40px
• Linker Rand: 40px
• Rechter Rand: -40px

Abgerundete Ecken

Fügen Sie auch '30px' des Randradius zur unteren rechten Ecke hinzu.

Animation

Und fügen Sie eine Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Rechts
• Animationsverzögerung: 1800 ms

Negativen unteren Rand zum Bildmodul in Zeile 1 hinzufügen

Um nun den Kreis, den wir im ersten Teil dieses Beispiels erstellt haben, mit dem Raster zu kollidieren, geben wir dem Bildmodul (das die geformte Bildüberlagerung enthält) einen negativen unteren Rand.

• Unterer Rand: -520px

Vorschau

Nachdem wir nun alle Schritte durchlaufen haben, lassen Sie uns einen letzten Blick auf das Ergebnis werfen, das wir erreicht haben.

Beispiel #1: Kollidierende Teiler

Beispiel #2: Kollidierender Text

Beispiel #3: Kollidierendes Gitter

Schweben

Abschließende Gedanken

Das Hinzufügen von Animationen zu Ihren Seiten kann zu mehr Interaktion zwischen Ihren Besuchern und Ihnen beitragen. Natürlich können Sie einfach die Animationseinstellungen verwenden, die Sie im Visual Builder haben, aber Sie können auch noch einen Schritt weiter gehen, indem Sie kollidierende Animationen auf Designelemente anwenden, die Ihnen helfen, beeindruckende Ergebnisse zu erzielen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!