Come creare e inviare un'e-mail HTML personalizzata

Un'e-mail HTML interattiva è uno strumento potente. Le aziende possono usarli per offerte promozionali, i liberi professionisti potrebbero usarli per proporre i loro servizi a potenziali clienti e nipoti possono portare un sorriso sui volti dei loro nonni con un simpatico costume design. Le uniche due tecnologie necessarie per creare un'e-mail personalizzata da zero sono HTML e CSS inline. Tutto quello che devi fare è avere in mente un progetto, analizzarlo sotto forma di righe e colonne di tabella e sei pronto per iniziare a costruire. In questo articolo imparerai un metodo passo passo per creare e inviare un'e-mail HTML personalizzata.

Costruisci il modello di email usando HTML

Il modello di posta elettronica si basa su tecniche HTML tradizionali. Lavorerai con tabelle e impilando le righe della tabella e dati della tabella tutto il tempo. Il modello di email HTML di base ha questo aspetto:

...
...
...
...
...
...
...




...

Produzione:

Sarebbe meglio preparare un disegno in modo da poter mappare dove e come dividere il disegno. Inoltre, sarai mentalmente preparato a abbozzare una struttura del tavolo da esso.

Qui, inizi con il DOCTYPE per il documento. Successivamente, imposti il ​​set di caratteri, il tipo di contenuto, i meta tag e il titolo all'interno del etichetta. La parte essenziale inizia con il tagga dove metti un genitore e aggiungi più righe di tabella dentro. Dopo aver diviso il contenuto in un numero adeguato di righe, è il momento di inserire i dati della tabella al loro interno.

Come detto, devi lavorare solo con le tabelle. Pertanto, per inserire dati diversi all'interno del tag, devi seguire un percorso definito. Ad esempio, formiamo un modello di email con un logo e una data all'interno di a etichetta.

 Logo e data all'interno del tag 
 

















05 dic, 2021

Ora sai come inserire tag HTML e creare una buona struttura per il tuo modello di email. Andiamo avanti per capire meglio lo stile delle email.

Dai uno stile alla tua email HTML

Lo stile di un'e-mail HTML è un'attività ingombrante poiché puoi utilizzare solo CSS in linea. Inoltre, dovrai ripetere lo stile per ogni elemento se possiede uno stile simile. Se non hai familiarità con i fogli di stile a cascata, esplora iniziare con i CSS.

Anteprima:

 05 dic, 2021 






































Ciao John Doe



Grazie per aver visitato il nostro sito. Speriamo che tu abbia imparato qualcosa di nuovo oggi.





 La tua opinione è importante per noi! 

 Valuta i nostri articoli qui. 


012345678910

Produzione:

Se vuoi, puoi accedi al codice completo su GitHub e clonare il repository per usarlo.

Invio della posta

Ora copia e incolla l'intero codice da GitHub. Se stai utilizzando VS Code, apri il file HTML utilizzando l'estensione del server live e copia il contenuto facendo clic su Ctrl + A>Ctrl + C. Apri Gmail e componi una nuova email. Incolla il contenuto e inserisci l'ID di posta del destinatario. Invia l'e-mail e otterrai i risultati come mostrato di seguito:

Testa il codice su diversi dispositivi per vedere come appare e si comporta. Personalizza la tua email HTML e rendila pulita, semplice e reattiva.

Modifica modelli email esistenti

La creazione di un'e-mail HTML da zero richiede una solida presa su HTML e CSS in linea. Puoi anche modificare un modello di email esistente e personalizzarlo in base alle tue esigenze. Tieni presente che le email HTML tendono a impiegare alcuni secondi per caricarsi. Pianifica, progetta, codifica e conduci test approfonditi per evitare eventuali incongruenze dell'utente finale. Puoi saperne di più su HTML semantico e CSS per scrivere codice migliore e più accessibile.

Naincy Mourya (17 Articoli Pubblicati)

Naincy è specializzata nella creazione di siti Web altamente reattivi e in una strategia di contenuto efficiente insieme a copie Web. È una scrittrice tecnologica freelance che tiene d'occhio le tecnologie di tendenza.

Altro da Naincy Mourya