Wix Editor: Eine Animation hinzufügen und anpassen

4 Min. Lesezeit
Verwende Animationen, um deine Website zum Leben zu erwecken. Füge Effekte wie „Einschweben“ und „Ausdehnen“ hinzu, um eindrucksvolle Seiten zu erstellen und die Aufmerksamkeit der Besucher auf deine Inhalte zu lenken.
Du kannst Animationen auf eine Vielzahl von Elementen anwenden. Du kannst sogar verschiedene Effekte auf dasselbe Element sowohl auf deinen Desktop-Seiten als auch in der mobilen Version der Website anwenden. Die Animation auf deiner mobilen Website ist auf kleinere Bildschirme eingestellt, damit du deine Besucher auch auf dieser Ebene begeistern kannst. Mehr erfahren
In diesem Artikel erfährst du, wie es geht:

Animation zu einem Element hinzufügen

Füge eine Animation zu deinen Elementen hinzu, um deine Website dynamisch und ansprechend zu gestalten. Jede Animation hat ihren eigenen Effekt, sodass du sie mit verschiedenen Elementen kombinieren kannst und bei deinen Besuchern einen bleibenden Eindruck hinterlässt.

Um eine Animation hinzuzufügen:

  1. Klicke im Editor auf das entsprechende Element.
  2. Klicke auf das Symbol für Animation .
  3. Wähle eine Animation aus den verfügbaren Optionen aus.
Hinweis:
Entferne Animationseffekte von deinen Elementen, indem du auf dem Element auf das Symbol für Animation  und dann auf Nichts  klickst.
Tipp:
Du kannst einer Gruppe von Elementen eine Animation hinzufügen, indem du die Gruppe auswählst und auf das Symbol für Animation  klickst.

Eine Animation anpassen

Nachdem du eine Animation zu einem Element hinzugefügt hast, kannst du diese so anpassen, dass sie sich so verhält, wie du möchtest und wie es zu deiner Website passt.
Passe Einstellungen wie Leistung, Richtung und Verzögerung an, um deine Besucher zu beeindrucken und zu begeistern.

Um die Animation anzupassen:

  1. Klicke in deinem Editor auf das entsprechende Element.
  2. Klicke auf das Symbol für Animation .
  3. Klicke auf Anpassen und verwende die folgenden Optionen, um deine Animation anzupassen: 
    • Leistung: Klicke auf das Aufklappmenü und wähle aus, wie stark die Animation beim Abspielen ist.
    • Richtung: Wähle, aus welcher Richtung die Animation ausgeführt wird, z. B. im Uhrzeigersinn oder von rechts.
    • Abstand: Verwende den Schieberegler, um den Abstand zwischen dem Start- und dem Endpunkt des Effekts zu vergrößern oder zu verkleinern.
    • Dauer: Verwende den Schieberegler, um festzulegen, wie lange die Animation abgespielt werden soll.
    • Verzögerung: Ziehe den Schieberegler, um die Verzögerung zwischen dem Laden der Seite und dem Beginn der Animation zu erhöhen oder zu verringern.
    • Nur beim ersten Laden: Klicke auf den Schalter, um zu aktivieren/deaktivieren, dass die Animation nur beim ersten Laden der Seite angezeigt wird.
Hinweis:
Die verfügbaren Anpassungsoptionen hängen von der ausgewählten Animation ab.

Animationen zu der mobilen Version deiner Website hinzufügen

Du kannst nicht nur Animationen zu Elementen auf deiner Desktop-Website hinzufügen, sondern sie auch zu der mobilen Version deiner Website hinzufügen, damit deine Besucher ein großartiges Browser-Erlebnis auf all ihren Geräten erhalten.
Animationen für Mobile wurden speziell für kleinere Bildschirmauflösungen und -größen entwickelt, sodass du dir keine Gedanken über die Abstände machen musst. 
Hinweis:
Wenn du möchtest, dass ein Element sowohl in der Desktop- als auch in der mobilen Version deiner Website animiert wird, musst du den Effekt in beiden Editoren hinzufügen. Animationseffekte, die du auf dem Desktop hinzugefügt hast, werden nicht auf deine mobile Website übertragen, da sie für unterschiedliche Bildschirmgrößen optimiert sind.

Um eine Animation zu der mobilen Version hinzuzufügen:

  1. Öffne deinen Mobile-Editor.
  2. Klicke auf das entsprechende Element.
  3. Klicke auf das Symbol für Animation .
  4. Wähle eine Animation aus den verfügbaren Optionen aus.
Wichtig:
  • Animationen, die zu Elementen in der Kopfzeile hinzugefügt wurden, werden nur angezeigt, wenn das Element zum ersten Mal geladen wird.
  • Wenn ein Element mit Hilfe von Velo ausgeblendet/angezeigt wird, müssen die zugehörigen Animationen auch über Velo eingestellt werden. Mehr erfahren (nur auf Englisch verfügbar)
Probleme mit deiner Animation?
Folge unseren Schritten, damit sie auf deiner Live-Website wie erwartet funktionieren.

War das hilfreich?

|