Cum să construiți și să trimiteți un e-mail HTML personalizat

Un e-mail interactiv HTML este un instrument puternic. Companiile le pot folosi pentru oferte promoționale, freelancerii le pot folosi pentru a-și prezenta serviciile potențiali clienți, iar nepoții pot aduce un zâmbet pe fețele bunicilor lor cu un obicei drăguț proiecta. Singurele două tehnologii de care veți avea nevoie pentru a crea un e-mail personalizat de la zero sunt HTML și CSS inline. Tot ce trebuie să faceți este să aveți în vedere un design, să îl analizați sub formă de rânduri și coloane de tabel și sunteți bine să începeți să construiți. În acest articol, veți învăța o metodă pas cu pas pentru a crea și a trimite un e-mail HTML personalizat.

Creați șablonul de e-mail folosind HTML

Șablonul de e-mail se bazează pe tehnici tradiționale HTML. Veți lucra cu tabele și veți stivui rânduri de tabele și date din tabel tot timpul. Șablonul de e-mail HTML de bază arată astfel:

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




...

Ieșire:

Cel mai bine ar fi să pregătiți un design, astfel încât să puteți identifica unde și cum veți tăia designul. În plus, veți fi pregătit mental să elaborați o structură de tabel din ea.

Aici, începeți cu DOCTYPE pentru document. În continuare, setați setul de caractere, tipul de conținut, metaetichetele și titlul în interiorul etichetă. Partea esențială începe cu etichetă unde plasați un părinte și adăugați mai multe rânduri de tabel inauntru. După împărțirea conținutului într-un număr adecvat de rânduri, este timpul să introduceți datele din tabel în interiorul lor.

După cum s-a spus, trebuie să lucrați doar cu tabele. Prin urmare, pentru introducerea diferitelor date în interiorul etichetă, trebuie să urmați un traseu definit. De exemplu, să formăm un șablon de e-mail cu un logo și o dată în interiorul unui etichetă.

 Sigla și data în interiorul etichetei 
 

















05 decembrie 2021

Acum știți cum să plasați etichete HTML și să construiți o structură bună pentru șablonul dvs. de e-mail. Să mergem mai departe pentru a înțelege mai bine stilul de e-mail.

Stilați-vă e-mailul HTML

Crearea stilului unui e-mail HTML este o sarcină greoaie, deoarece puteți utiliza doar CSS inline. De asemenea, va trebui să repetați stilul pentru fiecare element dacă are un stil similar. Dacă nu sunteți familiarizat cu Foile de stil în cascadă, explorați începerea cu CSS.

previzualizare:

 05 decembrie 2021 






































Salut John Doe



Vă mulțumim că ați vizitat site-ul nostru. Sperăm că ați învățat ceva nou astăzi.





 Părerea ta contează pentru noi! 

 Evaluează articolele noastre aici. 


012345678910

Ieșire:

Dacă vrei, poți accesați codul complet pe GitHub și clonează depozitul pentru a-l folosi.

Trimiterea e-mailului

Acum copiați și lipiți întregul cod din GitHub. Dacă utilizați VS Code, deschideți fișierul HTML folosind extensia serverului live și copiați conținutul făcând clic pe Ctrl + A>Ctrl + C. Deschideți Gmail și compuneți un nou e-mail. Lipiți conținutul și introduceți ID-ul de e-mail al destinatarului. Trimiteți e-mailul și veți primi rezultatele așa cum se arată mai jos:

Testați codul pe diferite dispozitive pentru a vedea cum arată și cum se comportă. Personalizați-vă e-mailul HTML și faceți-l curat, simplu și receptiv.

Modificați șabloanele de e-mail existente

Crearea unui e-mail HTML de la zero necesită o aderență solidă a HTML și CSS inline. De asemenea, puteți modifica un șablon de e-mail existent și îl puteți personaliza în funcție de nevoile dvs. Rețineți că e-mailurile HTML tind să dureze câteva secunde pentru a se încărca. Planificați, proiectați, codificați și efectuați teste amănunțite pentru a evita orice inconsecvență a utilizatorului final. Puteți afla mai multe despre HTML semantic și CSS pentru a scrie un cod mai bun și mai accesibil.

Naincy Mourya (17 articole publicate)

Naincy este specializată în construirea de site-uri web foarte receptive și strategie de conținut eficientă, împreună cu copii web. Ea este o scriitoare de tehnologie independentă care urmărește cu atenție tehnologiile în tendințe.

Mai multe de la Naincy Mourya