Creați o semnătură e-mail HTML profesională

O semnătură e-mail (numită și subsol de e-mail) este un bloc de informații la sfârșitul fiecărui mesaj trimis. Conține date de contact, funcția, numele companiei și adesea un link către website sau calendarul de întâlniri.

Destinatarul nu trebuie să caute numărul de telefon în mesajele anterioare - toate detaliile sunt ușor disponibile. O semnătură e-mail profesională arată și că acordați atenție detaliilor și mențineți o imagine consecventă a companiei în corespondența de afaceri.

Tab-ul Date conține toate câmpurile pe care le puteți completa. Doar două sunt obligatorii: numele și adresa de e-mail. Restul câmpurilor sunt opționale și vor apărea în semnătură doar când sunt completate.

Câmpuri în tab-ul Date

• Linie deasupra numelui - text suplimentar afișat deasupra numelui. Puteți introduce numele companiei, tagline-ul sau sloganul.
• Avatar / logo (URL imagine) - URL către o fotografie de profil sau logo-ul companiei. Imaginea ar trebui să fie pătrată (min. 120×120 px) și accesibilă public. După lipirea URL-ului, apar opțiuni suplimentare: Forma avatarului (rotund, rotunjit sau pătrat) și Dimensiunea avatarului (mic - 40 px, mediu - 56 px, mare - 72 px).
• Nume complet - câmp obligatoriu. Introduceți numele complet.
• Etichetă nume - text scurt lângă nume, ex. pronume sau titlu abreviat.
• Funcție - rolul în companie, ex. Manager Vânzări, Specialist Marketing.
• Numele companiei - numele organizației pe care o reprezentați.
• Linie suplimentară - o scurtă descriere a ceea ce faceți sau oferiți.
• E-mail - câmp obligatoriu. Introduceți adresa de e-mail de afaceri.
• Telefon - număr de contact. Orice format, ex. +40 123 456 789.
• Website - URL-ul complet al website-ului, începând cu https://.
• Adresă - adresa fizică a companiei (stradă, oraș, cod poștal).
• Detalii oficiale - CUI, număr licență sau alte detalii cerute în industria dvs.

Un buton CTA (call-to-action) este un element clicabil care direcționează destinatarul către o pagină aleasă. Poate fi un link către calendarul de întâlniri, formular de contact sau ofertă. Generatorul permite adăugarea a două butoane CTA.

Buton principal

1. Deschideți tab-ul Butoane în editor.
2. În secțiunea Buton principal, introduceți textul pe care destinatarul îl va vedea, ex. Programează o consultație gratuită.
3. În câmpul Link CTA, lipiți URL-ul complet. Adresa trebuie să înceapă cu https://.

Buton secundar

Puteți adăuga un al doilea buton CTA cu stil outline (fundal transparent cu bordură). Completați câmpurile din secțiunea Buton secundar la fel ca pentru butonul principal.

Rotunjirea butoanelor

La baza tab-ului Butoane veți găsi opțiunea Rotunjire buton. Trei variante sunt disponibile: Fără (colțuri drepte), Ușoară (ușor rotunjit) sau Completă (buton oval).

Dacă lăsați ambele câmpuri goale, butonul nu va apărea în semnătură. Dacă completați doar un câmp, butonul nu va fi vizibil - sunt necesare atât textul cât și linkul.

În tab-ul Social Media puteți adăuga linkuri către profilurile dvs. Generatorul suportă douăsprezece platforme: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (fostul Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram și Pinterest.

Cum se face

1. Deschideți tab-ul Social Media în editor.
2. Lângă fiecare platformă veți găsi un câmp URL. Lipiți linkul complet către profilul dvs., ex. https://www.linkedin.com/in/profiluldvs.
3. Completați doar câmpurile de care aveți nevoie. Câmpurile goale nu vor apărea în semnătură.

Pictograme social media

La baza tab-ului Social Media veți găsi opțiunea Afișează pictograme lângă numele serviciilor. Când este activată, linkurile se vor afișa ca pictograme SVG colorate în loc de doar nume.

• Dimensiune pictogramă - opțiuni: Mic (16 px), Mediu (20 px) sau Mare (24 px).
• Culoare pictogramă - Culori platformă (culori implicite pentru fiecare platformă), Culoare accent (culoare accent uniformă) sau Culoare text.

În tab-ul Aspect puteți personaliza culorile, fontul și alte elemente vizuale ale semnăturii.

Teme de culori

În partea de sus a tab-ului veți găsi cinci teme gata făcute: Întunecat, Albastru, Violet, Verde și Gri. Făcând clic pe o temă se setează automat culoarea accent și culoarea textului. Aceasta este cea mai rapidă modalitate de a obține un aspect consistent al semnăturii.

Culori

• Culoare accent - folosită în bara laterală/sus, butonul CTA și linkuri. Puteți alege orice culoare din paletă.
• Culoare text - culoarea tuturor textelor din semnătură (nume, date de contact, disclaimer).
• Culoare fundal - culoarea de fundal a întregii semnături. Alb implicit, dar poate fi schimbată.

Font și dimensiune

• Font - opțiuni: Arial, Verdana, Tahoma, Trebuchet MS și Georgia. Toate sunt sigure pentru e-mail și se vor afișa corect la destinatar.
• Dimensiune text - trei opțiuni: Mic (12 px), Standard (14 px) și Mai mare (16 px).

Setări suplimentare

• Bordură semnătură - puteți adăuga o bordură semnăturii selectând orice combinație de laturi (stânga, dreapta, sus, jos). Selectarea tuturor laturilor setează automat o bordură completă. Bordura folosește culoarea accent.

În tab-ul Stil Text puteți personaliza individual culoarea și dimensiunea fontului pentru fiecare element text al semnăturii.

Elemente disponibile

Sunt vizibile doar elementele care au conținut în semnătură. Pentru fiecare element puteți seta:

• Nume - afișat implicit în culoarea accent.
• Funcție - rolul în companie.
• Companie - numele organizației.
• Date de contact - e-mail, telefon, website (etichete).
• Social media - linkuri profiluri.
• Disclaimer legal - text legal la baza semnăturii.

Cum să schimbați culoarea

Lângă fiecare element veți găsi un rând de opțiuni de culoare. Faceți clic pe un pătrat de culoare pentru a-l selecta. Puteți adăuga și o culoare personalizată făcând clic pe pătratul colorat cu plus - alegeți o culoare și faceți clic pe Salvează. Culorile personalizate (până la 8) sunt partajate între toate elementele.

Butonul pictogramă de resetare restaurează culoarea implicită a elementului.

Cum să schimbați dimensiunea

Pe al doilea rând veți găsi un control de dimensiune cu butoane - și +. Valoarea arată decalajul relativ la dimensiunea fontului de bază (setată în tab-ul Aspect). Interval: de la -4 la +4 pixeli.

În tab-ul Spațiere puteți controla precis distanțele dintre elementele individuale ale semnăturii.

Padding interior semnătură

În partea de sus a tab-ului veți găsi opțiunea de padding interior - distanța dintre conținutul semnăturii și marginile sale. Trei valori sunt disponibile: 8 px (mic), 16 px (mediu) și 24 px (mare).

Spațiere între elemente

Sub padding veți găsi controale pentru elementele individuale ale semnăturii. Fiecare control are butoane + și - pentru a crește sau reduce spațierea. Sunt vizibile doar opțiunile pentru elementele prezente în semnătură.

• După nume - spațierea sub linia numelui.
• După funcție / companie - spațierea sub linia funcției și companiei.
• După linia suplimentară - spațierea sub descriere (dacă este completată).
• După date de contact - spațierea sub e-mail, telefon și website.
• După social media - spațierea sub linkurile profilurilor.
• După butonul CTA - spațierea sub buton (dacă este activat).
• Înainte de disclaimer - spațierea deasupra textului legal.

Dacă goliți un câmp (ex. eliminați numărul de telefon), opțiunea de spațiere corespunzătoare va dispărea automat din tab.

În tab-ul Disclaimer / Legal puteți adăuga text legal care va apărea la baza semnăturii cu font mai mic.

Când să adăugați un disclaimer

• Corespondență de afaceri - notificare de confidențialitate și cerere de ștergere în caz de livrare incorectă.
• Cerințe industriale - unele industrii (ex. juridic, medical, financiar) necesită informații specifice în fiecare mesaj.
• GDPR - informații despre prelucrarea datelor personale, dacă compania este operator de date.

Implicit, câmpul este completat cu un text exemplu de confidențialitate. Puteți edita, șterge sau înlocui cu propriul disclaimer. Dacă lăsați câmpul gol, niciun disclaimer nu va apărea în semnătură.

Linie separatoare

Sub câmpul de text veți găsi opțiunea Afișează separator între datele de contact și disclaimer. Activați-o pentru a adăuga o linie orizontală între datele de contact și disclaimerul legal.

După activarea liniei, apar opțiuni suplimentare de personalizare:

• Stil linie - opțiuni: solid, punctat sau întrerupt.
• Grosime linie - trei opțiuni: 1 px, 2 px sau 3 px.
• Culoare linie - gri implicit (#e5e7eb). Puteți alege orice culoare din paletă sau restaura valoarea implicită făcând clic pe butonul Implicit.

Generatorul salvează automat toate setările în memoria browserului (localStorage). După reîmprospătarea paginii sau redeschiderea instrumentului, datele, layoutul, culorile și toate celelalte opțiuni vor fi restaurate.

Cum funcționează salvarea automată?

Fiecare modificare (text, culoare, layout, spațiere) este salvată imediat în memoria browserului. Salvarea are loc automat în fundal - fără a apăsa vreun buton.

Cum să resetați setările

Sub previzualizarea semnăturii veți găsi un buton Resetare aspect. După clic, va apărea un dialog de confirmare. Confirmarea resetării va restaura toate datele și setările la valorile implicite. Această operație nu poate fi anulată.

Export și import configurație

Sub previzualizarea semnăturii veți găsi două butoane suplimentare: Export setări și Import setări. Exportul salvează toate datele, culorile, layoutul, spațierea și stilurile de text într-un fișier JSON. Importul încarcă o configurație salvată anterior dintr-un fișier.

Această funcție este deosebit de utilă când doriți să transferați configurația semnăturii între computere, să partajați setările cu colegii sau să păstrați o copie de siguranță înainte de resetare.

Panoul de previzualizare se afișează în partea dreaptă a editorului și se actualizează automat cu fiecare modificare. Previzualizarea este fixă, deci rămâne vizibilă chiar și când derulați prin opțiunile de editare.

Comutare fundal previzualizare

Deasupra previzualizării veți găsi trei butoane de schimbare fundal: Deschis (fundal gri implicit), Întunecat (fundal întunecat, util pentru verificarea lizibilității pe fundaluri întunecate) și Tablă de șah (model tablă de șah, permite vizualizarea transparenței și marginilor semnăturii).

Butoane de acțiune

Sub previzualizare veți găsi mai multe butoane:

• Copiază semnătura (Gmail / Outlook) - copiază semnătura în clipboard ca HTML formatat. Lipiți-o direct în setările semnăturii.
• Copiază cod HTML - copiază codul HTML brut al semnăturii în clipboard. Util când doriți să lipiți codul într-un editor HTML sau CMS.
• Descarcă ca HTML - salvează codul semnăturii ca fișier .html pe disc. Util pentru arhivare sau partajare cu un dezvoltator.
• Vizualizează cod HTML - deschide un modal cu codul sursă HTML complet al semnăturii. Puteți revizui codul și copia direct din modal.
• Export setări - salvează configurația completă a semnăturii (date, culori, layout, spațiere, stiluri) într-un fișier JSON.
• Import setări - încarcă o configurație dintr-un fișier JSON. Toate setările vor fi aplicate automat.
• Resetare aspect - restaurează toate datele și setările la valorile implicite (după confirmare).