Cum să remediați linkurile albastre din Gmail pentru un vis de e-mail împlinit

Publicat: 2021-07-16

Frustrat de linkurile albastre aparent aleatorii, în afara mărcii, atunci când QA îți testează e-mailul, altfel perfect, în Gmail? Am fost acolo. Am făcut asta. Veștile bune? Nu ai greșit cu nimic. Din 2017, Gmail transformă automat unele dintre copiile tale, cum ar fi adrese de e-mail, numere de telefon, adrese fizice și ore, în elemente pe care se poate face clic, uneori devenind albastru. Și pe măsură ce se deschide al doilea cel mai popular client de e-mail cu peste 30% din e-mailuri, conform datelor noastre, nu puteți ignora Gmail.

În ciuda a ceea ce sunt linkurile albastre și de ce, aveți nevoie de e-mailul dvs. să arate ca ceea ce a fost aprobat. Sau măcar ca linkurile să fie pe brand. Din fericire, eliminarea stilului implicit nu este atât de dificilă. Vă vom prezenta cum apar linkurile albastre și ce puteți face pentru a le modifica pentru a se potrivi cu designul e-mailului dvs. Toate în timp ce păstrați linkurile ușor de utilizat pentru publicul dvs. Gmail.

E-mailurile tale au link-uri albastre?

Aflați întotdeauna când clienții de e-mail își actualizează redarea e-mailului cu Litmus Email Previews. Previzualizați-vă e-mailurile pe toți clienții și dispozitivele de e-mail populare, inclusiv Gmail, și identificați erorile înainte de a trimite.

Aflați mai multe →

Țineți cont de accesibilitate

În primul rând, este important să ne amintim că linkurile albastre au un scop important. Ele fac mai convenabil pentru abonații tăi să acționeze în funcție de e-mailul tău, de exemplu, să navigheze la o locație pe care ai inclus-o sau să-ți dea un apel rapid. Ambele excelente pentru uz și accesibilitate.

legături albastre — Da, aveam și câteva linkuri albastre în e-mailurile noastre

Cu toate acestea, aceste legături automate pot avea stilul implicit: subliniat și albastru. Acest lucru poate intra în conflict cu designul dvs. de e-mail și chiar poate face e-mailul mai puțin accesibil dacă linkurile sunt pe o culoare de fundal care nu contrastează bine cu ele.

subsol — Linkul albastru de aici abia se observă

Prin urmare, veți dori să păstrați funcționalitatea linkului, dar să îl stilați astfel încât să se potrivească mai bine cu designul dvs. de e-mail și să fie lizibil.

Anatomia unui e-mail spart (ediția a doua)

Atenție: există și alți vinovați de un e-mail spart

Erorile de e-mail te fac să te înfioră? Linkurile albastre sunt doar o modalitate prin care e-mailul tău poate părea rupt. Aflați în profunzime ceea ce vă poate distruge e-mailul și sfaturile și trucurile pentru a rămâne adevărat.

Dezvăluie probleme comune și remedieri →

Trei moduri de a schimba culoarea link-ului albastru în Gmail

Pentru a schimba culoarea link-ului albastru, trebuie să înțelegeți de ce se întâmplă. Când Gmail găsește o adresă sau un număr de telefon într-un e-mail, adaugă automat o declarație de stil suplimentară, care formatează orice link din e-mail ca albastru dacă nu are atașate stiluri inline:

.ii a[href] { color: #15c; }

Clasa .ii se referă la clasa dată div-ului care conține întregul e-mail în Gmail. A [href] este un selector de atribute CSS. Aceasta declară că orice link din clasa .ii trebuie să fie de culoare albastră.

Adresele și numerele de telefon nu sunt de obicei legate în e-mailuri. Cu toate acestea, Gmail le recunoaște și le transformă într-un link indiferent dacă vă place sau nu. Deoarece aceste link-uri sunt create din mers, nu au niciun stil inline atașat la ele și, prin urmare, este folosit stilul implicit de mai sus.

Există trei metode pe care le puteți folosi pentru a opri linkurile să devină albastre, în funcție de dacă doriți ca aceste linkuri să arate la fel sau diferit de celelalte link-uri din e-mailul dvs.

Opțiunea 1: Folosiți metoda <span>

Metoda <span> este cea mai simplă tehnică de a opri numerele de telefon și adresele să devină albastre în Gmail. Este perfect dacă doriți să le stilizați diferit de celelalte link-uri ale dvs. , păstrându-le în același timp funcționalitatea. Iată cum:

Introduceți numărul de telefon sau adresa într-un <span></span>
Dați <span> o clasă, de exemplu: <span class="contact”></span>
Declarați clasa în secțiunea <style> a e-mailului dvs. pentru a stiliza numărul de telefon sau adresa după cum doriți
Profit!

Iată un exemplu de cod HTML în care adresa apare în e-mail:

<span class="contact">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</span>

Și iată un exemplu de declarație de stil pentru clasa „contact” în blocul <style> din <head> al e-mailului dvs. unde setăm linkul să fie negru (#000000) și subliniat:

<style type="text/css">
    .contact a {color: #000000!important; text-decoration: underline!important;}
</style>

Schimbați culoarea neagră din codul nostru exemplu schimbând #000000 cu un cod hexadecimal de culoare care se potrivește mărcii dvs. Dacă nu doriți ca linkul dvs. să fie subliniat, schimbați sublinierea din codul dvs. la niciunul.

Crearea unui <span> cu un nume de clasă în jurul adresei sau numărului de telefon vă oferă ceva de vizat folosind CSS. Doar vizarea <span> în sine nu va stiliza linkul. Acesta va stil numai textul deconectat, în timp ce linkul din interiorul <span> va avea în continuare stilul albastru implicit. Deci, pentru a viza linkul din interiorul intervalului, declarația de stil include numele clasei, precum și „a”.

Acest lucru este deosebit de grozav pentru numerele de telefon dacă doriți să adăugați <a href="tel:XXX-XXXX”> direct la numerele de telefon, dar nu doriți ca numărul de telefon să încerce să deschidă o aplicație de telefon pe desktop. Și apoi trebuie să ascundeți și să afișați conținut pentru desktop vs. mobil. Doar sări peste durerea de cap și profită de faptul că un client de e-mail face în sfârșit ceva pentru a te ajuta.

Opțiunea 2: suprascrieți stilul tuturor linkurilor

O altă opțiune este să setați propriul stil implicit care se va aplica tuturor linkurilor dintr-un e-mail. Această opțiune este perfectă dacă doriți ca linkurile pentru adresa sau numărul de telefon să arate la fel ca celelalte linkuri, păstrând în același timp funcționalitatea pe care le oferă Gmail.

Adăugați această declarație de stil specifică Gmail la blocul <style> din <head> al e-mailului, astfel:

<style type="text/css">
    u + #body a {
    	  color: inherit;
    	  text-decoration: none;
    	  font-size: inherit;
    	  font-family: inherit;
    	  font-weight: inherit;
    	  line-height: inherit;
    }
</style>

Apoi adăugați ID-ul „body” la eticheta body:

<body id="body">
</body>

Sublinierea „u” este o metodă de direcționare pentru Gmail. Acesta convertește doctype într-o etichetă de subliniere, iar Gmail este singurul client care se comportă astfel. Astfel, folosirea etichetei de subliniere cu selectorul de frați adiacent al unui div sau id/clasă pe acel div în CSS este o metodă unică de a viza numai clienții Gmail (cel puțin pentru moment). În acest exemplu, am folosit un id de „corp”.

Cu această metodă, dacă doriți ca linkurile din e-mailul dvs. să aibă stiluri ușor diferite, acesta va trebui adăugat în linie la acele link-uri specifice, deoarece această tehnică de mai sus va stila toate linkurile așa cum au fost definite în declarația de stil.

Cu toate acestea, există o mică avertizare cu această metodă.

Nu funcționează atunci când utilizatorii Gmail au imaginile oprite în mod implicit și apoi le activează. Acest lucru se datorează unei erori din Gmail care modifică necorespunzător stilul odată ce imaginile sunt activate. Dezvoltatorul de e-mailuri Remi Parmentier are mai multe detalii despre acest bug.

Opțiunea 3: adăugați eticheta <a> și creați-le singur linkuri

Prin conectarea proactivă a elementelor pe care Gmail le-ar conecta automat, aveți mai mult control asupra stilurilor și culorilor acestora. Această opțiune este perfectă dacă doriți să schimbați și locul în care conținutul se leagă la , Poate că aveți o pagină de contact pe site-ul dvs. la care preferați să vă adresați abonaților, în loc să vă deschidă automat aplicația de navigare a telefonului sau să vă sune instantaneu direct.

<a style="color:#4B525D; text-decoration:none;" href="https://www.litmus.com/contact-us/">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</a>

În exemplul de mai sus, adresa fizică are o culoare gri, fără subliniere și este legată de pagina de contact a site-ului nostru. Acest lucru va împiedica Gmail să-și aplice stilul și funcționalitatea implicită.

La revedere, linkuri albastre Gmail

Cu oricare dintre cele trei metode ale noastre, linkurile albastre nu vor mai distruge designul e-mailului și nu vor mai face ca acesta să pară rupt în Gmail. Și asta este grozav - pentru că e-mailurile sparte pot afecta angajamentul și conversiile (și cu siguranță nu vrei asta).

Aveți întrebări despre metodele noastre? Sau ai altă soluție de distribuit? Spune-ne în comentariile de mai jos.

Creați e-mailuri de marcă, fără erori, cu Litmus

Vedeți cum arată e-mailurile dvs. (nu mai sunt linkuri albastre, nu?) pe peste 90 de clienți de e-mail, aplicații și dispozitive, inclusiv Gmail. Spune la revedere e-mailurilor sparte. Uf!

Începeți perioada de încercare gratuită →

Publicat inițial pe 13 octombrie 2017, de Jaina Mistry. Ultima actualizare pe 16 iulie 2021.

Distribuiți, vă mulțumim!

Ce trebuie să știți pentru a gestiona cele 3 tipuri de abonați inactivi de e-mail

Aflați cum să abordați abonații inactivi în funcție de tipul de abonat de e-mail inactiv aceștia, astfel încât să puteți crea o strategie eficientă de re-implicare.
Citeste mai mult

Exemplele și strategiile noastre preferate de marketing prin e-mail pentru Ziua single-ului

E-mailurile de Ziua single-ului sunt răspândite în întreaga lume (nu doar în China). Vedeți 8 exemple de e-mail pentru a vă inspira campania și strategii pentru a începe planificarea.
Citeste mai mult

Matricea holistică de metrice a e-mailului: vedeți imaginea de ansamblu?

Vedeți întreaga imagine a performanței marketingului prin e-mail cu valori de e-mail holistice pe termen scurt și pe termen lung. Și creați campanii mai performante astăzi.
Citeste mai mult

Cum să scoți e-mailurile de Black Friday și Cyber Monday (BF/CM) din parc

Ieșiți în evidență și convertiți abonații cu aceste strategii încercate și adevărate pentru e-mailurile de Black Friday Cyber Monday și exemple perfecte din care să vă inspirați.
Citeste mai mult

Redare e-mail Outlook: Cum am învățat să nu mă mai îngrijorez și să iubesc Outlook

Te întrebi de ce e-mailurile tale arată rău în Outlook? Aflați despre problemele de redare și afișare a e-mailurilor cu care vă puteți confrunta și cum să le remediați pentru perfecțiunea e-mailului.
Citeste mai mult