Non perderti una notizia!

Iscriviti ora per rimanere sempre aggiornato sulle novità di email e SMS marketing.

Sì, voglio ricevere aggiornamenti sulla formazione e sugli eventi di MailUp.
Ricevi aggiornamenti
su Messenger
10 min
  • 7

Recentemente, in questo post, abbiamo studiato i modi in cui i brand utilizzano i timer di conto alla rovescia nelle loro campagne email. I countdown sono elementi in grado di aggiungere dinamismo e interattività alle email, e al contempo di attirare l’attenzione sul messaggio. I brand li integrano nella propria comunicazione per incoraggiare gli utenti a sfruttare un’offerta last minute, a registrarsi a workshop, a seguire un evento e molto altro.

Oggi ti mostriamo in un tutorial semplicissimo come inserire un timer di conto alla rovescia nelle tue email. Sfrutteremo il blocco HTML dell’editor drag & drop di MailUp e un tool gratuito disponibile online che consente di generare il codice HTML per il timer.

Timer email: strumenti necessari

Oggi utilizzeremo due tool per costruire il nostro timer dinamico:

  1. L’editor drag & drop BEE di MailUp. Il suo blocco di contenuto HTML (il settimo riquadro in basso, nell’immagine sotto) consente di inserire stringhe personalizzate di codice HTML, esattamente come quella del timer di cui avremo bisogno.
  2. Un tool per la generazione del codice HTML sottostante al timer. È bene assicurarsi di scegliere un tool che abbia come output una GIF animata, in modo da sapere esattamente quale sarà la resa in email. Noi abbiamo scelto MotionMail, ma ne esistono molti altri a disposizione sul web (più dettagli nell’ultimo paragrafo).

Timer email BEE

Step 1: Creare l’email con l’editor BEE

Proveremo a replicare il timer di conto alla rovescia che appare nel messaggio di fine saldi di stagione dell’e-commerce J. Crew Factory.

J Crew timer email

Una volta entrati nell’editor BEE, bisogna aprire un template semplice a colonna singola per poter iniziare a costruire l’header. Si parte con l’inserire il blocco immagine per il logo…

Timer conto alla rovescia email logo

Per passare al menù di navigazione…

Timer conto alla rovescia email navigazione

E al blocco HTML per il timer…

Timer conto alla rovescia email blocco HTML

Aggiungiamo un altro blocco di testo sotto il timer e siamo pronti per iniziare a personalizzare l’email. A livello di contenuto, dovremo:

  • Caricare il logo J.Crew Factory
  • Aggiornare il testo

A livello di formattazione, invece, occorre:

  • Aggiornare il colore e lo stile del font (abbiamo scelto il Tahoma corpo 14, nero su sfondo bianco e bianco su sfondo nero)
  • Modificare in nero l’HTML relativo al colore di sfondo della parte inferiore dell’header
  • Inserire linee divisorie sopra e sotto il menù di navigazione

Dovremmo già essere a buon punto! Ecco come si mostra la parte superiore dell’email a questo punto:

Timer email header

Step 2: Creare il timer con MotionMail

Creare un timer con MotionMail è facile e veloce. Si inizia con il creare un account gratuito, scegliere lo stile del timer e inserire le specifiche di fine (data, ora, fuso orario) nel riquadro sinistro della schermata. In tempo reale viene generata una preview nella parte bassa della pagina.

MotionMail

Il secondo step è customizzare font e colori, nel riquadro di destra. Scegliamo di rendere lo sfondo interamente nero, mentre i numeri diventano verdi per coordinarsi con il resto dell’email di J.Crew. Potremmo anche inserire via HTML il codice colore esatto per essere pienamente in linea con la corporate identity del brand, utilizzando uno strumento semplice e comodissimo come ColorZilla.

MotionMail 02

Dopo aver cliccato Save this timer, MotionMail ci porta in una nuova finestra che contiene il blocco di codice HTML e le statistiche di utilizzo del timer, inizialmente a zero in quanto il timer non è ancora stato utilizzato.

MotionMail 03

Step 3: Inserire il timer nell’email

Occorre ora copiare da MotionMail il codice generato.

MotionMail 05

Tornati nell’editor BEE, basta cliccare sul blocco HTML e incollare il codice all’interno del campo Proprietà Contenuto, sulla destra. In questo modo, il timer si attiva all’interno del messaggio:

MotionMail 04

In modalità Preview possiamo controllare che la larghezza del timer si adatti correttamente alla visualizzazione su schermi più piccoli. Funziona!

Timer email preview

Strumenti aggiuntivi per la creazione di timer

Sono diverse le piattaforme online che consentono di creare in modo facile e veloce dei timer da inserire nelle email. Eccone alcuni:

Ne conosci altri? Condividi la tua esperienza nei commenti in basso!

Ti è piaciuto questo articolo? Ne abbiamo molti altri in serbo per te.

Iscriviti ora per rimanere sempre aggiornato sulle novità di email e SMS marketing.

Leggi anche

Email di buon compleanno: il modo più semplice per quadruplicare i tassi di conversione

Una delle tipologie di email automatiche più frequenti, più semplici e più efficaci è l'email di buon compleanno. In questo blog post scopriamo come strutturarla, ...

Continua a leggere

Come creare una CTA bulletproof per le email

Il bottone di call-to-action è la chiave per portare il lettore a compiere l'azione desiderata nell'email. In questo tutorial pratico impariamo a progettare una CTA ...

Continua a leggere

SMTP: che cos’è e come può aiutare la tua strategia di Email Marketing

Da semplice protocollo a server integrabile in qualsiasi sistema esterno, per inviare email transazionali personalizzate e con elevati tassi di recapito. Scopri l’evoluzione dell’SMTP in ...

Continua a leggere

Controllo Deliverability: miglioriamo la consapevolezza e l’impiego dell’autenticazione delle email

Sei davvero chi dici di essere? Non posso verificarlo. Quindi sposto la tua email nella cartella spam. Ecco cosa succede a molte campagne email. Questo è uno dei ...

Continua a leggere

Email transazionali per il Non Profit: uno strumento utile a costi ridotti

Nel mondo Non Profit, come in tanti altri settori, spesso le email transazionali vengono trascurate, prestando poca attenzione al copy e alla grafica. Questo ne vanifica il ...

Continua a leggere

Come scrivere un’email di conferma iscrizione che lasci il segno

Quando considerata esclusivamente 'di servizio', l'email di conferma iscrizione viene spesso relegata a un messaggio scarno, impersonale, troppo debole. È invece importante utilizzare anche questo momento ...

Continua a leggere