Mit dem Lottie Animation-Widget können Sie Ihrer Website qualitativ hochwertige Vektor-Animationen hinzufügen.
Lottie ist eine mobile Bibliothek für Android und iOS, die Adobe After Effects-Animationen, die als JSON mit Bodymovin exportiert wurden, verarbeitet und auf mobilen Endgeräten und im Web rendert.
Suchen Sie in LottieFiles nach einer Animation. Alternativ können Sie auch Ihre eigene Animation in After Effects erstellen, die mit dem Bodymovin-Plugin exportiert werden muss.
So fügen Sie das hinzu:
- Klicken Sie in der linken Seitenleiste auf Widgets.
- Klicken Sie auf das Lottie Animation- und ziehen Sie es auf Ihre Website.
Mehr zum Hinzufügen von zu Ihrer Website erfahren Sie unter Widgets hinzufügen.
Inhalts-Editor
So können Sie den Inhaltseditor aufrufen:
- Klicken Sie mit der rechten Maustaste auf das und dann auf Inhalt bearbeiten.
- Kopieren Sie die Lottie Animation-URL in das dafür vorgesehene Feld.
- Um die URL für die Animation zu finden, öffnen Sie die Animation in LottieFiles und klicken Sie dann auf <html>. Alternativ können Sie die URL jeder JSON-Datei einfügen, die außerhalb von LottieFiles gehostet wird.
- Wählen Sie Animation in Endlosschleife wiedergeben, um die Animation immer wieder abzuspielen, oder wählen Sie Animation nach Klick wiedergeben.
- (Optional) Um der Animation einen Link hinzuzufügen, klicken Sie auf Link und wählen Sie des Art des Links aus.
- Wenn Sie eine kostenlose LottieFile-Animation verwenden, müssen Sie die Referenzen des Animationserstellers angeben. Die Informationen des Animationserstellers befinden sich unten im Popup-Fenster der Animation. Weitere Informationen finden Sie in den Hinweisen zur Creative-Common-Lizenz für LottieFile.
Design-Editor
Wenn Sie auf den Designeditor zugreifen möchten, klicken Sie mit der rechten Maustaste auf das und anschließend auf Design bearbeiten.
Sie können die Größe des Widgets ändern, indem Sie die Schieberegler für Breite und Höhe verschieben. Damit die Proportionen zwischen der Breite und der Höhe beibehalten werden, wählen Sie die Option Proportionen beibehalten.
Informationen über Designoptionen, die nicht spezifisch für dieses eingestellt werden (z. B. Layout, Stil oder Abstände), finden Sie unter Widget-Design.