4 sfaturi despre cum să adăugați imagini de fundal în șablonul de e-mail

Toată lumea folosește imagini de fundal de e-mail în mesaje. Sunt grozave care atrage atenția și este extrem de important să le folosiți în mod corect. Deci, să începem ghidul nostru despre utilizarea imaginilor de fundal în e-mailuri. Vei afla:

• de ce trebuie să folosiți imagini în buletine informative;

• cum să utilizați codul HTML pentru a insera o imagine de fundal;

• cum să adăugați o imagine de fundal folosind CSS.

Care sunt fundalurile pentru e-mailuri?

Fundalul buletinului informativ este imaginea care este aplicată ca surround al tuturor celorlalte elemente dintr-un e-mail. În loc să fie un punct focal principal, ca o imagine de erou, este mai adesea subtilă și complementară cu celălalt conținut al campaniei.

Adăugarea imaginilor de fundal ale e-mailurilor în HTML necesită modificări în codul buletinului dvs. informativ. Dacă nu știți nimic despre codificare personalizată – modul corect este să utilizați șabloane gata făcute gratuite care sunt deja încărcate în software-ul dvs. de e-mail, Atomic Email Sender. Alegeți-l pe cel care vă place, adăugați conținut și trimiteți o campanie.

Indiferent dacă sunteți un utilizator avansat familiarizat cu HTML și CSS și aveți anumite abilități în lucrul cu aceste coduri, articolul nostru vă va oferi câteva sfaturi despre cum să creați o imagine de fundal în HTML.

De ce să folosiți fundalul e-mailului

Principalul avantaj al imaginii de fundal HTML pentru e-mail este că aveți posibilități suplimentare de stratificare și puteți plasa mesajul cheie , precum și alte imagini sau îndemnuri deasupra imaginilor de fundal ale e-mailului .

Din punct de vedere al frumuseții, este întotdeauna bine să primești un buletin informativ frumos conceput. În plus, aveți voie să utilizați GIF-uri animate ca imagini de fundal pentru buletin informativ.

Fundal animat de e-mail

Păstrați-l simplu: design de bază al e-mailului din spate

Amintiți-vă că imaginile de fundal ar trebui să fie simple și fără modele zgomotoase care pot fura spectacolul. Culoarea de fundal a e-mailului HTML nu ar trebui să fie foarte strălucitoare pentru a nu atrage mai multă atenție decât informațiile principale din buletinul informativ prin e-mail. Amintiți-vă că fundalul buletinului informativ este doar un plus la conținut pentru a face e-mailul să arate grozav. Cele mai bune imagini de fundal pentru buletin informativ sunt de stil liniștit și pot include elemente grafice (texturi, degrade, modele etc.).

Dacă nu sunteți un profesionist în design, vă recomandăm să nu vă asumați riscuri și să vă abțineți de la medii artistice. Minimalismul este în tendințe acum și puteți aplica acest lucru cu succes în campania dvs. de e-mail. Una dintre imaginile din cele mai bune practici pentru e-mailuri este un fundal gradient pentru e-mail. Joacă-te cu culoarea și alege un fundal gradient cu o tranziție lină în funcție de conținutul e-mailului. Se poate face folosind CSS. Astfel, obțineți un fundal de e-mail care va fi o alternativă excelentă la fundalul din imaginea PNG, JPG sau GIF.

Fundal gradient pentru e-mail

Cele mai bune dimensiuni și formate pentru imagini pentru buletine informative

Format de imagine pentru e-mail

Când alegeți sau creați o imagine de utilizat pentru campania de e-mail, asigurați-vă că le salvați în formatul corect - PNG, JPG sau GIF. Fiecare format de imagine are propria specificitate, de exemplu imaginile salvate ca PNG păstrează transparența.

Mărimea contează!

Este bine să rămâi în legătură cu ESP-ul tău și acesta este momentul să-l întrebi despre limitele dimensiunii și greutății imaginii. Vezi, unele ESP-uri comprimă imaginile prea mari sau prea mari – toate acestea afectează calitatea imaginii și impresia totală a mesajului tău. Dacă imaginea ta este prea mare, e-mailul poate fi blocat de un firewall sau de un filtru de e-mail, iar campania ta de e-mail nu va ajunge la destinatari.

Deoarece dimensiunea ideală a șablonului de e-mail variază între 600-650 px, este mai bine să utilizați imagini de fundal de exact aceeași dimensiune. Aceasta se referă la imaginile salvate ca fișier PNG și JPG.

Diferă cea mai bună dimensiune a imaginii de fundal pentru Outlook și Gmail? Nu, nu contează ce client este folosit pentru citirea buletinelor informative de către destinatari. Dimensiunea perfectă a imaginii de fundal a e-mailului Gmail și Outlook este de 600-650 px.

Pentru a utiliza imaginea GIF ca imagine de fundal și pentru a acoperi întreaga zonă de conținut, păstrați dimensiunea acesteia ca lățime de 1280 px. Doriți să subliniați că fișierele GIF sunt acceptate de aproape toți clienții de e-mail, cu excepția Outlook 2007-2013 - utilizatorul lor va vedea doar primul cadru din fișierul GIF animat. De aceea pune cel mai important cadru pe primul loc. În general, numărul de cadre din GIF animat nu trebuie să depășească 10 unități.

Pentru o gestionare convenabilă a e-mailurilor, utilizați Email Studio. Avem, de asemenea, un manager excelent de liste de e-mail pentru gestionarea listelor de e-mail. Folosind extractorul de e-mailuri, puteți colecta adrese de e-mail pentru a trimite scrisori.

Faceți-vă e-mailul prietenos pentru dispozitive mobile

Amintiți-vă că mai mult de jumătate din mesajele de e-mail deschid utilizatorii folosind dispozitive mobile. Ar trebui să luați în considerare acest lucru atunci când vă creați designul de e-mail. Pregătiți versiunea pentru buletinul informativ pentru dispozitive mobile, cu dimensiuni mai mici ale imaginilor, pentru a evita problemele legate de încărcarea e-mail-urilor de lungă durată etc. Cum să faceți ca e-mailul să fie afișat corect pe smartphone? Utilizați CSS pentru a ajusta imaginea de fundal pentru fiecare ecran specific de smartphone. Destinatarii vor fi recunoscatori pentru designul de calitate, economisind timp si trafic!

Cum să aveți o imagine de fundal în e-mail? Să aflăm cum să lucrăm cu imagini de fundal în software-ul nostru de trimitere de e-mail - Atomic Mail Sender.

Cum să adăugați imagini de fundal - Atomic Mail Sender Rocks

Există patru metode principale de adăugare a imaginilor de fundal:

• Utilizarea atributelor de tabel pentru inserarea imaginii de fundal în HTML
• Folosind CSS inline
• Folosind CSS încorporat
• Folosind fundaluri antiglonț

Să ne imaginăm că aveți deja un șablon de e-mail HTML și doriți doar să adăugați o imagine de fundal. Deoarece buletinele informative variază în funcție de ramurile de afaceri și codificarea variază și ele, vom lua unul din șabloanele gata făcute de Atomic Mail Sender pentru a vă arăta principiile principale ale implementării în fundal.

1. Atributele tabelului ca modalitate de adăugare a imaginii de fundal în HTML

Dacă aruncați o privire la șablonul de e-mail conceput de tabele, veți vedea primul tabel principal care include alte blocuri de tabel mai mici. Acesta este ceea ce avem nevoie – acest prim tabel de deschidere și fundalul atributului.

Atributul menționat poate fi aplicat întregului tabel (tag <table>) sau celulei tabelului (tag <td>).

Atributul de fundal conține o adresă URL în care este găzduită imaginea de fundal.

De exemplu:

<td width="100%" align="center" bgcolor="#fcd539" border="0" cellspacing="0" cellpadding="0" background="https://path-to-image/title.png"></td>

Pentru clienții care nu acceptă imagini de fundal, trebuie să menționați culoarea de fundal (bgcolor), precum și textul ALT. Fii scrupuloasă în alegerea culorii pentru fundal. Toate elementele de conținut și textul mesajului ar trebui să fie clar lizibile în fundal. Unii cititori nu activează imaginile, de aceea este bine să folosești texte ALT. Nu utilizați doar texte alternative obișnuite pe care le puteți utiliza pentru nevoile SEO. Imaginează-ți că aceasta este singura alternativă la imagine și folosește-ți textele ALT ca îndemn. Fă-le să sune bine și atrăgătoare! Vei profita de pe urma asta. Fie un cititor activează imaginile pentru a vedea imaginea, fie urmărește linkul pentru a vedea oferta.

Inainte de:

E-mail fără fundal

După:

E-mail cu model de fundal

Fără imagine de fundal, dar cu o culoare de fundal:

E-mail cu fundal simplu

Dacă nu dețineți un site web, vă recomandăm să salvați imaginile pe care le utilizați pentru fundal pe servicii gratuite sau pe servere publice. Tastați întotdeauna calea absolută către fișierul imagine de fundal.

Deci, iată cum se folosește codul HTML pentru a adăuga o imagine de fundal. Acum să trecem la următoarea modalitate de inserare.

2. Cum să utilizați codul CSS inline pentru imaginea de fundal

Principiul de funcționare este același cu cel menționat mai sus, schimbați codul primei tabele de deschidere sau celule de tabel. Diferența este că lucrezi cu atributul stil .

Exemplul de cod HTML:

<td width="100%" align="center" border="0" cellspacing="0" cellpadding="0"></td>

• Adăugați următoarea proprietate: background-repeat: no-repeat; la masă pentru ca imaginea de fundal să nu se repete. Deci, nu va fi așa: Va fi afișat astfel: Imagini de fundal care nu se repetă
• dimensiunea fundalului: coperta; - această proprietate importantă vă permite să acoperiți tot spațiul disponibil pentru newsletter cu imaginea dvs. Util mai ales pentru campaniile de e-mail pe mobil atunci când sunteți limitat cu spațiu pentru buletin informativ și imaginea necesară pentru a fi redimensionată.

Este bine să aveți un link care duce la o versiune WEB a mesajului dvs. de e-mail. Uneori este imposibil să vezi imagini, acest lucru se poate întâmpla din cauza unei erori sau a unui client de e-mail prost. Este o practică bună să aveți un link către o versiune WEB a e-mailului. Faceți doar să sune ca „Problemă la vizualizarea imaginilor? Faceți clic aici pentru o versiune WEB”

3. Tabel CSS încorporat pentru crearea imaginii de fundal

În primul rând, trebuie să adăugați o etichetă CSS <style> în capul mesajului dvs. de e-mail. Asigurați-vă că nu există alte proprietăți de fundal în codul HTML existent, altfel acestea pot suprascrie imaginea de fundal.

Exemplul de cod CSS este următorul:

<style> .bgImage { background-image: url('https://path.to/image.png'); background-repeat: no-repeat; background-size: cover; } </style>

Apoi mergem direct la CSS încorporat în șablonul de e-mail. Utilizați clasa pentru a configura corespondența cu stilul CSS pe care l-ați scris în capul de e-mail.

<td class="bgImage"></td>

4. Imagini de fundal antiglonț în e-mail

Principiul Bulletproof pentru imaginile de fundal combină utilizarea atributelor HTML cu Vector Markup Language (VML) de la Microsoft. Această abordare ajută la crearea șablonului de e-mail cu fundal care va fi afișat în fiecare client de e-mail.

Astăzi există un server gratuit pentru a genera automat codul de fundal antiglonț. Accesați https://backgrounds.cm/ și încercați.

Doar specificați adresa URL a imaginii de fundal dorite, specificați culoarea de rezervă și alegeți dacă această regulă trebuie aplicată întregului corp al buletinului informativ sau doar pentru o singură celulă din tabel. Ca rezultat, obțineți codul HTML gata de inserat în șablon.

Cum sunt afișate imaginile de fundal în clienții de e-mail

Există o problemă: imaginile de fundal pot să nu fie acceptate de unii clienți de e-mail. De exemplu, versiunile mai vechi de Android. De asemenea, unele versiuni ale clienților Gmail nu vor afișa complet șabloanele de e-mail cu imagini, indiferent cât de mult ai încerca. Asigurați-vă că țineți cont de acest lucru atunci când vă creați buletinul informativ. Și pentru a înțelege mai ușor problema, utilizați acest tabel.

Sursa: https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email

Pentru a vă face munca la campaniile prin e-mail și mai eficientă, am dezvoltat un software pentru extragerea e-mailurilor din textul de pe computer. Apoi, folosind un expeditor automat de e-mail în vrac, puteți face trimiteri în masă. Când toate e-mailurile sunt trimise, urmăriți-le convenabil cu software-ul de urmărire a e-mailurilor.

Mai multe sfaturi

• Lățimea recomandată pentru e-mail – 600 px (max. 650 px). Este garanția că mesajul dvs. de e-mail va fi afișat corect pe fiecare dispozitiv și în fiecare client de e-mail.
• Înălțimea recomandată a e-mailului depinde de lungimea conținutului, dar nu trebuie să depășească 200 de pixeli în cel mai bun caz.
• Dimensiunea recomandată a fontului – 14px, cu spațiul rând 1,5.
• Culoarea textului trebuie să contrasteze cu culoarea de fundal.

Ca să vă spun adevărul, nu există reguli precise care să determine dimensiunea elementelor de e-mail, astfel încât să puteți experimenta cu forme și dimensiuni, dar nu faceți șablonul prea neobișnuit și ciudat pentru utilizatori.

Cum să aveți o imagine de fundal în e-mail folosind Atomic Mail Sender?

Ei bine, ați aflat despre fundalul buletinului informativ și despre cum să le configurați. Dar în ce instrument este posibil să testați aceste cunoștințe și să obțineți un rezultat vizual? Utilizați Atomic Mail Sender în aceste scopuri. Acest instrument are un editor HTML încorporat. Astfel, scrie-ți codul, evaluează rezultatul vizual și trimite imediat newsletter-ul din același program. Hai să aruncăm o privire.

Buletin informativ cu fundal gradient în Atomic Mail Sender

Editor HTML în Atomic Mail Sender

Evocați codul și trimiteți e-mailuri cu orice fundal în programul Atomic Mail Sender.

Imaginea de fundal este o modalitate bună de a decora șablonul de e-mail. Dar nu înlocuiți conținutul e-mailului doar cu imaginea. Nu creați e-mailuri complet bazate pe imagini. Aceasta este încă o greșeală reală de marketing prin e-mail. Uneori deschizi un e-mail și tot ce vezi sunt pătrate cu cruci roșii. Sigur că nu permit imagini de la toți expeditorii, iar asta înseamnă că cu siguranță voi rata acest e-mail, chiar dacă nu a fost o înșelătorie sau spam. Asigurați-vă că e-mailul dvs. arată informativ și util fără imagini.

Utilizați șabloanele de e-mail gratuite Atomic Mail Sender pentru inspirație și pentru a crea propriile e-mailuri de marcă cu imagini de fundal bling-tastic. Spuneți-ne dacă aveți întrebări în comentariile de mai jos.

În lista noastră de software există, de asemenea, extractor de numere de telefon pentru colectarea numerelor de telefon, căutare de e-mail whois pentru a găsi informații despre proprietarul e-mail-ului și un verificator de e-mail pentru verificarea adresei de e-mail, pentru a face acest lucru online, utilizați verificatorul de e-mail online.

Doriți să creați e-mailuri colorate și să le trimiteți folosind același instrument? Descărcați o versiune de testare a Atomic Mail Sender și încântați destinatarii cu buletine informative estetice!