Wixヘルプセンター
    スタート
  1. スタジオ、Wix & Enterpriseパートナー
  2. Wixスタジオ
  3. Den Studio Editor verwenden
  4. Effekte und Animationen hinzufügen
    5. Studio Editor: Einen voreingestellten Klick- oder Mouseover-Effekt hinzufügen

Studio Editor: Einen voreingestellten Klick- oder Mouseover-Effekt hinzufügen

6分時間
Füge Interaktionen hinzu, um ein animiertes Erlebnis zu schaffen, wenn Besucher Elemente anklicken oder mit der Maus darüber fahren. Benötigst du eine schnelle und einfache Animation? Verwende eine unserer Voreinstellungen (z. B. Grow, Move, Fade) und passe es nach deinen Wünschen an.
Die Interaktion kann dasselbe Element animieren, über das Besucher mit der Maus fahren oder das sie anklicken, oder es kann ein anderes Element auf der Seite animieren. In jedem Fall hast du die volle Kontrolle über das Aussehen und das Timing, sodass es wirklich effektiv ist.
GIF, das zeigt, wie Interaktionen auf einer Live-Website aussehen

Schritt 1 | Trigger hinzufügen (Klick oder Mouseover)

Wähle zunächst das Element aus, das die Interaktion auslöst. Dies ist das Element, über das Besucher mit der Maus fahren oder das sie klicken, bevor sie die Animation sehen. Öffne dann das Inspektor-Panel, um eine neue Interaktion hinzuzufügen.
チップ
Du kannst einem Element mehrere Interaktionen hinzufügen, sodass es beim Mouseover oder Anklicken eine andere Animation auslöst.

Um einen Trigger hinzuzufügen:

  1. Wähle das Element aus, das die Interaktion auslösen soll.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Screenshot, der zeigt, wie das Inspektor-Panel im Studio Editor geöffnet wird
  1. Klicke auf den Tab Animationen und Effekte .
  2. Wähle Mouseover/Klick.
  3. Klicke + Hinzufügen.
Der Tab Animationen und Effekte im Inspektor-Panel, in dem eine neue Mouseover-Animation hinzugefügt wird

Schritt 2 | Die Interaktion einrichten

Nachdem du ein Element und einen Trigger ausgewählt hast, richte die Interaktion ein. Wähle eine vorgefertigte Animation, das Element, das sie anzeigen soll, und was genau bei Mouseover oder beim Anklicken passiert.
ヒンバイス：
Die verfügbaren Animationen hängen vom ausgewählten Element ab.

Um eine Interaktion einzurichten:

  1. (Im „Einrichtung“-Panel) Wähle aus, was Bei Mouseover oder Beim Klicken passiert:
    • Animation starten: Wenn du mit der Maus über das Element klickst, wird die ausgewählte Animation ausgelöst.
    • Animation zurücksetzen: Wenn du mit der Maus über das Element fährst oder es anklickst, wird jede zuvor angewendete Animation entfernt.
    • Einen Effekt ein- und ausschalten: Ein Klick auf das Element löst die Animation aus. Durch ein zweites Anklicken wird sie wieder deaktiviert.
      Hinweis: Diese Option ist nur für Klick-Interaktionen verfügbar.
  2. Wähle unter Animiertes Element das entsprechende Element aus:
    • Das Element löst eine eigene Animation aus: Klicke auf den Namen des Elements (mit (sich selbst) daneben).
    • Ein anderes Element auf der Seite animieren: Wähle ein Element aus dem Aufklappmenü aus oder klicke auf Auf Leinwand wählen, um es auf der Seite auszuwählen.
      Tipp: Halte die Taste Cmd oder Strg gedrückt, um ein untergeordnetes Element auszuwählen.
  3. Wähle eine Animation aus:
    1. Klicke auf den Tab Presets.
    2. Wähle eine Animation aus der Liste aus.
GIF, das zeigt, dass beim Mouseover über voreingestellte Interaktionen eine Vorschau angezeigt wird
チップ
Wenn du festlegst, dass ein Element beim Anklicken oder Mouseover angezeigt wird, wird es auf der Arbeitsfläche mit einer Karomuster-Überlagerung angezeigt. Dies soll anzeigen, dass das Element zunächst transparent ist.
Ein Button, der bei Mouseover angezeigt wird und mit einer Karo-Überlagerung auf der Arbeitsfläche im Studio Editor angezeigt wird
Du kannst diese Anzeige jederzeit deaktivieren. Klicke auf das Symbol für Wixスタジオ , fahre mit der Maus über Ansicht und klicke auf Transparente Elemente.

Schritt 3 | (Optional) Die Animation anpassen

Nachdem du die gewünschte Animation ausgewählt hast, passe sie an, um den gewünschten Effekt zu erzielen. Du kannst Einstellungen wie Dauer, Verzögerung und Easing steuern, um die Animation wirklich effektiv zu gestalten.
ヒンバイス：
Die verfügbaren Einstellungen hängen von der ausgewählten voreingestellten Animation ab.

Um die Animation anzupassen:

  1. (Im Inspektor) Klicke unten auf Animation anpassen.
  2. Passe die verfügbaren Einstellungen nach deinen Wünschen an:
    • Verzögerung: Ziehe den Schieberegler, um eine Verzögerung (in Sekunden) hinzuzufügen, bevor die Animation beginnt.
    • Dauer: Ziehe den Schieberegler, um die Dauer der Animation (in Sekunden) festzulegen.
    • Easing: Wähle aus dem Aufklappmenü aus, wie die Animation langsamer wird.
    • Skalieren: Wähle aus, wie stark das Element vergrößert oder verkleinert wird.
    • Winkel: Ändere den Bewegungswinkel.
    • Entfernung: Lass das Element von seiner Standardposition auf der Seite weiter weg oder näher an sie heranrücken.
    • Ausrichtung: Ändere die Richtung, in die das Element gedreht wird.
  3. (Optional) Klicke auf Vorschau, um zu sehen, wie die Animation aussieht, und nimm bei Bedarf Anpassungen vor.
Screenshot des Inspektor-Panels, in dem die Einstellungen einer voreingestellten Animation angepasst werden

よくある質問

Klicke unten, um mehr über das Erstellen von Interaktionen zu erfahren.

役に立ちましたか？

|

この記事の中で

  • Schritt 1 | Trigger hinzufügen (Klick oder Mouseover)
  • Schritt 2 | Die Interaktion einrichten
  • Schritt 3 | (Optional) Die Animation anpassen
  • よくある質問