Template email HTML gratuiti (a tabelle e pronti per la dark mode)
Template email HTML gratuiti
Template email HTML gratuiti: 8 a tabelle, pronti per la dark mode, da copiare e incollare | We.Inc
Otto template email HTML gratuiti da modificare e vedere in anteprima sulla pagina: benvenuto, ricevuta, reset della password, newsletter, verifica email, spedizione, invito a un evento e feedback. Layout a tabelle, pulsanti a prova di client, supporto alla dark mode e una checklist di test.
Un'email HTML affidabile usa tabelle annidate per il layout, stili inline, una larghezza del contenuto di circa 600 pixel, pulsanti fatti di link con padding invece che di immagini, e testo alternativo su ogni immagine. Gli otto template qui sotto seguono queste regole, supportano la dark mode dove i client lo permettono e si possono modificare e vedere in anteprima dal vivo prima di copiarli.
Gli otto template
Template
Inviato quando
Benvenuto
Qualcuno si registra
Ricevuta
Un pagamento va a buon fine
Reset della password
Qualcuno chiede il reset
Newsletter
Notizie periodiche
Verifica email
Dopo la registrazione
Ordine spedito
Un ordine parte
Invito a un evento
Inviti ai clienti
Richiesta di feedback
Dopo una visita o un ordine
Modifica il codice a sinistra di qualsiasi template e l'anteprima a destra si aggiorna. Le anteprime sono generate dal tuo browser, quindi considerale un'indicazione: i client email variano, ed è per questo che la checklist di test in fondo è importante.
Scegli il template che corrisponde all'email che ti serve.
Cambia testi, link e colori nel riquadro del codice e guarda l'anteprima.
Copia l'HTML nell'opzione HTML personalizzato della tua piattaforma email.
Invia email di prova a caselle reali su telefono e desktop, in modalità chiara e scura.
Tieni un'unica azione principale per email; un secondo pulsante dimezza l'attenzione.
Scrivi il preheader di proposito; altrimenti i client mostrano il primo testo che trovano.
Ospita le immagini sul tuo dominio o sulla tua piattaforma email, con URL https assoluti.
Usa il nostro generatore di template email HTML se preferisci compilare un modulo.
Domande frequenti
Perché le email HTML usano ancora le tabelle?
Alcuni client email, in particolare quelli desktop più vecchi, usano motori di rendering che ignorano il layout CSS moderno. Le tabelle sono l'unico metodo di layout che funziona su tutti.
Come faccio funzionare un'email in dark mode?
Aggiungi i meta tag color-scheme e una media query prefers-color-scheme con i tuoi colori scuri. I client che la supportano li usano; gli altri possono invertire i colori da soli, quindi evita testo incorporato nelle immagini e prova entrambe le modalità.
Posso usare questi template per scopi commerciali?
Sì. Li abbiamo scritti per questa pagina; copiali, modificali e inviali in qualsiasi progetto.
Che cos'è un pulsante a prova di client?
Un pulsante costruito con un link con padding dentro una cella di tabella colorata invece che con un'immagine. Resta visibile e funzionante anche quando le immagini sono bloccate.
Conta anche il testo semplice
Invia una versione in testo semplice insieme all'HTML. La maggior parte delle piattaforme email ne genera una; leggila almeno una volta, perché una ricevuta o un link di reset devono avere senso anche senza formattazione.
Otto template, dal vivo
Email di benvenuto
Ringrazia la persona, spiega cosa succede dopo e offre un'unica azione chiara.
Ricevuta
Una tabella annidata mantiene allineati nomi degli articoli e prezzi in ogni client, compresi quelli desktop più vecchi.
Reset della password
Breve, con il tempo di scadenza e cosa fare se la persona non l'ha richiesto. Includi il link anche come testo, per i client che bloccano i pulsanti.
Newsletter
Una notizia per blocco con un titolo, una frase e un link. L'URL dell'immagine qui è un segnaposto, quindi l'anteprima mostra ciò che vedono i lettori con le immagini bloccate: il testo alternativo in un riquadro della dimensione giusta.
Verifica dell'indirizzo email
Si usa dopo la registrazione. Un codice oltre al pulsante aiuta chi apre l'email su un altro dispositivo.
Ordine spedito
Mette per primo il link di tracciamento; è per quello che il lettore ha aperto l'email.
Invito a un evento
Data, ora e luogo in un blocco facile da scorrere, poi l'unica azione.
Richiesta di feedback
Una sola domanda con risposte da un tocco ottiene molte più risposte di un link a un lungo sondaggio.
Perché il codice è fatto così
Regole che fanno visualizzare le email HTML ovunque
Regola
Perché
Impagina con le tabelle (role="presentation")
Alcuni client desktop ignorano ancora flexbox, grid e molte regole di posizionamento
Metti inline gli stili importanti
Alcuni client e alcune viste webmail rimuovono o ignorano i blocchi style
Mantieni la larghezza del contenuto intorno a 600px
Si adatta al riquadro di lettura della maggior parte dei client
Crea i pulsanti con un link con padding dentro una cella colorata
Resiste ai client che bloccano le immagini e ignorano parte del CSS
Imposta width, height e alt su ogni immagine
Le immagini sono spesso bloccate finché il lettore non le consente
Aggiungi un preheader nascosto
Controlla il testo di anteprima mostrato dopo l'oggetto
Usa il meta color-scheme e prefers-color-scheme
I client che supportano la dark mode usano i tuoi colori scuri invece di invertirli
Includi un link di disiscrizione nelle email di marketing
Lo richiedono le leggi antispam e i grandi provider di posta
Prima di inviare
Checklist di test
Test
Come
Client reali
Invia ad account sui grandi servizi webmail, a un client desktop e a un telefono
Immagini disattivate
Disattiva il caricamento delle immagini e verifica che l'email abbia ancora senso
Dark mode
Passa il telefono e il client desktop alla modalità scura
Link
Clicca ogni link, compreso quello di disiscrizione
Parte in testo semplice
Invia anche una versione testuale; alcuni lettori e filtri la usano
Controllo antispam
Autentica il tuo dominio (SPF, DKIM, DMARC) prima di inviare grandi volumi