Hinzufügen von Animationseffekten zu Abschnitten/Zeilen in Divi

Veröffentlicht: 2017-08-11

Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie Abschnitten und Zeilen in Divi Animationseffekte hinzufügen. Das Divi-Theme selbst bietet einige relevante Animationseffekte, die Ihnen helfen, Ihrer Website ein zusätzliches Maß an Interaktion zu verleihen. Diese Effekte können einem Bild in Ihrem Divi Builder in der Unterkategorie Animation der Registerkarte Erweitert einfach zugewiesen werden.

Wenn Sie jedoch nach einer Möglichkeit suchen, diese Animationseffekte anderen Modulen, Abschnitten oder Zeilen Ihrer Website hinzuzufügen, ist dies ebenfalls möglich. In diesem Beitrag zeigen wir Ihnen genau, wie das geht. Wir zeigen Ihnen nicht nur, wie Sie die integrierten Animationseffekte hinzufügen, sondern auch, wie Sie wow.js und animate.css in Ihre Divi-Website integrieren.

Am Ende dieses Beitrags können Sie sowohl Ihren Zeilen als auch Ihren Abschnitten schöne Effekte hinzufügen. Um Ihnen die Visualisierung des Prozesses zu erleichtern, möchten wir Ihnen das folgende Beispiel zeigen (das wir Ihnen am Ende dieses Beitrags zeigen):

Animationseffekte

Divi-Animationen oder Wow.js & Animate.css?

Sie fragen sich wahrscheinlich, in welchen Fällen Sie die Verwendung der Divi-Animationen in Betracht ziehen sollten und in welchen Fällen die wow.js & animate.css die Arbeit besser machen würden. Die Verwendung der integrierten Animation von Divi ist zwar die einfachste Lösung, wenn Sie keine fortgeschrittenen Animationseffekte erstellen möchten, aber die Effekte wow.js und animate.css bringen definitiv auch einen großen Mehrwert für Ihre Website.

Wann man Divi-Animationen verwendet

Es gibt fünf verfügbare Animationseffekte in Divi, die Sie verwenden können:

  • Das Einblenden
  • Die untere Folie
  • Der linke Einschub
  • Der richtige Einschub
  • Der obere Einschub

Obwohl es nur fünf Möglichkeiten gibt, sind sie auch die am häufigsten verwendeten. Sie sind einfach und auf den Punkt gebracht. Wenn Sie Ihrer Website einen schönen zusätzlichen Effekt verleihen möchten, ohne zu viel Aufwand zu betreiben, sind die Divi-Animationseffekte der richtige Weg. Jeder dieser Effekte wird in dem Moment aktiviert, in dem Sie scrollen und eine Ansicht des Moduls, der Zeile oder des Abschnitts haben, zu dem Sie den Effekt hinzugefügt haben. So entgehen Ihren Besuchern die Effekte, die sich beispielsweise am unteren Rand der Seite befinden, nicht.

Um die Divi-Animationseffekte zu integrieren, müssen Sie kein Child-Theme auf Ihre Website hochladen. Sie können diese Effekte ganz einfach hinzufügen, während Sie noch am übergeordneten Thema arbeiten.

Wann Sie Wow.js und Animate.css verwenden sollten

Die Integration von wow.js und animate.css in Ihre Website wird Ihnen aufgrund der vielen Möglichkeiten, die Ihnen zur Verfügung stehen, wahrscheinlich sehr gefallen. Es gibt 14 Kategorien mit Animationseffekten, die verschiedene Effekte enthalten, die für diese Kategorie relevant sind. Folgende Kategorien stehen zur Auswahl:

  • Aufmerksamkeitssuchende
  • Hüpfende Eingänge
  • Hüpfende Ausgänge
  • Verblassende Eingänge
  • Verblassende Ausgänge
  • Flossen
  • Lichtgeschwindigkeit
  • Rotierende Eingänge
  • Rotierende Ausgänge
  • Schiebeeingänge
  • Schiebeausgänge
  • Zoom-Eingänge
  • Zoom-Ausgänge
  • Sonderangebote

Sie können alle verfügbaren Effekte anzeigen, indem Sie auf den folgenden Link klicken. Diese Animationseffekte erscheinen auch beim Scrollen.

Hinzufügen von Animationseffekten zu Abschnitten/Zeilen in Divi

Abonnieren Sie unseren Youtube-Kanal

Verwenden Sie die integrierten Animationseffekte

Die erste Möglichkeit, die wir Ihnen zeigen, sind die integrierten Animationseffekte. Wir zeigen Ihnen, wie Sie die Effekte sowohl auf einen Abschnitt als auch auf eine Zeile anwenden. Öffnen Sie die Seite, auf der Sie die Änderungen vornehmen möchten.

In unserem Beispiel fügen wir die Animationseffekte dem ersten Abschnitt und der ersten Zeile unserer Seite hinzu. Das Hinzufügen der Animation für den Abschnitt oder die Zeile ist in beiden Fällen gleich. Die CSS-Klassencodes für die verschiedenen Animationseffekte sind die folgenden:

  • CSS-Klasse einblenden : et-waypoint et_pb_animation_fade_in
  • Untere Slide-In-CSS-Klasse: et-waypoint et_pb_animation_bottom
  • Linke Einschub-CSS-Klasse: et-waypoint et_pb_animation_left
  • Rechtes Slide-In: CSS-Klasse: et-waypoint et_pb_animation_right
  • Obere Slide-In-CSS-Klasse: et-waypoint et_pb_animation_top

Animationseffekt zu Zeile hinzufügen

Um die Animation zu einer bestimmten Zeile hinzuzufügen, öffnen Sie die Einstellungen dieser Zeile und gehen Sie zur Registerkarte Erweitert. Platzieren Sie auf der Registerkarte Erweitert die CSS-Klasse des Animationseffekts im Feld CSS-Klasse. In diesem Fall zeigen wir Ihnen, wie Sie die Einblendanimation hinzufügen.

Animationseffekte

Animationseffekt zum Abschnitt hinzufügen

Die gleiche Methode zum Hinzufügen eines Animationseffekts zu einer Zeile gilt auch für einen Abschnitt. Gehen Sie zur Registerkarte Erweitert und platzieren Sie die CSS-Klasse für den Animationseffekt Ihrer Wahl im Feld CSS-Klasse. In diesem Beispiel zeigen wir Ihnen, wie Sie den oberen Einschub-Animationseffekt hinzufügen.

Das Ergebnis

Nachdem Sie die Effekte zu Ihrem Abschnitt und Ihrer Zeile hinzugefügt haben, sehen Sie das folgende Ergebnis:

Wow.js & Animate.css zu Ihrem Child-Theme hinzufügen

In diesem nächsten Teil zeigen wir Ihnen, wie Sie wow.js und animate.css zu Ihrer WordPress-Website hinzufügen und in Ihrem Divi-Theme verwenden.

Zunächst möchte ich Jeremy Cookson für diesen Beitrag zur Integration der wow.js und animate.css in WordPress danken. In diesem Teil des Beitrags zeigen wir Ihnen genau, wie Sie die Integration für eine WordPress-Website durchführen, die mit dem Divi-Thema erstellt wurde.

Um wow.js und animate.css zu Ihrer Webseite hinzuzufügen, müssen Sie auf Ihrer Website ein untergeordnetes Thema verwenden. Wenn Sie sich fragen, wie Sie ein Child-Theme erstellen, lesen Sie diesen Beitrag. Nachdem Sie die Hauptdateien Ihres Child-Themes erstellt haben, müssen Sie zwei weitere Dateien hinzufügen, um Ihr Child-Theme mit den Animationseffekten zu vervollständigen.

Laden Sie die Dateien herunter und fügen Sie sie Ihrem Kinderthema hinzu

Halten Sie Ihr Child-Theme in Reichweite und laden Sie in der Zwischenzeit die folgenden beiden Dateien herunter, indem Sie auf die folgenden beiden Links klicken:

  • animate.min.css
  • wow.min.js

Nachdem Sie die beiden Dateien heruntergeladen haben, erstellen Sie Unterordner in Ihrem Child-Theme. Nennen Sie eines davon CSS und das andere JS. Legen Sie danach die animate.min.css in den CSS-Ordner und die wow.min.js in den JS-Ordner.

Animationseffekte

Untergeordnetes Thema hochladen

Als nächstes müssen Sie das Child-Theme hochladen und aktivieren, dem Sie gerade wow.js und animate.css hinzugefügt haben. Gehen Sie zu Ihrem WordPress-Dashboard > Erscheinungsbild > Designs > und klicken Sie oben auf der Seite auf "Neu hinzufügen".

Fügen Sie PHP-Code zu Ihrer Functions.php-Datei hinzu

Nachdem Sie das Child-Theme hochgeladen haben, fügen Sie die folgenden Zeilen PHP-Code zur Datei functions.php Ihres Child-Themes hinzu:

//* Animate.CSS und WOW.js in die Warteschlange stellen
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts');
Funktion sk_enqueue_scripts() {
wp_enqueue_style( 'animieren', get_stylesheet_directory_uri() . '/css/animate.min.css');
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), ”, true );
}
//* Skript in die Warteschlange stellen, um WOW.js zu aktivieren
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
Funktion sk_wow_init_in_footer() { add_action( 'print_footer_scripts', 'wow_init');}
//* JavaScript vor </body>function wow_init() hinzufügen { ?>
<script type=”text/javascript”>
neues WOW().init(); </script><?php }

Animationen zu Zeilen und Abschnitten hinzufügen

Das System zum Hinzufügen der wow.js- und animate.css-Effekte zu Zeilen und Abschnitten ist das gleiche wie bei den Divi-Animationseffekten. Sie müssen die Einstellungen der Zeile oder des Abschnitts öffnen, zu der Sie den Animationseffekt hinzufügen möchten. Als Nächstes können Sie die der Animation zugewiesene CSS-Klasse im Feld CSS-Klasse Ihres Abschnitts oder Ihrer Zeile platzieren.

Animation zu Zeile hinzufügen

Für das Beispiel, das wir Ihnen mit der Zeile zeigen, verwenden wir den Effekt fadeInRight, den wir in der Liste der Animationseffekte gefunden haben. Gehen Sie zur Registerkarte Erweitert Ihrer Zeileneinstellungen und fügen Sie das 'wow fadeInRight' zum Feld CSS-Klasse hinzu. Jedes Mal, wenn Sie einen Effekt zu einem Teil Ihrer Website hinzufügen möchten, stellen Sie sicher, dass Sie „Wow“ vor den von Ihnen verwendeten Effekt setzen.

Ergebnis

Wenn Sie die CSS-Klasse hinzugefügt und die Seite, an der Sie arbeiten, in der Vorschau anzeigen, sollten Sie das folgende Ergebnis erzielt haben:

Animationseffekte

Animation zum Abschnitt hinzufügen

Die gleiche Methode gilt für das Hinzufügen eines Animationseffekts zu einem Abschnitt. Gehen Sie zur Registerkarte Erweitert und fügen Sie die CSS-Klasse 'wow bounceInDown' zum Feld CSS-Klasse Ihres Abschnitts hinzu.

Ergebnis

Wenn Sie alle Schritte richtig befolgt haben, sollten Sie das folgende Ergebnis erzielen:

Animationseffekte

Erweiterte Optionen

Falls Sie Ihrer Animation einige zusätzliche Spezifikationen hinzufügen möchten, können Sie dies ebenfalls tun. Sie können beispielsweise einem Ihrer Animationseffekte eine Verzögerungszeit hinzufügen. Dies kann nützlich sein, wenn Sie eine Abschnittsanimation mit einer Zeilenanimation innerhalb desselben Abschnitts kombinieren. Auf diese Weise stellen Sie sicher, dass sich die Animationseffekte nicht überschneiden.

Um Ihnen zu zeigen, wie Sie diese Verzögerungszeit hinzufügen, kombinieren wir die beiden Effekte, die wir im vorherigen Teil dieses Beitrags verwendet haben. Ein Animationseffekt wird dem Abschnitt und der andere der Reihe zugewiesen. Um sicherzustellen, dass der Zeilenanimationseffekt nicht verloren geht, fügen wir eine Verzögerungszeit von 2 Sekunden hinzu.

Öffnen Sie die Zeileneinstellungen und kehren Sie zur Registerkarte Erweitert zurück. Fügen Sie im Feld CSS-Klasse eine weitere Klasse namens 'delay' hinzu. Diese Klasse existiert noch nicht, aber wir werden sie im nächsten Schritt hinzufügen.

Fügen Sie nun die CSS-Klasse Verzögerung zu den Einstellungen der Seite hinzu, an der Sie arbeiten, indem Sie auf die folgende Schaltfläche klicken:

Fügen Sie als Nächstes die CSS-Klasse mit den CSS-Codezeilen zum Feld Benutzerdefiniertes CSS hinzu. Wenn Sie wie in diesem Beispiel eine Verzögerungszeit von 2 Sekunden hinzufügen möchten, benötigen Sie die folgenden CSS-Codezeilen: 

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

Ergebnis

Nachdem Sie die Verzögerungszeit hinzugefügt haben, sollte das Ergebnis so aussehen:

Animationseffekte

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Ihrer Divi-Website Animationseffekte hinzufügen. Wir haben Ihnen zwei Möglichkeiten zur Verfügung gestellt. Der erste zeigt Ihnen, wie Sie die Standard-Animationseffekte von Divi verwenden. Die zweite Möglichkeit ermöglicht die Integration von wow.js und animate.css. Mithilfe von Animationseffekten auf Ihrer Website können Sie den Inhalt hervorheben, den Sie mit Ihren Besuchern teilen möchten. Außerdem sieht es auch einfach toll aus. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen.

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von Stocker top / shutterstock.com