Haben Sie schon einmal eine Website besucht und waren von den Animationen und interaktiven Grafiken überwältigt? Man könnte annehmen, dass solche Animationen viel Programmierkenntnisse und technisches Fachwissen erfordern, aber mit Lottie Animations ist es einfacher, als Sie denken!
Lottie-Animationen sind vektorbasierte Animationen, die sich mithilfe von Tools wie WordPress und Elementor einfach in Ihre Website einbinden lassen. Mit dem WordPress-Plugin LottieFiles können Sie die Animationen schnell und einfach über den Gutenberg-Editor in Ihre WordPress-Website einfügen und anpassen.
Wir zeigen Ihnen Schritt für Schritt, wie Sie Lottie-Animationen in WordPress und Elementor hinzufügen und verwenden.
Lottie-Animationen verstehen
Bevor wir uns mit den Details der Integration von Lottie-Animationen in WordPress oder Elementor befassen, wollen wir einige Grundlagen zu Lottie-Animationen betrachten.
Was genau sind Lottie-Animationen? Lottie ist eine von Airbnb entwickelte Bibliothek, die After Effects-Animationen in Echtzeit rendert und als JSON-Dateien exportiert. Diese JSON-Dateien lassen sich problemlos im Web verwenden und sind daher bei Webentwicklern und -designern beliebt, die ihren Websites Animationen und Interaktivität hinzufügen möchten.
Wo findet man also Lottie-Animationen? Zum Glück gibt es unzählige Ressourcen, um Lottie-Animationen zu finden und herunterzuladen. Eine beliebte Quelle ist LottieFiles.com , die eine riesige Bibliothek kostenloser und kostenpflichtiger Lottie-Animationen zum Stöbern und Herunterladen bietet.
Eine weitere Möglichkeit besteht darin, eigene Lottie-Animationen mit Adobe After Effects zu erstellen und diese als JSON-Dateien zu exportieren.
Siehe auch: Wie konvertiert man ein Adobe XD-Design in eine WordPress-Website?
Sobald Sie Ihre Lottie-Animationen haben, können Sie diese für die Verwendung in WordPress oder Elementor herunterladen. Das ist ganz einfach: Laden Sie einfach die JSON-Datei der gewünschten Animation herunter und speichern Sie sie auf Ihrem Computer.
Warum Sie Lottie-Animationen auf Ihrer Website einbinden sollten?
Hier sind einige überzeugende Gründe, warum Sie Lottie Animation für Ihre Website nicht verpassen sollten:
Hervorragendes Benutzererlebnis
Lottie-Animationen können vor allem die Interaktionsrate und Ihre Website attraktiver gestalten. Durch Animationen und interaktive Elemente schaffen Sie ein dynamischeres Nutzererlebnis, das Besucher länger auf Ihrer Website hält.
Beeinträchtigt nicht die Leistung der Website
Neben der Verbesserung der Benutzerfreundlichkeit bieten Lottie-Animationen auch eine höhere Performance als herkömmliche animierte Grafiken. Da Lottie-Animationen vektorbasierend sind, weisen sie eine deutlich kleinere Dateigröße als GIFs oder andere traditionelle Animationen auf. Dadurch werden sie schneller geladen und beeinträchtigen die Website-Performance nicht.
Skalierbar
Auflösungsverlust vergrößern oder verkleinern . Dadurch eignen sie sich hervorragend für responsives Design , bei dem Grafiken auf verschiedenen Bildschirmgrößen optimal aussehen müssen.
Anpassbar
Lottie-Animationen sind zudem sehr individuell anpassbar. Sie können Geschwindigkeit, Schleifeneinstellungen und weitere Eigenschaften Ihrer Animation an das Design Ihrer Website und die Benutzerfreundlichkeit anpassen. Da Lottie-Animationen in Adobe After Effects erstellt werden, haben Sie umfassende Kontrolle über die Animation selbst.
Zusammenfassend lässt sich sagen, dass Lottie-Animationen eine hervorragende Möglichkeit bieten, Ihre Website optisch ansprechender und interaktiver zu gestalten. Wenn Sie die Benutzerfreundlichkeit und Performance Ihrer Website verbessern möchten, sollten Sie den Einsatz von Lottie-Animationen unbedingt in Erwägung ziehen.
Hinzufügen von Lottie-Animationen in WordPress
Nachdem Sie nun verstanden haben, was Lottie-Animationen sind und warum Sie sie verwenden sollten, erfahren Sie im Folgenden, wie Sie diese in WordPress hinzufügen und verwenden
- Der erste Schritt besteht darin, das LottieFiles-Plugin zu installieren. Dies können Sie tun, indem Sie im WordPress-Dashboard zum Bereich „Plugins“ navigieren und nach „LottieFiles“ suchen.
- Sobald Sie das Plugin gefunden haben, klicken Sie auf „Installieren“ und anschließend auf „Aktivieren“, um das Plugin auf Ihrer Website zu aktivieren.
- Erstellen Sie einen neuen Beitrag oder eine neue Seite in WordPress mithilfe des Gutenberg-Editors.
- Fügen Sie Ihrer Seite einen neuen „Lottie“-Block hinzu, indem Sie auf die Schaltfläche „Block hinzufügen“ klicken und in der Blockbibliothek nach „Lottie“ suchen.
- Klicken Sie in den Einstellungen des Lottie-Blocks auf die Schaltfläche „Animation entdecken“, um eine Lottie-Animationsdatei von Ihrem Computer oder der LottieFiles-Bibliothek auszuwählen.
- Sobald Sie Ihre Animation ausgewählt haben, können Sie in den Blockeinstellungen die Animationsgeschwindigkeit, die Schleifeneinstellungen und andere Eigenschaften anpassen.
- Sie können Ihrer Lottie-Animation auch Interaktionen hinzufügen, indem Sie in den Blockeinstellungen auf die Schaltfläche „Interaktion hinzufügen“ klicken. Dadurch können Sie eine bestimmte Aktion auslösen, wenn ein Benutzer auf die Animation klickt oder mit der Maus darüberfährt.
Wenn Sie mit Ihrer Lottie-Animation zufrieden sind, speichern Sie Ihren Beitrag oder Ihre Seite und Ihre Animation wird auf Ihrer WordPress-Website live geschaltet!
Hinzufügen von Lottie-Animationen in Elementor
Wenn Sie Elementor als Website-Baukasten verwenden, ist das Hinzufügen von Lottie-Animationen kinderleicht. Elementor bietet ein eigenes Lottie-Widget, mit dem Sie Lottie-Animationen ganz einfach in Ihre Seiten einfügen können.
Um loszulegen, ziehen Sie das Lottie-Widget einfach per Drag & Drop auf Ihre Elementor-Seite. Klicken Sie anschließend auf das Widget, um die Lottie-Einstellungen zu öffnen.
externen Link hinzufügen . Sobald Ihre Lottie-Datei hochgeladen ist, wird Ihnen eine Vorschau Ihrer Animation im Widget angezeigt.
Hier können Sie Ihre Animation individuell anpassen, indem Sie die Animationsgeschwindigkeit, die Schleifeneinstellungen und vieles mehr ändern. Mithilfe der integrierten Interaktionsfunktion von Elementor können Sie Ihrer Animation außerdem Interaktionen wie Klickereignisse oder Hover-Effekte hinzufügen.
Abschluss
Herzlichen Glückwunsch, Sie haben nun gelernt, wie man Lottie-Animationen in WordPress und Elementor hinzufügt und verwendet!
Mit den in diesem Blog beschriebenen Schritten können Sie ansprechende und interaktive Animationen zu Ihrer Website hinzufügen, ohne über umfassende Programmierkenntnisse oder technisches Fachwissen zu verfügen.
Probieren Sie also ruhig aus, Lottie-Animationen auf Ihrer WordPress- oder Elementor-Website einzubinden. Mit der richtigen Animation können Sie die Benutzerfreundlichkeit verbessern, wichtige Informationen vermitteln und Ihrer Website einen optischen Reiz verleihen.
Wenn Sie Schwierigkeiten haben, Lottie-Animationen in Ihre WordPress- oder Elementor-Website einzubinden, keine Sorge! Seahawks professioneller WordPress-Entwicklungsservice hilft Ihnen gerne. Unser Team verfügt über jahrelange Erfahrung in der Erstellung ansprechender und dynamischer Websites mit WordPress und unterstützt Sie bei der Umsetzung Ihrer Vision.
