Lottie-Animationen sind kleine, scharfe Animationen als JSON-Datei: ein hüpfendes Icon, ein Häkchen, das sich zeichnet, ein animiertes Logo. Sie bleiben auf jedem Bildschirm gestochen scharf und sind viel kleiner als ein GIF. Die gute Nachricht für Divi-5-Nutzer: Du brauchst dafür kein Zusatzplugin, denn Divi 5 bringt ein eigenes Lottie-Modul mit.
Das hat sich gegenüber früher grundlegend geändert. Ich zeige dir, wo das Modul sitzt, was die Einstellungen heißen und wo du hängen bleiben kannst, vor allem beim Upload der Datei. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026.
Schritt 1: Das Lottie-Modul einfügen
Klicke in der gewünschten Spalte auf das Plus und tippe im Suchfeld „Lottie“ ein. Es erscheint genau ein Treffer: „Lottie“. Das Modul steht in der Liste der Standardmodule, etwa zwischen „Link“ und „Menü“. Ein Klick darauf fügt es ein und öffnet die Einstellungen.
Die Suche nach „Lottie“ findet das eigene Modul.Zum Vergleich: Wer nach „animation“ oder „json“ sucht, findet nichts. Du musst den Namen „Lottie“ eintippen. Als Nachbarn gibt es noch ein Modul „SVG“, das aber für statische Vektorgrafiken gedacht ist, nicht für Lottie.
Schritt 2: Die Einstellungen im Überblick
Im Reiter „Inhalt“ öffnet sich die Gruppe „Lottie-Animation“ mit diesen Feldern:
- „Lottie-Animationsdatei“: Hier steht zunächst eine Platzhalter-Animation. Daneben sitzt der Knopf „Hochladen“.
- „Animation Auslösen“: Standard ist „Beim Laden“.
- „Animation Wiederholen“: ein Schalter, standardmäßig aus.
- „Animationsgeschwindigkeit“: ein Regler mit Wert 1.
- „Richtung“: „Vorwärts“ oder „Rückwärts“.
- „Wiedergabemodus“: „Normal“ oder „Hüpfen“.
Die Gruppe „Lottie-Animation“ im Reiter „Inhalt“.Unter dem Dateifeld steht ein oranger Hinweis auf Englisch: „You must enable JSON uploads before uploading Lottie files.“ Er ist kein Fehler, sondern ein Wink mit dem Zaunpfahl. Dazu gleich mehr.
Schritt 3: Die Animationsdatei einbinden
Hier kommt die wichtigste Stolperfalle. WordPress erlaubt standardmäßig keine JSON-Dateien in der Mediathek. Wenn du auf „Hochladen“ klickst, öffnet sich der Dialog „Choose a Lottie JSON File“ (die Überschrift ist englisch geblieben). Wählst du dort eine .json-Datei aus, bekommst du ohne Freischaltung diese Meldung:
Ohne freigeschaltete JSON-Uploads scheitert der Upload mit „Der Webserver kann diese Datei nicht verarbeiten.“Du hast zwei Möglichkeiten:
- JSON-Uploads freischalten. Der Link „enable JSON uploads“ im orangen Hinweis führt zu einem Hilfeartikel von Elegant Themes. Er nennt zwei Wege: das Plugin „File Upload Types by WPForms“ oder ein kurzes Code-Stück, etwa über das Plugin „Code Snippets“. Diesen Weg habe ich nicht selbst durchgespielt, die Anleitung findest du im Hilfeartikel „How to Enable JSON Uploads in WordPress“ auf help.elegantthemes.com.
- Die Datei per URL einbinden. Im selben Dialog gibt es links den Punkt „Von URL einfügen“. Dort trägst du die Adresse der .json-Datei ein und klickst auf „In den Beitrag einfügen“. Das habe ich getestet, und es funktioniert, wenn die Datei auf deinem Server oder einer erreichbaren Adresse liegt.
Über „Von URL einfügen“ gibst du die Adresse der JSON-Datei an.Danach erscheint die Animation direkt im Canvas, und im Dateifeld steht die Adresse. Beachte: Das Modul füllt standardmäßig die ganze Spaltenbreite. Meine Testanimation war ein einfacher Kreis, der bei einer einzelnen Spalte fast 1000 Pixel breit wurde. Setze das Modul deshalb in eine schmalere Spalte oder passe die Größe im Reiter „Design“ unter „Größe Einstellen“ an.
Die eingebundene Animation im Visual Builder.Woher bekommst du Lottie-Dateien? Eine bekannte Quelle ist lottiefiles.com. Achte dort auf die Lizenz der jeweiligen Datei, bevor du sie auf einer Kundenseite einsetzt.
Schritt 4: Den Auslöser wählen
Das Dropdown „Animation Auslösen“ bestimmt, wann die Animation startet. Zur Wahl stehen:
- „Beim Laden“
- „Bei Ansicht“
- „Bei Hover“
- „Beim Klicken“
- „Scrollen Zum Animieren“
Fünf Auslöser für die Animation.Ich habe „Beim Laden“ und „Bei Hover“ auf der Live-Seite geprüft. Bei „Beim Laden“ spielt meine Animation einmal ab und bleibt am Ende stehen, weil „Animation Wiederholen“ aus ist. Soll sie in Dauerschleife laufen, schalte den Schalter ein. Bei „Bei Hover“ steht die Animation im Ruhezustand still und startet, sobald die Maus darüber fährt:
Bei Hover: Ruhezustand, mitten in der Animation, Ende.Die übrigen Auslöser („Bei Ansicht“, „Beim Klicken“, „Scrollen Zum Animieren“) und die Felder „Richtung“, „Wiedergabemodus“ und „Animationsgeschwindigkeit“ habe ich nicht im Einzelnen ausprobiert. Die Namen verraten ihre Aufgabe, aber teste sie auf deiner Seite einmal live.
Speichern und prüfen
Klicke auf „Speichern“ und öffne die Seite im Browser. Animationen siehst du am sichersten auf der Live-Seite. Für die Ladezeit gilt: Lottie-Dateien sind klein, aber viele gleichzeitig laufende Animationen kosten Rechenleistung, vor allem auf älteren Handys. Meine Empfehlung: lieber eine gut gewählte Animation als fünf.
Divi gibt es bei Elegant Themes (Werbung).
