Lottie Animation in WordPress nutzen
Lottie ist eine Open-Source-Bibliothek, die es ermöglicht, animierte Grafiken in Websites und Anwendungen einzubetten. Im Gegensatz zu herkömmlichen Animationstechnologien wie Flash oder GIFs, die auf dem Gerät des Benutzers ausgeführt werden, werden Lottie Animationen auf dem Server berechnet und dann als vektorbasierte Grafik an den Browser gesendet. Dies ermöglicht eine höhere Leistung und Flexibilität bei der Gestaltung von Animationen.
In diesem Beitrag werden wir besprechen, warum man Lottie Animationen auf einer WordPress Website verwenden sollte und wie man diese einbinden kann.
Vorteile von Lottie Animationen
Lottie bietet viele Vorteile für die Verwendung in WordPress Webseiten. Einer der größten Vorteile ist die höhere Leistung und Flexibilität bei der Gestaltung von Animationen. Im Gegensatz zu herkömmlichen Animationstechnologien werden Lottie Animationen auf dem Server berechnet und dann als Vektor-Grafik an den Browser gesendet. Dies ermöglicht eine klare und scharfe Darstellung der Animationen auf allen modernen Browsern und Geräten.
Ein weiterer Vorteil von Lottie ist, dass es auch Interaktion und Benutzersteuerung ermöglicht. Das heißt, das Animationen auf Benutzeraktionen reagieren können, wie zum Beispiel das Klicken auf einen Button. Dies ermöglicht eine größere Benutzerfreundlichkeit und Interaktivität auf der Webseite.
Zudem können, dank der Kompatibilität mit Adobe’s After Effects, benutzerdefinierte Animationen erstellt werden.
Lottie Vorteile im Überblick
Lottie Animation – Vorbereitung
Bevor wir nun mit der Einbindung von Lottie-Animationen in die WordPress Webseite beginnen, müssen einige Vorbereitungen getroffen werden.
Zunächst müssen die Lottie Animationen (die verwendet werden sollen) heruntergeladen oder erstellt werden. Es gibt viele Websites, auf denen kostenlos Lottie Animationen heruntergeladen werden können. Du kannst natürlich auch deine eigenen Animationen erstellen, indem du ein Programm wie Adobe After Effects verwendest.
Lottie Animationen in WordPress einbetten
Nachdem du die Vorbereitungen abgeschlossen hast, können nun die Animationen in die WordPress Website eingebettet werden.
Lottie mit Elementor Pro
Eine Möglichkeit, dies zu tun, besteht in der Verwendung von Elementor Pro. Hier gibt es bereits (wenn Elementor aufgerufen ist) ein Element eigens für Lottie. Dieses Element kannst du einfach an die gewünschte Stelle auf deiner Webseite platzieren. Im nächsten Schritt musst du noch die Animation mit Hilfe von Elementor auf deine WordPress Website hochladen.
Fast geschafft: Nun kannst du noch Einstellungen hinsichtlich des Abspielens und der Größe der Animation treffen. Aber auch das geht ganz komfortabel mittels Elementor.
Du interessierst dich für Elementor?
Lottie mit Elementor und ElementsKit Elementor addons
Wenn du Elementor verwendest, aber ohne die kostenpflichtige Pro-Version, dann kannst du Lottie nicht ohne Weiteres verwenden. Aber zum Glück kann hier (wie so oft) ein WordPress Plugin für Abhilfe sorgen. Meine Empfehlung ist hier das Plugin ElementsKit Elementor addons.
Nach der Installation und Aktivierung kannst du ganz genau festlegen, welche Funktionen und Widgets du aus dem Sortiment dieses Plugins nutzen möchtest.
Mein Tipp: Aktiviere nur jene Funktionalitäten, die du wirklich benötigst. Je mehr aktiviert ist, desto stärker werden die Ressourcen deiner Website beansprucht und desto langsamer lädt dann letztendlich auch die Website. (Und dies hat dann wiederum auf die Nutzerfreundlichkeit und auf Google, Stichwort SEO.)
Öffnest du nun Elementor, so sollten dir jetzt zusätzlich die Elemente von ElementsKit zur Verfügung stehen. Also wenn du das Lottie Widget aktiviert hast, kannst du es nun nutzen. Dies ist eigentlich sehr ähnlich zu nutzen, wie das Pendant von Elementor Pro.
Lottie mit WordPress ohne Elementor
Natürlich kann man Lottie auch verwenden, ohne Elementor zu nutzen (doch meiner Meinung nach ist es mit Elementor am einfachsten). Beispielsweise bieten dir auch die Kadence Blocks eine Option, Lottie auf der Website einzubetten. Bei Kadence Blocks handelt es sich um ein Plugin oder vielmehr um eine Erweiterung des Gutenberg Editor (das ist der WordPress eigene Blockeditor).
Alternativ können auch andere Plugins wie beispielsweise LottieFiles – Lottie block for Gutenberg genutzt werden. Oder du entscheidest dich für den harten Weg und fügst den entsprechenden Code in die entsprechenden Dateien deines genutzten WordPress Themes ein. (Doch wie gesagt, das ist der harte Weg und eigentlich nur für Programmierer eine Option.)
Fazit
Lottie Animationen bieten viele Vorteile für die Verwendung auf WordPress Webseiten. So ist Lottie im Vergleich zu herkömmlich Animationen wesentlich ressourcenschonender: Eine Lottie Animation benötigt nur sehr wenig Speicherplatz, kann schnell geladen werden und verlangsamt somit die Website nicht.
Doch der Hauptvorteil bei der Verwendung von Animationen ist, dass du deine Website auf kreative Weise gestalten und Ihre Inhalte hervorheben kannst. Lottie ist hierfür ideal.
Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.
