So fügen Sie Animationen zu Abschnitten/Zeilen hinzu

Es war einmal im Internet, dass das Hinzufügen von Animationen zu Ihrer Website eine mühsame, etwas spezielle Aufgabe war. Divi verfügt jedoch über leistungsstarke Animationstools und Scroll-Effekte, die Sie ohne viel technisches Know-how implementieren können. Jeder kann diese Effekte mit minimalem Aufwand zu seinen Websites hinzufügen. Während die Prozesse dieses Tutorials auf jedes Element in Divi angewendet werden können, konzentrieren wir uns heute auf Abschnitte und Zeilen, um mit diesen bestimmte Effekte zu erzielen. Kommen wir zu den Animationen!

Vorschau

Desktop

Handy, Mobiltelefon

Laden Sie den Divi Builder in eine Seite oder einen Beitrag

Als erstes müssen Sie den Divi Builder aufrufen. Egal, ob Sie sich für eines unserer Layout-Pakete (für diesen Artikel verwenden wir das Layout-Paket für Tennisschläger) oder ein eigenes Design entscheiden, alle Schritte finden in den Abschnitts- und Reiheneinstellungen statt .

Bei diesem Design werden 1 Abschnitt und 3 Reihen animiert, um einen sequentiellen Ladeeffekt zu erzielen.

Wählen Sie ein vorgefertigtes Layout

Um eines unserer professionell gestalteten Layoutpakete anzuwenden, rufen Sie den Divi Builder auf und wählen Sie Use a Premade Layout . Dadurch wird die Liste aller von uns angebotenen Werbegeschenke angezeigt.

Wählen Sie ein Layout

Als nächstes wählen Sie einfach aus, welches Layoutpaket Sie verwenden möchten. Sie können nach Kategorien sortieren oder nach Schlüsselwörtern suchen, um zu sehen, was wir für Sie erstellt haben.

Suchen Sie die Abschnitte und Zeilen, die Sie animieren möchten

Wenn das Layout alle Assets importiert hat und die Seite geladen ist, möchten Sie den Abschnitt und die Zeile(n) suchen, zu denen Sie Animationen hinzufügen möchten. Denken Sie daran, dass Abschnitte im Divi Builder in Blau und Zeilen in Grün farbcodiert sind.

Nachdem dies festgelegt wurde, können wir diese Animationen hinzufügen!

So fügen Sie Abschnitten und Zeilen Animationen hinzu – Option 1

Das Hinzufügen einer Animation zu einem Divi-Abschnitt ist sehr einfach. Sie müssen zuerst die Abschnittseinstellungen eingeben. Navigieren Sie dann zur Registerkarte Design und scrollen Sie, bis Sie die Animationsoptionen sehen .

Unter den Animationsoptionen können Sie bis zu 8 verschiedene Optionen für Ihre ausgewählte Animation anpassen.

1. In Animation Styles können Sie auswählen, wie die Animation angezeigt wird. Wenn der Abschnitt Ende-über-Ende rollt oder wie ein Ball von der Seite der Seite abprallt. Am gebräuchlichsten sind Fade und Slide .
2. Richtung – Sie legen die Richtung fest, in die sich das Element bewegt. Ein Wert von up bedeutet, dass der Abschnitt unten beginnt und sich nach oben bewegt. Oben ist nicht der Ausgangspunkt.
3. Dauer – Wie lange die Animation von Anfang bis Ende dauert. Ein niedrigerer Wert beschleunigt ihn, ein höherer verlangsamt ihn.
4. Verzögerung – Diese Option verhindert, dass die Animation so schnell wie möglich ausgelöst wird, und kann dazu beitragen, die Aufmerksamkeit stärker darauf zu lenken, als wenn sie sofort ausgelöst würde.
5. Intensität – Je niedriger der Wert, desto glatter als die Animation, während höhere Werte schneller und aggressiver sind.
6. Anfangsdeckkraft – Ein Wert von 0 bewirkt, dass die Animation unsichtbar beginnt und über die Dauer in den Fokus rückt. 100 bedeutet, dass das Element bereits vor Beginn der Animation vollständig sichtbar ist.
7. Geschwindigkeitskurve – Hiermit können Sie einstellen, wie sanft die Animation beginnt und endet.
8. Wiederholen – Ist Ihre Animation ein einmaliger Effekt oder möchten Sie sie immer wieder wiederholen? Wenn eine Animation auf Once festgelegt ist , muss die Seite neu geladen werden, um sie erneut zu starten.

So fügen Sie Abschnitten und Zeilen Animationen hinzu – Option 2

Divi hat auch eine Funktion namens Scroll-Effekte . Dies sind Animationen, die ausgelöst werden, wenn der Benutzer mit seinem Ansichtsfenster zum Element scrollt. Scroll-Effekte können auf jedes Element eingestellt und mit den oben genannten Animationsoptionen kombiniert werden.

So aktivieren Sie Scroll-Effekte

Auch hier kann jedes Element in Divi so eingestellt werden, dass Scroll-Effekte aktiviert sind, aber wir haben es heute mit Abschnitten und Zeilen zu tun. Geben Sie also Ihre Abschnittseinstellungen ein , navigieren Sie zur Registerkarte Erweitert und suchen Sie die Überschrift Bildlaufeffekte .

Wählen Sie die Effekte und Trigger

In den Scroll-Effekt- Optionen finden Sie verschiedene Registerkarten für verschiedene Arten von Animationen, die Sie beim Scrollen auslösen können.

• Sticky Position – Ob der Abschnitt oder die Zeile beim Vorbeiscrollen am Bildschirm des Benutzers haftet oder nicht.
• Transformationseffekte – Dies sind die eigentlichen Animationseffekte: horizontale und vertikale Bewegung, Ein-/Ausblenden, Größenskalierung, Drehung und Unschärfe.
• [Funktion] einstellen – Sie können einstellen, wo der Effekt auf dem Bildschirm am sichtbarsten ist und wann / wo er auftritt
• Bewegungseffekt-Trigger – Sie bestimmen, ob die Animation beginnt, wenn der obere Teil des Elements in das Ansichtsfenster, die Mitte des Elements oder der untere eintritt.

Der Hauptunterschied zwischen diesen und der Verwendung der Animationsoptionen im vorherigen Abschnitt besteht darin, ob die Animation automatisiert werden soll oder ob sie jedes Mal ausgelöst werden soll, wenn der Benutzer eine Aktion ausführt. Sie können Animationen mit den Optionen Bildlaufeffekte und Animation kombinieren, die wir für den Effekt des Haupt-Tutorials verwenden werden.

Kombinieren von Animationen für Abschnitte und Zeilen

Sie können einige beeindruckende Effekte für Ihre Websites erstellen, indem Sie verschiedene Animationen kombinieren, um sie zu verschiedenen Zeiten auszulösen. Mit der Option Animationsverzögerung kann Ihre Site eine Reihe von Abschnitten, Zeilen und Elementen nacheinander animieren, um beeindruckende Grafiken zu erzielen.

Zunächst stellen wir den Animationsstil in den Abschnittseinstellungen auf Slide mit der Animationsrichtung auf Up .

Wir werden die restlichen Optionen auf den Standardeinstellungen belassen. Vor allem die Animationsverzögerung . Wir möchten, dass der Abschnitt ausgelöst wird, wenn er sichtbar ist.

Animationseinstellungen für Zeile 1

Als nächstes passen wir die erste Zeile im Abschnitt an. Wir gehen in die Zeileneinstellungen , gehen zu den Animationsoptionen auf der Registerkarte Design und wählen erneut Folie . Diesmal möchten wir die Richtung auf Abwärts und die Animationsverzögerung auf 5 00 ms ändern . 1000ms entspricht 1 Sekunde, denken Sie daran.

Da wir das Section-Timing bei 0 ms belassen haben, um sofort auszulösen, möchten wir, dass die Reihe leicht versetzt ist, damit die anfängliche Animation größtenteils abgeschlossen ist, bevor diese beginnt.

Animationseinstellungen für Zeile 2

Als nächstes gehen wir in die Einstellungen für die zweite Zeile der Seite und gehen zu den Animationsoptionen . Auch hier wählen wir Slide für den Animationsstil und diese Zeile wird nach rechts geschoben .

Außerdem setzen wir die Animationsverzögerung auf 1000 ms , was bedeutet , dass diese ausgelöst wird, sobald die erste Animation endet.

Animationseinstellungen für Zeile 3

Für die dritte Reihe, die wir animieren, werden wir Scroll-Effekte verwenden , um unsere Ziele zu erreichen. Da unsere dritte Reihe direkt oberhalb der Falte beginnt, wären die meisten Animationen nicht sichtbar, wenn wir einfach eine Zeitverzögerung wie bei den anderen Elementen verwenden würden. Also werden wir es so machen, dass das nicht der Fall ist.

Animationsoptionen

Als erstes wiederholen wir die oben beschriebenen Prozesse. Nur mit dieser Zeile setzen wir den Animationsstil auf Fade. Dann setzen wir die Dauer auf 500 ms, damit diese Zeile während der Animation schneller erscheint. Wir werden es von 1500 ms Verzögerung der anderen Animationen sind vollständig abgeschlossen , um sicherzustellen , bevor diese beginnen.

Stellen Sie abschließend sicher, dass die Startopazität auf 0% eingestellt ist . Wir möchten, dass diese Zeile unsichtbar bleibt, bis sie sichtbar ist.

Scroll-Effekt-Einstellungen

Hier macht es Spaß, weil wir Effekte kombinieren können. Klicken Sie auf die Registerkarte Erweitert für die Zeile und suchen Sie Bildlaufeffekte . Suchen Sie die Registerkarte Horizontale Bewegung und schalten Sie sie ein. Stellen Sie dann den Bewegungseffekt- Trigger auf Mitte des Elements . Wir verwenden die Mitte und nicht die Oberseite, um sicherzustellen, dass der Effekt erst wirksam wird, wenn der Benutzer scrollt, nur für den Fall, dass das Ansichtsfenster des Benutzers den oberen Rand der Zeile anzeigt.

Mit diesem Satz wartet die Zeile, bis alles andere mit der Animation fertig ist, und wenn der Benutzer darauf zu scrollt, scheint die gesamte Zeile von der Seite des Bildschirms zu gleiten.

Endgültige Ergebnisse

Wenn Sie all dies beendet haben, sollten Ihre Ergebnisse ähnlich sein.

Desktop

Handy, Mobiltelefon

Abschluss

Das Hinzufügen von Animationseffekten ist ein todsicherer Weg, um Ihre Website dynamischer, interessanter und optisch ansprechender zu gestalten. Mit Divi eingebaute in der Animation und Scroll - Effects - Tool, können Sie erstaunliche Kombinationen erstellen , die jeder Besucher wird wow , das vorbeikommen passiert.

Was haben Sie mit den Divi-Animationseffekten aus Ihren Abschnitten und Zeilen erstellt? Lass sie uns in den Kommentaren sehen!

Beitragsbild des Artikels von Vectorchok / shutterstock.com