Editor Studio: aggiungere animazioni alle icone dei tasti
In questo articolo:
- Aggiungere un'animazione predefinita per l'icona
- Creare animazioni personalizzate per le icone
- Progettare il design dell'icona
- Requisiti e linee guida per le icone personalizzate
Usi
tasti personalizzati? Le animazioni delle icone creano effetti accattivanti, rendendo i siti dei tuoi clienti interattivi fin nei minimi dettagli.
Scegli tra la varietà di icone animate predefinite di Wix Studio per un effetto già pronto o combina un'icona iniziale e finale per creare un'animazione personalizzata. Puoi persino caricare i tuoi file SVG per un tocco personalizzato.
Come funzionano le animazioni delle icone dei tasti?
Aggiungere un'animazione predefinita per l'icona
Scegli una delle nostre animazioni per icone sorprendenti e una modifica rapida. Una volta selezionato l'effetto desiderato, puoi impostare la durata.
Per aggiungere un'icona animata predefinita:
- Vai al tuo Editor
- Clicca sul tasto personalizzato pertinente
- Clicca su Impostazioni
- Clicca su Animata sotto Tipo di icona
- Scegli cosa fare dopo:
- Seleziona l'icona desiderata sotto Scegli l'icona
- Clicca sull'icona Aggiungi
per esplorare la nostra gamma completa di icone animate nel Gestore media
- (Facoltativo) Trascina il cursore per modificare la Durata dell'animazione
Suggerimento:
Passa il mouse sulle nostre icone predefinite per visualizzare in anteprima la loro animazione.
Creare animazioni personalizzate per le icone
Crea le tue animazioni delle icone per i tasti sul sito del tuo cliente. Selezionando sia un'icona iniziale che finale, puoi creare un'animazione perfetta e unica per il sito del tuo cliente. Combina le icone di Wix o utilizza 2 dei tuoi file SVG.
Per creare animazioni personalizzate:
- Vai al tuo Editor
- Clicca sul tasto personalizzato pertinente
- Clicca su Impostazioni
- Seleziona Animata sotto Tipo di icona
- Clicca sull'icona Aggiungi
e seleziona Create new (Crea nuova) - Configura le icone iniziali e finali:
- Clicca su Aggiungi
sotto Icona iniziale - Seleziona un file nella scheda Media da Wix o carica/seleziona il tuo in File del sito
- Clicca su Scegli file
- Ripeti i passaggi a-c per l'Icona finale
- Clicca su Aggiungi
- (Facoltativo) Clicca su Indietro in alto e utilizza il cursore per impostare la Durata
Hai cambiato idea?
Passa il mouse sull'icona iniziale/finale nel pannello personalizzato e clicca su
Sostituisci
per cambiarla.
per cambiarla.
Suggerimenti:
- Puoi combinare il tuo file con un'icona da Wix
- Usa il riquadro di anteprima per assicurarti che l'effetto appaia come desideri
Progettare il design dell'icona
Personalizza l'icona in base alla tua visione del design, al branding unico del tuo cliente e al tasto in particolare. Adatta l'icona, modificane il colore e ruotala per rendere il tasto più dinamico.
Puoi progettare lo stato al passaggio del mouse del tasto, dandoti l'opportunità di aggiungere un ulteriore livello di interattività, ad esempio, fai ruotare l'icona o cambia i colori al passaggio del mouse.
Per progettare il design dell'icona:
- Vai al tuo Editor
- Clicca sul tasto personalizzato pertinente
- Clicca sull'icona Apri Ispezione
in alto a destra dell'Editor
- Seleziona lo Stato pertinente sotto Design: Regolare o Passaggio mouse
- Clicca su Icona sotto Design
- Usa le opzioni disponibili per progettare il design dell'icona:
- Adatta l'icona
- Modifica il colore dell'icona e regola l'opacità
- Ruota l'icona con un'angolazione diversa
Requisiti e linee guida per le icone personalizzate
Le icone personalizzate hanno alcuni requisiti. Per caricare e utilizzare i tuoi file, questi devono essere:
- Solo in nero (#000000)
- In un formato SVG
- Non più grandi di 250 KB
Nota:
Se hai creato i tuoi file SVG in Adobe Illustrator o Figma, devono essere convertiti prima di esportarli.
Ci sono anche alcune procedure consigliate da tenere a mente quando crei le icone. Ti consigliamo di seguire le linee guida riportate di seguito per garantire un'animazione il più fluida possibile.
- Assicurati che le icone iniziali e finali abbiano la stessa posizione iniziale
- Verifica che entrambe le icone abbiano lo stesso numero di punti
- Usa icone piene (senza ritagli)
- Usa diverse forme più piccole per creare un'icona SVG, invece di 1 forma più grande
- Mantieni le proporzioni delle forme quando le ridimensioni per mantenerne la qualità
- Usa la vista pixel del programma per garantire l'allineamento con i pixel sull'artboard
- Se le tue icone hanno forme molto diverse, puoi provare questi suggerimenti per una transizione ancora più fluida:
- Usa versioni modificate delle icone (un'icona iniziale che è stata leggermente trasformata nell'icona finale e viceversa)
- Nascondi le forme da un'icona sull'altra (es. nascondi le forme dall'icona finale sull'icona iniziale)
Importante:
Non possiamo fornire assistenza o risoluzione per i problemi relativi ai file SVG che crei al di fuori di Wix.