Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Animazioni ed effetti immagine

Puoi aggiungere animazioni a una piccola area del sito, come uno sfondo di sezione o un Blocco immagine, oppure abilitare animazioni a livello di sito che appaiono mentre i visitatori scorrono il sito.

Questa guida illustra come abilitare diversi effetti di animazione in varie aree del sito.

Suggerimento: per aggiungere al tuo sito degli effetti al passaggio del mouse, come titoli delle immagini e didascalie, visita Creare degli effetti al passaggio del mouse per le immagini.

Prima di iniziare

  • Le animazioni su Blocchi immagine, Blocchi citazione e altre aree sovrascrivono le animazioni a livello di sito.
  • Alcune pagine di raccolta, come Pagine del blog e Pagine portfolio, hanno sempre animazioni discrete quando la pagina viene caricata, anche se le animazioni a livello di sito sono disabilitate. 
  • Quando disattivi le animazioni di blocchi e pagine, tali aree seguono gli stili a livello di sito.

Animazioni del sito

Le animazioni a livello di sito sono disponibili solo nella versione 7.1.

Le animazioni a livello di sito si applicano alla maggior parte delle aree del sito, con effetti più evidenti in alcune aree rispetto ad altre. Queste animazioni influiscono principalmente sul modo in cui immagini, testo e altri blocchi appaiono quando si scorre una pagina. Alcune animazioni appaiono anche al passaggio del mouse su link e pulsanti. 

Ti consigliamo di abilitare uno stile di animazione e vedere come appare su pagine diverse del tuo sito. Prova ogni stile fino a trovare quello che si adatta meglio ai tuoi contenuti.

Per animare il contenuto del sito:

  1. Per modificare una pagina, apri Stili sito e fai clic su Animazioni.
  2. Clicca su uno stile di animazione.
  3. Scegli una velocità di animazione Lenta, Media o Veloce.
  4. Passa il mouse su Fatto e clicca su Salva.

Stili di animazione

Scegli tra questi stili di animazione:

  • Nessuno - Disabilita le animazioni a livello di sito.
  • Dissolvenza - Il contenuto si dissolve man mano che viene visualizzato nella pagina.
  • Scala - Il contenuto si anima passando da una dimensione più piccola alla sua dimensione finale, creando un effetto di ingrandimento.
  • Diapositiva - Il contenuto scorre verso l'alto per raggiungere la sua posizione, accentuando l'effetto dello scorrimento verso il basso della pagina.
  • Clip - Il contenuto scorre riga per riga da sinistra.
  • Flex - Aggiunge animazioni uniche a intestazioni, testo dei link, pulsanti e pagine portfolio.

Rimuovi le animazioni a livello di sito

Per disabilitare le animazioni a livello di sito:

  1. Durante la modifica di una pagina,clicca sull'icona del pennello, quindi su Animazioni.
  2. Scegli Nessuna.
  3. Passa il mouse su Fatto e clicca su Salva.

Guarda un video

Effetti immagine di sfondo

Gli effetti immagine di sfondo sono disponibili solo nella versione 7.1.

Se la sezione di pagina utilizza un'immagine di sfondo, è possibile aggiungere effetti immagine per conferire allo sfondo maggiore personalità. Alcuni effetti aggiungono un'animazione, in modo che l'immagine sia sempre in movimento, mentre altri appaiono solo quando il visitatore scorre quella particolare sezione del tuo sito.

Per aggiungere un effetto immagine:

  1. Dopo aver aggiunto uno sfondo, nell'editor di sezione clicca su Sfondo.
  2. Scorri verso il basso fino a Effetto immagine e scegli un effetto dal menu a discesa. L'effetto apparirà nell'anteprima del tuo sito.
  3. Passa il mouse su Fatto e clicca su Salva.

Ricorda:

  • Gli effetti immagine vengono visualizzati solo su browser e dispositivi che supportano WebGL, una libreria grafica che funziona con il processore grafico del dispositivo. Per verificare se il tuo browser la supporta, visita get.webgl.org. Se il browser non supporta WebGL, lo sfondo della sezione rimarrà statico.
  • Gli effetti immagine non vengono visualizzati sui video di sfondo.

Video di sfondo

Puoi aggiungere video di sfondo a sezioni di pagina, banner e altre aree, a seconda della versione del sito.

Ricorda:

Scenographik

Scenographik è disponibile solo nella versione 7.1.

Puoi aggiungere sfondi Scenographik esclusivi alle sezioni di pagina, anziché un'immagine o un video. Scegli un motivo animato per un effetto vivace oppure una sfumatura di colore più discreta. Puoi utilizzare un motivo predefinito o personalizzarlo scegliendo forme, dimensioni e movimenti specifici. 

Per aggiungere uno sfondo Scenographik:

  1. Nell'editor di sezione, clicca su Sfondo, quindi su Arte.
  2. Clicca su un riquadro per visualizzare l'anteprima dello sfondo nella sezione. I colori vengono estratti dalle opzioni Brillante della tua tavolozza colori
  3. Per definire ulteriormente il design, clicca su uno dei piccoli cerchi visualizzati sopra il riquadro.
  4. Per personalizzarlo ulteriormente, clicca sull'icona delle impostazioni per aprire il pannello dei dettagli. Vedi gli step riportati di seguito per maggiori informazioni.
  5. Quando trovi il design che ti piace, passa il mouse su Fatto nell'angolo in alto a sinistra dell'editor di pagina e clicca su Salva.

Personalizza i dettagli dello sfondo

Puoi personalizzare ulteriormente lo sfondo Scenographik nel pannello dei dettagli. Per aprire i dettagli di uno sfondo, clicca su una miniatura, quindi sull'icona delle impostazioni

settings_icon.png

Scorri le opzioni e le impostazioni fino a trovare il motivo che preferisci. A seconda del tipo di sfondo Scenographik con cui inizi, visualizzerai categorie diverse. Clicca su una categoria qualsiasi per espandere il menu a discesa e visualizzare altre opzioni.

Ad esempio:

  • Nel pannello dei dettagli della maggior parte degli sfondi, puoi cliccare su Inverti colori per cambiare i colori assegnati. 
  • Nel pannello dei dettagli di qualsiasi sfondo, puoi cliccare su Casuale per sperimentare una configurazione casuale.

Altre impostazioni sono specifiche per ogni stile Scenographik e includono cursori e interruttori che modificano i componenti principali dello sfondo. Ti consigliamo di sperimentare le diverse opzioni in ogni pannello dei dettagli fino a creare la tua combinazione preferita.  

Ricorda:

  • Se la sezione include testo o altro contenuto, assicurati che sia ancora visibile e leggibile davanti allo sfondo Scenographik. Per modificare il colore del testo, utilizza i tweak Tipo di carattere nel tema colore di quella sezione. 
  • Gli sfondi Scenographik vengono visualizzati solo su browser e dispositivi che supportano WebGL, uno strumento che funziona con il processore grafico del dispositivo. Per verificare se il tuo browser lo supporta, visita get.webgl.org. Se il browser non supporta WebGL, lo sfondo della sezione rimarrà statico.
  • Se la grafica della sezione è animata, la sezione include un pulsante di pausa nell'angolo in basso a destra. Questo mantiene il tuo sito accessibile ai visitatori che potrebbero trovare fastidiosi gli sfondi in movimento. Non è possibile disabilitare questo pulsante.

Guarda un video

Animazioni dei blocchi

Puoi aggiungere ai Blocchi immagine e ai Blocchi citazione delle animazioni che i visitatori vedono quando caricano o aggiornano la pagina.

Blocchi immagine

Per animare un Blocco immagine:

  1. Nell'editor Blocco immagini fare clic su Progettazione, quindi su Animazioni.
  2. Seleziona un effetto dalla lista da applicare all'immagine e a un qualsiasi testo. Mentre selezioni un'opzione, vedrai un'anteprima di come apparirà sulla pagina.
  3. Per animare separatamente l'immagine e il testo, selezionaPersonalizza, quindi seleziona le opzioni Immagine e Testo.

Scegli tra queste opzioni di animazione per l'immagine, il testo o entrambi:

  • Dissolvenza - Il blocco, l'immagine o il testo si dissolve
  • Scorrimento verso l'alto - Il blocco, l'immagine o il testo scorre verso l'alto
  • Scorrimento verso il basso: l'immagine o il testo scorre verso il basso
  • Clip orizzontale - Il blocco o l'immagine si carica in strati orizzontali
  • Clip verticale - Il blocco o l'immagine si carica in strati verticali
  • Inclinazione verso l'alto - Il blocco o l'immagine si ingrandiscono con un'inclinazione verso l'alto
  • Inclinazione verso il basso - Il blocco o l'immagine si ingrandiscono con un'inclinazione verso il basso
  • Messa a fuoco: il blocco, l'immagine o il testo sembra sfocato, poi viene messo a fuoco
  • Scontro: immagine e testo scivolano verso l'interno dai lati
  • Rivelazione: immagine e testo scivolano verso l'esterno dal centro
  • Scorrimento da sinistra: l'immagine o il testo scorre da sinistra
  • Scorrimento da destra: l'immagine o il testo scorre da destra

Blocchi Citazione

Per animare un Blocco citazione:

  1. Clicca sulla scheda Design nell'editor del blocco.
  2. Seleziona un effetto dal menu a discesa. Mentre esplori le opzioni, vedrai le anteprime di come saranno caricate.

Scegli tra:

  • Dissolvenza - Il testo si dissolve in entrata
  • Scorrimento verso l'alto - Il testo scorre verso l'alto dal basso
  • Messa a fuoco - Il testo appare sfocato, poi viene messo a fuoco
  • Rivelazione - Il testo scorre verso l'esterno dal centro

Risoluzione dei problemi

Se le animazioni non appaiono sul sito, ricorda:

  • Le animazioni a livello di sito e gli sfondi di sezione sono disponibili solo nella versione 7.1.
  • Alcuni contenuti supportano solo lo stile di animazione a livello di sito Dissolvenza. Se scegli uno stile diverso, i contenuti che non lo supportano saranno soggetti a dissolvenza.
  • Se nessuno dei tuoi contenuti è animato, assicurati di utilizzare un browser supportato.
Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 68 su 119
Animazioni ed effetti immagine