Bezplatný generátor HTML e-mailového podpisu pro Gmail a Outlook

E-mailový podpis je blok se jménem, pozicí, firmou a kontaktními údaji, který e-mailový program připojí na konec každé odeslané zprávy. Generátor ho sestaví jako HTML tabulku se styly zapsanými přímo u jednotlivých prvků, proto vložený podpis zachová barvy, mezery i odkazy.

Povinná jsou jen dvě pole: Jméno a příjmení a E-mail. Když jedno z nich chybí, kliknutí na Zkopírovat podpis (Gmail / Outlook) přesune kurzor do prázdného pole. Ostatní přidáš, když se hodí příjemci: telefon, web, adresu, tlačítko s odkazem na kalendář nebo profily na sociálních sítích.

Zápis kontaktů na hlavičkovém papíře a vizitkách popisuje mezinárodní norma ITU-T E.123. Doporučuje psát telefonní číslo se znaménkem plus a předvolbou země, bez závorek, uvádět e-mail s označením pod telefonním číslem a adresu webu bez předpony http://[1]. Rozvržení Sloupec štítků má přesně toto pořadí: telefon, pod ním e-mail a web, každý se štítkem ve vlastním sloupci.

Prázdné pole se v podpisu nezobrazí. Názvy níže jsou popisky polí z editoru a šedý text v každém prázdném poli ukazuje ukázkový záznam.

• Pozice a Název firmy stojí na jednom řádku, oddělené tečkou.
• Pole Telefon přijme číslo v libovolném zápisu. Podpis ho ukáže přesně tak, jak ho napíšeš, a odkaz pro volání sestaví jen z číslic a znaménka plus. Odkaz tel: nesmí uvnitř čísla obsahovat mezery ani slova[2].
• Adresa z pole Webová stránka se v podpisu zobrazí tak, jak ji napíšeš, například www.firma.cz. Chybějící https:// doplní generátor jen do odkazu.
• Pole Avatar / logo (URL obrázku) přijímá adresu obrázku zveřejněného na webu. Po vložení adresy zvolíš tvar (Kruhový, Zaoblený, Čtvercový) a velikost: 40, 56 nebo 72 px. Obrázek o straně aspoň 144 px zůstane ostrý i na displejích s vysokou hustotou.
• Řádek nad jménem obsahuje krátký text velkými písmeny, například název firmy nebo slogan.
• Štítek u jména je krátká poznámka v oválném rámečku vedle jména, třeba titul MBA nebo zájmena.
• Dodatečný řádek pojme jednu větu o tom, čím se zabýváš.
• Adresa a Formální údaje jsou víceřádková pole: klávesa Enter začne nový řádek i v podpisu. Formální údaje, jako IČO, DIČ nebo spisová značka, generátor vypíše malým písmem nad právní doložkou.

Generátor má osm rozvržení. V sekci Vzhled má každé svůj náhled, který ukazuje podpis s tvými údaji a barvami. Změna rozvržení nesmaže žádné pole:

• Standardní: údaje pod sebou, telefon, e-mail a web na jednom řádku se štítky.
• Horní lišta: jméno, pozice a avatar na liště v barvě akcentu, ostatní údaje pod ní.
• Sloupec štítků: telefon, e-mail a web pod sebou, štítky ve vlastním sloupci.
• Vycentrovaný: vše zarovnané na střed, avatar nad jménem.
• Kompaktní: jméno, pozice, firma a kontakt na jednom řádku, pod ním sociální sítě a doložka.
• Dva sloupce: avatar, jméno a pozice na jedné straně, kontakt, sítě a tlačítka na druhé, oddělené svislou čarou.
• Minimalistický: jméno, pozice, firma, e-mail a telefon, bez webu, avataru a tlačítek.
• Spodní lišta: údaje nahoře a pod nimi tlačítka a název firmy na liště v barvě akcentu.

Když vyplníš pole, které zvolené rozvržení nezobrazuje, objeví se pod náhledem upozornění s názvem tohoto pole.

V sekci Tlačítka nastavíš dvě tlačítka. První má pozadí v barvě akcentu a jeho text a adresu napíšeš do polí Text tlačítka a CTA odkaz. Druhé má jen rámeček a slouží mu pole Text druhého tlačítka a Odkaz druhého tlačítka. Každé tlačítko potřebuje text a odkaz. Když jedno z těchto polí zůstane prázdné, tlačítko se v podpisu neobjeví.

Odkaz může otevřít stránku, nový e-mail (mailto:info@firma.cz) nebo hovor (tel:+420601234567). Adresu webu nemusíš začínat https://, generátor ho doplní. Adresy začínající javascript:, data:, vbscript: nebo file: generátor odmítne, takže tlačítko s takovým odkazem se nezobrazí.

Zaoblení tlačítka má tři varianty: Žádné, Mírné a Plné. Outlook pro Windows nepodporuje zaoblené rohy v CSS[3], takže tam mají tlačítka vždy ostré rohy. Rozvržení Kompaktní a Minimalistický tlačítka nezobrazují. Stejný odkaz, třeba na rezervační kalendář, dáš na vizitku jako kód z generátoru QR kódů.

V sekci Sociální sítě klikni na název služby pod nápisem Přidat profil a editor přidá pole pro adresu profilu. Na výběr je 12 služeb: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram a Pinterest. V podpisu se zobrazí jen služby s vyplněnou adresou a tlačítko s křížkem vedle pole profil odebere. Profily stojí v podpisu ve stejném pořadí jako v editoru. Nový se přidá na konec seznamu a pořadí změníš přetažením profilu za úchyt u jeho pole. Z klávesnice označ úchyt a posuň profil šipkami nahoru a dolů.

Celá adresa profilu není nutná. V polích Instagram, Facebook, TikTok, YouTube, X, GitHub, Dribbble, Behance, Telegram a Pinterest stačí @jméno a generátor z něj sestaví adresu profilu. LinkedIn potřebuje adresu, protože profily osob a firem mají různé cesty (/in/ a /company/). Do pole WhatsApp napiš telefonní číslo s předvolbou země: generátor z něj udělá odkaz https://wa.me/ jen s číslicemi, ve formátu, který popisuje Centrum nápovědy WhatsApp[4].

Ikony místo názvů služeb

Volba Zobrazit ikony místo názvů služeb nahradí názvy ikonami o velikosti 16, 20 nebo 24 px ve třech barvách: Barvy platformy, Tmavé nebo Bílé, ty poslední na tmavé pozadí podpisu. Ikony jsou obrázky PNG z arteontools.com. Ikona SVG zapsaná přímo do kódu se v Gmailu, Outlooku ani Yahoo Mailu nezobrazí[5] a obrázky uložené v base64 Gmail odstraňuje[6]. Každá ikona nese název služby jako alternativní text, takže když e-mailový program zablokuje obrázky, příjemce uvidí tento název.

Barvy

Barva akcentu vybereš z pěti hotových vzorků nebo z palety prohlížeče, která se otevře po kliknutí na barevný čtverec. Kód HEX můžeš napsat i do pole vedle čtverce, třeba zkopírovaný z manuálu firemní identity. Pole přijme kód s mřížkou i bez ní, o šesti nebo třech znacích, například #1d4ed8 nebo 14c. Stejně, jen bez hotových vzorků, nastavíš Barva textu a Barva pozadí. Barvu akcentu dostane jméno, odkazy, tlačítka, rámeček a lišty v rozvrženích Horní lišta a Spodní lišta. Barva pozadí vyplní celý podpis. Světlý text na barevném pozadí ověříš v testeru kontrastu barev a kód firemní barvy převedeš v převodníku HEX na RGB. Když manuál firemní identity uvádí barvy v RGB, kód HEX získáš v převodníku RGB na HEX a tiskové barvy v CMYK nejdřív převedeš na RGB v převodníku CMYK na RGB. Barvu akcentu z loga zjistíš v extraktoru barev z obrázku a sladěné odstíny najdeš v generátoru barevných palet.

Písmo a velikost písma

Na výběr jsou Arial, Verdana, Tahoma, Trebuchet MS a Georgia, tedy písma, která Microsoft dodává se systémem Windows[7]. Když zařízení příjemce zvolené písmo nemá, e-mailový program použije vlastní bezpatkové písmo, u Georgie patkové, protože tak ho generátor zapisuje.

Velikost písma má tři stupně: Malé 12 px, Standardní 13 px a Větší 14 px. Jméno je o 2 px větší než ostatní text a doložka o 2 px menší. Outlook udává velikost písma v bodech a 13 px odpovídá 9,75 pt, což ověříš v převodníku typografických jednotek.

Směr textu

Volba Směr textu s nastavením Zprava doleva uspořádá podpis tak, jak to vyžaduje text v arabštině nebo hebrejštině. Generátor pak do podpisu přidá atribut dir="rtl", který podporují Gmail, Outlook i Apple Mail[8]. Telefonní čísla, e-maily a weby zůstanou zleva doprava, aby se číslice neotočily. Arabská písmena obsahují Arial a Tahoma[9], Verdana, Georgia ani Trebuchet MS je nemají[10].

Rámeček podpisu

U volby Rámeček podpisu zaškrtni strany, na kterých má být rámeček v barvě akcentu: Levý, Pravý, Horní a Spodní. Jedna strana má 4 px a zaškrtnutí všech čtyř vykreslí celý rámeček o síle 2 px.

Sekce Styl textu ukazuje řádek pro každý prvek podpisu: Jméno a příjmení, Pozice, Firma, Kontaktní údaje, Sociální sítě a Právní doložka. Barvu vybereš v paletě prohlížeče po kliknutí na barevný čtverec. Když má text vlastní barvu, objeví se vedle čtverce tlačítko Obnovit výchozí barvu. Tlačítka minus a plus mění velikost o 2 px na každé kliknutí a mezi nimi vidíš velikost textu v pixelech. Změníš ji nejvýš o 4 px dolů nebo nahoru vůči základní velikosti.

Sekce Rozestupy nastavuje Vnitřní odsazení podpisu (8, 16 nebo 24 px) a rozestupy mezi prvky po 2 px, od 0 do 32 px. Vidíš jen rozestupy prvků, které jsou v podpisu a ve zvoleném rozvržení:

• Pod jménem
• Pod pozicí
• Pod dodatečným řádkem
• Nad kontaktními údaji
• Nad sociálními sítěmi
• Nad tlačítkem
• Nad doložkou

Sekce Právní doložka má pole pro text, který se zobrazí na konci podpisu menším písmem, například upozornění na důvěrnost zprávy. Pole je na začátku prázdné a tlačítko Vložit ukázkovou doložku vloží hotové upozornění na důvěrnost, které můžeš upravit. Prázdné pole do podpisu nic nepřidá.

Volba Zobrazit oddělovač mezi kontakty a doložkou se objeví, když podpis obsahuje doložku nebo formální údaje, a přidá nad ně vodorovnou čáru. Styl čáry může být plný, přerušovaný nebo tečkovaný, síla 1, 2 nebo 3 px a Barva čáry libovolná, tlačítko Výchozí vrátí světle šedou #e5e7eb. Čáru vykreslují rozvržení Standardní, Horní lišta, Sloupec štítků a Vycentrovaný. V rozvržení Dva sloupce odděluje doložku od zbytku vlastní tenká čára.

Klikni na Zkopírovat podpis (Gmail / Outlook). Tlačítko zkopíruje podpis i s formátováním, takže po vložení zůstanou barvy, odkazy i obrázky. Pod náhledem se pak objeví tři kroky pro vložení, stejné jako níže, s přepínačem Gmail a Outlook. Když po zkopírování v podpisu něco změníš, editor ti připomene, že ho máš zkopírovat znovu.

Gmail v prohlížeči

1. Vpravo nahoře klikni na ozubené kolečko a potom na Zobrazit všechna nastavení.
2. V sekci Podpis vlož podpis do pole klávesami Ctrl + V, na Macu Cmd + V.
3. Dole na stránce klikni na Uložit změny.

Podpis v Gmailu může mít až 10 000 znaků a do tohoto limitu se počítá i vložený obrázek[11].

Nový Outlook pro Windows a Outlook na webu

1. Vyber Nastavení, potom Účty a Podpisy.
2. Přidej nový podpis, pojmenuj ho a vlož podpis do pole pro úpravy.
3. Vyber Uložit.

V klasickém Outlooku pro Windows otevři novou zprávu a v nabídce Zpráva vyber Podpis a potom Podpisy[12].

Náhled ukazuje podpis tak, jak ho vykreslí prohlížeč. E-mailové programy rozumí menší části HTML a každý trochu jinak, proto generátor vynechává prvky, které nezobrazují. Některé rozdíly ale závisí na tom, co zadáš:

• Obrázek uložený přímo v adrese (data:image/png;base64,…) se v Gmailu nezobrazí[6]. Kód base64 se hodí v souborech HTML a CSS, pole avataru ale potřebuje adresu souboru, proto editor po vložení kódu base64 zobrazí upozornění.
• Gmail u účtů Google nezobrazuje obrázky SVG[13], logo uložené jako SVG proto nejdřív převeď na PNG, například v převodníku SVG na PNG.
• Outlook pro Windows nezobrazuje obrázky WebP[14], logo i fotografii proto ulož jako PNG nebo JPG, například v převodníku WebP na PNG.
• Outlook pro Windows ve výchozím nastavení blokuje automatické stahování obrázků z internetu[15]. Dokud to příjemce nepovolí, uvidí místo ikon názvy služeb a žádný avatar.
• Adresa obrázku musí vést přímo na soubor. Odkaz ke sdílení z Disku Google nebo Dropboxu otevře stránku s náhledem, takže se obrázek nezobrazí.

Generátor ukládá údaje a nastavení v prohlížeči (localStorage) při každé změně, zvlášť pro každou jazykovou verzi stránky. Když se vrátíš ve stejném prohlížeči, podpis na tebe čeká v posledním uloženém stavu. Údaje podpisu se na náš server neodesílají.

Tlačítko Exportovat nastavení uloží údaje, barvy, rozvržení, rozestupy a styly textu do souboru .json a Importovat nastavení tento soubor načte na jiném počítači nebo u kolegy, který změní jen své údaje. Import kontroluje každou hodnotu: barva zapsaná jinak než v HEX a písmo mimo seznam ponechají nastavení z doby před importem.

Tlačítko Obnovit výchozí po potvrzení vymaže všechna pole a vrátí podpisu výchozí vzhled. Tuto akci nelze vrátit, nastavení proto nejdřív exportuj.

Všechna tato tlačítka jsou v kartě náhledu pod tlačítkem pro kopírování. Najdeš tam také Zkopírovat HTML kód (čistý kód pro HTML editor) a Stáhnout jako HTML (soubor e-mailovy-podpis.html). Přepínač nad náhledem se sluncem (Světlý) nebo s měsícem (Tmavý) ukáže podpis na světlém nebo tmavém pozadí.