Personalizzazione delle Animazioni in Funnel e Siti Web

Questo articolo spiega come utilizzare le Personalizzazioni delle Animazioni all'interno di Funnel e Siti Web per migliorare il design delle tue pagine. Imparerai a controllare con precisione il comportamento delle animazioni degli elementi—regolando proprietà come scala, durata, ritardo ed easing—direttamente dal Page Builder. Che tu stia creando una landing page, un funnel o un sito web completo, questi strumenti ti permettono di realizzare animazioni fluide e d'impatto senza ricorrere a 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.

Cosa sono le Personalizzazioni delle Animazioni in Funnel e Siti Web?
Miglioramento del comportamento del ritardo delle animazioni
Vantaggi principali delle Personalizzazioni delle Animazioni
Come configurare le Personalizzazioni delle Animazioni
Domande frequenti
Articoli correlati

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

Le Personalizzazioni delle Animazioni sono una funzionalità integrata nel Page Builder che ti consente di controllare il comportamento animato dei singoli elementi all'interno dei tuoi funnel e siti web. Mette a disposizione un pannello di regolazione dedicato dove puoi applicare e perfezionare effetti di animazione come scala, durata, ritardo ed easing—il tutto con anteprima in tempo reale. Il pannello organizza questi controlli in sezioni chiaramente etichettate, rendendo semplice modificare il modo in cui gli elementi entrano, escono o si muovono sulla pagina, senza abbandonare l'editor o usare codice personalizzato.

Puoi modificare le animazioni con precisione:

Scala (Scale): da 0,5× a 2× per effetti da sottili a scenografici
Durata (Duration): da 0,1 a 3 secondi per impostare il ritmo
Ritardo (Delay): 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 offrono il pieno controllo 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 con maggiore precisione nei funnel e nei siti web. Gli elementi rimangono completamente nascosti durante il periodo di ritardo configurato e diventano visibili solo quando l'animazione ha inizio.

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—specialmente quando si utilizzano sequenze di animazioni scaglionate.

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

Vantaggi principali delle Personalizzazioni delle Animazioni

Le Personalizzazioni delle Animazioni migliorano sia il flusso di lavoro di design che 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: Visualizza immediatamente le modifiche, così puoi perfezionare il movimento senza incertezze.
Layout organizzato: Tutti i controlli sono raccolti in un pannello pulito e intuitivo che semplifica il processo di editing.
Rifinitura professionale: Personalizzando il modo in cui gli elementi si animano, puoi guidare l'attenzione degli utenti, rafforzare il brand e creare interazioni più dinamiche—senza dipendere da strumenti di terze parti.

Insieme, queste funzionalità ti offrono gli strumenti per realizzare animazioni fluide e d'impatto direttamente all'interno del Page Builder di GoHighLevel / Squadd.

Come configurare le Personalizzazioni delle Animazioni

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

Accedere alla sezione Funnel

Dalla barra laterale sinistra, clicca su Siti (Sites), quindi seleziona la scheda Funnel in cima alla schermata. Questo apre l'elenco di tutti i progetti funnel disponibili nel tuo account.

Scegliere o creare un Funnel

Usa la barra Cerca Funnel (Search for Funnels) per aprire un funnel esistente, oppure clicca su + Nuovo Funnel (+ New Funnel) per crearne uno. Verrai indirizzato alla schermata degli Step del Funnel, dove puoi gestire e modificare ogni step.

Selezionare la pagina da animare

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

Aprire il Page Editor

Clicca sul pulsante Modifica (Edit) sotto l'anteprima della pagina selezionata, quindi scegli Modifica in una nuova scheda (Edit in a New Tab) per un'esperienza di editing a schermo intero. La pagina si aprirà nel builder, dove potrai applicare le impostazioni di animazione.

Selezionare 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 di destra del builder.

Aprire le Impostazioni animazione

Con l'elemento selezionato, clicca sulla scheda Animazioni (Animations) nel pannello di destra. Qui potrai gestire gli effetti di animazione di entrata e al passaggio del mouse (hover) per l'elemento scelto.

Selezionare l'animazione di entrata

Clicca su Animazione di entrata (Entrance Animation) per iniziare a personalizzare il modo in cui l'elemento appare quando si carica sulla pagina. Si aprirà un elenco di stili di animazione applicabili.

Scegliere uno stile di animazione

Sfoglia le opzioni di animazione nelle categorie Fade, Slide, Bounce e altre. Clicca su qualsiasi stile—come "Fade In" o "Slide Right"—per visualizzare immediatamente in anteprima come l'elemento si animerà.

Cliccare su Regola animazione

Dopo aver selezionato uno stile di animazione, clicca sul pulsante Regola animazione (Adjust Animation) in fondo al pannello. Si apriranno le impostazioni avanzate per perfezionare il comportamento dell'animazione.

Perfezionare il comportamento dell'animazione

Usa i controlli per regolare Scala (Scale), Durata (Duration), Ritardo (Delay) ed Easing dell'animazione. Queste impostazioni ti permettono di controllare velocità, fluidità e momento di esecuzione dell'animazione per l'elemento selezionato.

Regolare 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.

Domande frequenti

D: È necessaria 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 tramite i controlli disponibili per tempistica, scala ed easing.

D: Posso visualizzare le animazioni in anteprima prima della pubblicazione?

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

D: A cosa serve l'easing in un'animazione?

L'easing determina il modo in cui l'animazione si muove—se inizia lentamente, termina lentamente o procede a velocità costante.

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

È possibile applicare una sola animazione per elemento. Tuttavia, puoi usare animazioni diverse su più elementi per creare effetti coordinati.