Come mostrare un'animazione di conteggio numerico in WordPress

È probabile che il tuo sito web abbia numeri impressionanti da condividere, come il numero di clienti, anni di esperienza, progetti completati o premi vinti.

La sfida è far sì che i visitatori notino e si interessino a questi successi invece di scorrerli via. È qui che brillano i contatori numerici animati.

Quando le tue statistiche aumentano da zero mentre i visitatori raggiungono quella sezione, si crea una mini-celebrazione del tuo successo. Questo movimento attira l'attenzione e rende i tuoi successi più significativi e affidabili.

Grazie alla nostra esperienza nell'ottimizzazione dei siti WordPress per un maggiore coinvolgimento, abbiamo scoperto che aggiungere queste animazioni è più facile di quanto la maggior parte delle persone pensi.

Ti mostreremo esattamente come aggiungerle utilizzando 2 semplici metodi.

Prima di aggiungere un'animazione di conteggio numerico in WordPress... 📊

Prima di addentrarci nel "come", consideriamo rapidamente dove i contatori animati funzionano meglio sul tuo sito web WordPress:

• Sezioni hero della homepage per mostrare i principali successi
• Pagine prodotto per evidenziare i tassi di soddisfazione dei clienti
• Pagine "Chi siamo" per visualizzare le tappe fondamentali dell'azienda
• Landing page per enfatizzare la prova sociale
• Sezioni prezzi per mostrare la base clienti o i risparmi

Dalla nostra esperienza, abbiamo scoperto che il posizionamento strategico è importante quanto l'animazione stessa. Ad esempio, OptinMonster utilizza efficacemente un contatore numerico per visualizzare le sessioni di visitatori mensili ottimizzate, posizionandolo proprio dove i potenziali clienti stanno prendendo le loro decisioni.

Aggiungere e personalizzare un conteggio numerico in WordPress di solito richiede la modifica del codice. Questo può essere complicato per i principianti che non sanno scrivere codice.

Detto questo, vediamo come puoi mostrare un contatore numerico animato in WordPress. Copriremo 2 semplici metodi utilizzando un website builder premium e un plugin gratuito.

Puoi fare clic sui collegamenti sottostanti per passare alla sezione desiderata:

Opzione 1: Crea una Landing Page con Animazioni Numeriche (Consigliato)

Se stai creando una landing page e desideri il pieno controllo sull'aspetto e sul comportamento dei tuoi contatori numerici, un page builder è la tua migliore opzione.

Abbiamo testato decine di page builder per WordPress nel corso degli anni, e SeedProd spicca costantemente per le sue ampie opzioni di personalizzazione, specialmente per elementi dinamici come i contatori numerici.

Per maggiori informazioni, puoi consultare la nostra recensione approfondita di SeedProd.

La prima cosa che dovrai fare è installare e attivare SeedProd. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin per WordPress.

Dopo l'attivazione, SeedProd ti chiederà di inserire la chiave di licenza. Puoi trovare la chiave di licenza nell'area del tuo account e nell'email di conferma dell'acquisto.

Successivamente, dovrai andare su SeedProd » Landing Pages dal pannello di amministrazione di WordPress.

SeedProd ti consente di creare landing page personalizzate dal design professionale, inclusa una pagina 'coming soon', pagina di manutenzione, pagina di accesso e pagina 404.

Fai clic sul pulsante 'Aggiungi nuova landing page'.

Dopodiché, puoi selezionare un template SeedProd per la tua landing page e mostrare il contatore numerico animato.

Passa semplicemente il mouse su un template e fai clic sul pulsante di controllo arancione.

Si aprirà ora una finestra popup. Inserisci semplicemente un nome per la pagina e un URL per la pagina.

Dopodiché, fai clic sul pulsante 'Salva e Inizia a Modificare la Pagina'.

Questo avvierà il builder drag-and-drop di SeedProd.

Successivamente, puoi modificare il tuo template di pagina aggiungendo blocchi diversi o facendo clic sugli elementi esistenti nella pagina.

Per aggiungere un conteggio numerico animato, trascina semplicemente il blocco Contatore dal menu sulla sinistra e rilascialo sul template.

Dopodiché, puoi selezionare il blocco Contatore per personalizzarlo ulteriormente.

Ad esempio, ci sono opzioni per modificare i numeri di inizio e fine del contatore, inserire un prefisso e un suffisso numerico e modificare il titolo.

Successivamente, puoi passare alla scheda 'Avanzate' sotto le impostazioni del blocco Contatore sulla sinistra.

Qui troverai altre opzioni per modificare lo stile, lo schema di colori, lo spazio, il font e altro per il tuo blocco Contatore.

Successivamente, fai clic sull'interruttore 'Salva' in alto.

Ora puoi scegliere 'Pubblica' dal menu a discesa.

Per vedere il contatore numerico animato in azione, visita il tuo blog WordPress.

Questo è come appariva sul nostro sito demo.

Opzione 2: Aggiungi un'animazione rapida di conteggio numerico a qualsiasi pagina utilizzando un plugin

A volte, un page builder richiede troppo lavoro solo per aggiungere un semplice contatore numerico. Questo è particolarmente vero se vuoi aggiungere il contatore a un post o una pagina esistente.

È qui che entra in gioco il plugin Counter Number. È una soluzione gratuita che ti consente di aggiungere animazioni numeriche ovunque sul tuo sito utilizzando shortcode.

Innanzitutto, dovrai installare e attivare il plugin Counter Number. Per maggiori dettagli, consulta la nostra guida su come installare un plugin WordPress.

Dopo l'attivazione, puoi andare su Counter Numbers » All counters dalla tua bacheca di WordPress e fare clic sul pulsante 'Add New Counter'.

Dopodiché, puoi inserire un titolo per il tuo numero contatore.

Nella versione gratuita, puoi selezionare solo il modello di design semplice.

Successivamente, puoi aggiungere i dettagli del numero contatore. Ci sono opzioni per modificare il titolo del contatore, selezionare un'icona e inserire il valore del numero contatore.

Puoi aggiungere quanti numeri contatore desideri facendo clic sul pulsante 'Add New Counterbox' in basso.

Oltre a ciò, ottieni più opzioni di personalizzazione dal pannello sulla tua destra.

Ad esempio, il plugin ti consente di modificare il colore del titolo del contatore, il colore del numero, la dimensione dell'icona, la dimensione del carattere, la famiglia di caratteri e altro ancora.

Dopo aver apportato le modifiche, scorri verso l'alto e pubblica il tuo contatore.

Successivamente, puoi recarti su Counter Numbers » All counters dalla tua bacheca di WordPress.

Vai avanti e copia lo Shortcode del Contatore. Sarà simile a questo:

[COUNTER_NUMBER id=41]

Successivamente, puoi posizionare questo elemento di design di WordPress ovunque sul tuo sito web, dai post alle pagine, alle barre laterali.

Aggiungi semplicemente un nuovo post o una nuova pagina, oppure modifica uno esistente. Una volta che sei nell'editor di contenuti, fai clic sul segno '+' e aggiungi un blocco Shortcode.

Successivamente, puoi incollare lo shortcode del numero contatore nel blocco.

Da qui, visualizza in anteprima e pubblica la tua pagina o il tuo post per vedere il conteggio animato dei numeri in azione.

Bonus: Aggiungi uno sfondo animato accattivante 🌟

Dopo aver migliorato il tuo sito con contatori numerici accattivanti, ti consigliamo di elevare il suo appeal visivo con uno sfondo animato.

Questo elemento rende la tua pagina più interattiva e cattura l'attenzione del tuo pubblico non appena arriva. Inoltre, conferisce un aspetto di alta qualità senza sovraccaricare i tuoi contenuti.

Un modo semplice per aggiungere uno sfondo animato è utilizzare la libreria particle.js. Questa libreria JavaScript leggera consente effetti visivi sorprendenti con particelle personalizzabili.

Puoi utilizzare il sito web particle.js di Vincent Garreau per modificare le tue impostazioni e generare il codice.

Puoi modificarne le dimensioni, il colore, la forma e il movimento, e rispondono alle interazioni dell'utente come i movimenti del mouse o i clic.

Su WPBeginner, abbiamo trovato impressionante la funzionalità integrata di sfondo particellare di SeedProd. Con SeedProd, integrare particle.js nelle tue pagine è facile e non richiede alcuna codifica.

Seleziona semplicemente lo stile Personalizzato e fai clic sul collegamento fornito in SeedProd per generare il tuo sfondo particellare personalizzato.

Per approfondire questo metodo, consulta la nostra guida dettagliata su come aggiungere uno sfondo animato in WordPress.

Domande frequenti sull'aggiunta di animazioni di conteggio numerico

Ecco alcune domande che i nostri lettori hanno posto frequentemente prima di aggiungere animazioni di conteggio numerico in WordPress:

Come aggiungo un contatore in WordPress?

Il modo più semplice è utilizzare un plugin come SeedProd o Counter Number. Questi strumenti ti permettono di trascinare e rilasciare contatori numerici sulle tue pagine senza scrivere codice.

Come aggiungo animazioni in WordPress?

Puoi aggiungere animazioni utilizzando un page builder come SeedProd. Seleziona semplicemente un elemento sulla tua pagina e scegli un effetto come dissolvenza, zoom o scorrimento.

Come creare un conto alla rovescia in WordPress?

Puoi creare un conto alla rovescia utilizzando il blocco countdown in SeedProd. Questo è ottimo per creare urgenza nelle pagine di vendita o nelle pagine "coming soon".

Come aggiungere un contatore in CSS?

Puoi usare la proprietà CSS counter-increment, ma è complessa per i principianti. Ti consigliamo di utilizzare un plugin WordPress per aggiungere contatori animati senza codifica.

Come aggiungere icone animate in WordPress?

Puoi utilizzare un page builder come SeedProd per aggiungere icone con effetti di animazione. Scegli semplicemente un'icona e seleziona uno stile di animazione dal menu delle impostazioni.

Come creare un elenco numerato in WordPress?

Puoi utilizzare il blocco Elenco predefinito nell'editor di WordPress. Seleziona semplicemente l'opzione elenco numerato dalla barra degli strumenti e aggiungi i tuoi elementi.

Speriamo che questo articolo ti abbia aiutato a imparare come mostrare un'animazione di conteggio dei numeri in WordPress. Puoi anche consultare il nostro tutorial su come aggiungere uno sfondo animato in WordPress e la nostra selezione di esperti dei migliori costruttori di temi WordPress per progettare il tuo tema perfetto.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.