Questo articolo ti mostra come usare il Widget Contatore Numerico per evidenziare le tue metriche più importanti in modo animato e d'impatto! Da traguardi di fatturato a clienti soddisfatti e statistiche di social proof, il Contatore Numerico trasforma semplici numeri in elementi visivi dinamici che catturano l'attenzione e rafforzano l'identità del tuo brand.

INDICE DEI CONTENUTI

Cos'è il Widget Contatore Numerico?

Il Widget Contatore Numerico è un elemento nativo del builder Funnel e Siti Web che trasforma valori numerici in animazioni di conteggio progressive. Combinando formattazione intelligente, controlli di layout personalizzabili e trigger allo scroll, ti permette di presentare i tuoi risultati chiave in modo visivamente efficace e coerente con il brand.

Schermata 1 — Funnel e Siti Web: Widget Contatore Numerico

Vantaggi principali del Widget Contatore Numerico

I numeri animati non decorano semplicemente la pagina — aiutano a catturare l'attenzione e comunicano credibilità in modo immediato. Ecco perché questo widget fa la differenza:

  • Contatori multipli: Visualizza più contatori in un unico elemento per mettere in evidenza le tue metriche più importanti

  • Formattazione intelligente dei numeri: Abbrevia automaticamente le cifre grandi con K, M, B o T per una lettura immediata

  • Campi Prefisso e Suffisso: Aggiungi $, €, %, + o qualsiasi testo personalizzato prima o dopo i valori

  • Immagini specifiche per contatore: Abbina ogni numero a un'icona, badge o logo per rafforzarne il significato

  • Precisione di layout: Controlla il numero di colonne e regola i gap per un allineamento pixel-perfect su ogni dispositivo

  • Controlli di stile completi: Personalizza colori, bordi, ombre e tipografia per adattarti a qualsiasi brand

Come aggiungere il Widget Contatore Numerico a un sito o Funnel

Aggiungi rapidamente il widget a qualsiasi pagina di un Funnel o sito web seguendo questi passaggi:

  1. Vai su Sites → Funnels oppure Sites → Websites

Schermata 2 — Funnel e Siti Web: Widget Contatore Numerico

  1. Clicca il pulsante blu Edit sulla pagina o sullo step desiderato

Schermata 3 — Funnel e Siti Web: Widget Contatore Numerico

  1. Seleziona + Add Element nella barra laterale e individua l'elemento Number Counter

Schermata 4 — Funnel e Siti Web: Widget Contatore Numerico

  1. Trascina Number Counter nel tuo layout nel punto in cui vuoi che appaiano le metriche.

Schermata 5 — Funnel e Siti Web: Widget Contatore Numerico

Configurare ogni metrica del contatore (Valori di configurazione)

Dopo aver inserito il widget nel canvas, puoi adattare ogni contatore alle tue esigenze. Aggiungi nuove metriche, rimuovi quelle non necessarie e personalizza ogni dettaglio direttamente dal pannello delle impostazioni.

  • Aggiungere/Rimuovere contatori: Clicca Add Counter per creare altre metriche oppure l'icona del cestino per eliminarne una.

  • Caption: Digita un'etichetta come "Total Sales" per indicare ai visitatori cosa rappresenta il numero.

  • Image: Carica un'icona PNG, JPEG o SVG e regolane le dimensioni con il cursore.

  • Start & End Values: Definisci da dove inizia l'animazione (es. 0) e dove termina (es. 10 000).

  • Prefix/Suffix: Aggiungi contesto con $, €, %, +, o testo personalizzato posizionato prima o dopo il valore.

Schermata 6 — Funnel e Siti Web: Widget Contatore Numerico

Stilizzare il Widget Contatore Numerico (Personalizza il layout)

Dopo aver configurato le metriche, usa le opzioni disponibili in Counter Layout per affinare spaziatura, colori, velocità dell'animazione e layout complessivo, così i contatori si integrano perfettamente con il tuo brand. I principali controlli di stile includono:

  • Image Size: Regola le dimensioni delle icone

  • Space Between Counters: Regola i gap orizzontali per ottimizzare la spaziatura tra i contatori e ottenere un aspetto curato.

  • Number of Columns: Scegli quanti contatori visualizzare per riga (1-5)

  • 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 vengono visualizzati scorrendo la pagina.

  • Colors: Seleziona le singole tinte per Number, Caption, Background e Container Background. Aggiungi bordi e ombre per allinearti all'estetica del tuo brand.

Schermata 7 — Funnel e Siti Web: Widget Contatore Numerico

Note importanti

  • Performance: Mantieni un massimo di 20 contatori per widget per tempi di caricamento ottimali

  • Formati immagine: I formati supportati sono PNG, JPEG e SVG

  • Formattazione intelligente: I numeri vengono formattati automaticamente (es. "2500000" diventa "2.5 M") per mantenere le statistiche grandi leggibili e ordinate.

  • 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 garantire prestazioni fluide.

Domande frequenti

D: Posso assegnare colori diversi a ogni singolo contatore?

Attualmente gli stili globali si applicano a tutti i contatori per garantire coerenza. Puoi modificare il colore di sfondo o del contenitore a livello globale.

D: I contatori possono includere decimali?

Sì! Puoi inserire valori decimali nei numeri di inizio e fine.

D: L'animazione si riavvia se torno su con lo scroll?

No. I contatori si animano una sola volta quando entrano per la prima volta nel viewport.

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 unico widget?

Tecnicamente non c'è limite. Per le migliori prestazioni, mantieni un massimo di 20 contatori; oltre questa soglia, le animazioni potrebbero risultare lente su dispositivi con hardware meno potente.

D: I contatori si adattano automaticamente su mobile?

Sì. Le impostazioni delle colonne e la spaziatura dei gap si adattano alle dimensioni dello schermo, così i contatori rimangono leggibili su qualsiasi dispositivo.

D: Come posso rivedere l'animazione durante la modifica?

Nel pannello delle impostazioni del Number Counter, clicca Preview Animation per rivedere il conteggio senza uscire dall'editor.

Articoli correlati

  • Panoramica dei Siti

  • Primi passi - Lancia un Funnel

  • Personalizzazioni delle animazioni in Funnel e Siti Web

  • Come usare i timer con conto alla rovescia nei Funnel?