Studio Editor: Animationen zu Buttonsymbolen hinzufügen
5 min
In diesem Artikel
- Eine vorgefertigte Symbolanimation hinzufügen
- Benutzerdefinierte Symbolanimationen erstellen
- Das Symbol gestalten
- Anforderungen und Anleitungen für benutzerdefinierte Symbole
Du verwendest Design-Buttons? Füge Symbolanimationen hinzu, um auffällige Effekte zu erzielen und die Websites deiner Kunden bis ins kleinste Detail interaktiv zu gestalten.
Wähle entweder aus der Vielzahl vorgefertigter animierter Symbole von Wix Studio und füge einen vorgefertigten Effekt hinzu, oder kombiniere ein Start- und Endsymbol, um eine individuelle Animation zu erstellen. Du kannst sogar deine eigenen SVG-Dateien hochladen, um das Design zu individualisieren.
Wie funktionieren Buttonsymbol-Animationen?
Eine vorgefertigte Symbolanimation hinzufügen
Wähle für eine schnelle Bearbeitung eine unserer auffälligen Symbolanimationen. Nachdem du den gewünschten Effekt ausgewählt hast, kannst du seine Dauer festlegen.
Ein vorgefertigtes animiertes Symbol hinzufügen:
- Öffne deinen Editor.
- Klicke auf den entsprechenden Design-Button.
- Klicke auf Einstellungen.
- Klicke unter Symboltyp auf Animiert.
- Wähle aus, was du als Nächstes tun möchtest:
- Wähle unter Symbol wählen das gewünschte Symbol aus
- Klicke auf das Symbol für Hinzufügen
, um in der Medienverwaltung unser gesamtes Angebot an animierten Symbolen zu entdecken.
- (Optional) Ziehe den Slider, um die Dauer der Animation zu ändern.
Tipp:
Fahre mit der Maus über unsere vorgefertigten Symbole, um eine Vorschau der Animationen anzuzeigen.
Benutzerdefinierte Symbolanimationen erstellen
Erstelle deine eigenen Symbolanimationen für Buttons auf der Website deines Kunden. Indem du sowohl ein Startsymbol als auch ein Endsymbol auswählst, kannst du eine nahtlose Animation erstellen, die auf die Website deines Kunden zugeschnitten ist. Kombiniere Symbole von Wix oder verwende 2 deiner eigenen SVG-Dateien.
Benutzerdefinierte Animationen erstellen:
- Öffne deinen Editor.
- Klicke auf den entsprechenden Design-Button.
- Klicke auf Einstellungen.
- Wähle unter Symboltyp die Option Animiert aus.
- Klicke auf das Symbol für Hinzufügen
und wähle Neu erstellen. - Richte deine Start- und Endsymbole ein:
- Klicke unter Startsymbol auf das Symbol für hinzufügen
. - Wähle im Tab Medien von Wix eine Datei aus. Du kannst auch unter Website-Dateien deine eigene Datei hochladen oder auswählen.
- Klicke auf Datei auswählen.
- Wiederhole die Schritte 1 bis 3 für das Endsymbol.
- Klicke unter Startsymbol auf das Symbol für hinzufügen
- (Optional) Klicke oben auf Zurück und verwende den Slider, um die Dauer festzulegen.
Tipps:
- Du kannst deine eigene Datei mit einem Symbol von Wix kombinieren.
- Verwende die Vorschaubox, um zu überprüfen, ob der Effekt so aussieht, wie du es möchtest.
Das Symbol gestalten
Passe das Symbol an deine Designvorstellung, an das einzigartige Branding deines Kunden und den ausgewählten Button an. Ändere Größe und Farbe des Symbols und rotiere den Button, damit er dynamischer wirkt.
Du kannst den Mouseover-Status des Buttons gestalten. So hast du die Gelegenheit, eine zusätzliche Ebene der Interaktivität hinzuzufügen. Du kannst zum Beispiel das Symbol beim Mouseover rotieren lassen oder einstellen, dass die Farben des Symbols sich dann ändern .
Das Symbol gestalten:
- Öffne deinen Editor.
- Klicke auf den entsprechenden Design-Button.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen
.
- Wähle unter Design den entsprechenden Status aus: Standard oder Mouseover.
- Klicke unter Design auf Symbol.
- Verwende die verfügbaren Optionen, um das Symbol zu gestalten:
- Größe des Symbols ändern.
- Symbolfarbe ändern und die Deckkraft anpassen.
- Das Symbol in einen anderen Winkel rotieren.
Anforderungen und Anleitungen für benutzerdefinierte Symbole
Es gibt bestimmte Anforderungen für benutzerdefinierte Symbole. Um deine eigenen Dateien hochzuladen und zu verwenden, müssen folgende Voraussetzungen erfüllt sein:
- Nur einfarbiges Schwarz (#000000)
- Im SVG-Format
- Nicht größer als 250 KB
Hinweis:
Wenn du deine SVG-Dateien in Adobe Editor oder Figma erstellt hast, müssen sie in einen kombinierten Pfad konvertiert werden, bevor du sie exportieren kannst.
Es gibt auch einige Verfahrensregeln, die du beim Erstellen von Symbolen beachten solltest. Wir empfehlen, die folgenden Richtlinien zu befolgen, um eine reibungslose Animation zu gewährleisten.
- Achte darauf, dass Start- und das Endsymbol dieselbe Startposition haben.
- Überprüfe, ob beide Symbole die gleiche Anzahl an Punkten haben.
- Verwende ausgefüllte Symbole (ohne Ausschnitte).
- Verwende mehrere kleinere Formen um ein SVG-Symbol zu erstellen, nicht nur eine einzige größere Form.
- Skaliere Formen, wenn du ihre Größe anpasst, damit ihre die Qualität erhalten bleibt.
- Verwende die Pixelansicht des Programms, damit die Ausrichtung mit den Pixeln auf dem Artboard übereinstimmt.
- Wenn deine Symbole sehr unterschiedliche Formen haben, kannst du diese Tipps für einen noch reibungsloseren Übergang ausprobieren:
- Verwende angepasste Versionen der Symbole (ein Startsymbol, das ein wenig an die Form des Endsymbols angenähert wurde und umgekehrt).
- Blende Formen von einem Symbol auf einem anderen aus (z. B. Formen vom Endsymbol auf dem Startsymbol ausblenden).
Wichtig:
Für SVG-Dateien, die du außerhalb von Wix erstellst, können wir weder Support noch Fehlerbehebung anbieten.