Das Integrieren von Animationen in Ihre WordPress-Website ist eine großartige Möglichkeit, eine müde Webseite zu beleben und Ihre Besucher während ihrer gesamten Zeit auf Ihrer Website zu beschäftigen. Eine einfache und effiziente Möglichkeit, dies zu tun, ist die Verwendung von Lottie-Animationen: hochwertige, leichte Animationen.
Lottie-Animationen werden aus zahlreichen Gründen immer beliebter, und wenn Sie bereit sind, auf den fahrenden Zug aufzuspringen und Ihre Website aufzupeppen, könnten sie genau das Richtige für Sie sein.
Es gibt verschiedene Möglichkeiten, diese Animationen zu erstellen und sie reibungslos zu Ihrer WordPress-Site hinzuzufügen.
Was sind Lottie-Animationen?
Lotte ist eine Bibliothek für Android, iOS, Web und Windows, die After Effects-Animationen rendert und den Export der Animationsdaten als JSON-Dateien im Gegensatz zu einem typischen Bilddateityp ermöglicht. Kurz gesagt, sie können ein statisches Objekt leicht durch etwas Lustiges und Ansprechendes ersetzen.
Diese Open-Source-Lösung wurde zuerst vom Team von AirBnB eingeführt, gewinnt aber schnell an Popularität bei Designern und Animatoren in verschiedenen Märkten. Ein großer Vorteil der Verwendung von Lottie-Animationen auf Ihrer WordPress-Website besteht darin, dass die Dateigröße im Vergleich zu GIF-Animationen oder mp4-Dateien sehr klein ist. Darüber hinaus ermöglicht das flexible Animationsformat dem Browser, das Rendering zu handhaben.
Die vielen Einsatzmöglichkeiten von Lotto-Animationen sind ein Grund dafür, dass sie so beliebt sind. Sie können Lottie-Animationen als animierte Kopfzeilen, Schaltflächen, auffällige Grafikelemente und mehr verwenden. Sie können die Animation auch so einstellen, dass sie ausgelöst wird, wenn Besucher auf der Webseite scrollen, den Mauszeiger darüber bewegen oder darauf klicken. Ihre Vielseitigkeit und einfache Implementierung für B2C und B2B-Websites Machen Sie sie zu einer bahnbrechenden Möglichkeit, die Qualität und das Gesamtbild Ihres Webdesigns zu verbessern.
Erstellen von Lottie-Animationen
Wenn Sie überlegen, ob Sie Ihrer Website Lottie-Animationen hinzufügen möchten, müssen Sie sich zunächst entscheiden, ob Sie einen Standard- oder einen benutzerdefinierten Ansatz verfolgen möchten. Jede hat ihre Vor- und Nachteile, daher ist es ratsam, beide Optionen in Betracht zu ziehen, bevor Sie sich entscheiden.
Bei jeder Art von Animation ist weniger immer mehr. Beim Einbinden eines animierten Elements in eine Neugestaltung der Websiteüberlegen Sie, welche Rolle diese Animation in der Customer Journey spielt.
Benutzerdefinierte Lottie-Animationen
Wenn Sie nach einer benutzerdefinierten Lottie-Animation für Ihre Website suchen, müssen Sie mit einem darauf spezialisierten Animator oder Designer zusammenarbeiten Adobe After Effects und ist mit dieser Art der Animation vertraut.
Viele Lottie-Animationen verwenden einen Illustrationsstil, daher müssen Sie entscheiden, ob dies zum Branding und Stil der Website passt, bevor Sie damit fortfahren. Sobald Sie sich für die Grafikelemente und Animationseffekte entschieden haben, muss der Animator die benutzerdefinierten Animationen in Adobe After Effects erstellen und sie mit der After Effects-Erweiterung als Lottie-Animationen exportieren. Dadurch wird eine qualitativ hochwertige Animation gerendert, die einfach in Ihre Website implementiert werden kann.
Ein Grund für die hohe Qualität von Lottie-Animationen ist, dass der Erstellungsprozess es überflüssig macht, dass ein Entwickler oder Ingenieur die Animation des Designers in einem Webformat nachbilden muss. Es bietet eine gebrauchsfertige Lösung, die die Implementierung von Animationen einfacher denn je macht.
Stock Lottie-Animationen
Aktienlottie-Animationen sind eine großartige Option, wenn Sie Ihr neues Design beschleunigen möchten. Sie können nach einer vorhandenen Stock-Lottie-Animation suchen und diese bei Bedarf an Ihre Marke anpassen.
Lottie-Dateien ist eine Stock-Website, auf der Sie eine große Anzahl kostenloser und kostenpflichtiger Lottie-Animationen finden können. Die Website bietet auch ein Bearbeitungstool, mit dem Sie die Farben der Animation vor dem Herunterladen bearbeiten können. Wenn Sie eine große Anzahl von Farben in einer Animation ändern müssen, kann ein erfahrener Animator oder Designer auch Adobe After Effects verwenden, um diese Änderungen effizienter vorzunehmen und die Animation zu exportieren.
Wenn Sie zahlreiche Animationen auf einer Website implementieren möchten oder eine sehr spezifische Website-Ästhetik haben, kann es schwierig sein, mehrere Aktienoptionen im richtigen Stil zu finden. In diesem Fall können Sie erwägen, einen Animator mit der Erstellung weiterer Animationen zu beauftragen, die zu Ihrer Website passen und zu den bereits ausgewählten Aktienoptionen passen.
Beachten Sie bei jeder Art von Stock-Animation oder Grafik die Lizenzanforderungen für die Stock-Animationen und stellen Sie sicher, dass Sie die Animation bei Bedarf dem ursprünglichen Designer beisteuern.
Hinzufügen von Lottie-Animationen in WordPress
Es ist ein ziemlich reibungsloser Prozess, Lottie-Animationen zu einer WordPress-Website hinzuzufügen. Sie können entweder ein benutzerdefiniertes HTML-Widget verwenden, um den Animationscode zur Website hinzuzufügen, oder ein WordPress-Plugin verwenden, um die Animation hinzuzufügen.
Benutzerdefiniertes HTML-Widget
Ein erfahrener WordPress-Entwickler kann eine kleine JavaScript-Bibliothek und ein benutzerdefiniertes HTML-Widget verwenden, um die Lottie-Animationen zur Website hinzuzufügen. Sie beginnen mit dem Hochladen des lottie.min.js-Skripts zusammen mit der JSON-Animationsdatei und allen Bildelementen in den Designordner. Dann muss dem Widget ein kleines JS-Snippet hinzugefügt werden, um das Lottie-Skript zu initiieren, das die .json-Animationsdatei in das gewünschte Container-Div lädt.
Dieser optimierte Ansatz kann sich hervorragend für die meisten WordPress-Sites eignen, da er die Site nicht mit zusätzlichen WordPress-Plugins belastet. Beim Hinzufügen der Lottie-Animationen können Sie auch steuern, ob die Animation wiederholt wird, wie oft sie wiederholt wird und was das animierte Element auf der Seite auslösen kann.
Die meisten Plugins zum Hinzufügen von Lottie-Animationen ohne die Hilfe eines Entwicklers erfordern den Elementor-Seitenersteller, daher funktioniert der benutzerdefinierte HTML-Ansatz tendenziell besser, wenn Sie ein anderes Design- oder Seitenersteller-Plugin als Elementor verwenden.
Das Hinzufügen von Elementen zur Website ohne Plugin ist auch besser für die Geschwindigkeit und Leistung der Website, da das Hinzufügen von immer mehr Plugins die Website belasten wird.
WordPress-Plugin-Optionen
Wenn Sie keinen Entwickler verwenden möchten, um dies auf benutzerdefinierte Weise zu tun, besteht eine weitere Option zum Hinzufügen von Lottie-Widgets zu Ihrer Website darin, ein WordPress-Plugin zu verwenden.
Elementor Pro – Lottie-Widget
Elementor ist ein Seitenersteller für WordPress mit Drag-and-Drop-Funktionen, und die Elementor Pro-Lizenz enthält die Lottie-Widget. Mit diesem Widget können Sie Lottie-Animationen ohne Code hinzufügen und die Abmessungen und das Verhalten der Animation anpassen. Dieses Plugin verbindet sich bequem mit der Stock-Website von Lottie Files, sodass Sie Stock-Animationsoptionen einfach direkt von der Website auswählen oder Ihre eigenen Kreationen hochladen können.
Gutenberg-Blöcke – Ultimative Add-ons
Wenn Sie den Gutenberg-Editor auf Ihrer Website verwenden, wird die Ultimatives Addon-Plugin für Gutenberg kann eine gute Wahl sein, um mit Hilfe eines Plugins Lottie-Animationen hinzuzufügen. Der Gutenberg-Editor ist seit der Veröffentlichung von WordPress 5.0 Teil des WordPress-Kerns, aber er ist nicht der beliebteste. Viele Websites verwenden immer noch den klassischen Editor oder andere Seitenersteller wie Site Origin, Elementor oder Beaver Builder, um nur einige zu nennen.
Nichtsdestotrotz ist es eine praktikable Option. The Ultimate Addons for Gutenberg ist ein gut bewertetes Plugin und bietet viele großartige Funktionen, einschließlich der Option, Lottie-Animationen hinzuzufügen und erweiterte Optionen wie die Animationsgeschwindigkeit und den Auslöser zu steuern.
Zusätzliche WordPress-Plugins
Es gibt zusätzliche Plugins verfügbar im WordPress-Verzeichnis zum Hinzufügen und Anpassen von Lottie-Animationen. Denken Sie daran, dass einige der Plugins erfordern, dass Ihre Website erstellt wurde und Elementor verwendet, wie z. B. Premium-Add-Ons für Elementor und Elementskit-Add-On für Elementor. Es gibt auch Plugins, die für andere WordPress-Themes und -Builder gedacht sind, wie z. B. das Divi-Theme oder Gutenberg-Blöcke.
Zeit zum Animieren
Lottie-Animationen sind für jeden mit einer WordPress-Site sehr gut zugänglich. Egal, ob Sie benutzerdefinierte Animationen oder Standardanimationen, Heldenanimationen oder Scrolling-Animationen wünschen, die Ressourcen stehen Ihnen zur Verfügung.
Sie können kreativ sein, wie Ihre Animationen aussehen und was sie tun sollen, und wenn Sie anfangen, die Möglichkeiten von Lottie-Animationen zu erkunden, werden Sie feststellen, wie viel sie zur Qualität Ihrer Website beitragen können .
