Generator semnătură de e-mail HTML

Bucăți din codul semnăturii

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Semnătură simplă Numele în culoarea de accent, apoi funcția și datele de contact.

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse:collapse;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;color:#333333;">
  <tr>
    <td style="padding:0;vertical-align:top;">
      <div style="font-size:16px;font-weight:bold;color:#2563eb;">Ana Popescu</div>
      <div style="font-size:13px;color:#555555;padding-bottom:6px;">Manager vânzări, Grădina Exemplu SRL</div>
      <div>Tel: <a href="tel:+40722000000" style="color:#2563eb;text-decoration:none;">+40 722 000 000</a></div>
      <div>E-mail: <a href="mailto:ana@exemplu.ro" style="color:#2563eb;text-decoration:none;">ana@exemplu.ro</a></div>
    </td>
  </tr>
</table>

Cu poză în stânga Două celule de tabel; linia colorată din stânga textului e un border-left.

<td style="padding:0 14px 0 0;vertical-align:top;">
  <img src="https://www.exemplu.ro/imagini/ana.jpg" width="80" height="80" alt="Ana Popescu" style="display:block;width:80px;height:80px;border:0;border-radius:50%;">
</td>
<td style="padding:0 0 0 14px;border-left:3px solid #0f766e;vertical-align:top;">
  <div style="font-size:16px;font-weight:bold;color:#111111;">Ana Popescu</div>
</td>

Linkuri sociale ca text Fără iconițe externe, care pot fi blocate de programul de e-mail.

<div style="padding-top:6px;font-weight:bold;">
  <a href="https://www.linkedin.com/in/exemplu" style="color:#2563eb;text-decoration:none;">LinkedIn</a> &nbsp;|&nbsp;
  <a href="https://www.instagram.com/exemplu" style="color:#2563eb;text-decoration:none;">Instagram</a>
</div>

Cum folosești generatorul de semnătură

Completează numele, funcția, firma, telefonul, e-mailul, site-ul și, opțional, adresa.
Alege aranjarea: simplu sau cu imagine în stânga. Imaginea trebuie să fie deja pe internet, la o adresă https://; generatorul nu o încarcă nicăieri.
Alege culoarea de accent și adaugă linkurile spre LinkedIn, Facebook, Instagram sau X.
Apasă Copiază semnătura și lipește-o în setările programului de e-mail. Totul rulează în browser; nu se trimite nimic către server.

Cum o pui în Gmail și Outlook

Gmail: rotița din dreapta sus, Vezi toate setările, fila General, secțiunea Semnătură, Creează una nouă. Lipește cu Ctrl+V (pe Mac ⌘+V) și apasă Salvează modificările, jos de tot. Gmail acceptă cel mult 10.000 de caractere.

Outlook nou și Outlook pe web: Setări, Conturi, Semnături. Outlook clasic pe Windows: Fișier, Opțiuni, Corespondență, Semnături. Lipește semnătura copiată, nu codul HTML.

De ce tabel și stiluri inline

Programele de e-mail ignoră o parte din CSS: Gmail scoate stilurile din <head>, iar Outlook pe Windows desenează mesajele cu motorul din Word. De aceea semnătura folosește un tabel, stiluri scrise direct pe fiecare element și fonturi standard. Rețelele sociale sunt linkuri text, nu iconițe, ca să nu fie blocate imaginile externe.

<td style="padding:0 0 0 14px;border-left:3px solid #2563eb;vertical-align:top;">
  <div style="font-size:16px;font-weight:bold;color:#111111;">Ana Popescu</div>
  <div>Tel: <a href="tel:+40722000000" style="color:#2563eb;text-decoration:none;">+40 722 000 000</a></div>
</td>

Colțurile rotunjite ale pozei (border-radius) apar în Gmail și Apple Mail, dar Outlook pe Windows arată poza pătrată.

Întrebări frecvente

De ce nu apare poza la destinatar?

Unele programe blochează imaginile externe până când omul le permite. Folosește o imagine mică (sub 100 KB), la o adresă https:// publică.

Copierea nu merge în browserul meu. Ce fac?

Selectează previzualizarea cu mouse-ul și copiaz-o cu Ctrl+C. Important e să copiezi semnătura afișată, nu codul HTML.