Questo articolo spiega come usare le Personalizzazioni delle Animazioni all'interno di Funnel e Siti Web per migliorare il design delle tue pagine. Imparerai a controllare esattamente come gli elementi animano — regolando proprietà come scala, durata, ritardo ed easing — direttamente dal Page Builder. Che tu stia creando una landing page, un Funnel o un sito completo, questi strumenti ti permettono di creare animazioni fluide e d'impatto senza bisogno di codice personalizzato o strumenti di terze parti. Al termine, saprai come applicare, regolare e visualizzare in anteprima le animazioni per creare un'esperienza più coinvolgente per i tuoi visitatori.

INDICE DEI CONTENUTI

Cosa sono le Personalizzazioni delle Animazioni in Funnel e Siti Web?

Le Personalizzazioni delle Animazioni sono una funzionalità integrata nel Page Builder che ti permette di controllare come i singoli elementi animano nei tuoi Funnel e siti web. Offre un pannello di regolazione dedicato dove puoi applicare e perfezionare effetti di animazione come scala, durata, ritardo ed easing — tutto con anteprima in tempo reale. Il pannello organizza questi controlli in sezioni chiaramente etichettate, rendendo facile regolare come gli elementi entrano, escono o si muovono nella pagina senza uscire dall'editor o usare codice personalizzato.

Puoi modificare le animazioni con precisione:

  • Scala: da 0,5× a 2× per effetti da sottili a drammatici
  • Durata: da 0,1 a 3 secondi per impostare il ritmo
  • Ritardo: fino a 5 secondi per sequenze scaglionate
  • Easing: scegli tra Linear, Ease-In, Ease-Out ed Ease-In-Out per transizioni fluide

Queste impostazioni ti danno il controllo completo sul movimento visivo, aiutandoti a creare design di pagina più personalizzati e coinvolgenti.

Miglioramento del Comportamento del Ritardo delle Animazioni

I ritardi delle animazioni ora funzionano in modo più preciso nei Funnel e nei siti web. Gli elementi rimangono completamente nascosti durante il periodo di ritardo configurato e diventano visibili solo quando l'animazione inizia.

In precedenza, alcuni elementi potevano apparire brevemente prima che il ritardo fosse completato. Questo comportamento è stato corretto per garantire animazioni più fluide e visivamente coerenti — in particolare quando si usano sequenze di animazioni scaglionate.

Non è richiesta alcuna configurazione aggiuntiva. Tutte le impostazioni di ritardo delle animazioni esistenti seguono automaticamente il comportamento migliorato.

Principali Vantaggi delle Personalizzazioni delle Animazioni

Le Personalizzazioni delle Animazioni migliorano sia il tuo flusso di lavoro di design sia l'esperienza utente sulle tue pagine. Ecco cosa puoi aspettarti:

  • Controllo granulare: personalizza il comportamento di ogni animazione regolando scala, durata, ritardo ed easing con valori precisi.
  • Anteprima in tempo reale: vedi subito le tue modifiche, così puoi perfezionare il movimento senza dover indovinare.
  • Layout organizzato: tutti i controlli sono raccolti in un pannello pulito e intuitivo che semplifica il processo di editing.
  • Rifinitura professionale: personalizzando come gli elementi animano, puoi guidare l'attenzione dell'utente, rafforzare il brand e creare interazioni più dinamiche — senza ricorrere a strumenti di terze parti.

Insieme, queste funzionalità ti danno gli strumenti per creare animazioni fluide e di grande impatto direttamente nel Page Builder di HITLEAD.

Come Configurare le Personalizzazioni delle Animazioni

Puoi applicare e personalizzare le animazioni per qualsiasi elemento in pochi passi:

Accedi alla Sezione Funnel

Dalla barra laterale sinistra, clicca su Sites, poi seleziona la scheda Funnels in cima allo schermo. Si apre l'elenco di tutti i progetti Funnel disponibili nel tuo account.

Schermata 1 — Personalizzazioni delle Animazioni in Funnel e Siti Web

Scegli o Crea un Funnel

Usa la barra Search for Funnels per aprire un Funnel esistente, oppure clicca su + New Funnel per crearne uno. Ti porterà alla schermata Funnel Steps dove puoi gestire e modificare ogni step del tuo Funnel.

Schermata 2 — Personalizzazioni delle Animazioni in Funnel e Siti Web

Seleziona la Pagina da Animare

Dall'elenco degli step del Funnel sulla sinistra, scegli la pagina su cui vuoi implementare le animazioni. In questo caso puoi vedere gli step denominati Landing Page, Schedule Page o Thank You Page. Verrà caricata l'anteprima della pagina selezionata con le opzioni di modifica disponibili.

Schermata 3 — Personalizzazioni delle Animazioni in Funnel e Siti Web

Apri l'Editor della Pagina

Clicca il pulsante Edit sotto l'anteprima della pagina selezionata, poi scegli Edit in a New Tab per un'esperienza di editing a schermo intero. Si aprirà la pagina nel builder dove puoi applicare le impostazioni di animazione.

Schermata 4 — Personalizzazioni delle Animazioni in Funnel e Siti Web

Seleziona l'Elemento da Animare

Clicca sull'elemento specifico che vuoi animare — come un pulsante, un blocco di testo o un'immagine. Una volta selezionato, le sue impostazioni appariranno nel pannello destro del builder.

Schermata 5 — Personalizzazioni delle Animazioni in Funnel e Siti Web

Apri le Impostazioni delle Animazioni

Con l'elemento selezionato, clicca sulla scheda Animations nel pannello destro. Qui gestirai gli effetti di animazione di entrata e hover per l'elemento scelto.

Schermata 6 — Personalizzazioni delle Animazioni in Funnel e Siti Web

Seleziona l'Animazione di Entrata

Clicca su Entrance Animation per iniziare a personalizzare come l'elemento appare quando si carica nella pagina. Si aprirà un elenco di stili di animazione che puoi applicare.

Schermata 7 — Personalizzazioni delle Animazioni in Funnel e Siti Web

Scegli uno Stile di Animazione

Sfoglia le opzioni di animazione sotto Fade, Slide, Bounce e altre. Clicca su uno stile — come "Fade In" o "Slide Right" — per visualizzare immediatamente in anteprima come l'elemento animerà entrando nella vista.

Schermata 8 — Personalizzazioni delle Animazioni in Funnel e Siti Web

Clicca su Adjust Animation

Dopo aver selezionato uno stile di animazione, clicca il pulsante Adjust Animation in fondo al pannello. Si aprono le impostazioni avanzate dove puoi perfezionare il comportamento dell'animazione.

Schermata 9 — Personalizzazioni delle Animazioni in Funnel e Siti Web

Perfeziona il Comportamento dell'Animazione

Usa i controlli per regolare Scale, Duration, Delay ed Easing dell'animazione. Queste impostazioni ti aiutano a controllare quanto velocemente, quanto fluidamente e quando l'animazione viene riprodotta per l'elemento selezionato.

Schermata 10 — Personalizzazioni delle Animazioni in Funnel e Siti Web

Regola il Comportamento dell'Easing

Apri il menu a tendina Easing per controllare il flusso dell'animazione. Scegli tra opzioni come Linear, Ease In, Ease Out o Ease In Out per definire come il movimento accelera e decelera, ottenendo un effetto visivo più fluido.

Schermata 11 — Personalizzazioni delle Animazioni in Funnel e Siti Web

Domande Frequenti

D: Ho bisogno di esperienza pregressa con le animazioni per usare questa funzionalità?

R: Non è richiesta alcuna esperienza. L'interfaccia è progettata per essere intuitiva per tutti gli utenti, con feedback in tempo reale e controlli chiaramente etichettati.

D: Che tipi di animazioni posso applicare?

Puoi scegliere tra una varietà di stili di animazione e personalizzarli usando i controlli disponibili per tempistica, scala ed easing.

D: Posso visualizzare in anteprima le animazioni prima di pubblicare?

Sì, tutte le impostazioni delle animazioni vengono mostrate in tempo reale nel Page Builder, così puoi vedere l'effetto immediatamente.

D: Cosa fa l'easing in un'animazione?

L'easing determina come si muove l'animazione — se inizia lentamente, finisce lentamente o si muove a velocità costante.

D: Posso combinare più animazioni su un unico elemento?

Su ogni elemento può essere applicata una sola animazione. Tuttavia, puoi usare animazioni diverse su più elementi per creare effetti coordinati.

Articoli Correlati

  • Menu di Navigazione nel HITLEAD Funnel Builder
  • Scroll verso Elementi o Sezioni in Siti Web o Funnel
  • Come Creare Più Popup per Pagina in Funnel e Siti Web