Lottie Animation in WordPress einbinden: mit und ohne Elementor
Eine Lottie Animation ist eine vektorbasierte Animation im JSON-Format, die direkt im Browser deiner Besucher abgespielt wird. In WordPress bindest du Lottie Animationen am einfachsten über den kostenlosen Lottie-Block von Kadence Blocks, das Lottie-Widget von Elementor Pro oder ein kostenloses Add-on wie ElementsKit ein. Die Dateien sind winzig, bleiben auf jedem Bildschirm gestochen scharf und machen deine Website spürbar lebendiger.
In diesem Beitrag erfährst du, wie Lottie funktioniert, wo du fertige Animationen findest und wie du sie Schritt für Schritt in deine WordPress Website einbaust, mit und ohne Elementor. Außerdem bekommst du Tipps, damit die Animationen deine Ladezeit nicht ausbremsen.
Was ist Lottie und wie funktioniert es?
Lottie ist ein offenes Animationsformat, das ursprünglich vom Entwicklerteam bei Airbnb veröffentlicht wurde. Eine Lottie Datei enthält keine fertigen Bilder, sondern beschreibt die Animation als Vektorgrafik im JSON-Format. Ein kleiner JavaScript-Player liest diese Datei aus und rendert die Animation direkt im Browser, wahlweise als SVG oder auf einem Canvas-Element. Anders als bei GIFs oder Videos entsteht die Animation also live auf dem Bildschirm deiner Besucher und bleibt dadurch in jeder Größe scharf.
Erstellt werden Lottie Animationen klassisch in Adobe After Effects und über das kostenlose Plugin LottieFiles for After Effects (früher als Bodymovin bekannt) exportiert. Inzwischen geht es aber auch ganz ohne After Effects: Mit dem browserbasierten Lottie Creator von LottieFiles oder Tools wie Lottielab erstellst du Animationen direkt im Browser, auf Wunsch sogar mit KI-Unterstützung.
Gut zu wissen: Neben der klassischen JSON-Datei gibt es das neuere dotLottie-Format (Dateiendung .lottie). Es komprimiert die Animation und macht die Datei dadurch bis zu 90 Prozent kleiner. Lottie ist außerdem längst kein Nischenformat mehr: Seit 2023 wird der Standard unter dem Dach der Linux Foundation weiterentwickelt, 2024 erschien die Version 1.0 der offiziellen Spezifikation.
Vorteile von Lottie Animationen
Der größte Vorteil von Lottie ist die Kombination aus geringer Dateigröße und gestochen scharfer Darstellung. Weil die Animation als Vektorgrafik beschrieben und erst im Browser gerendert wird, ist die Datei meist deutlich kleiner als ein vergleichbares GIF oder Video. Trotzdem sieht die Animation auf jedem Display perfekt aus, vom kleinen Smartphone bis zum 4K-Monitor.
Ein weiterer Vorteil: Lottie Animationen können auf Benutzeraktionen reagieren. Sie lassen sich beim Klick, beim Überfahren mit der Maus, beim Scrollen oder erst beim Erscheinen im sichtbaren Bereich abspielen. Das macht deine Website interaktiver und lenkt den Blick gezielt auf wichtige Inhalte.
Lottie Vorteile im Überblick
Lottie Animationen finden oder selbst erstellen
Bevor du eine Animation einbinden kannst, brauchst du natürlich eine Lottie Datei. Die größte Anlaufstelle ist LottieFiles: Dort findest du hunderttausende fertige Animationen, die du direkt als JSON- oder dotLottie-Datei herunterladen kannst. Im kostenlosen Tarif sind aktuell 10 Downloads öffentlicher Animationen pro Monat enthalten, für den Einstieg reicht das völlig aus.
Gute Alternativen sind IconScout mit über einer Million Lottie Animationen (viele davon kostenlos, auch für kommerzielle Projekte) und Creattie, wo du kuratierte animierte Icons sogar ohne Anmeldung herunterladen kannst.
Eigene Animationen erstellst du entweder in Adobe After Effects mit dem Export-Plugin von LottieFiles oder komplett im Browser: Der Lottie Creator bringt mit Motion Copilot sogar einen KI-Assistenten mit, der Animationen aus Text-Anweisungen erzeugt. Auch aus Figma heraus kannst du Designs über das LottieFiles-Plugin als Lottie exportieren.
Achte auf die Dateigröße
Nicht jede schöne Animation ist auch eine gute Animation für deine Website. Wirf vor dem Einbinden einen Blick auf die Dateigröße: Bis etwa 500 KB bist du auf der sicheren Seite, deutlich größere Dateien können die Ladezeit spürbar verlängern. Viele Plattformen zeigen die Größe direkt beim Download an.
Lottie Animationen in WordPress einbetten
Jetzt geht es ans Einbauen. Je nachdem, ob du mit Elementor, dem Gutenberg Editor oder einem anderen Setup arbeitest, führen mehrere Wege zum Ziel. Die drei wichtigsten zeige ich dir jetzt.
JSON-Upload in WordPress
WordPress blockiert den Upload von JSON-Dateien in die Mediathek aus Sicherheitsgründen standardmäßig. Das ist aber kein Problem: Die hier vorgestellten Blöcke und Widgets bringen eigene Upload-Wege mit oder akzeptieren eine externe URL. Du musst den JSON-Upload also nicht extra freischalten.
Lottie mit Elementor Pro
Elementor Pro bringt ein eigenes Lottie-Widget mit. Du ziehst das Widget an die gewünschte Stelle, wählst als Quelle entweder eine Mediendatei (die JSON-Datei lädst du dabei direkt über das Widget hoch) oder eine externe URL. Anschließend legst du fest, wie die Animation abgespielt wird: automatisch beim Erscheinen im sichtbaren Bereich, beim Klick, beim Hover oder gesteuert durch das Scrollen. Praktisch: Ein eigener Lazy-Load-Schalter sorgt dafür, dass die Animation erst geladen wird, wenn sie wirklich gebraucht wird.
Das Lottie-Widget ist der Pro-Version vorbehalten. Elementor Pro startet aktuell bei 49 US-Dollar pro Jahr für eine Website (Stand: Juli 2026).
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenDu interessierst dich für Elementor?
Lottie mit Elementor kostenlos nutzen: ElementsKit und Alternativen
Nutzt du Elementor in der kostenlosen Version, fehlt dir das Lottie-Widget. Diese Lücke schließt ein kostenloses Add-on wie ElementsKit: Das Plugin wird aktiv gepflegt, kommt auf über eine Million aktive Installationen und enthält das Lottie-Widget bereits in der Gratis-Version. Nach Installation und Aktivierung legst du in den Einstellungen fest, welche Widgets du nutzen möchtest, und schaltest dort das Lottie-Widget ein. Die Bedienung ähnelt danach stark dem Pendant aus Elementor Pro.
Mein Tipp: Aktiviere nur die Widgets, die du wirklich benötigst. Je mehr aktiv ist, desto mehr Ressourcen beansprucht deine Website und desto langsamer lädt sie. Das wirkt sich negativ auf die Nutzerfreundlichkeit und auf dein Google Ranking aus, Stichwort SEO.
Auch Premium Addons for Elementor und Royal Elementor Addons bieten jeweils ein kostenloses Lottie-Widget an. Funktional nehmen sich die drei wenig. Nimm also am besten das Add-on, das du ohnehin schon im Einsatz hast, statt ein zusätzliches Plugin zu installieren.
Lottie ohne Elementor: Gutenberg und Kadence Blocks
Arbeitest du mit dem Gutenberg Editor, brauchst du für Lottie kein Elementor. Die Kadence Blocks enthalten schon in der kostenlosen Version einen eigenen Block namens Lottie Animations. Damit lädst du die JSON-Datei direkt über die Plugin-Einstellungen hoch oder bindest sie per URL ein. Anschließend steuerst du Autoplay, Schleifen, Geschwindigkeit, Abspielen beim Hover oder erst im sichtbaren Bereich. Sogar scrollgesteuerte Animationen mit frei wählbarem Start- und Endpunkt sind möglich. Warum ich die Kadence Blocks generell empfehle, liest du in meinem Beitrag Kadence Blocks für WordPress.
Vom offiziellen LottieFiles-Plugin für Gutenberg rate ich aktuell eher ab: Es wird zwar noch aktualisiert, kommt aber nur auf eine Bewertung von 2,3 von 5 Sternen, unter anderem wegen Konflikten mit anderen Plugins. Eine schlanke und sehr gut bewertete Alternative ist AM LottiePlayer, das als eines der wenigen Plugins auch das komprimierte dotLottie-Format unterstützt.
Und für Entwickler gilt: Mit dem offiziellen dotLottie Web Player lässt sich eine Animation auch von Hand per Skript und HTML-Block einbinden. Für die meisten Anwendungsfälle ist das aber unnötig kompliziert, die genannten Blöcke und Widgets decken so gut wie alles ab.
Lottie und die Ladezeit: Darauf solltest du achten
So leichtgewichtig Lottie auch ist: Falsch eingesetzt kann jede Animation deine Website ausbremsen. Mit diesen Regeln bist du auf der sicheren Seite:
Wie du die Ladezeit deiner Website darüber hinaus verbesserst, erfährst du in meinem Beitrag Ladezeit verbessern mit Caching.
FAQ: Häufige Fragen zu Lottie in WordPress
Fazit
Lottie Animationen sind eine der elegantesten Möglichkeiten, deine WordPress Website lebendiger zu machen: kleine Dateien, gestochen scharfe Darstellung und volle Kontrolle darüber, wann und wie eine Animation abgespielt wird. Dank kostenloser Lösungen wie dem Lottie-Block von Kadence Blocks oder dem ElementsKit-Widget für Elementor brauchst du dafür nicht einmal ein Budget.
Wichtig ist nur das richtige Maß: Gezielt eingesetzte Animationen lenken den Blick auf deine Inhalte und werten das Design auf. Zu viele Animationen wirken dagegen schnell unruhig und kosten Ladezeit.
Du wünschst dir eine Website, die nicht nur schön animiert ist, sondern auch Kunden gewinnt? Dann sieh dir mein Angebot für WordPress Webdesign an oder melde dich direkt bei mir.
Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.
