So fügen Sie Lottie-Animationen zu WordPress hinzu

Das moderne Online-Publikum hat die Qual der Wahl. Das Erstellen einer Website ist einfacher als je zuvor, und mit WordPress kann fast jeder fast alles bauen, was er will – und vieles davon für kein Geld, indem er nur persönliches Talent, Können und Gespür für Design investiert. Der Aufbau Ihrer Markenautorität durch Content-Marketing ist schön und gut, aber guter Inhalt ist nicht alles. Manchmal braucht man ein auffälliges Special Feature, wenn man neue Besucher anziehen möchte. Und genau darüber sind wir hier, um mit Ihnen zu sprechen: Lottie-Animationen und WordPress.

Wir werden kurz besprechen, was Lottie-Animationen sind, wie sie erstellt, aufgerufen und verwendet werden können und wie sie die Benutzererfahrung und den Eindruck Ihrer WordPress-Website beeinflussen können. Hier ist, worüber wir sprechen werden:

Was sind Lottie-Animationen

Lottie-Animation

Lottie-Animationen sind Animationen, die zu gehören LottieDateien, eine Bibliothek mit animierten Assets. Es funktioniert mit Windows, iOS und Android gleichermaßen gut, es ist kostenlos und Open Source. Was die technischen Aspekte anbelangt, kurz gesagt, Animationen werden erstellt, indem Animationsdaten von Adobe After Effects als JSON-Dateien gerendert werden. Lottie-Animationen mögen einfach sein, aber der Vorteil ist, dass sie es sind winzig klein und die Bibliothek selbst enthält Elemente, die leicht in animierte Schaltflächen, Kopfzeilen oder einfache Hintergrundelemente umgewandelt werden können.

Das bedeutet, dass Sie einige oder alle (obwohl wir von visueller Unordnung abraten) Ihrer statischen Assets fast ohne Kosten für Speicherplatz und Ladezeiten durch dynamische ersetzen können. Grundsätzlich erhalten Sie ein (skalierbares!) .gif oder .mp4 zum Preis von a .json.

So erstellen Sie Lottie-Animationen

Wie wir bereits erwähnt haben, Lottie-Animationen werden mit Adobe After Effects erstellt. Ähnliche Animationen können möglicherweise mit anderer Software erstellt werden, aber Adobe After Effects ist der Industriestandard.

Mit Lottie-Animationen, Sie müssen eine Animation nicht in ein Webformat konvertieren, was normalerweise ein Entwickler tat. Sie benötigen einen Designer, der in der Verwendung von Adobe After Effects geschult ist, um Animationen aus Ihren statischen Grafikelementen zu erstellen und sie als zu exportieren .json Dateien mit der entsprechenden Adobe After Effects-Erweiterung.

Sie müssen jedoch nichts von Grund auf neu machen: Sie können Aktienanimationen verwenden von der Lottie Files-Website, wie im folgenden Abschnitt beschrieben.

Stock Lottie-Animationen

Wenn Sie genau das wollen, was Sie wollen, kostet Sie das zwangsläufig. Sonderanfertigungen sind immer teuer. Sie haben vielleicht großartige Einblicke in die Schneide der Designästhetik und des Neuromarketings, aber kein Budget, um dieses Wissen bei der Gestaltung von Animationen für Ihre Website umzusetzen. Das bedeutet nicht, dass Ihre Website zu statischen Assets verurteilt ist: Sie können verwenden Lottie Files Bibliothek mit Stock-Animationen, sowohl kostenlos als auch kostenpflichtigum Ihre Website reicher zu machen.

Verwandt :  Aim Lab kommt aufs Handy; So installieren Sie die App jetzt!

Die Website selbst bietet Ihnen auch Tools zum Bearbeiten von Lottie-Animationen, ohne Zugriff auf einen Designer zu haben. Designer können auch ihre eigenen Animationen zum Verkauf anbieten, während Webentwickler und Designer bei Bedarf unabhängig produzierte Animationen kaufen oder Animatoren engagieren können.

So fügen Sie Lottie-Animationen mit einem WordPress-Plugin hinzu

Es gibt Möglichkeiten, Lottie-Animationen mit einem benutzerdefinierten HTML-Widget zu WordPress hinzuzufügen, aber es gibt einfachere Möglichkeiten, dies zu tun. Wenn Sie beispielsweise Elementor verwenden (und warum sollten Sie das nicht tun); speziell, ElementorProhaben Sie bereits ein Lottie-Widget, mit dem Sie ganz einfach Animationen im Backend einfügen können.

Wenn Sie ein Gutenberg-Benutzer sind, können Sie verwenden Spektren. Das Plugin, früher bekannt als Ultimate Addons For Elementor, auch bietet einen Lottie-Animationsblock an mit dem Sie ganz einfach eine Animation hinzufügen können. Es gibt andere Plugins, die die gleiche Funktionalität haben, aber dieses ist das, was wir für diese Demonstration tun werden.

Gutenberg muss installiert und aktiviert sein. Dies sollte standardmäßig verfügbar sein, es sei denn, Sie haben Gutenberg deaktiviert. Sie müssen auch ein Lottie-Konto haben. Lottie-Konten sind kostenlos und die Registrierung ist einfach. Alles, was Sie brauchen, ist eine funktionierende E-Mail-Adresse. Als nächstes installieren und aktivieren Sie Spectra.

Wir beginnen damit, eine Seite zu erstellen und ihr einen Titel zu geben. Klicken Sie anschließend auf die Plus Zeichen, um einen Block hinzuzufügen, und wählen Sie den Lottie-Block aus.

Fügen Sie Lottie Block hinzu

Es gibt mehrere Möglichkeiten, diesen Block zu füllen. Du kannst Hochladen a .json Datei, wählen Sie eine aus Ihrer aus Medienbibliothekoder Aus URL einfügen.

Wenn Sie ein registrierter Lottie-Benutzer sind, können Sie ganz einfach eine herunterladen .json. Suchen Sie einfach eine Animation in der Bibliothek (wir haben uns für diesen niedlichen kleinen blauen Oktopus entschieden) und klicken Sie auf die Download Schaltfläche und wählen Sie die aus Lotte JSON Option aus dem Dropdown-Menü.

Dropdown herunterladen

Wenn Sie aus irgendeinem Grund keine Dateien zu Ihrer WordPress-Website hinzufügen möchten, können Sie die Animations-URL aus dem Menü unten abrufen. Hier können Sie auch auf Optionen zugreifen, um die zu erhöhen Animations Geschwindigkeitändern oder entfernen Hintergrundfarbehol dir ein oEinbetten oder iFrame Code, Ebenenfarben bearbeitenund mehr.

Sie können auch auf die Entwickler zugreifen Leitfaden zur Interaktivität, obwohl wir diese Option fortgeschrittenen Benutzern empfehlen. Hier verwandeln Sie Ihre Animation in ein interaktives Element; Hier machen Sie es zu einer Schaltfläche oder spielen es oder schleifen es bedingt. Wenn Sie ein erfahrener Entwickler sind, können Sie auch versuchen, ein benutzerdefiniertes HTML-Widget wie oben beschrieben zu erstellen.

Verwandt :  So erstellen Sie eine WordPress-Event-Registrierungsseite
Optimieren

Wir haben unsere Oktopus-Animation heruntergeladen und werden sie durch Klicken auf hochladen Hochladen Taste. Finden Sie einfach den Speicherort auf Ihrer Festplatte und laden Sie die Datei hoch.

JSON hochladen

Endlich schwimmt der Oktopus jetzt durch die tückischen Gewässer unserer Testseite.

Vorschau

Abschließend

Wie Sie sehen können, ist (oder kann) das Hinzufügen von Animationen zu Ihrer Website schnell und einfach und kostet Sie keinen einzigen Cent. Animationen zu erstellen und sie interaktiv zu gestalten, ist ein ganz anderer Fischkessel – oder Oktopoden. Wenn Sie jedoch nach einer Möglichkeit suchen, Ihre Website etwas bunter und auffälliger zu gestalten, können Sie dies mit nur wenigen Mausklicks und ohne zusätzliche Kosten für Sie tun. Es steht Ihnen eine ganze Bibliothek einfacher, aber qualitativ hochwertiger Animationen zur Verfügung. Alles, was Sie tun müssen, ist ein Plugin zu installieren und Sie können mit dem Testen der Gewässer beginnen.