Cattura l'attenzione dei visitatori aggiungendo effetti visivi incredibili ai blocchi di immagini.

È possibile aggiungere effetti ai blocchi immagine del tuo sito per dare alle tue immagini un aspetto più stilizzato. Alcuni effetti aggiungono un'animazione che fa apparire l'immagine in continuo movimento, altri compaiono solo quando il visitatore scorre quella sezione del sito. La modalità di applicazione di questi effetti varia in base all'aggiunta dell'immagine in una sezione dell'Editor fluido o in una sezione dell'editor classico.

Prima di iniziare

• Gli effetti immagine aggiungono animazioni a singole immagini. Se utilizzi la versione 7.1, è possibile applicare le animazioni a tutto il sito con animazioni per tutto il sito.
• Le animazioni sui singoli blocchi immagine sovrascrivono quelle dell'intero sito.
• L'aggiunta di effetti immagine ai file .gif modificati li converte in file .jpg statici.
• Prima di aggiungere effetti visivi al tuo sito, puoi consultare le nostre risorse per l'accessibilità. 

Applicare effetti ai blocchi immagine con Editor fluido

Dopo aver aggiunto un'immagine a un blocco immagine presente in una sezione dell'Editor fluido, fai doppio clic sull'immagine per aprire il suo editor. Quindi:

1. Clicca su Design e poi su Effetto immagine.
2. Scegli un effetto dal menu. Tutte le modifiche apportate all'effetto appariranno nell'anteprima del sito.
3. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Stili di effetto immagine

Puoi scegliere tra questi effetti immagine:

• Nessuno: nessun effetto, a parte l'impostazione dell'opacità della sovrapposizione.
• Liquido: dà all'immagine un effetto increspato
• Grana della pellicola: aggiunge una sovrapposizione statica animata all'immagine.
• Parallax: l'immagine si muove durante lo scorrimento da parte dei visitatori
• Linee rifratte: rifrange l'immagine attraverso un modello di linee rette.
• Cerchi rifratti: rifrange l'immagine attraverso un modello di cerchi.

Personalizza l'effetto nel pannello dei dettagli facendo clic su un effetto immagine e poi sull'icona delle impostazioni.

Clicca su una qualsiasi categoria nel pannello dei dettagli per espandere il menu a discesa e visualizzare altre opzioni, come ad esempio:

• Personalizzazione delle dimensioni e della forma dell'effetto
• Modificare la velocità e la direzione degli effetti con movimento, come Liquido

A seconda del tipo di effetto immagine, vengono visualizzate diverse impostazioni che puoi utilizzare per modificare i componenti principali dell'effetto. Per sperimentare una configurazione casuale delle impostazioni, clicca sull'icona mix quando si sceglie un effetto o clicca su Casuale nel pannello dei dettagli dell'effetto.

Consigliamo di testare ogni effetto per capire meglio come si presenta e come funziona per il tuo sito.

Applicare effetti ai blocchi immagine nell'editor classico

Dopo aver aggiunto un'immagine a un blocco immagine in una sezione dell'editor classico, fai doppio clic sull'immagine per aprire il suo editor. Quindi:

1. Clicca su Design, quindi su Animazioni.
2. Seleziona un effetto dall'elenco da applicare all'immagine e a un qualsiasi testo. Mentre selezioni un'opzione, vedrai un'anteprima di come apparirà sulla pagina.

Stili del Blocco animazione

Scegli una delle seguenti impostazioni per animare l'intero blocco:

• Nessuna: nessuna animazione, anche se sono presenti impostazioni di animazione a livello di sito
• Impostazioni predefinite del sito: il blocco corrisponde alle impostazioni di animazione del sito
• Dissolvenza : il blocco si dissolve
• Scorrimento verso l'alto: il blocco scorre verso l'alto
• 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 si ingrandisce con un'inclinazione verso l'alto
• Inclinazione verso il basso: il blocco si ingrandisce con un'inclinazione verso il basso
• Messa a fuoco: il blocco appare 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
• Personalizzato: imposta le animazioni per immagini e testo in modo indipendente

Clicca su Personalizzato per animare l'immagine e il testo in modo indipendente e scegliere una delle seguenti impostazioni:

• Nessuno
• Dissolvenza in entrata
• Scorrimento verso l'alto
• Scorrimento verso il basso
• Scorrimento da sinistra
• Scorrimento da destra
• Messa a fuoco

Ecco un esempio di un blocco immagine Collage che utilizza queste impostazioni:

• Animazione - Personalizza
• Animazione immagine - Scorrimento da destra
• Animazione testo - Scorrimento da sinistra

Risoluzione dei problemi

Se gli effetti delle immagini non vengono visualizzati sul tuo sito, considera quanto segue:

• ​​Se nessuno dei tuoi contenuti è animato, assicurati di utilizzare un browser supportato.
• 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 li supporta, visita get.webgl.org. Se un browser non supporta WebGL, lo sfondo della sezione rimane statico.

Suggerimento: se il tuo sito web è basato sulla versione 7.1, i visitatori hanno la possibilità di disattivare alcune funzionalità animate attraverso le impostazioni del loro dispositivo. Ciò significa che quando visitano il tuo sito, vedranno meno movimento. Ad esempio, se un utente Mac sceglie di ridurre il movimento dello schermo sul proprio dispositivo, le animazioni attivate per i blocchi immagine o le immagini di sfondo non appariranno animate per quel visitatore.

Altre animazioni ed effetti

Per applicare effetti e animazioni simili alle tue immagini, potresti considerare l'utilizzo di alternative come immagini banner, video di sfondo o immagini di sfondo delle sezioni. Tuttavia, è importante tenere conto della versione del tuo sito e del punto in cui desideri aggiungere tali effetti.

Per saperne di più su ciascun tipo, visita le guide collegate.