So fügen Sie Lottie-Animationen in WordPress hinzu (4 einfache Schritte)

Die Verwendung von Lottie-Animationen in WordPress kann eine großartige Möglichkeit sein, Ihre Seiten aufzupeppen. Sie sind in der Regel leichtgewichtig und anpassbar und können Ihnen daher dabei helfen, ansprechende Inhalte zu erstellen, ohne Ihre Benutzererfahrung (UX) zu beeinträchtigen. Möglicherweise suchen Sie jedoch nach einer stressfreien Möglichkeit, sie zu Ihrer Website hinzuzufügen.

Glücklicherweise ist der Prozess einfacher als Sie vielleicht denken. Durch die Verwendung eines Plugins wie Otter Blocks können Sie Ihre Lottie-Animationen mit nur wenigen Klicks hinzufügen und anpassen. Sie können auch die Sichtbedingungen so einstellen, dass sie zur richtigen Zeit spielen.

Eine Einführung in Lottie-Animationen

Lottie ist ein Open-Source-Dateiformat für Webanimationen. Es ermöglicht Ihnen, benutzerdefinierte Animationen für Ihre Marke zu erstellen und sie auf Ihrer Website zu verwenden:

Natürlich können Sie sich immer für GIFs entscheiden, aber diese Dateien können Ihre Website belasten. Lottie-Animationen sind viel kleiner als GIFs. Daher können sie Ihnen helfen, Ihre Website interessanter zu gestalten und gleichzeitig Ihre UX zu erhalten und schnelle Ladezeiten zu liefern.

Darüber hinaus bieten Lottie-Animationen viele Anpassungsoptionen. Die Bibliothek selbst ist umfangreich und bietet Zugriff auf Tausende von Elementen, Zeichen und Illustrationen. Sie können jedoch auch Farben austauschen, die Anzeigeeinstellungen ändern und Sichtbarkeitsbedingungen hinzufügen.

Benutzerdefinierte Animationen können Ihnen helfen, Ihre Besucher zu beeindrucken. Außerdem können sie Ihre Website frisch und einzigartig aussehen lassen.

So fügen Sie Lottie-Animationen zu WordPress hinzu (in 4 Schritten)

Nachdem Sie nun etwas mehr über Lottie Animations wissen, schauen wir uns an, wie Sie sie zu Ihrer WordPress-Website hinzufügen können:

Schritt 1: Installieren und aktivieren Sie Otter Blocks

Es gibt viele Möglichkeiten, Lottie-Animationen in WordPress hinzuzufügen. Sie können beispielsweise HTML und JavaScript verwenden. Diese Methode kann jedoch ziemlich komplex sein.

Alternativ können Sie das Lottie-Animations-Plugin verwenden, obwohl dies möglicherweise nicht mit allen Seitenerstellern kompatibel ist. Außerdem bietet es nicht viele stilistische Optionen.

Der einfachste Weg, Lottie Animations zu Ihrer Website hinzuzufügen, ist mit einem Plugin wie Otter Blocks:

Dieses Plugin fügt Ihrer Website neue Inhaltsblöcke und Vorlagen hinzu, einschließlich eines Blocks für Lottie-Animationen. Es erweitert auch die Funktionalität des Blockeditors mit benutzerdefiniertem CSS, Animationen, Sichtbarkeitsbedingungen und mehr. Daher hilft es Ihnen, Ihre Seiten effizienter zu gestalten und reduziert den Bedarf an Seitenerstellern.

Wenn Sie auf Otter Blocks Pro upgraden, erhalten Sie Zugriff auf erweiterte Funktionen wie spezielle WooCommerce-Blöcke und zusätzliche stilistische Einstellungen. Sie benötigen jedoch nicht die Pro-Version, um die Lottie-Animationsfunktion zu verwenden.

Wenn Sie die kostenlose Version verwenden möchten, gehen Sie in Ihrem WordPress-Dashboard zu Plugins > Neu hinzufügen und suchen Sie nach „Otter Blocks:“

Klicken Sie dann auf Installieren > Aktivieren . Sie sollten jetzt eine Auswahl neuer Blöcke im Blockeditor sehen.

Schritt 2: Wählen Sie eine Animation aus der Lottie-Bibliothek aus

Nachdem Sie Otter Blocks auf Ihrer Website eingerichtet haben, können Sie zur Lottie-Bibliothek gehen, um eine Animation auszuwählen. Um auf die Designs zugreifen zu können, müssen Sie ein kostenloses Konto erstellen.

Nachdem Sie Ihr Profil erstellt haben, navigieren Sie zu Discover und wählen Sie Free Ready-to-use Animations :

Hier können Sie eine Bibliothek mit Lottie-Elementen durchsuchen, die auf Websites, Anwendungen und in sozialen Medien verwendet werden können:

Wenn Sie eine Animation finden, die Sie verwenden möchten, klicken Sie auf das Design. Es erscheint ein Popup, in dem Sie einige Änderungen am Erscheinungsbild der Animation vornehmen können:

Sie können beispielsweise die Animationsgeschwindigkeit anpassen und die Hintergrundfarbe ändern. Wenn Sie auf Ebenenfarben bearbeiten klicken, gelangen Sie zum Lottie-Editor:

Hier können Sie die Farbe jedes Teils des Designs anpassen. Klicken Sie einfach auf einen Abschnitt des Elements, das Sie ändern möchten, gehen Sie zu Alle Farben und verwenden Sie die Farbauswahl, um einen neuen Farbton anzuwenden:

Wenn Sie eine Änderung vornehmen, die Ihnen nicht gefällt, klicken Sie auf den Pfeil „Rückgängig“ oben links auf dem Bildschirm.

Schritt 3: Fügen Sie die Lottie-Animations-URL in Ihren Otter-Block ein oder laden Sie die Lottie-Datei hoch

Wenn Sie mit Ihrem Design zufrieden sind, haben Sie zwei Möglichkeiten, es zu WordPress hinzuzufügen:

1. Sie können die Lottie-Animations-URL kopieren, um die Version vom Server von LottieFiles zu Ihrer Website hinzuzufügen. Sie finden dies in Ihrem Animations-Popup direkt unter dem Design.
2. Sie können die fertige LottieDatei auf Ihren Computer herunterladen, indem Sie auf die Download- Schaltfläche in der oberen rechten Ecke klicken und das dotLottie- Format auswählen. Dadurch können Sie die Datei auf Ihrem Server hosten.

Kehren Sie dann zu Ihrer WordPress-Site zurück und öffnen Sie die Seite oder den Beitrag, auf der Sie Ihre Animation einfügen möchten.

Klicken Sie, um einen neuen Block hinzuzufügen, und suchen Sie nach „Lottie Animations:“

Fügen Sie den Block zu Ihrer Seite hinzu. Wählen Sie dann eine dieser Optionen:

• Von URL einfügen – verwenden Sie dies, wenn Sie den Link zur Lottie-Datei auf den Servern von LottieFiles eingeben möchten. Alles, was Sie tun müssen, ist den URL-Link von Lottie Animation einzufügen, den Sie von der LottieFiles-Website kopiert haben.
• Hochladen – Verwenden Sie dies, wenn Sie die eigentliche dotLottie-Datei von LottieFiles heruntergeladen haben. Sie können diese Datei dann auf Ihre WordPress-Site hochladen.

Als nächstes drücken Sie die Eingabetaste und die Animation erscheint auf der Seite:

Sie können nun Ihre Änderungen speichern und mit dem letzten Schritt fortfahren.

Schritt 4: Passen Sie Ihre Animation mit Otter Blocks an

Nachdem Sie Ihre Lottie-Animationen in WordPress hinzugefügt haben, können Sie das Design und Layout anpassen. In den Blockeinstellungen sehen Sie eine Auswahl an Anzeigeoptionen.

Unter TRIGGER können Sie zwischen Autoplay , Scroll , Hover oder Click wählen. Die Animation wird erst abgespielt, wenn eine dieser Aktionen auf der Seite abgeschlossen ist:

Sie haben auch die Möglichkeit, die Animation so umzuschalten, dass sie in einer Schleife abgespielt wird. Außerdem können Sie die Geschwindigkeit Ihrer Animation mit dem Schieberegler anpassen, die Richtung umkehren und die Breite des Designs ändern.

Wenn Sie die Hintergrundfarbe ändern möchten, klicken Sie auf die Registerkarte Hintergrund . Hier können Sie eine der standardmäßigen Solid- Optionen auswählen, die Farbauswahl verwenden oder einen Hintergrund mit Farbverlauf auswählen:

Wenn Sie zu Sichtbarkeitsbedingungen gehen, können Sie Ihre Animation so konfigurieren, dass sie nur unter bestimmten Umständen erscheint:

Beispielsweise möchten Sie möglicherweise, dass der Block nur für angemeldete Benutzer sichtbar ist oder an einem bestimmten Datum angezeigt wird. Klicken Sie dazu auf Regelgruppe hinzufügen . Wählen Sie dann den Pfeil, um die Einstellungen zu öffnen:

Verwenden Sie unter BEDINGUNG das Dropdown-Menü, um Ihre Sichtbarkeitseinstellungen zu konfigurieren. Sie können mehr als eine Bedingung hinzufügen und zusätzliche Regelgruppen erstellen.

Beginnen Sie mit Lottie-Animationen in WordPress

Um es noch einmal zusammenzufassen, hier sind vier Schritte, um Lottie-Animationen in WordPress hinzuzufügen:

Für noch mehr Möglichkeiten, den nativen WordPress-Editor zu verbessern, kannst du dir unsere vollständige Sammlung der besten WordPress-Block-Plugins ansehen.

Haben Sie Fragen zum Hinzufügen von Lottie-Animationen in WordPress? Lassen Sie es uns im Kommentarbereich unten wissen!