Animazioni del sito

Migliora il contenuto del tuo sito con effetti di stile speciali.

Ultimo aggiornamento 10 dicembre 2024

Per aggiungere straordinari effetti visivi ai contenuti del tuo sito, abilita le animazioni del sito, che appaiono mentre i visitatori scorrono le tue pagine. Puoi anche aggiungere animazioni e altri effetti di immagine a elementi specifici, come uno sfondo di sezione o un blocco immagine.

Questa guida esamina la configurazione di animazioni a livello di sito e la ricerca di altre aree in cui è possibile aggiungere effetti.

Accesso a questa funzionalità

Le animazioni per il sito intero sono disponibili nella versione 7.1. Per quanto riguarda la versione 7.0, dipende dal modello. Alcuni modelli associati alla versione 7.0 hanno opzioni di animazione specifiche, come le pagine del blog appartenenti alla famiglia di modelli Bedford. Per trovare il modello del tuo sito, visita la pagina Quali sono il modello e la versione del mio sito?.

Prima di iniziare

  • Le animazioni su blocchi immagine individuali, blocchi citazione e altre aree sovrascrivono le animazioni dell'intero sito. 
  • Alcune pagine di raccolta, come le pagine del blog, del negozio e del portfolio, hanno sempre animazioni discrete quando la pagina viene caricata, anche se le stesse sono disabilitate a livello di sito.
  • Prima di aggiungere effetti visivi al tuo sito, puoi consultare le nostre risorse per l'accessibilità.

Guarda un video

Abilita animazioni a livello di sito

Le animazioni a livello di sito si applicano alla maggior parte delle sezioni 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 attivare uno stile di animazione e di provare in che modo funziona sulle diverse pagine del tuo sito. Prova ogni stile finché non trovi quello più adatto ai tuoi contenuti.

Per attivare le animazioni in tutto il sito:

  1. Apri il pannello Animazioni
  2. Scegli uno stile di animazione.
  3. Scegli una velocità di animazione Lenta, Media o Veloce.
  4. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.
Site-wide_animations_appear_as_visitors_scroll_through_your_site_and_elements_load.gif

Stili di animazione a livello di sito

Scegli tra questi stili di animazione:

  • Nessuno - Disattiva le animazioni per tutto 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 univoche a intestazioni, testo collegato, pulsanti e pagine portfolio, oltre ad aggiungere una sottolineatura ai principali link di navigazione al passaggio del mouse

Rimuovi le animazioni a livello di sito

Per disabilitare le animazioni a livello di sito:

  1. Apri il pannello Animazioni.
  2. Scegli Nessuna.
  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.

Altre animazioni ed effetti per immagini e testi

Sono presenti altre animazioni ed effetti che puoi abilitare per elementi specifici del tuo sito. Per maggiori informazioni su ciascuna tipologia, visita le guide collegate:

Risoluzione dei problemi

Se le animazioni non appaiono sul sito, ricorda:

  • Alcuni contenuti supportano solo lo stile di animazione 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.
  • Le animazioni a livello di sito e gli sfondi di sezione sono disponibili solo nella versione 7.1.
  • Scopri come altri professionisti utilizzano l'animazione per migliorare i siti dei loro clienti sul nostro blog di Circle.
Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.