Come aggiungere un widget conto alla rovescia in WordPress (3 modi semplici)

Aggiungere un conto alla rovescia al tuo sito WordPress può renderlo più coinvolgente. Che tu stia mettendo in evidenza il lancio di un prodotto, segnando una data importante o creando attesa per un evento, un conto alla rovescia fa il suo lavoro in modo efficace.

Ad esempio, abbiamo utilizzato i conti alla rovescia sui nostri siti web per evidenziare saldi di prodotti, offerte del Black Friday e altro ancora.

Con pochi semplici passaggi, puoi impostare questo widget accattivante sul tuo sito web. Non solo attira l'attenzione, ma tiene anche informato il tuo pubblico.

In questo articolo, imparerai tre semplici modi per aggiungere un conto alla rovescia al tuo sito WordPress. Anche se non sei esperto di tecnologia, ti abbiamo coperto.

Quando e perché usare un widget conto alla rovescia?

I conti alla rovescia sono versatili e possono essere utilizzati in vari scenari. Aggiungono eccitazione e urgenza, incoraggiando i visitatori a intraprendere azioni.

Stai lanciando un nuovo sito web? Un conto alla rovescia può creare attesa e generare interesse. Visualizzi il timer su una bellissima pagina "Coming Soon" per incoraggiare i visitatori a controllare gli ultimi aggiornamenti.

Un altro ottimo momento per utilizzare un conto alla rovescia è per le prossime vendite o promozioni sul tuo negozio online. Visualizzando un timer, informi i tuoi clienti sulle offerte a tempo limitato, aumentando le vendite e il coinvolgimento.

I timer di conto alla rovescia possono anche essere utili per gli organizzatori di eventi. Che si tratti di un webinar, una conferenza o un raduno sociale, impostare un timer aiuta i partecipanti a sapere esattamente quando si svolgerà l'evento.

Durante la manutenzione del sito web, i timer di conto alla rovescia sono anch'essi utili. Consentono ai visitatori di sapere quando il sito web sarà nuovamente disponibile, in modo da poterli tenere informati e ridurre la frustrazione.

Per usi su piccola scala, come la celebrazione di un traguardo personale o un anniversario, i timer di conto alla rovescia aggiungono un tocco di stile al tuo sito WordPress.

Ora puoi visualizzare un timer di conto alla rovescia nei tuoi post, pagine e nell'area widget della barra laterale.

I timer di conto alla rovescia possono anche essere aggiunti a popup lightbox, barre fluttuanti, finestre di scorrimento e altri elementi di design per coinvolgere i visitatori del sito e riportarli sul tuo sito web.

Poiché ci sono così tanti casi d'uso per un timer di conto alla rovescia, abbiamo elencato 3 metodi diversi per aggiungere un widget timer di conto alla rovescia in WordPress:

• Metodo 1: Aggiungere un widget timer di conto alla rovescia utilizzando il plugin Countdown Timer Ultimate (Gratuito)
• Metodo 2: Aggiungere un widget timer di conto alla rovescia utilizzando OptinMonster (Consigliato)
• Metodo 3: Aggiungere un widget timer di conto alla rovescia utilizzando SeedProd

Tutorial video

Iscriviti a WPBeginner

Se preferisci istruzioni scritte, continua a leggere.

Metodo 1: Aggiungere un widget timer di conto alla rovescia utilizzando il plugin Countdown Timer Ultimate (Gratuito)

Countdown Timer Ultimate è un plugin semplice che ti permette di aggiungere un timer di conto alla rovescia di base al tuo sito web.

In questo tutorial, utilizzeremo il plugin gratuito, poiché ha tutti gli strumenti necessari per creare un timer di conto alla rovescia.

Per iniziare, la prima cosa da fare è installare e attivare il plugin Countdown Timer Ultimate. Se hai bisogno di aiuto, puoi consultare la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, dovrai recarti su Countdown Timer » Add Timer dalla tua area di amministrazione di WordPress.

In questa schermata successiva, puoi dare un titolo al tuo timer. Digita semplicemente qualsiasi titolo desideri nel campo 'Add New Timer'.

Dopodiché, puoi scorrere verso l'area 'Countdown Timer – Settings' per impostare la data e l'ora di scadenza del tuo conto alla rovescia.

Una volta individuato il campo ‘Data e ora di scadenza’, seleziona la data dal selettore di date. Quindi, puoi trascinare i cursori ‘Ora’, ‘Minuto’ e ‘Secondo’ per regolare l’ora di scadenza.

Fai semplicemente clic su ‘Fatto’ per continuare al passaggio successivo.

Il passaggio successivo consiste nel definire l’etichetta del timer.

Per mostrare gli indicatori di giorni, ore, minuti e secondi nel tuo conto alla rovescia, seleziona tutte le caselle nel campo ‘Etichetta Timer’.

Ora, scorriamo la pagina e passiamo alla scheda ‘Design’ per stilizzare il conto alla rovescia.

Nella prima sezione, ‘Impostazioni di design’, puoi scegliere un design e impostare le dimensioni del timer.

Sfortunatamente, gli utenti gratuiti possono scegliere solo il design del timer ‘Stile cerchio 1’. Tuttavia, in ‘Larghezza timer’, possiamo definire quanto sarà largo il nostro timer. Qui lo impostiamo a 850 px.

Sotto ‘Larghezza timer’, troverai la sezione ‘Impostazioni stile cerchio’.

La prima cosa che vorrai fare è scegliere un’animazione. Hai due opzioni: ‘Fluida’ e ‘Tacche’.

Una volta deciso l’animazione del timer, puoi impostare la larghezza del primo piano e dello sfondo del cerchio trascinando i cursori.

Dopodiché, puoi procedere a personalizzare i colori del conto alla rovescia.

Nelle ‘Impostazioni colori sfondo orologio’, puoi regolare il colore di sfondo e cambiare individualmente il colore per giorni, ore, minuti e secondi.

Una volta soddisfatto delle impostazioni, fai clic sul pulsante ‘Pubblica’.

Visualizzare il tuo widget di conto alla rovescia in WordPress

Ora che hai configurato il tuo widget di conto alla rovescia, è ora di aggiungerlo al tuo sito web.

Innanzitutto, fai clic sulla voce di menu ‘Conto alla rovescia’ dal tuo sito web WordPress. Il timer che hai appena creato sarà elencato nella tabella ‘Conto alla rovescia’.

Accanto al tuo conto alla rovescia, vedrai uno shortcode che devi copiare.

Dopo aver copiato lo shortcode, dovrai aprire il tuo post o la tua pagina in cui desideri visualizzare il conto alla rovescia.

Da qui, puoi fare clic sul pulsante ‘+’ per aggiungere il blocco Shortcode. Quindi, incolla semplicemente questo shortcode nell'area dei contenuti del tuo post o pagina di WordPress.

Quindi, dovrai assicurarti di fare clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ per salvare le modifiche.

Ora puoi visitare il tuo sito web per vedere il widget del conto alla rovescia in azione.

Se utilizzi un tema classico, potresti anche essere in grado di aggiungere questo conto alla rovescia alla barra laterale del tuo sito.

Vai semplicemente alla pagina Aspetto » Widget. Quindi, puoi fare clic sul pulsante ‘+’ nella sezione ‘Barra laterale principale’ e cercare il blocco Shortcode.

Fai semplicemente clic su di esso quando appare e incolla lo shortcode del conto alla rovescia.

Una volta terminato, non dimenticare di fare clic sul pulsante ‘Aggiorna’ per mantenere le impostazioni del tuo widget.

Ora puoi visitare il tuo sito per vedere il conto alla rovescia nella barra laterale o nell'area pronta per i widget.

Metodo 2: Aggiungere un widget timer di conto alla rovescia utilizzando OptinMonster (Consigliato)

OptinMonster è il miglior plugin per popup di WordPress sul mercato, ma fa molto di più dei semplici popup. Ti aiuta a convertire i visitatori del sito che abbandonano in iscritti e clienti.

Utilizzando la funzionalità del conto alla rovescia di OptinMonster, puoi integrare il conto alla rovescia in un popup lightbox, un widget della barra laterale, una barra fluttuante o qualsiasi altro tipo di campagna OptinMonster.

Lo strumento offre un modo intelligente per visualizzare un conto alla rovescia con un bel design. Ti consente persino di creare conti alla rovescia evergreen in WordPress.

Un timer del conto alla rovescia evergreen avvia un conto alla rovescia per ogni singolo visitatore. Quindi, il timer inizia quando la persona arriva sul tuo sito. Viene anche definito timer del conto alla rovescia dinamico.

Innanzitutto, visitiamo il sito web OptinMonster e registriamoci per un piano che soddisfi le tue esigenze.

Una volta fatto, puoi installare il plugin OptinMonster sul tuo sito WordPress. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Questo plugin collegherà il tuo sito WordPress all'app OptinMonster. Dopo l'attivazione, puoi fare clic sul pulsante 'Collega un account esistente' e seguire le istruzioni per avviare il processo di integrazione.

Dopodiché, vedrai apparire una finestra popup. Seleziona semplicemente l'indirizzo email che hai utilizzato per registrarti a un account OptinMonster e fai clic sul pulsante 'Connetti a WordPress'.

Il plugin collegherà ora il tuo sito WordPress al tuo account OptinMonster.

Una volta connesso, puoi iniziare a creare una nuova campagna dalla tua dashboard OptinMonster. Vai semplicemente su OptinMonster » Campagne e fai clic sul pulsante 'Crea la tua prima campagna'.

Il plugin offre una varietà di tipi di campagna e modelli tra cui scegliere.

Puoi utilizzare qualsiasi tipo di campagna e aggiungervi il timer del conto alla rovescia. Per questo tutorial, utilizzeremo il tipo di campagna 'Popup'. Quindi, utilizzeremo il modello 'Ottieni un codice sconto'.

Apparirà una finestra popup in cui dovrai nominare il modello. Il nome è solo per tuo riferimento, quindi puoi usare quello che vuoi.

Ad esempio, abbiamo chiamato la nostra campagna 'Timer del conto alla rovescia'.

Una volta fatto ciò, fai clic su ‘Inizia a costruire’. OptinMonster ti reindirizzerà quindi all’interfaccia del builder.

Da qui, esploriamo la sezione ‘Blocco’ nel pannello di sinistra. Quindi, trascina semplicemente il blocco ‘Conto alla rovescia’ e rilascialo sull’anteprima nel pannello di destra quando lo vedi.

Successivamente, puoi selezionare il ‘Tipo di conto alla rovescia’ dal campo a discesa nel pannello della barra laterale. Ci sono due opzioni, ‘Statico’ e ‘Dinamico’.

Ora, la scelta tra i due tipi dipende interamente dal tuo obiettivo. Un timer statico, come suggerisce il nome, rimane fisso a una singola data e ora di fine, rendendolo ideale per eventi unici come il lancio di un prodotto o webinar.

Ma cosa succede se vuoi creare un senso di urgenza ricorrente? È qui che il timer dinamico torna utile.

Diciamo che il tuo negozio online esegue una vendita lampo ogni settimana. Un timer dinamico si reimposterà automaticamente dopo ogni periodo di vendita, il che può essere di grande aiuto.

Per questa guida, creeremo un timer conto alla rovescia dinamico per promuovere vendite lampo settimanali.

Quindi, scegliamo ‘Dinamico’ dal menu a discesa e impostiamo la data e l’ora di scadenza. Quindi, potresti anche voler attivare l’opzione ‘Monitoraggio conversioni?’ per raccogliere insight sulla campagna.

Se vuoi, puoi personalizzare l’aspetto del timer conto alla rovescia.

Passa semplicemente alla scheda ‘Avanzate’ e troverai le opzioni di personalizzazione per modificare il colore di sfondo del timer, i font, le ombre e altro ancora.

Una volta impostato tutto, vai alla scheda ‘Regole di visualizzazione’.

È qui che controlli esattamente quando e su quali pagine apparirà il tuo popup. L’impostazione predefinita è dopo 5 secondi su ogni pagina, ma puoi facilmente personalizzarla per soddisfare le tue esigenze.

In alternativa, puoi sfruttare il MonsterLink di OptinMonster.

Questa funzionalità ti consente di attivare la visualizzazione del popup quando gli utenti fanno clic su un link o un pulsante sul tuo sito. In questo modo, i visitatori hanno il controllo diretto su quando desiderano visualizzare la tua offerta o il tuo messaggio.

Per utilizzare MonsterLink, dovrai prima fare clic sul menu a discesa 'tempo sulla pagina'. Quindi, seleziona semplicemente 'Quando (Trigger)' e poi 'MonsterLink (Al clic)'.

Una volta aggiunto, puoi fare clic su 'Copia codice MonsterLink'. Ti servirà nel processo di incorporamento.

Quindi, puoi eliminare l'altra regola di visualizzazione facendo clic sull'icona del cestino.

Ora è il momento di pubblicare la campagna con il conto alla rovescia. Per fare ciò, spostiamoci nella scheda 'Pubblica'.

Da qui, puoi cambiare lo stato da 'Bozza' a 'Pubblica'. Dopodiché, fai semplicemente clic sul pulsante 'Salva' ed esci dall'editor.

Verrai quindi reindirizzato a una pagina di OptinMonster, dove dovrai verificare lo stato della tua campagna.

Nella sezione 'Visibilità e stato', procedi e cambia lo stato da 'In sospeso' a 'Pubblicato'.

Non dimenticare di fare clic sul pulsante verde 'Salva modifiche' per assicurarti che le tue modifiche vengano salvate.

L'unica cosa che resta da fare ora è aggiungere il codice MonsterLink al tuo sito web WordPress.

Prima di tutto, vorrai aprire il post o la pagina in cui desideri mostrare la campagna con il conto alla rovescia.

Ad esempio, aggiungeremo il nostro alla pagina 'Galleria' sul nostro sito di fotografia dimostrativo. Quindi, navighiamo su Pagine » Tutte le pagine e facciamo clic su 'Modifica' sulla pagina 'Galleria'.

Nell'editor di pagina, puoi fare clic sul pulsante '+' e cercare il blocco HTML personalizzato. Fai semplicemente clic per aggiungerlo alla pagina.

Nel blocco 'HTML personalizzato', incolla semplicemente il codice MonsterLink che hai copiato in precedenza.

Ecco come potrebbe apparire nell'editor a blocchi della pagina:

Ora, la call to action 'Iscriviti ora!' potrebbe non essere adatta allo scopo della campagna.

Quindi, cambiamola in 'Ottieni il nostro codice promozionale limitato', 'Sblocca sconti esclusivi' o qualcos'altro che si adatti meglio al contesto. Una volta fatto, puoi procedere e 'Aggiornare' o 'Pubblicare' la pagina.

Ora, se visiti la pagina, vedrai MonsterLink in azione.

Prova semplicemente a fare clic su di esso e vedrai la campagna apparire con il conto alla rovescia.

Ecco come appare sulla nostra pagina demo ‘Galleria’:

Metodo 3: Aggiungere un widget timer di conto alla rovescia utilizzando SeedProd

SeedProd è il miglior costruttore di temi e landing page per WordPress.

Il suo costruttore drag-and-drop ti consente di creare fantastiche landing page e aggiungere un conto alla rovescia per catturare l'attenzione dei tuoi visitatori.

Per utilizzare la funzione del conto alla rovescia, avrai bisogno di SeedProd Pro. Con il piano Pro, puoi anche ottenere l'accesso a diversi modelli, blocchi di pagine per la personalizzazione, integrazioni di email marketing e altro ancora.

La prima cosa che devi fare è installare e attivare il plugin SeedProd Pro sul tuo sito web WordPress. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, puoi andare su SeedProd » Impostazioni dalla tua bacheca di WordPress per aggiungere e verificare la tua chiave di licenza. Puoi ottenere questa chiave dal tuo account SeedProd.

Dopo aver inserito la chiave di licenza, puoi fare clic sul pulsante 'Verifica chiave'.

Puoi anche installare SeedProd Pro manualmente. Prima di farlo, assicurati di aver scaricato il file .zip di SeedProd Pro dal tuo account SeedProd.

Quindi, puoi andare su Plugin » Aggiungi nuovo plugin e fare clic sul pulsante 'Carica plugin' in modo che venga visualizzata l'opzione 'Scegli file'. Procedi e carica il file .zip di SeedProd Pro.

Dopo di che, fai semplicemente clic sul pulsante 'Installa ora'.

Ora sei pronto per creare una nuova landing page. Per iniziare, dovrai navigare su SeedProd » Landing Pages.

SeedProd ti consente di impostare diversi tipi di pagine, tra cui pagine 'coming soon', pagine carrello WooCommerce personalizzate, pagine di accesso e pagine 404. Puoi anche creare altre landing page cliccando sul pulsante ‘Aggiungi nuova landing page’, come una pagina di ringraziamento o una pagina per iscriversi a un webinar.

Per questo tutorial, useremo la pagina ‘Coming Soon’. È un ottimo posto per aggiungere un conto alla rovescia e ricordare al tuo pubblico un prodotto o un evento imminente.

Clicchiamo sul pulsante ‘Imposta una pagina Coming Soon’.

Successivamente, selezionerai un modello per la tua landing page.

Sebbene ci sia un'opzione per creare una pagina da zero utilizzando un modello vuoto, consigliamo di utilizzare un modello, poiché consente di risparmiare tempo e ti permette di modificare il design come desideri.

Una volta trovato il modello perfetto, puoi passarci sopra con il mouse e cliccare sul pulsante ‘spunta’ per utilizzarlo.

Nella schermata successiva, verrai portato al page builder drag-and-drop di SeedProd sotto la scheda ‘Design’.

Qui, puoi personalizzare la landing page aggiungendo o rimuovendo sezioni e blocchi. Puoi anche formattare il layout della pagina.

Per aggiungere il conto alla rovescia, scorri semplicemente il pannello di sinistra fino alla sezione dei blocchi 'Avanzate'. Quindi, trascina e rilascia il blocco 'Conto alla rovescia' ovunque sulla tua landing page.

Una volta aggiunto il blocco del conto alla rovescia, personalizziamolo. Fai semplicemente clic su di esso e vedrai le opzioni di personalizzazione nel pannello di sinistra.

Ci sono 3 schede che puoi controllare: 'Contenuto', 'Modelli' e 'Avanzate'. Controlliamole una per una.

Nella scheda 'Contenuto', puoi scegliere un tipo di conto alla rovescia, impostare la data e l'ora di fine, selezionare un fuso orario, regolare l'allineamento del timer e altro ancora.

Ora, passiamo a 'Modelli'.

Qui, SeedProd ti consente di scegliere tra 5 stili di conto alla rovescia disponibili.

Infine, la scheda 'Avanzate' ha diverse sezioni.

La sezione 'Stili' ti consente di modificare le impostazioni di tipografia, i colori e i bordi del timer.

Quindi, potresti voler scorrere la scheda 'Avanzate' fino alla sezione 'Effetti di animazione'.

Qui, puoi applicare animazioni per evidenziare il conto alla rovescia quando i visitatori lo vedono. Fai semplicemente clic sul menu a discesa e scegli tra gli effetti disponibili, come 'Flash', 'Pulse', 'Swing', 'Wobble' e altro.

Se desideri regolare gli altri elementi della landing page, come i testi o i pulsanti dei social media, puoi fare clic su di essi. Quindi, SeedProd aprirà le opzioni di personalizzazione.

Quando tutto è impostato, fai clic sulla scheda 'Impostazioni pagina' per pubblicare la tua landing page con un conto alla rovescia.

La prima cosa che vorrai fare è dare un titolo alla landing page. Ad esempio, abbiamo chiamato la nostra landing page 'Coming Soon'.

Successivamente, puoi cambiare lo 'Stato della pagina' da 'Bozza' a 'Pubblica'. Hai anche l'opzione di mostrare o nascondere il link 'Powered by SeedProd'.

Successivamente, controlliamo 'Controllo accessi' sotto la scheda 'Impostazioni pagina' e gestiamo chi può visualizzare la tua landing page.

Questa funzionalità è molto utile se desideri che determinate persone possano bypassare la pagina 'Coming Soon' e lavorare allo sviluppo del tuo sito web. SeedProd ti consente anche di includere ed escludere gli URL su cui verrà visualizzata la pagina 'Coming Soon'.

Per impostazione predefinita, la pagina sarà visibile sull'intero sito web. Tuttavia, puoi modificarla per mostrarla solo sulla homepage o su URL specifici.

Successivamente, puoi ottimizzare la tua pagina per i motori di ricerca andando nelle impostazioni SEO.

SeedProd ti consente di aggiungere un titolo SEO, una descrizione, una favicon e un'anteprima per i social media.

Se desideri aggiungere snippet di codice alla tua landing page, vai alla sezione 'Scripts' nelle Impostazioni Pagina. Qui puoi aggiungere script all'header, al body e al footer della tua pagina.

Ad esempio, puoi aggiungere il codice di monitoraggio di Google Analytics nel campo 'Header Scripts' per vedere come le persone utilizzano la tua landing page.

Una volta terminato, assicurati di fare clic sul pulsante 'Salva'. Puoi anche visualizzare in anteprima la tua landing page per assicurarti che tutto sia impostato correttamente.

Dopodiché, fai semplicemente clic sul pulsante 'X' per chiudere l'editor di SeedProd.

Ora, andiamo su SeedProd » Landing Pages e cambiamo lo stato della tua pagina 'Coming Soon' in 'Attiva'.

Fatto. La tua landing page con un conto alla rovescia sarà online.

Ora puoi visitare il tuo sito web per vedere il conto alla rovescia 'coming soon' in azione.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un widget timer per il conto alla rovescia in WordPress. Successivamente, potresti anche voler consultare altri trucchi interessanti per la progettazione di siti web su come aggiungere un ticker di notizie scorrevole e come aggiungere testimonianze rotanti in WordPress.

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