Wix Hilfe-Center
  1. Start
  2. Studio, Partner von Wix & Enterprise
  3. Wix Studio
  4. Den Studio Editor verwenden
  5. Effekte und Animationen hinzufügen
  6. Studio Editor: Eine Rive-Animation hinzufügen und einrichten

Studio Editor: Eine Rive-Animation hinzufügen und einrichten

5 Min. Lesezeit
Füge Rive-Animationen hinzu, um die Website deines Kunden mit einem tollen, interaktiven und ansprechenden Erlebnis zu gestalten. Mit unserer nahtlosen Integration kannst du vorgefertigte Elemente aus der Rive-Community verwenden oder deine eigenen integrieren Rive-Designs nutzen.
Nachdem du die Rive-Datei hochgeladen hast, kannst du sie direkt im Editor anpassen – passe die Passform an und wähle ein bestimmtes Artboard und State Machine, lege die Animation auf automatische Wiedergabe fest und vieles mehr. Dadurch hast du die Flexibilität, für dynamische Erfahrungen zu sorgen, die Besucher begeistern und deine Projekte voranbringen.
GIF, das eine Rive-Animation auf einer Live-Website zeigt. Die Animation zeigt Wix Studio X Rive an.
Neu bei Rive?
Besuche Rive Docs, um zu erfahren, wie du die Plattform für die Gestaltung von Animationen nutzt.

Schritt 1 | Rive-Element hinzufügen

Lege los, indem du das Rive-Element über das „Elemente hinzufügen“-Panel hinzufügst. Anschließend kannst du die Standardanimation in deine Rive-Datei ändern, sodass das Element sie anzeigt.
Bevor du loslegst:
Du solltest die Rive-Datei in die Medienverwaltung der Website hochladen, damit sie integriert werden kann. Du kannst die Datei jedoch auch direkt hochladen, während du das Element einrichtest.

Um das Rive-Element hinzuzufügen:

  1. Öffne deinen Editor.
  2. Klicke auf der linken Seite des Editors auf Elemente hinzufügen .
  3. Klicke auf Medien.
  4. Klicke auf Rive.
  5. Klicke neben Rive-Animationen auf das Symbol für Zur Website hinzufügen .
Screenshot aus dem „Elemente hinzufügen“-Panel. Der Tab „Rive“, der zeigt, worauf du klicken musst, um das Element hinzuzufügen.
  1. Lade die Rive-Datei hoch:
    1. Klicke auf Datei ändern.
    2. (In der Medienverwaltung) Wähle die entsprechende .riv-Datei aus oder klicke auf + Medien hochladen, um sie direkt hinzuzufügen.
    3. Klicke auf Hinzufügen.
Im Studio Editor wird im Rive-Element auf „Datei ändern“ geklickt, um eine .riv-Datei hochzuladen.

Schritt 2 | Das Rive-Element anpassen

Passe deine Rive-Animation an, damit sie perfekt zur Vision deines Kunden und zum Design der Website passt. Von der Auswahl eines bestimmten Artboards bis hin zur Anpassung der Ausrichtung und Wiedergabeeinstellungen hast du die vollständige Kontrolle darüber, wie die Animation in die Website integriert wird.
Mit Breakpoints arbeiten:
Standardmäßig gelten die Einstellungen deiner Rive-Animation für alle Breakpoints.

Um das Rive-Element anzupassen:

  1. Wähle in deinem Editor das Rive-Element aus.
  2. Klicke auf das Symbol für Einstellungen und passe die folgenden Einstellungen an:
    • Medien: Klicke auf .riv-Datei ändern, um eine andere Datei auszuwählen oder hochzuladen.
    • Artboard: Wenn deine Rive-Datei mehrere Artboards enthält (z. B. einzelne Arbeitsflächen) kannst du die auswählen, die du in diesem Element anzeigen möchtest.
    • State Machine: Wenn deine Rive-Datei mehrere State Machinesn enthält (z. B. Kombinationen aus mehreren Animationen), kannst du die Animation auswählen, die bei diesem Element abgespielt werden soll.
    • Anpassen: Wähle die Passform der Animation innerhalb des Begrenzungsrahmens des Elements aus (z. B. Titelbild, Füllung usw.)
    • Ausrichtung: Wähle eine Ausrichtung für die Animation innerhalb des Begrenzungsrahmens des Elements (z. B. Mitte, unten links usw.).
    • Automatische Wiedergabe: Klicke auf den Schalter, um zu entscheiden, ob die Animation automatisch abgespielt wird oder nicht.
    • Kontaktloses Scrollen aktivieren: Aktiviere den Schalter, um zu ermöglichen, dass das Scroll-Verhalten auch auf Touch-Geräten verwendet wird – wenn Besucher das Rive-Element tippen oder ziehen, wird das Scroll-Verhalten ausgelöst. Andernfalls kann das Scrollen bei Tipp- oder Ziehaktionen standardmäßig verhindert werden.
    • Was ist in der Animation zu sehen?: Schreibe Alt-Text, um die Animation zu beschreiben. Wenn es sich um ein Deko-Element handelt (z. B. benötigt keinen Alt-Text), aktiviere das Kontrollkästchen neben Diese Animation ist rein dekorativ und benötigt keine Beschreibung.
  3. (Optional) Verwende die Ziehpunkte des Elements, um die Größe zu ändern.
    Tipp: Rive-Animationen werden auf den Begrenzungsrahmen des Elements beschränkt.
Klicke auf Vorschau der Animation, um die Animation direkt auf der Arbeitsfläche zu sehen.
Das Einstellungen-Panel einer Rive-Datei im Studio Editor. Der Cursor klickt auf das Artboard-Dropdown.

FAQs

Klicke unten auf eine Frage, um mehr zu erfahren.

War das hilfreich?

|
In diesem Artikel
  • Schritt 1 | Rive-Element hinzufügen
  • Schritt 2 | Das Rive-Element anpassen
  • FAQs

War das hilfreich?

|