Buletinul informativ prin e-mail rămâne încă instrument eficient marketing. Potrivit statisticilor, o persoană modernă primește aproximativ 10 e-mailuri pe zi, dintre care multe sunt spam obișnuit. Având în vedere că utilizatorul ia o decizie cu privire la importanța informațiilor în doar câteva secunde, totul în scrisoare este important: de la aspectul mailing-urilor și atractivitatea vizuală până la structura textului de vânzare.
Pentru a capta interesul utilizatorului în 5-6 secunde, scrisoarea dumneavoastră trebuie să fie perfectă din toate punctele de vedere, pentru care este important să abordați cu atenție crearea și aspectul scrisorii pentru distribuire. Dar înainte de a începe să lucrați cu cod, familiarizați-vă cu problemele care vă așteaptă.
Cum să eviți greșelile și să nu faci prostii
Dacă sunteți un guru al aspectului și cunoașteți toate trucurile moderne, vă vom dezamăgi - nimic nu funcționează aici. Serviciile de corespondență pur și simplu nu au un format uniform pentru afișarea literelor, așa că utilizarea aceluiași float și marjă și umplutură nu va funcționa. Da, în teorie, ați primit o scrisoare frumoasă cu mai multe coloane, dar destinatarul va amesteca toate aceste coloane și va primi o mizerie care va ajunge rapid la spam.
Și multe servicii au dezactivat pur și simplu suportul pentru stiluri, argumentând că textul din scrisoare este important, nu ambalajul său. Da, undeva au dreptate, dar arată-mi o persoană care citește „foile” lungi din text toată ziua...
Și cel mai interesant lucru este că mai există clienți de e-mail care nu acceptă afișarea imaginilor cu litere. Desigur, acest lucru poate fi rezolvat cu ușurință prin simpla bifare a unei casete din parametri, dar nu toată lumea își va da seama că totul este despre setările implicite.
Prin urmare, atunci când proiectați imagini în litere, nu uitați să puneți alt. În acest caz, destinatarul vă va vedea cel puțin textul într-un cadru, și nu ceva gol și înfricoșător.
- Creați un șablon HTML folosind un bloc de note obișnuit (trebuie să schimbați formatul fișierului în html) sau printr-un software special, de exemplu, Dreamweaver de la Adobe;
- Utilizați etichete html standard pentru a crea structura scrisorii, așa cum sa menționat deja, creăm un tabel și scriem propriile atribute pentru fiecare celulă;
- Nu uitați de regulile generale: lățimea literei nu trebuie să depășească 600 px, imaginile trebuie comprimate (de exemplu, utilizați TinyPNG), astfel încât litera să se încarce rapid și să facă fontul mai mare de 13, deoarece este posibil fi probleme cu afișarea pe dispozitivele Apple.
- Umplem celulele cu text, în timp ce formatăm fiecare bloc.
- Nu uitați de aspectul literelor adaptive.
Testarea aspectului e-mailului
După proiectarea șablonului html, este timpul să ne testăm creația. Pentru a face acest lucru, puteți utiliza servicii speciale, de exemplu, PutsMail sau e-mail Yandex obișnuit. În primul caz, totul este clar - citim instrucțiunile și vedem cum am creat buletinul informativ.
- asigurați-vă că butonul „fără înregistrare” nu este aprins;
- faceți clic dreapta pe câmpul de introducere a textului și selectați „examinare element”, după care va apărea o fereastră cu codul, unde linia cu ;
- faceți clic pe
și faceți clic pe „editați”;- adaugă codul tău și trimite scrisoarea.
Nu vă faceți griji, poate părea înfricoșător în editorul propriu-zis, dar destinatarul îl va primi în forma dorită.
Actualizat: acum 12 luni
Aspectul e-mailului HTML de la zero nu este o treabă ușoară. Sarcina principală este de a crea un cod universal care va fi înțeles de diverși clienți de e-mail și care va fi afișat la fel de frumos atât pe telefon, tabletă și computer.
De regulă, cu cât codul este mai vechi, cu atât este mai mare probabilitatea ca acesta să funcționeze corect. Și deși astăzi există editori de bloc care simplifică aspectul literelor, munca lor se bazează pe aceleași vechi principii de dezvoltare a șabloanelor HTML.
Există două reguli de bază pe care ar trebui să le amintiți întotdeauna când începeți să puneți în aspect o scrisoare:
Să aruncăm o privire mai atentă.
Unde să scrieți codul șablonului? Nu în Microsoft Wordîntr-adevăr, într-adevăr? Este convenabil și de înțeles când vedeți imediat cum arată codul scris și sub ce formă îl va primi clientul. Program pentru mase buletine informative prin e-mail ePochta Mailer are o funcționalitate excelentă pentru scrierea paralelă a codului și vizualizarea șablonului creat în timp real. Prin urmare, aici și în continuare, toate exemplele de creare, editare și trimitere de scrisori vor fi prezentate cu ajutorul acestuia. Puteți încerca o versiune demonstrativă gratuită a programului și, în timp ce citiți articolul, puteți exersa imediat crearea propriului șablon de e-mail.
Format de șablon de e-mail HTML
Primul lucru pe care trebuie să-l faceți este să decideți asupra unei structuri bazate pe tabel. Pentru buletine informative, machetele cu una și două coloane funcționează cel mai bine, deoarece vă permit să structurați o cantitate mare de informații cât mai clar și ușor posibil. Aspect cu o singură coloanăîn plus, se afișează perfect în versiunea mobilăși pe tabletă.
Cel mai adesea, un aspect cu o singură coloană include:
- Antet(antet) care conține sigla și link-uri de navigare de pe site-ul părinte.
- Bazele corp scrisori cu conținut, imagini și link-uri către pagini web cu informații complete, a căror prezentare generală este furnizată în scrisoare.
- Subsol(subsolul) scrisorii, care uneori dublează link-urile de navigare și include, de asemenea, instrucțiuni pentru dezabonare și un link de dezabonare direct.
Conține aceleași elemente layout cu două coloane, cu singura diferență că are două coloane și când se afișează o literă pe un dispozitiv mobil, coloanele pot fi deplasate una sub alta (principiul receptivității), sau pot fi scalate în funcție de dimensiunea ecranului (care nu este întotdeauna convenabil dacă fontul este prea mic).
Cum se creează un șablon de scrisoare HTML: Crearea unui document.
Codul HTML al oricărui mesaj de e-mail este format din două părți:
- Antet. Tot ceea ce va fi ambalat într-o etichetă Şi, clientul de e-mail îl va lua ca antet al scrisorii.
- Corp. Cod plasat în interiorul etichetei Şi va fi folosit pentru a crea structura mesajului dvs. de e-mail.
Scrierea codului HTML pentru un mesaj de e-mail începe prin crearea unui document XHTML:
1.
2.
3.
4.
5.Instrucțiuni pentru crearea unui șablon de e-mail <meta name="viewport" content="width=device-width, initial-scale=1.0"/><br> 6. </head><br> 7. </html></p> <p><b><!DOCTYPE> </b> explică expeditorului la ce etichete HTML să se aștepte în viitor și ce set de reguli HTML și CSS ați urmat la crearea e-mailului. Deși unii clienți de e-mail (Gmail, Google Apps, Yahoo! Mail și Outlook.com) vă vor înlocui antetul cu al lor, vă recomandăm să includeți acest cod în document.</p> <p><b><meta http-equiv=»Content-Type» /> </b> specifică modul de gestionare a textului și a caracterelor speciale din e-mailul dvs. <br><b>„text/html”</b> arată clar mecanismului că următoarele rânduri de text ar trebui tratate ca html.</p> <p><b><meta name=»viewport»/> </b> Specifică dispozitivul pe care este vizualizat e-mailul pentru a seta zona vizibilă a mesajului să se potrivească cu lățimea ecranului.</p> <p>Antetul mesajului de e-mail este scris în interiorul etichetei <b><title> </b>. În acest caz, dacă destinatarul selectează „Vizualizare online”, titlul mesajului va fi afișat în fila browser.</p> <h2>Aspectul corpului unui mesaj de e-mail. Crearea unui tabel</h2> <p>Structura generală a scrisorii este creată folosind eticheta <b><body> </b>.</p> <p>În primul rând, setați umplutura la zero (etichete <margin>Şi <padding>) pentru a evita spațiile albe inutile în șablon.</p> <p>Lățimea mesei principale ar trebui să fie de 100% (table width="100%"). De fapt, acționează ca cadru principal, „corpul” mesajului de e-mail. Spre deosebire de etichetă <body>Când lucrați cu un tabel, puteți lucra cu stiluri: de exemplu, pentru a seta o culoare generală de fundal pentru întreaga literă, trebuie să o specificați în parametrii acestui tabel principal.</p> <p>Valori de etichetă <cellpadding>Şi <cellspacing>ar trebui să fie, de asemenea, zero, din nou pentru a evita spațiul gol inutil. Aceste etichete sunt responsabile pentru indentările din limitele celulelor tabelului.</p> <p>1. <body style="margin: 0; padding: 0;"><br> 2. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br> 3. <tr><br> 4. <td><br>5. Bună ziua! <br> 6. </td><br> 7. </tr><br> 8. </table><br> 9. </body><br></p> <p>Până acum scrisoarea noastră arată astfel:</p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_1.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>(prezența unui cadru este rezultatul etichetei chenar=”1″)</p> <p>Lățimea maximă posibilă și convenabilă pentru un mesaj de e-mail care este vizualizat în clienții de e-mail pe un computer personal este de 600 px. Pentru a preveni extinderea literei pe întregul ecran, trebuie să creați o altă imbricată în interiorul tabelului principal deja creat, specificând cu strictețe valoarea lățimii sale: width="600″.</p> <blockquote><p><i><b>Regula de aur în crearea codului HTML pentru un mesaj de e-mail este:</b> dacă atributul dorit (eticheta) există în HTML, utilizați-l și nu trebuie să recurgeți la CSS.</i></p> </blockquote> <p>Acest cod de tabel imbricat trebuie inserat în locul cuvântului „Bună ziua!”</p> <p>1. <table style="border-collapse: collapse;" border="1" width="600" cellspacing="0" cellpadding="0" align="center"><br> 2. <tbody><br> 3. <tr><br> 4. <td>Buna ziua!</td><br> 5. </tr><br> 6. </tbody><br> 7. </table><br></p> <p>Acum scrisoarea arată astfel:</p> <p><img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_2.png' width="100%" loading=lazy loading=lazy></p> <p>Observați că tabelul imbricat folosește atributul <b><border-collapse> </b> cu sensul „colaps”? Le spune clienților de e-mail să afișeze corect marginile în jurul celulelor tabelului. Dacă nu faceți acest lucru, versiunile mai noi de Outlook vor adăuga, de exemplu, un mic spațiu inutil între marginile a două tabele atunci când procesați un e-mail.</p> <p>Am spus deja că orice e-mail constă din trei părți logice: antetul, corpul scrisorii cu conținutul principal și subsolul.</p> <p>Acum trebuie să afișăm acest lucru structural în șablonul pe care l-am creat deja. Să mai adăugăm două rânduri. Să copiem în tabelul imbricat o parte a codului responsabil pentru linie</p> <p>1. <tr><br> 2. <td><br>3. Bună ziua! <br> 4. </td><br> 5. </tr><br></p> <p>și duplicați-l de mai multe ori, înlocuind salutul cu numărul de serie al liniei.</p> <p>Ar trebui să arate așa:</p> <p>1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"><br> 2. <tr><br> 3. <td><br>4. Linia 1 <br> 5. </td><br> 6. </tr><br> 7. <tr><br> 8. <td><br>9. Linia 2 <br> 10. </td><br> 11. </tr><br> 12. <tr><br> 13. <td><br>14.Rândul 3 <br> 15. </td><br> 16. </tr><br> 17. </table><br></p> <p>Vizual:</p> <p><img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_3.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Să adăugăm <b>culoarea de fundal</b> separat pentru fiecare linie. Deoarece în HTML există o etichetă specială pentru aceasta <b><bgcolor> </b>, ar trebui să-l utilizați în locul stilurilor CSS. Vă rugăm să rețineți că atunci când alegeți o culoare, trebuie să specificați toate cele 6 caractere ale codului, deoarece este posibil ca cele trei caractere abreviate să nu funcționeze.</p> <p>1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"><br> 2. <tr><br> 3. <td bgcolor="#ffa500"><br>4. Linia 1 <br> 5. </td><br> 6. </tr><br> 7. <tr><br> 8. <td bgcolor="#ffffff"><br>9. Linia 2 <br> 10. </td><br> 11. </tr><br> 12. <tr><br> 13. <td bgcolor="#1e90ff"><br>14. Linia 3 <br> 15. </td><br> 16. </tr><br> 17. </table><br></p> <p><img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_4.png' width="100%" loading=lazy loading=lazy></p> <p>Să ne concentrăm pe prima linie - acesta va fi antetul scrisorii.</p> <h3>Linia 1. Aspectul antetului de e-mail.</h3> <p>Planul este de a plasa o imagine cu logo-ul și numele companiei pe prima linie. Dar mai întâi ai nevoie <b>reglați indentarea</b> s, care va fi pe toate părțile imaginii până la limitele interne ale celulei. Responsabil pentru asta <b>eticheta - <padding> </b>.</p> <p>Lucrul cu <padding>Este important să vă amintiți să specificați fiecare valoare de indentare (sus, jos, stânga, dreapta), altfel rezultatele pot fi imprevizibile.</p> <p>Când specificați parametrii, este destul de acceptabil să folosiți o versiune scurtă a notației, cum ar fi <i>umplutură: 10px 10px 5px 5px;</i>.</p> <p>Dacă apar probleme, o versiune lungă a înregistrării le va rezolva, de exemplu <i>padding-top: 10px; padding-dreapta: 10px; umplutură-partea de jos: 5px; umplutură-stânga: 5px</i>;.</p> <p>În cazul în care un client de e-mail elimină CSS-ul dvs. inline sau face propriile editări la adresa dvs. de e-mail, puteți accesa <b>viclean</b>. În loc să folosiți eticheta <padding>Adăugați celule goale la tabel, creând astfel spațiul necesar. Astfel de celule suplimentare vor fi goale (cu cod în interior), dar cu o înălțime sau lățime clar definită.</p> <p>De exemplu:</p> <p><tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr></p> <p>Vă rugăm să rețineți că ar fi mai corect să scrieți stiluri în interiorul etichetei <td>, dar nu înăuntru <p>Sau <div>, cei din urmă se comportă mai imprevizibil.</p> <p>În cazul exemplului nostru de e-mail, folosim CSS intern pentru a ajusta umplutura pentru imagine. După introducerea imaginii, trebuie să scrieți <b>text alternativ</b>, pe care destinatarul îl va vedea în locul imaginii dacă imaginile sunt dezactivate de expeditor. Și este important să adăugați parametrul style="display:block;" a cărui prezență asigură că clientul de e-mail nu adaugă spații suplimentare sub imagine. Dacă este necesar, puteți centra imaginea adăugând align="center" la etichetă <td>.</p> <blockquote><p><i><b>Nota.</b> Rețineți că majoritatea clienților de e-mail blochează imaginile în mod implicit. Prin urmare, scrieți în textul alternativ un indiciu pentru client, o imagine despre ce subiect ar trebui să fie în loc de un spațiu gol. În plus, nu trebuie să scrieți informații unice importante în imagini care nu sunt duplicate în scrisoare. La urma urmei, dacă imaginile sunt blocate, scrisoarea ta va fi absolut inutilă.</i></p> </blockquote> <p>Exemplu de cod pentru linia 1 cu o imagine inserată:</p> <p>1. <td align="center" style="padding: 20px 0px 30px 0px;" bgcolor="#ffa500"><br> 2. <img src='https://i2.wp.com/E:\epochta\БЛОГ\mailer_html_img.png' width="600" loading=lazy loading=lazy><br> 3. </td><br></p> <p>Vizual:</p> <p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_5.png' width="100%" loading=lazy loading=lazy></p> <h3>Linia 2. Lucrul cu conținutul într-un șablon de e-mail HTML</h3> <p>Mai întâi ar trebui <b>specificați umplutura în interiorul celulei din mijloc</b>(a doua linie) astfel încât noul tabel cu conținut imbricat în el să arate frumos, fără a se îmbina cu granițele principale. Știți deja că astfel de indentări de pe părțile laterale ale elementului care va fi în interiorul celulei sunt setate folosind eticheta <padding>Începeți! 😉</p> <p>Vizual ar trebui să arate așa:</p> <p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_6.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Acum trebuie să ne pregătim <b>loc pentru conținut</b>. După cum sa menționat mai sus, trebuie să adăugați un alt tabel imbricat. Acesta va fi un tabel cu trei rânduri:</p> <ul><li>unul pentru titlu,</li> <li>al doilea este pentru o scurtă descriere a articolului,</li> <li>al treilea este pentru o linie cu două coloane.</li> </ul><p>Lățimea tabelului, care va fi pe al doilea rând, nu trebuie să fie în pixeli, ci în procente (100%). Acest lucru este necesar dacă doriți ca scrisoarea să fie receptivă.</p> <p>Cod pentru linia 2 cu tabel imbricat:</p> <p>1. <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"><br> 2. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br> 3. <tr><br> 4. <td><br>5. Linia 1 <br> 6. </td><br> 7. </tr><br> 8. <tr><br> 9. <td><br>10. Linia 2 <br> 11. </td><br> 12. </tr><br> 13. <tr><br> 14. <td><br>15. Linia 3 <br> 16. </td><br> 17. </tr><br> 18. </table><br> 19. </td></p> <p>Vizual:</p> <p><img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_7.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Scriem titlul articolului și al acestuia <a href="https://vgolitsyno.ru/ro/kratkoe-opisanie-skazki-lisa-povituha-russkie-narodnye/">scurtă descriere</a>. Puteți adăuga indentări la rândul descriptiv pentru a face textul să pară mai frumos. Vă rugăm să rețineți că ePochta Mailer vă permite să adăugați și să modificați text direct în editorul vizual, fără a accesa fila de cod HTML.</p> <p>Tabel imbricat cu text:</p> <p>1. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br> 2. <tbody><br> 3. <tr><br> 4. <td><br>5. Promovarea mărcii în Viber: mailing-uri în masă în messengers <br> 6. </td><br> 7. </tr><br> 8. <tr><br> 9. <td style="padding: 20px 0px 30px 0px;"><br>10. Acum Viber nu este doar o aplicație de corespondență personală, ci și un canal eficient de promovare comercială a bunurilor și serviciilor. <br>11. Doar leneșii nu spun că Viber pentru afaceri este un instrument cu adevărat eficient și ieftin. Este adevărat? Vă sugerăm să verificați aceste declarații pentru exactitate. <br> 12. </td><br> 13. </tr><br> 14. <tr><br> 15. <td><br>16. Linia 3 <br> 17. </td><br> 18. </tr><br> 19. </tbody><br> 20. </table></p> <p>Vizual:</p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_8.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Pentru ultimul rând al tabelului, am pregătit două coloane cu o imagine și text.</p> <p>Să mergem în ordine.</p> <p>În primul rând, deoarece avem nevoie de distanța dintre coloanele tabelului și de atribut <margin>nu îl putem folosi, vom înșela puțin și vom crea un tabel cu trei coloane. Doar că coloana din mijloc va fi goală și îngustă.</p> <p>Parametrul principal al coloanei este lățimea. În acest caz, ne vom concentra pe lățimea imaginii care va fi plasată în ea. Lățimea sa este de 260 px. Și pentru a nu vă încurca atunci când calculați ce procent este de 260 de pixeli din tabel la 540px* (și aceasta va fi 48,1%), va fi mai ușor să indicați o lățime cunoscută.</p> <p><i>*Lățimea tabelului imbricat de 540px este lățimea tabelului principal de 600px minus umplutura, 30px pe fiecare parte.</i></p> <p>Total, două coloane de 260 pixeli + coloana goală din mijloc de 20 pixeli.</p> <p>Specificăm și valoarea valign="top" pentru ambele coloane, care va alinia textul vertical, de-a lungul marginii superioare a liniei, indiferent de cantitatea de text din fiecare coloană. Implicit, valoarea valiniei este considerată mijlocie; nu uita să-l schimbi.</p> <p>1. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br> 2. <tr><br> 3. <td width="260" valign="top"><br>4. Coloana 1 <br> 5. </td><br> 6. <td style="font-size: 0; line-height: 0;" width="20"><br> 7. <br> 8. </td><br> 9. <td width="260" valign="top"><br>10. Coloana 3 <br> 11. </td><br> 12. </tr><br> 13. </table></p> <p>Vizual:</p> <p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_9.png' width="100%" loading=lazy loading=lazy></p> <p>Adăugarea de imagini și conținut.</p> <p>Deoarece avem din nou nevoie de două rânduri, introducem un alt tabel în fiecare dintre coloane, fără a uita de indentări.</p> <p>1. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br> 2. <tbody><br> 3. <tr><br> 4. <td width="260" valign="top"><br> 5. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br> 6. <tbody><br> 7. <tr><td> <br> 8. <img src='https://i2.wp.com/E:\epochta\БЛОГ\битые картинки на блоге\iStock_000004384999XSmall.jpg' height="160" width="260" loading=lazy loading=lazy> </td><br> 9. </tr><br> 10. <tr><br> 11. <td style="padding: 25px 0px 0px 0px;"><br>12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. <br> 13. </td><br> 14. </tr><br> 15. </tbody> </table><br> 16. </td><br> 17. <td width="20" style="line-height: 0; font-size: 0px;"><br> 18. <br> 19. </td><br> 20. <td width="260" valign="top"><br> 21. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br> 22. <tbody> <tr><br> 23. <td><br> 24. <br> 25. <img src='https://i1.wp.com/E:\epochta\БЛОГ\битые картинки на блоге\greed.jpeg' height="160" width="260" loading=lazy loading=lazy> </td><br> 26. </tr><br> 27. <tr><br> 28. <td style="padding: 25px 0px 0px 0px;"><br>29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. <br> 30. </td><br> 31. </tr><br> 32. </tbody> </table><br> 33. </td><br> 34. </tr><br> 35. </tbody> </table></p> <p>Vizual:</p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_10.png' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Linia 3. Crearea codului HMTL pentru subsolul buletinului informativ prin e-mail</h3> <p>Componentele principale ale subsolului sunt contactele companiei și un link de dezabonare. După cum puteți vedea, acestea sunt două elemente diferite și trebuie să împărțim din nou rândul în două coloane folosind tabele suplimentare.</p> <p>Pentru a nu uita, vom adăuga mai întâi liniuțe, apoi tabele.</p> <p><td bgcolor="#1e90ff " style="padding: 30px 30px 30px 30px;"><br>Linia 3 <br> </td></p> <p>Vizual:</p> <p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_11.png' width="100%" loading=lazy loading=lazy></p> <p>Împărțim rândul în două coloane folosind un tabel suplimentar.</p> <p>1. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br> 2. <tr><br> 3. <td><br>4. Coloana 1 <br> 5. </td><br> 6. <td><br>7. Coloana 2 <br> 8. </td><br> 9. </tr><br> 10.</table></p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_12.png' width="100%" loading=lazy loading=lazy></p> <p>În acest șablon, prima coloană va fi pentru informațiile de contact ale companiei, a doua va fi pentru linkul de dezabonare. Puteți adăuga pictograme de rețele sociale, puteți modifica numărul de coloane și aranjarea informațiilor în absolut orice format.</p> <p>Tabel suplimentar cu informații de subsol:</p> <p>1. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br> 2. <tbody><tr><br> 3. <td width="280"><br> 4. <p>Compania ePochta <br><br>5. suport@site</p><br> 6. </td><br> 7. <td align="right"><br>8. Ați primit această scrisoare în calitate de client al companiei noastre. Pentru a vă dezabona de la lista de corespondență, faceți clic pe linkul de mai jos. <br> 9. </td><br> 10. </tr><br> 11. </tbody></table></p> <p>Vizual:</p> <p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_13.png' width="100%" loading=lazy loading=lazy></p> <p>Ai observat asta <b>text</b>în a doua coloană de subsol <b>aliniat la dreapta</b>? Acest lucru este posibil datorită atributului <b>align="dreapta"</b> pentru etichetă <td>.</p> <p>Șablonul este gata!</p> <h2>Aspectul designului șablonului de buletin informativ de e-mail</h2> <p>Prima parte a articolului s-a ocupat de structura aspectului e-mailului. Acum vom vorbi puțin despre design și design.</p> <p>Cu capabilitățile CSS inline puteți schimba <b>opțiuni de font</b>– folosiți eticheta <b>sau <strong>pentru font aldine, introduceți direct dimensiunea și numele familiei de fonturi.</p> <p>Să luăm, de exemplu, titlul articolului „Brand Promotion in Viber: Mass Mailings in Messengers” în șablonul deja creat și să-i dăm următorii parametri:</p> <p>1. <td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"><p align="center">2. Promovarea mărcii pe Viber: <br>corespondențe în masă în mesageri <br> 3. </p></td></p> <p>Uite cum s-a schimbat textul:</p> <p><img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_14.png' width="100%" loading=lazy loading=lazy></p> <p>Acum să eliminăm marginile tabelului pe care le-am lăsat, astfel încât să fie ușor de urmărit vizual modificările din structură. Pentru a face acest lucru, în fila Cod HTML, apăsați CTRL+F sau accesați meniul Editare – Găsiți. În caseta de dialog care se deschide, selectați funcția Înlocuire și setați valoarea chenar=”1″ pentru a o înlocui cu chenar=”0″. Accesați fila Mesaj - toate marginile au dispărut, vedeți un gol <a href="https://vgolitsyno.ru/ro/gotovye-makety-vizitok-v-psd-shablony-vizitok-psd-besplatnye-obrazcy-i-makety/">aspectul terminat</a> mesaje de e-mail.</p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_15.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Dacă doriți, puteți lăsa chenarul pentru tabelul principal la 600px, făcându-l mai puțin vizibil, de exemplu:</p> <p><table width="600" align="center" style="border-collapse: collapse; border: 1px solid #cccccc;" cellspacing="0" cellpadding="0"></p> <p>Să adăugăm o mică liniuță în prima linie, astfel încât fundalul să nu se lipească de partea de sus a paginii: 1. <table width="100%" border="0" cellspacing="0" cellpadding="0"><br> 2. <tbody>><tr><br> 3. <td style="padding: 20px 0px 30px;"></p> <p>Și acum - un test al stiloului: trimitem o scrisoare la o adresă de e-mail de testare.</p> <p>Puteți fie să creați o listă cu o duzină de adrese pe diferiți clienți de e-mail și să lansați un e-mail de test, fie să trimiteți o scrisoare utilizând meniul Test, specificând o adresă a destinatarului mesajului.</p> <p>Așa arată șablonul creat în Gmail</p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_16.png' align="center" height="511" width="324" loading=lazy loading=lazy></p> <p>Creați-vă propriile șabloane de e-mail de marcă, testați și bucurați-vă clienții cu buletine informative colorate. ePochta Mailer are o funcționalitate puternică pentru crearea de mesaje. În articol, sarcina principală a fost să scrieți singur codul șablonului, așa că nu am atins capacitățile programului. Puteți citi mai multe despre ePochta Mailer la.</p> <p>Și lăsați clienții să vă citească buletinele informative cu plăcere!</p> <p>Salutare tuturor. Zilele trecute m-am hotărât să-mi dau seama cum sunt tastate literele html. Am petrecut câteva ore pe internet, am citit zeci de articole pe această temă și am ajuns la concluzia că aceasta este o sarcină foarte dificilă.</p> <p>Dar dorința este acolo, așa că am început să sap mai departe. Poate pe blog, voi înlocui în curând abonamentul de e-mail de la feedburner (sub articole) cu altceva în care îl pot face mai atractiv. Principalul lucru este să țineți cont de toate nuanțele de aspect pentru clienții de e-mail și credeți-mă, există destul de multe dintre ele.</p> <h2>Relevanța creării de scrisori html pentru corespondență</h2> <p>Mailing-ul este unul dintre cele mai multe <a href="https://vgolitsyno.ru/ro/sledy-reklama-detskoi-obuvi-reklama-obuvi-i-effektivnye-sposoby/">moduri eficiente</a> vinde bunuri, transmite știri clienților, vorbește despre promoții și <a href="https://vgolitsyno.ru/ro/zebra-tehnicheskaya-podderzhka-dopolnitelnye-uslugi-servisnyh-centrov-po/">servicii suplimentare</a>. În plus, odată ce aveți o bază de clienți, puteți aduce înapoi clienți „vechi” și puteți face o altă vânzare.</p> <p>Puteți trimite materiale despre servicii suplimentare de care clienții dvs. ar fi putut fi interesați după prima lor achiziție.</p> <p>Și, desigur, teoria numerelor mari funcționează aici. Dacă trimiteți o ofertă de a vinde ceva la 20.000 de abonați, 1000 dintre aceștia vor citi oferta și cel puțin 10 vor cumpăra, iar costul va fi 0. Tocmai ați trimis o scrisoare!</p> <p>Dar cineva nu a deschis scrisoarea, cineva a deschis-o și nu a citit-o pentru că textul era o mizerie, pentru cineva imaginile nu s-au deschis, iar pentru cineva aspectul a fost încurcat. Se întâmplă. Datorită faptului că programele de e-mail nu acceptă CSS, precum și browserele. În ceea ce privește javascript, în general tac.</p> <p>Și există o mulțime de probleme pentru designerii de layout care creează litere html.</p> <p>Dar astăzi voi încerca să vă spun cum să creați o scrisoare HTML care s-ar deschide la fel de bine în toate browserele (inclusiv pentru mobil) și programele de e-mail, astfel încât scrisorile dvs. să pară atractive și să nu pierdeți clienți. Acesta nu este ultimul post, dacă sunt probleme cu afișarea, atunci mai târziu fie îl voi corecta pe acesta, fie îl voi scrie o continuare. De asemenea, voi fi recunoscător tuturor celor care mă pot ajuta la testarea și identificarea problemelor.</p> <h3>Probleme cu aspectul e-mail-ului HTML</h3> <p>Datorită faptului că serviciile poştale nu au <a href="https://vgolitsyno.ru/ro/kak-uznat-naelsya-li-ozherelovyi-popugai-agressiya-u-popugaev/">reguli generale</a> afișând litere html, designerul de layout trebuie să folosească regulile de layout din anii 90. Unii oameni nu trebuie să se obișnuiască cu asta, dar trebuie să recunosc că nu am scris niciodată stiluri într-un document html și nu doar într-un document html folosind<style></style>, și anume inline, pentru fiecare element separat.</p> <p>Unii dezvoltatori de programe de e-mail au dezactivat complet suportul pentru foile de stil și foile de stil ca atare, în modul descris mai sus. Argumentând acest lucru spunând că literele sunt necesare special pentru text. Deci va trebui să scrieți stiluri pentru fiecare element separat.</p> <p>O altă surpriză a fost că nu multe servicii de e-mail nu acceptă float, margins și padding. Cum vă place? Imaginați-vă că ați creat o scrisoare HTML grozavă cu trei coloane bazată pe div(e), iar utilizatorul a venit cu o astfel de gunoaie încât a șters-o imediat, fără să înțeleagă ce dorea de la el.</p> <p>Da, da. Ai auzit bine! Va trebui să folosești tabele dacă nu ești dispus să sacrifici mii de utilizatori care nu îți vor deschide corect e-mailul. Se pare că mesele sunt <a href="https://vgolitsyno.ru/ro/tri-proverennyh-sposoba-nachat-delat-to-chto-ne-hochetsya-delat-to/">singura cale</a>, pentru astăzi, obțineți compatibilitatea între browsere.</p> <p>După cum au scris pe unul dintre site-uri:</p> <blockquote><p>Va trebui să vă amintiți lucruri groaznice precum: Cellpadding, cellspacing, colspan</p> </blockquote> <p>În cazul meu, va trebui să le învăț, deoarece nu am folosit niciodată tabele. Poate că nu aș fi trebuit niciodată dacă nu m-aș fi hotărât să-mi dau seama cum să formatez literele :)</p> <p>Dacă nu aveți obiceiul de a seta alt pentru imagini, va trebui să îl dezvoltați pentru aspectul literelor, deoarece unii clienți de e-mail, în mod implicit, au afișarea imaginilor dezactivată, iar dacă aveți multe dintre ele în litera, utilizatorul va vedea cadre goale, și astfel în ele va fi text.</p> <p>O altă problemă pentru mine este că trebuie să resetez constant multe valori, de exemplu, chenarul imaginilor dacă este setat ca link.</p> <p>Asta e tot deocamdată! Dacă mai apare ceva, îl voi descrie pe măsură ce merg. Și acum vreau să vă arăt ce am făcut până acum, fără a adăuga stiluri de design precum font, culoare, dimensiune text etc. Acestea sunt doar elementele în locurile potrivite. În articolul următor voi descrie procesul de testare în diferite servicii de e-mail și modificările care trebuiau făcute.</p> <p><img src='https://i1.wp.com/smartlanding.biz/wp-content/uploads/2014/11/sozdat-html-pismo.png' align="center" height="1086" width="640" loading=lazy loading=lazy></p> <p>După cum puteți vedea, există ceva la care să lucrați. Permiteți-mi să descriu puțin procesul de aspect. Nu are rost să aprofundăm în ea multe se vor schimba până la următorul articol. De fapt, totul pare a fi simplu, dar pe de altă parte, această activitate mi-a luat mult timp.</p> <h5>Cum se creează o scrisoare html</h5> <p>Pentru început, am creat un tabel wireframe pentru întreg conținutul e-mailului, cu o lățime de 100% și un fundal albastru. Conține două mese copii. Unul pentru antet (id="header"), al doilea pentru conținut (id="content"):</p><p> <!doctype html> <html> <head> <meta charset="utf-8"/> <title>Newsletter de pe site După cum ați observat deja, am setat cellpadding="40" pentru tabelul de înveliș. Am stabilit o umplutură de 20px la tabel și am adăugat un padding intern la tabel conținutul va fi localizat De asemenea, am aliniat toate tabelele pe centru.
Acum trebuie să împărțiți pălăria în 2 părți. Am plasat logo-ul într-una, iar în cealaltă creez o altă placă cu 3 coloane și pun acolo link-uri către rețelele de socializare.
Png" alt="logo" width="84" height="84"/> !}
Încă nu mi-am dat seama dacă este necesar să indice dimensiunea imaginilor, așa că în acest sens este încă haos. Unde am pus-o, undeva nu. Dupa teste voi pune lucrurile in ordine. Fie îl voi elimina complet pentru a scurta codul, fie va trebui să îl adaug peste tot dacă nu se afișează corect într-unul dintre e-mailuri.
Cu acest cod adaug un rând cu o coloană la tabelul „conținut” și plasez o imagine în el cu inscripția „Smartlanding”:
Acum scrisoarea arată astfel:
Toate acestea se fac astfel încât să existe spații între conținut. Codul HTML cu conținut arată astfel:
Cum să blochezi linkurile externe de la indexare
Acum trebuie să implementați anunțul articolului, acest lucru se face destul de simplu. 1 rând, 1 coloană și text în ea:
Salut baieti. Astăzi vom vorbi despre cum să închideți în siguranță legăturile externe pe pagina dvs. de destinație, astfel încât greutatea să nu fie transferată de pe aceasta, ci să rămână pe pagina dvs. După cum probabil știți până acum, chiar dacă închideți legătura cu , greutatea statică este încă transferată și, prin urmare, eliminată din pagina dvs.
Acum trebuie să creați o structură de 3 coloane. Deoarece nu putem folosi float(uri), va trebui să facem 5 coloane. 3 pentru conținutul cu imagini (150px) și 2 pentru setarea spațiului dintre ele (60px).
Png" />
Fac exact același marcaj pentru text și titluri:
Cum să faci etichete UTM și pentru ce sunt acestea Actualizări blog și mini raport de optimizare Script pentru testarea AB Și acum rămâne ultimul pas, realizarea subsolului. Nu am creat un tabel nou pentru acesta, ci l-am plasat în conținut, adăugând pur și simplu un nou rând și coloană:
Smartlanding | 2014
Așa a ieșit scrisoarea. Acum urmează o mulțime de teste. Intenționez să testez aspectul în următoarele servicii și programe de e-mail:
- gmail
- yandex
- hoinar
- mozilla thunderbird
- perspective 2007
- perspective 2013
- liliacul
În timpul testării, voi adăuga stiluri la titluri și texte, voi reseta proprietățile și voi face alte ajustări. Și apoi voi scrie o altă postare detaliată pe acest subiect. Poate că ceva se va schimba la următorul articol, așa că abonați-vă la actualizări dacă sunteți interesat de acest subiect și nu doriți să pierdeți material nou.
Dacă aveți experiență în crearea de litere html, vă rugăm să scrieți comentariul dvs. și să subliniați erorile. Îți voi fi foarte recunoscător. Și asta e tot pentru azi. Pa!
(Consultați testele preliminare ale literelor html în diferite motoare de căutare)
Cea mai importantă parte a campaniilor de marketing este corespondența. Crearea de scrisori pentru ei amintește oarecum de dezvoltarea unor pagini web simple. Dar există și câteva diferențe importante de luat în considerare. De exemplu, trimiterea de e-mailuri HTML va fi eficientă numai dacă e-mailurile în sine sunt corecte din punct de vedere tehnic, iar stilul și conținutul lor corespund obiectivelor dvs. În același timp, există o opinie larg răspândită că un nespecialist nu poate face față unei astfel de sarcini. Acest articol va oferi detalii detaliate instrucțiuni pas cu pas despre cum să scrieți și să trimiteți corect o scrisoare HTML.
Caracteristicile creației
În fiecare zi, o persoană modernă primește în medie 5-6 sau chiar 10 e-mailuri. Aceasta înseamnă că expeditorul are mai puțin de o secundă pentru a atrage atenția destinatarului înainte de a trece la citirea următoarei scrisori. În caz contrar, trimiterea de e-mailuri HTML va fi o pierdere de timp complet ineficientă. Una dintre caracteristicile care vă măresc șansele de a atrage publicul țintăŞi potențiali clienți, este de a crea corespondență adaptată dispozitivelor mobile. Majoritatea utilizatorilor cărora li se adresează un astfel de e-mail probabil îl folosesc mult mai des. dispozitive mobile mai degrabă decât desktop-uri sau laptop-uri. Prin urmare, este mai bine să utilizați un „design receptiv” care se adaptează cu ușurință la dimensiunea ecranului.
Șablon de scrisoare: ce ar trebui să fie
În procesul de aranjare a unui document destinat trimiterii către corespondenți, este necesar să se respecte o serie de cerințe. În primul rând, documentul trebuie să fie suficient de îngust, adică ca dimensiune nu trebuie să depășească intervalul de 500-600 pixeli, ceea ce va asigura afișarea corectă a textului sau a altui conținut pe diferite tipuri de dispozitive. Pentru toate informațiile text, trebuie să utilizați un font destul de mare. Pe dispozitivele iOS, nu va fi foarte convenabil să citiți un e-mail HTML dacă dimensiunea fontului este mai mică de 13 pixeli. Elementele pe care se poate face clic ar trebui să fie destul de mari și izolate de linkurile din apropiere. În acest caz, destinatarul le va putea activa cu ușurință la prima încercare.
Etapa pregătitoare
Înainte de a începe să dezvoltați un e-mail HTML, trebuie să creați un folder nou pe una dintre unități și să-l denumiți, de exemplu, „Mailmails”. De asemenea, trebuie să descărcați și să instalați Dream weaver CS3 pe computer. Acest produs de la Adobe este unul dintre instrumentele de proiectare a site-urilor web destul de simple. Este perfect pentru dezvoltarea unui buletin informativ în format HTML.
Crearea și salvarea documentelor
Înainte de a scrie partea de text a scrisorii, trebuie să deschideți un program de proiectare de litere HTML atât de popular ca Dream weaverCS3 (DW), să creați un document în el, selectând „Tranzitional HTML 4.01” ca tip și apoi să salvați documentul cu extensia .html. În meniul de sus trebuie să găsiți comanda de editare. După aceasta, trebuie să debifați caseta de selectare „Folosiți CSS în loc de etichete HTML”.
Instrucţiuni
Să trecem la analizarea modului de a crea o scrisoare HTML. Pentru a face acest lucru, trebuie să deschideți secvențial meniurile „File” și „Tabel” și să setați parametrii necesari pentru tabel. Deci, de exemplu, rânduri – 2, coloane – 1, lățime – 700, antet deasupra. Puteți stabili limite sau puteți face fără ele specificând o valoare zero. În continuare, se formează antetul scrisorii. Deoarece o scrisoare HTML este destinată unui număr mare de destinatari, este adesea folosit operatorul, care înlocuiește numele destinatarului dorit. În fereastra de jos numită „Proprietăți” puteți seta parametrii necesari pentru fontul, culoarea și dimensiunea antetului, precum și culoarea de fundal. Parametrii cursorului „Centru” și „Mijloc” sunt setați în partea de jos a ecranului. Apoi, trebuie să introduceți textul finit al literei sau să îl introduceți direct în programul DW, selectând dimensiunea și tipul fontului dorit, precum și locația textului pe pagină.
Procesul de creare a legăturilor hipertext
Acum să încercăm să facem scrierea HTML mai avansată și mai profesionistă. În acest scop, este necesară ascunderea legăturilor hipertext în conținut. Pentru a face acest lucru, trebuie să evidențiați locul din text care a fost selectat ca link hipertext. În partea de sus a ecranului, în colțul din stânga, trebuie să „deschideți” pictograma corespunzătoare și să lipiți linkul în fereastra pop-up. În același timp, nu uitați să bifați caseta de selectare „_blank”, astfel încât linkul să se deschidă într-o fereastră nouă, iar după vizualizare, destinatarul să nu piardă accesul la scrisoarea principală.
Inserați imagini
E-mailul HTML se termină de obicei informații de contact, de preferință cu o fotografie a autorului sau o poză potrivită. Îl puteți descărca de pe Internet. Veți avea nevoie de adresa URL a acestei imagini. Cel mai bun mod de a face acest lucru este utilizarea serviciilor gratuite. Să vedem cum poți formata partea finală a scrisorii:
— în partea de jos a literei, în interiorul tabelului principal este inserat un alt tabel cu trei coloane și parametri pentru o chenar de 0 pixeli;
— cursorul trebuie plasat în locul din tabel în care doriți să vedeți poza;
— în fereastra de jos, marcați „În mijloc” și „Pe marginea de sus” pentru fiecare secțiune;
— în meniul de sus selectați fila „Inserare”;
— faceți clic pe inscripția „Imagine”. În meniul derulant, trebuie să lipiți adresa pe care am copiat-o și să faceți clic pe butonul „Ok” de două ori.
Vedere
Acum că știți cum să creați un e-mail HTML, trebuie să vă asigurați că destinatarul îl vede în forma corectă. Pentru a face acest lucru, înainte de a trimite, trebuie să vizualizați rezultatul muncii dvs. în browserul Dream weaver CS3. Pentru a face acest lucru, faceți clic pe pictograma bilei verde din meniul din mijloc sus. Dacă abracadabra apare pe ecran în loc de litere, trebuie să setați codificarea automată în setările browserului.
Codificare
Din secțiunea „Proiect”, trebuie să accesați partea de cod – „Cod”. În fereastra care se deschide, trebuie să selectați și să copiați tot ce a fost inclus între etichete și să salvați fișierul. După aceasta, trebuie să introduceți codul HTML.
Trimiterea unui e-mail HTML
— alegeți să creați o nouă scrisoare completând rândurile „Nume” și „Adresa expeditorului” și completați rândul „Subiectul scrisorii”;
— în meniul din stânga sus marcați codul HTML;
— lipiți codul DW copiat în program în câmpul „Sursă”;
— verificați corectitudinea afișajului folosind instrumentul „Previzualizare”;
— ștergeți versiunea text;
— testați scrisoarea pentru spam folosind butonul cu același nume, care se află lângă butonul „Trimite”.
Șabloanele populare ale cadrului pot accelera semnificativ procesul de creare a unei scrisori și o pot face mai accesibilă pentru un dezvoltator care face primii pași în procesul de creare a documentelor web. Iată o listă cu cele mai populare șabloane:
— Cerberus este un set de șabloane receptive care vă permite să creați e-mailuri care se afișează în mod normal atât în Outlook, cât și aplicație mobilă Gmail. Vă permite să utilizați blocuri de cod HTML fie individual, fie combinându-le.
— Șablon de e-mail HTML foarte simplu – șablonul vă permite să creați ușor și rapid buletine informative. Este de remarcat faptul că aceste scrisori au un design extrem de simplu sub forma unei coloane, care conține un îndemn la acțiune.
Cum se pune HTML într-o scrisoare
Acum să ne uităm la problema unui prieten. Pentru a insera cod HTML într-un e-mail, de exemplu, gmail, folosind browserul GoogleChrome, trebuie să apăsați butonul „F12” sau să selectați secvența corespunzătoare de comenzi din meniu. În fereastra care se deschide cu codul pentru pagina curentă a clientului gmail, trebuie să găsiți locul în care doriți să introduceți litera HTML, faceți clic dreapta și selectați „EditasHTML”. După aceasta, trebuie să lipiți codul HTML copiat și să utilizați combinația de taste Ctrl și Enter. În același scop, puteți descărca programul Mozilla Thunderbird. De asemenea, îl puteți utiliza pentru a crea o scrisoare, apoi selectați „Insert”, HTML și lipiți codul de corespondență.
Instrumente
Folosind pluginul WordPress e-Newsletter, puteți gestiona profesional abonații și e-mailurile. Este de remarcat faptul că ambele sunt realizate folosind panoul de administrare WordPress. Datorită acestui fapt, controlul complet este asigurat și complet gratuit, ceea ce este o veste bună. Un alt instrument simplu sunt imaginile din spate antiglonț. Este un instrument care vă permite să obțineți codul pentru imaginea de fundal a literelor create. Cu ajutorul ei, corespondența poate fi mult mai frumoasă. Pentru a crea un e-mail, trebuie pur și simplu să introduceți adresa URL a imaginii de fundal care vă place și să selectați culoarea de rezervă. De asemenea, puteți determina aici dacă acești parametri ar trebui aplicați întregului corp al e-mailului HTML sau dacă sunt destinați numai celulelor individuale ale tabelului. Rezultatul ar trebui să fie un cod gata făcut pe care trebuie să îl copiați și să îl inserați în șablon. Acum știi exact cum să trimiți un buletin informativ HTML. Crearea de e-mailuri HTML nu este deosebit de dificilă, mai ales dacă știi să folosești șabloane gata făcute, dintre care puteți găsi multe pe Internet. Prin urmare, chiar și utilizatorii care nu au cunoștințe speciale pot face față cu ușurință acestei sarcini.
Pentru a trimite o scrisoare html prin Mail.ru trebuie să fii puțin inteligent. Ne-am dat seama în mod independent cum să facem acest lucru și am pregătit instrucțiuni detaliate pas cu pas.
Pasul 1. Pregătirea scrisorii
În primul rând, aveți nevoie de șablonul în sine cu linkurile corecte către imagini. Ideea este că imaginile trebuie să fie încărcate pe server și fișierul trebuie să conțină link-uri către ele, și nu către imagini de pe computer. Acest regula importanta, altfel nu vor fi poze în scrisoarea finală.
Dacă ați comandat dezvoltarea de la noi, atunci aveți deja un fișier separat pregătit pentru aceste nevoi, iar imaginile sunt încărcate pe serverul nostru. În caz contrar, va trebui să o faci singur.
Să începem. Deschideți fișierul șablon folosind un bloc de note obișnuit și copiați tot conținutul acestuia mai târziu, va trebui să-l lipim în corpul scrisorii în Mail.ru.
Pasul 2. Introducerea unei scrisori în Mail.ru
Conectați-vă la dvs cutie poştală pe site și creați o nouă scrisoare. Asigurați-vă că aveți activată stilul literelor. Ar trebui să vedeți panoul prezentat mai jos.
Faceți clic dreapta pe câmpul pentru introducerea textului literei și selectați „vezi codul” (În fiecare browser acest articol este numit diferit, dar sensul este același). Se va deschide panoul de editare a codului paginii. (Panoul poate arăta diferit în funcție de browserul dvs. Vă prezentăm Google Chrome ca exemplu).
Codul care este responsabil pentru completarea scrisorii a fost evidențiat. Dar avem nevoie de linia principală de cod - html.
Acest bloc este responsabil pentru completarea scrisorii și trebuie să inserăm șablonul nostru. Pentru a face acest lucru, faceți clic dreapta pe bloc și faceți clic pe „Editați ca HTML”.
... și în locul lui lipiți codul scrisorii noastre, pe care l-am copiat pentru noi chiar la începutul lecției. Apoi pur și simplu închideți panoul făcând clic pe crucea din dreapta în colț.
Dacă ați făcut totul corect, va apărea scrisoarea dvs. Nu vă alarmați de faptul că nu are poze. Destinatarul va primi o scrisoare cu poze. Dacă ești îngrijorat, trimite-ți o scrisoare și vezi rezultatul.
Pasul 3. Trimiterea unui e-mail HTML
Tot ce rămâne este să corectăm conținutul scrisorii, dacă este necesar. Doar rescrieți textele. Puteți utiliza instrumentele de proiectare din panoul de sus.
Odată ce sunteți complet mulțumit de conținutul scrisorii, trimiteți-o. Și pentru a nu fi nevoit să faceți acest lucru de fiecare dată, îl puteți salva ca șablon în mail.ru.
Mai multe despre subiectul articolului:
- faceți clic pe
