Studio Editor: Lottie-Animationsdateien hinzufügen und anpassen
4 Min. Lesezeit
LottieFiles ist eine großartige Quelle für hochwertige Animationen, die du der Website deines Kunden hinzufügen kannst. Nachdem du die Animation über die URL importiert hast, kannst du die Größe nach Bedarf ändern und entscheiden, ob sie in einer Endlosschleife abgespielt wird oder nicht.
In diesem Artikel erfährst du mehr über folgende Themen:
Bevor du loslegst:
Um eine Animation zu importieren, benötigst du ein LottieFiles-Konto.
Animationen aus LottieFiles importieren
Füge so viele Lottie-Animationen hinzu, wie du brauchst, um dein Design zu beleben. Nachdem du eine Animation in deinem Workspace in LottieFiles gespeichert hast, kannst du die URL kopieren und direkt in den Studio Editor einfügen. Die Animation wird sofort als neues Seitenelement hinzugefügt.
Alternativ kannst du ein neues Lottie-Animations-Element hinzufügen und die entsprechende URL in das Einstellungs-Panel einfügen.
Um ein Lottie-Animations-Element hinzuzufügen:
- Klicke auf der linken Seite des Editors auf Elemente hinzufügen
. - Klicke auf Einbettung & Social Media.
- Klicke auf Lottie-Animationen.
- Klicke neben Lottie Animation auf das Symbol für Zur Website hinzufügen.
- (In einem separaten Browser-Tab) Kopiere die URL der gespeicherten Animation aus deinem LottieFiles-Konto.
- Füge die URL der Animation im Editor ein:
- Klicke im Editor auf das Lottie-Animations-Element.
- Klicke auf das Symbol für Einstellungen
. - Füge unter Wie lautet die URL der Animation? die URL ein.
- Drücke die Enter-Taste auf deiner Tastatur.
Wie geht es weiter?
Klicke oben im Einstellungen-Panel auf Vorschau der Animation, um zu sehen, wie sie aussieht, bevor du live gehst.
Mit Breakpoints arbeiten:
Du kannst die Größe der Lottie-Animation pro Breakpoint anpassen, damit sie auf jedem Bildschirm ideal aussieht.
Die Lottie-Animation ändern
Wenn du zu einer anderen Lottie-Animation wechseln möchtest, kannst du dies ganz einfach tun, indem du in den Einstellungen des Elements die neue URL eingibst.
Um die Animation zu ändern:
- Wähle das Lottie-Animations-Element aus.
- Klicke auf das Symbol für Einstellungen .
- Füge unter Wie lautet die URL der Animation? die URL der neuen Animation ein.
Die Animation auf Wiedergabe in einer Schleife festlegen
Du kannst wählen, wie die Lottie-Animation auf der Website deines Kunden abgespielt wird, nur einmal oder in einer Endlosschleife.
Um festzulegen, wie die Animation abgespielt wird:
- Wähle das Lottie-Animations-Element aus.
- Klicke auf das Symbol für Einstellungen .
- Klicke auf den Schalter neben Als Schleife wiedergeben, um die Option zu aktivieren oder zu deaktivieren.
Alt-Text zu einer Lottie-Animation hinzufügen
Füge im Einstellungen-Panel Alt-Text hinzu, um die Animation und/oder die Website kurz zu beschreiben. Dies kann das SEO-Ranking der Website verbessern und gleichzeitig Nutzern mit Screenreadern helfen, zu verstehen, was die Animation anzeigt.
Um Alt-Text zu deiner Animation hinzuzufügen:
- Wähle das Lottie-Animations-Element aus.
- Klicke auf das Symbol für Einstellungen .
- Scrolle nach unten zu Animationstext.
- Gib unter Alt-Text für deine Animation eingeben die Beschreibung ein.
- Drücke die Enter-Taste auf deiner Tastatur.
Was du wissen solltest:
Lottie-Animationen werden automatisch in JSON-Dateien konvertiert, wenn du sie auf eine Website von Wix importierst. Aus technischen Gründen können nicht alle Dateifelder enthalten sein. Lottie-Animationen können daher auf einer Live-Website von Wix etwas anders aussehen (z. B. einen kleineren Bereich/eine kleinere Bewegung anzeigen).
War das hilfreich?
|