Wir stellen den Kadence Lottie Block vor

Das Kadence-Team freut sich, den Lottie Block vorzustellen, einen neuen Block, der in Kadence Blocks Version 2.2.4+ verfügbar ist. Dieser neue Block gibt Websitebesitzern, die Kadence-Blöcke verwenden, neue Möglichkeiten, ihren Websites qualitativ hochwertige Animationen mit geringer Bandbreite hinzuzufügen. Kadence Blocks 2.2.4 führt auch den neuen Count Up Block ein, der Animations-Count-up oder Count-down zu bestimmten Werten hinzufügt.

Neue Möglichkeiten für Animationen mit Lottie Animations

Animationen auf Websites haben eine unglaubliche Kraft, um das Publikum zu fesseln und die Aufmerksamkeit auf Conversion-Ziele zu lenken, aber frühere Technologien zum Hinzufügen von Animationen waren oft mit einem visuellen Erlebnis von geringer Qualität und großen Dateigrößen verbunden. Von animierten GIFs über Adobe Flash bis hin zu verschiedenen Videoformaten haben frühere Animationstechnologien mehr Probleme verursacht, als sie wert waren.

Entwickler bei Airbnb haben eine neue Technologie namens Lottie entwickelt, die qualitativ hochwertige Animationen ohne den Overhead einer hohen Bandbreite bietet. Nach der Entwicklung haben diese Entwickler ihre Kreation als Open Source veröffentlicht. Lottie-Dateien sind nicht nur Open Source, extrem klein und von hoher Qualität, sondern sie sind auch interaktiv und können zur Laufzeit manipuliert werden. Laut LottieFiles „verwenden die Top-500-Apps im iOS App Store jetzt Lottie, um Benutzer anzusprechen und Conversions zu verbessern.“

Mit dem Kadence Lottie Block in Kadence Blocks haben Besitzer von WordPress-Sites jetzt die Möglichkeit, Animationen zu verwenden, um bessere, ansprechendere Erlebnisse für Website-Besucher zu schaffen.

Was ist Lotti?

Lottie ist nach einer deutschen Filmregisseurin, Lotte Reiniger, benannt. Reiniger war der bedeutendste Pionier der Silhouetten-Animation, bekannt durch „Die Abenteuer des Prinzen Achmed“, das 1926 veröffentlicht wurde. Dies ist der älteste erhaltene Animationsfilm in Spielfilmlänge, der Walt Disneys Spielfilm „Schneewittchen und die sieben Zwerge“ (1937) um über zehn Jahre vorausging .

Ein Lottie ist ein JSON-basiertes Dateiformat, mit dem jeder, der Kadence Blocks verwendet, Animationen zu einer WordPress-Site hinzufügen kann. Eine Lottie JSON-Datei ist eine kleine Datei, die auf Desktops, Tablets und Mobilgeräten funktioniert. Eine Lottie-Animation kann leicht vergrößert oder verkleinert werden, ohne dass eine Pixelierung in früheren Animations- oder Grafikdateien zu sehen ist.

Lottie-Animationen finden

LottieFiles.com ist eine erstaunliche Quelle für alles rund um Lottie. Egal, ob Sie nach einer kostenlosen Lottie-Animation suchen, die Sie entweder als Remote-URL laden oder zur lokalen Verwendung auf Ihrer Website herunterladen können, LottieFiles hat eine Reihe kostenloser Dateien zur Auswahl. Sie können auch mehr über das Erstellen Ihrer eigenen Lottie-Animationen erfahren, auf ein After Effects-Plug-in oder ein Figma-Plug-in zugreifen oder einen Animator auf dem Marktplatz finden, der eine benutzerdefinierte Lottie-Datei für Sie erstellen kann. Sie können Ihrer Animation sogar Interaktivität hinzufügen, indem Sie Tools auf LottieFiles verwenden.

Verwenden des Lottie-Blocks

Der Kadence Lottie Block wird Ihrer Website mithilfe des kostenlosen Kadence Blocks-Plugins hinzugefügt, das kostenlos im WordPress.org-Repository verfügbar ist. Aktualisieren Sie einfach auf die neueste Version des kostenlosen Kadence Blocks-Plugins und der Lottie Block ist für Ihre Website verfügbar. Sie können den Lottie-Block überall dort verwenden, wo Sie jeden anderen Block verwenden würden, einschließlich in Posts, auf Seiten oder sogar beim Erstellen von Kadence Elements-Vorlagen. Sie können den Lottie Block sogar zu einem Kadence Conversion Popup/Modal oder Slide-In hinzufügen.

Die Verwendung des Lottie Blocks ist einfach.

Nach Auswahl des Lottie-Blocks sehen Sie sofort eine Lottie-Block-Animation als WordPress-Platzhalter von LottieFiles.com

Remote Lottie-Dateien

Wenn Sie den Platzhalter durch eine Remote-URL ersetzen möchten, ersetzen Sie einfach den Eintrag im Feld Lottie Animation URL . Dadurch wird die Lottie-Datei von einem entfernten Speicherort auf einem anderen Server abgerufen.

Sie finden die Remote-URL der Lottie-Datei auf LottieFiles.com auf der Detailseite jeder Animation.

Lokale Lottie-Dateien

Wenn Sie eine lokale Datei verwenden möchten, wählen Sie im Dropdown-Menü „Dateiquelle“ die Option „ Lokale Datei “.

Klicken Sie auf Lottie-Datei hochladen . Sie werden dann aufgefordert, eine JSON-Lottie-Datei von Ihrer Festplatte hochzuladen. Geben Sie zunächst einen vertrauten Namen für Animationstitel ein. Sobald Sie die JSON-Lottie-Datei hochgeladen haben, können Sie von jedem Beitrag oder jeder Seite, auf der Kadence Blocks verfügbar ist, auf die Datei zugreifen, und dieser vertraute Name hilft Ihnen bei der Bestimmung, welche Datei Sie auswählen.

Klicken Sie anschließend auf Durchsuchen . Dadurch gelangen Sie zu Ihrem Dateisystem, um die JSON-Datei zu finden, die Sie hochladen möchten. Klicken Sie auf Hochladen und Ihr Bild erscheint im Kadence Lottie Block. Es wird auch für den Kadence Lottie Block auf Ihrer gesamten WordPress-Site verfügbar sein.

Lottie Barrierefreiheit

Fügen Sie für Screenreader und andere alternative Browser eine Beschreibung der Animation im Feld „Aria Label “ hinzu, um die Barrierefreiheit zu gewährleisten. (Aria-Labels ähneln Bild-Alt-Tags.)

Verfügbare Einstellungen im Lottie-Block

Über den Kadence Lottie-Block stehen eine Reihe von Einstellungen zur Verfügung, mit denen Sie steuern können, wie Ihre Lottie-Animation auf Ihrer Website angezeigt wird.

Steuerelemente anzeigen

Wenn Sie Ihren Benutzern die Kontrolle über die Animation geben möchten, um die Animation zu starten/stoppen, können Sie dies einschalten.

Automatisches Abspielen

Wenn Sie möchten, dass Ihre Animation automatisch abgespielt wird, wenn der Benutzer Ihre Seite lädt, schalten Sie dies ein.

Nur beim Schweben spielen

Wenn ein Benutzer mit der Maus über die Animation fährt, wird Ihre Animation abgespielt, wenn diese Option aktiviert ist. Nützlich, wenn Sie Ihren Benutzer zum Handeln anregen möchten.

Spielen Sie nur beim Scrollen der Seite

Ihre Animation wird nur abgespielt, wenn der Benutzer scrollt. Beachten Sie, dass dies die meisten Einstellungen wie Autoplay, Wiedergabegeschwindigkeit, Bounce, Loop und Play on Hover außer Kraft setzt. Dies funktioniert nicht bei der Vorschau im Blockeditor.

Wiedergabegeschwindigkeit

Sie können bestimmen, wie schnell oder langsam Ihre Animation abgespielt wird.

Schleifensteuerung

Es gibt zwei Haupt-Loop-Steuerungen: Loop-Wiedergabe und Bounce-Wiedergabe. Die Loop-Wiedergabe spielt die Animation wiederholt ab, wobei die Bounce-Wiedergabe die Animation abspielt und dann die Wiedergabe umkehrt. Sie können auch eine Verzögerung (in Sekunden) für die Loop-Wiedergabe festlegen sowie die Anzahl der Loops begrenzen, die für einen Benutzer abgespielt werden.

Größenkontrollen

Die Größensteuerung funktioniert ähnlich wie bei anderen Blöcken. Sie können den Abstand und die Ränder um Ihren Lottie-Block herum entweder für jede Variable (links, rechts, oben und unten) festlegen oder auf das Feld klicken, um die Randeinstellungen oder die Abstandseinstellungen zu verknüpfen. Sie können auch die maximale Breite eines Lottie-Blocks festlegen, um die Größe Ihrer Lottie-Animation schnell zu ändern.

Verwenden Sie die Kadence Lottie-Blöcke überall dort, wo Sie Blöcke verwenden können

Verwenden Sie Kadence Lottie Block überall dort, wo Sie Blöcke verwenden. Es ist in der kostenlosen Version von Kadence Blocks verfügbar.

Und wenn Sie bereits das Plugin Kadence Blocks Pro, Kadence Conversions oder Kadence Theme Pro verwenden, können Sie damit beginnen, den Lottie-Block zu jedem Bereich hinzuzufügen, in dem Sie bereits Blöcke verwenden.

Wenn Sie Kadence Elements Templates als Teil von Kadence Theme Pro verwenden und beispielsweise einen Lottie-Block zu Ihrer Fußzeile hinzufügen möchten, können Sie dies ganz einfach tun. Gehen Sie einfach zu Ihrer Kadence > Elemente > Vorlage , um Ihre Fußzeilenvorlage zu finden, und fügen Sie dort den Lottie-Block hinzu. Ein Beispiel finden Sie in einem kürzlich erschienenen Beitrag, in dem erläutert wird, wie Sie mithilfe von Kadence Elements-Vorlagen eine Lottie-Animation zu einer Fußzeile hinzufügen.

Wenn Sie Kadence Conversions für ein Popup/Modal oder Slide-In verwenden und einen Lottie-Block zu einem auf Ihrer Website verwendeten Conversion-Element hinzufügen möchten, können Sie ihn auf die gleiche Weise hinzufügen. Verwenden Sie einfach Blöcke wie gewohnt und passen Sie Ihren Lottie Block für Ihren Kadence Conversions-Artikel an.

Ressourcen für die Benutzerfreundlichkeit von Animationen

Animationen auf einer WordPress-Website sind unglaublich leistungsstarke Tools, mit denen Sie Aufmerksamkeit erregen und das Publikum ansprechen können. Natürlich geht mit großer Macht auch große Verantwortung einher. Es sind einige Ressourcen verfügbar, um Best Practices für Animationen zu verstehen, und wir empfehlen, Best Practices für die Benutzerfreundlichkeit von Animationen im Web zu lesen. Die Nielsen Norman Group bietet einige großartige Leitfäden an: Animation for Attention and Comprehension sowie Role of Animation and Motion in UX.

Verwenden Sie Ihre Recherchen zur Benutzerfreundlichkeit von Animationen, um Ihre Konversionsziele zu steuern. Auf diese Weise können Sie Animationen hinzufügen, die Ihren Benutzern helfen, das zu finden, wonach sie suchen, während Sie gleichzeitig Ihre Marketingziele erreichen. Animation ist ein hervorragendes Tool zum Erstellen von Erlebnissen, die Benutzer begeistern, und Kadence freut sich, dieses innovative Tool den über 200.000 Benutzern zur Verfügung zu stellen, die Kadence Blocks verwenden, um außergewöhnliche Benutzererlebnisse mit WordPress zu schaffen.

Kadence ist weiterhin innovativ

Der Kadence Lottie Block ist nur die neueste Innovation des Kadence-Teams. Verfügbar im kostenlosen Kadence Blocks Plugin, sehen Sie den Kadence Lottie Block, wenn Sie auf Version 2.2.4 oder höher aktualisieren.

Um alle Angebote von Kadence zu erhalten, empfehlen wir das Full Bundle. Wenn neue Produkte und Funktionen hinzugefügt werden, werden sie dem Full Bundle hinzugefügt, sodass Sie immer Zugriff auf die neueste Kadence-Innovation haben.