Wix Harmony Editor: Eine Animation hinzufügen und anpassen
4 Min.
In diesem Artikel
- Eine Animation zu einem Element hinzufügen
- Eine Animation anpassen
- Animationen zur mobilen Ansicht deiner Website hinzufügen
Dieser Artikel bezieht sich auf den neuen Wix Harmony Editor, der im Januar 2026 veröffentlicht wurde. Wenn du dir nicht sicher bist, ob du den Wix Harmony Editor oder den Wix Editor verwendest, erfährst du hier mehr darüber.
Hauche deiner Website mit Animationen Leben ein, die deinem Design Bewegung und Spannung verleihen. Wähle aus Optionen wie Entrance, Scrollen, Loop und Mauseffekten, je nachdem, wann die Animation erscheinen soll.
Passe jede Animation individuell an, um genau das gewünschte Design zu erstellen. Ändere Einstellungen wie Entfernung, Laufzeit und Verzögerung, damit sie deiner Vision entsprechen. Alle mobilen Animationen sind für kleinere Bildschirme konzipiert, damit deine Website auf jedem Gerät beeindruckend aussieht.
Schon gewusst?
Du kannst verschiedene Animationen und Effekte auf dasselbe Element anwenden.
Eine Animation zu einem Element hinzufügen
Verleihe deiner Website Bewegung und Energie, indem du Animationen auf deine Elemente anwendest. Wähle aus einer Vielzahl von Effekten, um jeden Teil deiner Seite zum Leben zu erwecken und ein Erlebnis zu schaffen, das deinen Besuchern in Erinnerung bleibt.
Um eine Animation hinzuzufügen:
- Öffne deinen Editor.
- Klicke auf das entsprechende Element.
- Klicke auf das Symbol für Animation
in der Aktionsleiste. - Wähle eine Animation aus den verfügbaren Optionen aus:
- Entrance: Die Animation führt ein Element auf dem Tab ein – sie wird nur einmal abgespielt, wenn das Element zum ersten Mal erscheint.
- Loop: Die Animation wird in einer Endlosschleife abgespielt.
- Scrollen: Die Animation wird abgespielt, wenn ein Besucher dem Element beim Scrollen auf der Seite näher kommt.
- Mauseffekte: Die Animation beginnt sich zu bewegen, wenn der Besucher mit der Maus über das Element fährt.
Hinweis:
Elemente in deiner Kopfzeile werden nur einmal animiert und zwar beim ersten Besuch der Seite.
Eine Animation anpassen
Sobald du einem Element eine Animation hinzugefügt hast, kannst du diese personalisieren, damit sie zum Design deiner Website passt. Passe Optionen wie Intensität, Ausrichtung und Verzögerung an, um genau den gewünschten Effekt zu erzielen und deine Besucher zu begeistern.
Hinweis:
Die verfügbaren Anpassungsoptionen hängen von der gewählten Animation ab.
Um die Animation anzupassen:
- Öffne deinen Editor.
- Wähle das entsprechende Element aus.
- Klicke auf das Symbol für Animation in der Aktionsleiste.
- (Falls noch nicht geschehen) Wähle eine Animation aus den verfügbaren Optionen aus.
- Klicke auf Anpassen, um deine gewählte Animation einzurichten:
- Intensität: Klicke auf das Dropdown-Menü, um auszuwählen, wie stark die Animation beim Abspielen sein soll.
- Ausrichtung: Wähle aus, aus welcher Richtung die Animation erscheint (z. B. im Uhrzeigersinn, von rechts).
- Entfernung: Verwende den Slider, um den Abstand zwischen Start- und Endpunkt des Effekts zu ändern.
- Laufzeit: Verwende den Slider, um einzustellen, wie lange die Animation abgespielt werden soll.
- Verzögerung: Verwende den Slider, um die Verzögerung zwischen dem Laden der Seite und dem Beginn der Animation zu erhöhen oder zu verringern.
- Geschwindigkeit: Ziehe den Slider, um die Geschwindigkeit des Effekts zu ändern – je niedriger die Zahl, desto schneller der Effekt.
- Bewegungsachse: Entscheide, ob sich das Element horizontal, vertikal oder auf beiden Achsen bewegt.
- Animationstyp: Wähle beim Scrollen zwischen den Animationstypen hinein, hinaus oder kontinuierlich.
- Drehpunkt: Wähle den Bezugspunkt, von dem aus sich das Element zu bewegen beginnt.
- Bewegungsstil: Wähle die Intensität der Bewegung aus, z. B. sanft oder moderat.
Animationen zur mobilen Ansicht deiner Website hinzufügen
Du kannst deiner mobilen Ansicht der Website Animationen hinzufügen, genau wie am Desktop, damit Besucher auf jedem Gerät ein ansprechendes Erlebnis genießen. Mobile Animationen sind speziell für kleinere Bildschirme und Auflösungen konzipiert, sodass alles ohne Zusatzaufwand perfekt passt.
Hinweis:
Animationen, die du am Desktop hinzufügst, erscheinen auch in der mobilen Ansicht deiner Website. Du kannst jedoch eine andere Animation für Mobilgeräte wählen (oder diese deaktivieren), ohne die Animation am Desktop zu ändern.
Um eine Animation auf Mobilgeräten hinzuzufügen:
- Öffne deinen Editor.
- Klicke auf das Symbol für Mobilgerät
in der oberen rechten Ecke der Seite. - Klicke auf das entsprechende Element.
- Klicke auf das Symbol für Animation
in der Aktionsleiste. - Wähle eine Animation aus den verfügbaren Optionen aus.
