Questo articolo mostra come utilizzare il Widget Contatore Numerico per mettere in evidenza le tue metriche più importanti in modo animato e di grande impatto! Da traguardi di fatturato a clienti soddisfatti e statistiche di social proof, il Contatore Numerico trasforma i semplici numeri in elementi visivi dinamici che catturano l'attenzione e rafforzano la storia del tuo brand.
- Cos'è il Widget Contatore Numerico?
- Vantaggi principali del Widget Contatore Numerico
- Come aggiungere il Widget Contatore Numerico a un Sito o Funnel
- Configurare ogni metrica del contatore (Valori di configurazione)
- Personalizzare lo stile del Widget Contatore Numerico (Layout)
- Note importanti
- Domande frequenti
- Articoli correlati
Cos'è il Widget Contatore Numerico?
Il Widget Contatore Numerico è un elemento nativo del builder Funnel e Siti Web (Funnels & Websites) che trasforma i valori numerici in vivaci animazioni di conteggio progressivo. Combinando formattazione intelligente, controlli di layout personalizzabili e trigger allo scorrimento, ti permette di presentare i tuoi risultati chiave in modo visivamente coinvolgente e coerente con il brand.
Vantaggi principali del Widget Contatore Numerico
I numeri animati non si limitano a decorare la pagina — aiutano a catturare l'attenzione e a comunicare credibilità in modo immediato. Ecco perché questo widget fa la differenza:
Contatori multipli: Mostra più contatori in un unico elemento per evidenziare visivamente le tue metriche più importanti
Formattazione intelligente dei numeri: Abbrevia automaticamente i valori elevati con K, M, M (miliardi) o T per una lettura immediata
Campi Prefisso e Suffisso: Aggiungi $, €, %, + o qualsiasi testo personalizzato prima/dopo i valori
Immagini per singolo contatore: Abbina a ogni numero un'icona, un badge o un logo per rafforzarne il significato
Precisione nel layout: Controlla il numero di colonne e perfeziona i margini per un allineamento pixel-perfect su ogni dispositivo
Controlli di stile completi: Personalizza colori, bordi, ombre e tipografia per adattarsi a qualsiasi brand
Come aggiungere il Widget Contatore Numerico a un Sito o Funnel
Aggiungi rapidamente il widget a qualsiasi pagina di funnel o sito web seguendo questi passaggi:
Vai su Siti (Sites) → Funnel oppure Siti → Siti Web (Websites)
Clicca il pulsante blu Modifica (Edit) sulla pagina o sul passaggio desiderato
Seleziona + Aggiungi Elemento (+ Add Element) nella barra laterale e individua l'elemento Contatore Numerico (Number Counter)
Trascina il Contatore Numerico nel layout nel punto in cui vuoi che appaiano le metriche.
Configurare ogni metrica del contatore (Valori di configurazione)
Una volta aggiunto il widget alla canvas, puoi adattare ogni contatore alle tue esigenze. Aggiungi nuove metriche, rimuovi quelle non necessarie e personalizza ogni dettaglio direttamente dal pannello delle impostazioni.
- Aggiungi/Rimuovi contatori: Clicca su Aggiungi Contatore per creare nuove metriche o sull'icona cestino per eliminarne una.
Didascalia (Caption): Inserisci un'etichetta come "Vendite Totali" in modo che i visitatori capiscano cosa rappresenta il numero.
Immagine: Carica un'icona PNG, JPEG o SVG e regolane le dimensioni con il cursore.
Valori di inizio e fine (Start & End Values): Definisci da dove parte l'animazione (es. 0) e dove si ferma (es. 10 000).
Prefisso/Suffisso: Aggiungi contesto con $, €, %, + o testo personalizzato posizionato prima o dopo il valore.
Personalizzare lo stile del Widget Contatore Numerico (Layout)
Dopo aver configurato le metriche, utilizza le opzioni nel Layout Contatore (Counter Layout) per perfezionare spaziatura, colori, velocità di animazione e layout generale, così i contatori si integrano perfettamente con il tuo brand. I principali controlli di stile includono:
Dimensione immagine (Image Size): Regola le dimensioni delle icone
- Spazio tra i contatori (Space Between Counters): Regola i margini orizzontali per affinare la spaziatura tra i contatori per un risultato curato.
Numero di colonne (Number of Columns): Scegli quanti contatori visualizzare per riga (1-5)
- Opzioni di animazione (Animation Options): Definisci la durata dell'animazione (da 1 s a 15 s) per controllare la velocità del conteggio. Usa il trigger viewport in modo che i numeri si animino solo quando entrano nel campo visivo durante lo scorrimento.
- Colori: Seleziona singoli campioni colore per Numero, Didascalia, Sfondo e Sfondo Contenitore. Aggiungi bordi e ombre per allinearti all'estetica del tuo brand.
Note importanti
- Prestazioni: Mantieni un massimo di 20 contatori per widget per tempi di caricamento ottimali
- Formati immagine: I tipi supportati sono PNG, JPEG e SVG
- Formattazione intelligente: I numeri vengono formattati automaticamente (es. "2500000" diventa "2.5 M") per mantenere i grandi valori puliti e facilmente leggibili.
- Immagini: Le immagini sono facoltative e possono essere attivate o disattivate per ogni singolo contatore
- Animazione: L'animazione si attiva una sola volta per ogni caricamento di pagina per mantenere prestazioni fluide.
Domande frequenti
D: Posso assegnare colori diversi a ogni singolo contatore?
Al momento, gli stili globali si applicano a tutti i contatori per uniformità. Puoi modificare il colore di sfondo o del contenitore a livello globale.
D: I contatori possono includere valori decimali?
Sì! Puoi includere numeri decimali nei valori di inizio e fine.
D: L'animazione riparte se scorro di nuovo verso l'alto?
No. I contatori si animano una sola volta quando entrano per la prima volta nel campo visivo.
D: Devo usare le immagini per ogni contatore?
No. Le immagini sono completamente facoltative e possono essere aggiunte solo dove necessario.
D: Quanti contatori posso aggiungere in un solo widget?
Tecnicamente illimitati. Per le migliori prestazioni, mantieni un massimo di 20 contatori; oltre tale numero, le animazioni potrebbero risultare lente su dispositivi meno potenti.
D: I contatori si adattano automaticamente su mobile?
Sì. Le impostazioni di colonne e spaziatura si adattano alla dimensione dello schermo, così i contatori restano leggibili su qualsiasi dispositivo.
D: Come posso rivedere l'animazione durante la modifica?
Nel pannello delle impostazioni del Contatore Numerico, clicca su Anteprima Animazione (Preview Animation) per rivedere il conteggio progressivo senza uscire dall'editor.