Editor Wix: aggiungere e personalizzare un'animazione

Tempo di lettura: 4 min.
Usa le animazioni per dare vita al tuo sito. Aggiungi effetti come "Fluttua" ed "Espandi" per creare pagine fantasiose e sorprendenti. Puoi scegliere come e quando riprodurre le animazioni: solo una volta, con lo scorrimento, in loop e altro ancora. 
Puoi applicare animazioni a una varietà di elementi e persino applicare effetti diversi allo stesso elemento sia sul tuo sito desktop che mobile. Le nostre animazioni mobile sono progettate per adattarsi a schermi più piccoli, così da stupire i tuoi visitatori su qualsiasi dispositivo. 
Gif che mostra diverse animazioni delle immagini durante lo scorrimento del sito
In questo articolo, scoprirai di più su:
Problemi con l'animazione?
Segui i nostri passaggi per assicurarti che funzionino come previsto sul tuo sito live.

Aggiungere un'animazione a un elemento

Rendi il tuo sito dinamico e coinvolgente aggiungendo un'animazione ai tuoi elementi. Ogni animazione ha un effetto diverso, quindi puoi mescolarli con elementi diversi e lasciare il segno nei tuoi visitatori.
Suggerimento:
Puoi aggiungere animazioni a un gruppo di elementi selezionando il gruppo e cliccando sull'icona Animazione .

Per aggiungere l'animazione:

  1. Clicca sull'elemento pertinente nell'Editor
  2. Clicca sull'icona Animazione
  3. Seleziona un'animazione tra le opzioni disponibili
    • Entrata: l'animazione verrà riprodotta solo una volta quando l'elemento selezionato appare sullo schermo
    • Loop: l'animazione viene riprodotta continuamente in loop
    • Scorrimento: l'animazione viene riprodotta quando l'elemento scorre sullo schermo
Gif che mostra una serie di animazioni diverse che possono essere visualizzate in loop
Nota:
Gli elementi dell'intestazione non si animeranno quando il visitatore del sito passa da una pagina all'altra. 

Personalizzare un'animazione

Dopo aver aggiunto l'animazione a un elemento, puoi personalizzarla per adattarla al tuo sito.
Regola le impostazioni come la potenza, la direzione e il ritardo per coinvolgere i tuoi visitatori.
Nota:
Le opzioni di personalizzazione disponibili dipendono dall'animazione scelta.

Per personalizzare l'animazione:

  1. Clicca sull'elemento pertinente nell'Editor
  2. Clicca sull'icona Animazione
  3. Clicca su Personalizza e utilizza le opzioni per regolare l'animazione:
    • Potenza: clicca sul menu a tendina per selezionare la potenza dell'animazione durante la riproduzione
    • Direzione: seleziona la direzione da cui entra l'animazione (es. in senso orario, da destra)
    • Distanza: utilizza il cursore per modificare la distanza tra il punto iniziale e finale dell'effetto
    • Durata: utilizza il cursore per regolare la durata della riproduzione dell'animazione
    • Ritardo: trascina il cursore per aumentare o diminuire il ritardo tra il caricamento della pagina e l'inizio dell'animazione
    • Tipo di animazione: scegli tra il tipo di animazione in ingresso, in uscita o continua durante lo scorrimento 
    • Stile di movimento: seleziona l'intensità del movimento, ad esempio leggero o moderato
Screenshot delle impostazioni per l'animazione capovolgi e diverse impostazioni come la direzione e la durata dell'animazione

Aggiungere animazioni al tuo sito mobile

Oltre ad aggiungere animazioni agli elementi del tuo sito desktop, puoi anche aggiungerli al tuo sito mobile, in modo che i tuoi visitatori abbiano un'esperienza di navigazione eccezionale da tutti i loro dispositivi.
Le animazioni per dispositivi mobile sono state progettate specificamente per risoluzioni e dimensioni dello schermo più piccole, quindi non devi preoccuparti della spaziatura. 
Nota:
Gli effetti di animazione aggiunti sul desktop non vengono trasferiti sul tuo sito mobile, poiché sono ottimizzati per schermi di diverse dimensioni. Se vuoi che un elemento sia animato anche su mobile, segui i passaggi riportati di seguito.

Per aggiungere animazioni su dispositivi mobile:

  1. Vai al tuo Editor mobile
  2. Clicca sull'elemento pertinente
  3. Clicca sull'icona Animazione 
  4. Seleziona un'animazione tra le opzioni disponibili
Scelta di un'animazione per un elemento nell'Editor mobile
Nota importante per Velo:
Se stai utilizzando Velo (codice) per nascondere o mostrare un elemento, anche la sua animazione deve essere impostata tramite Velo. 

Hai trovato utile questo articolo?

|