Șabloane de e-mail tranzacționale open source

Când configurați un nou cont SendGrid, crearea unui set de șabloane de e-mail pentru contul dvs. este una dintre cele mai importante sarcini de finalizat. Dacă intenționați să trimiteți e-mailuri prin API-ul nostru pentru aplicația sau serviciul dvs., cel mai probabil veți avea nevoie de mai multe tipuri diferite de șabloane de e-mail. Unele dintre cele mai comune sunt resetările parolei, confirmările prin e-mail și chitanțele.

Deși există o selecție vastă de șabloane de e-mail prefabricate pe web, găsirea unui set care este ușor de personalizat pentru a se potrivi cu marca dvs. nu este întotdeauna ușoară.

De asemenea, este important să testați temeinic șabloanele din clienții de e-mail obișnuiți. Acest proces poate consuma mult timp și poate încetini procesul de configurare a contului SendGrid și începerea trimiterii de e-mailuri.

Mi-am dat seama că echipa SendGrid ar putea oferi valoare clienților noștri prin crearea unui set open source de șabloane de e-mail pe care utilizatorii le-ar putea folosi pentru a acoperi aceste cazuri comune de utilizare. Nu numai că șabloanele sunt ușor de personalizat, dar veți fi pregătit și trimiteți rapid!

Setul nostru de șabloane, pe care îl numim „Lipire”, acoperă 5 cazuri de utilizare:

• Resetarea parolei
• COnfirmare email
• Scrisori de bun venit
• Chitanțe
• Rezumate (zilnic, săptămânal sau lunar)

Descărcați șabloanele de pe GitHub

Pentru a începe cu șabloanele noastre Lipiți, mergeți la GitHub și clonați depozitul sau descărcați folderul Lipiți șabloane. De asemenea, merită menționat faptul că aceste șabloane trăiesc într-un depozit open source de șabloane de e-mail la care alți utilizatori SendGrid au contribuit în timpul celui mai recent Hacktoberfest.

Personalizarea șabloanelor Lipire

Odată ce aveți o copie locală a șabloanelor Paste, deschideți-le în editorul de cod preferat (aș recomanda VSCode sau Atom; ambele sunt gratuite).

Aș recomanda să începeți cu base.html, deoarece conține majoritatea componentelor reutilizabile găsite în multe dintre celelalte șabloane. Toate aceste șabloane au o structură comună pentru HTML și, deși există câteva stiluri de bază în document, majoritatea stilurilor sunt găsite în linie.

Pe măsură ce parcurgeți codul HTML, veți observa o mulțime de comentarii HTML pentru a indica unde încep și se termină blocurile. Acestea sunt note importante care vă vor ajuta pe măsură ce scanați șabloanele și începeți să le modificați.

Veți observa, de asemenea, stiluri pe elementele HTML pentru culorile de fundal, tipografie, spațiere etc. Vă încurajez să experimentați cu ele pentru a înțelege cum schimbă aspectul acestor șabloane.

Adăugați sigla dvs. la șabloane

Unul dintre primele lucruri pe care veți dori să le faceți este să înlocuiți logo-ul Paste templates cu al dvs. Puteți găsi rapid blocul de siglă căutând comentariul său HTML, indicând locul de pornire:

În acest bloc, veți dori să găsiți eticheta de ancorare (<a> ) și să schimbați HREF la adresa URL. Șablonul ar trebui să fie legat în mod implicit la pagina de pornire a SendGrid.

După ajustarea adresei URL, să înlocuim sigla Paste cu a ta. Vă recomand să aveți sigla stocată într-un loc la care vă puteți conecta cu ușurință, cum ar fi serverul dvs. web sau un CDN. Odată ce ați înlocuit logo-ul src, ajustați stilurile inline, astfel încât lățimea/înălțimea să fie corectă - acest lucru va depinde de raportul de aspect al logo-ului dvs. În mod implicit, logo-ul Paste are 48px pătrați, așa că am setat stilurile de lățime la 48px.

Exemplu:

În acest exemplu, se face referire la adresa URL a siglei Inserați împreună cu unele stiluri de lățime pentru a o seta la dimensiunea dorită de 48 px. Ajustați aceste valori pentru propriul logo pentru a vă asigura că arată clar.

Personalizarea culorilor de fundal

După cum sa menționat mai sus, culoarea de fundal este setată pe o varietate de blocuri pentru a stabili stilul implicit al șabloanelor Lipire (gri și alb). Puteți schimba cu ușurință acest lucru (și ar trebui) pentru a se potrivi cu culorile mărcii dvs.

Cel mai simplu mod de a trece între aceste stiluri este să utilizați editorul pentru a căuta stilurile inline, bgcolor și culoarea de fundal. Valoarea acestor proprietăți poate fi înlocuită cu valori hexadecimale (de ex. #000000) sau cu nume de culori (de exemplu, negru). Pe măsură ce lucrați la aceste modificări, este ușor să păstrați o filă asupra lucrurilor dacă deschideți unul dintre șabloanele în browserul dvs. preferat și actualizați pe măsură ce faceți modificări.

Exemplu:

În acest exemplu, eticheta corporală este stilată cu o culoare de fundal gri deschis. Această valoare a culorii și altele din șablon ar trebui personalizate pentru a se potrivi cu marca dvs.

Personalizarea butoanelor

Butoanele sunt una dintre cele mai comune componente ale interfeței în șabloanele de e-mail. Le veți folosi ca un îndemn, evidențiind cea mai importantă acțiune pe care doriți să o efectueze un utilizator, cum ar fi confirmarea adresei de e-mail.

În mod implicit, butoanele Paste sunt stilate ca blocuri albastre cu o rază subtilă a marginilor pentru rotunjirea colțurilor. Personalizarea acestor butoane pentru a se potrivi cu marca dvs. este similară cu modificările pe care le-am făcut deja culorii de fundal a șablonului nostru. Căutați blocul folosind comentariul HTML pe care l-am adăugat pentru dvs.:

Avem mai multe celule de tabel care au fundal alb aplicat (#ffffff) pentru a crea blocul în jurul butonului, dar veți dori să găsiți celula de tabel care are următoarele stiluri mai jos.

Exemplu:

În acest exemplu, <td> are o culoare bg care este folosită pentru a seta culoarea butonului, împreună cu o rază de margine pentru a rotunji subtil colțurile. Experimentați cu aceste stiluri pentru a obține un aspect unic pentru butoanele dvs. care se potrivesc cu marca dvs.

A doua parte a butonului nostru este ancora (<a> ) din celula tabelului prezentată mai sus.

Această ancoră controlează adresa URL unde va ajunge butonul dvs. atunci când faceți clic, dar și stilurile de text pentru etichetă. Puteți ajusta stilurile pentru a ajusta eticheta în funcție de preferințele dvs. și de ceea ce se potrivește cu marca dvs.

Personalizarea tipografiei

În mod implicit, șabloanele Lipire se încarcă în fontul web, Source Sans Pro, prin Google Fonts. Puteți utiliza un alt font web din colecția Google sau puteți utiliza setul standard de fonturi găsit pe majoritatea computerelor în prezent (Arial, Georgia, Times etc.).

Dacă intenționați să utilizați un alt font web, consultați postarea cu sfaturi și trucuri pentru dezvoltarea e-mailului pentru câteva indicații utile. Asigurați-vă că parcurgeți HTML pentru orice stiluri inline care fac referire la familia de fonturi și ajustați în funcție de preferințele dvs.

Exemplu:

În acest exemplu, <td> are un stil de familie de fonturi setat pentru a utiliza Source Sans Pro, cu unele retrageri la fonturi mai standard în cazul în care fontul web nu se încarcă.

Gânduri de sfârșit

Sper că aceste indicații vă vor ajuta să personalizați aceste șabloane pentru a se potrivi cu marca dvs. și să vă pună în funcțiune pe platforma SendGrid. În viitor, sper să extindem depozitul nostru de șabloane de e-mail cu mai multe șabloane, dar și cu un instrument de compilare care va face procesul de personalizare mult mai rapid.

Dacă întâmpinați probleme pe parcurs, trimiteți o problemă împotriva depozitului GitHub, iar dacă doriți să contribui, trimiteți o cerere de extragere. Căutați mai multe șabloane cu care să experimentați? Încercați șabloanele de e-mail HTML receptive gratuite de la SendGrid.