Darmowy generator stopki email HTML do Gmaila i Outlooka

Stopka mailowa, nazywana też podpisem e-mail, to blok z imieniem i nazwiskiem, stanowiskiem, firmą i danymi kontaktowymi, który program pocztowy dokleja na końcu każdej wysłanej wiadomości. Generator buduje ją jako tabelę HTML ze stylami zapisanymi bezpośrednio przy elementach, dlatego wklejona stopka zachowuje kolory, odstępy i linki.

Obowiązkowe są tylko dwa pola: Imię i nazwisko oraz E-mail. Gdy któregoś brakuje, kliknięcie Kopiuj stopkę (Gmail / Outlook) przeniesie kursor do pustego pola. Resztę dodajesz wtedy, gdy przyda się odbiorcy: telefon, stronę, adres, przycisk z linkiem do kalendarza albo profile w mediach społecznościowych.

Zapis danych kontaktowych na papierze firmowym i wizytówkach opisuje międzynarodowa norma ITU-T E.123. Zaleca ona podawanie numeru ze znakiem plus i kodem kraju, bez nawiasów, adres e-mail z etykietą pod numerem telefonu, a adres strony bez przedrostka http://[1]. Układ Kolumna etykiet ma dokładnie taki porządek: telefon, pod nim e-mail i strona, każde z etykietą w osobnej kolumnie.

Pole zostawione puste nie pojawia się w stopce. Nazwy poniżej to etykiety pól z edytora, a szary tekst w każdym pustym polu pokazuje przykładowy wpis.

• Stanowisko i Nazwa firmy stoją w jednej linii, rozdzielone kropką.
• Telefon przyjmuje numer w dowolnym zapisie. Stopka pokaże go tak, jak go wpiszesz, a link do dzwonienia zbuduje z samych cyfr i znaku plus. Adres tel: nie dopuszcza spacji ani słów wewnątrz numeru[2].
• Adres z pola Strona internetowa pokaże się w stopce tak, jak go wpiszesz, na przykład www.firma.pl. Brakujące https:// generator dopisze tylko do linku.
• Avatar / logo (URL obrazu) przyjmuje adres obrazu opublikowanego na stronie. Po wklejeniu adresu pojawia się wybór kształtu (Okrągły, Zaokrąglony, Kwadrat) i rozmiaru: 40, 56 albo 72 px. Obraz o boku co najmniej 144 px zostaje ostry na ekranach o dużej gęstości pikseli.
• Linia nad imieniem to krótki tekst zapisany wersalikami, na przykład nazwa firmy albo hasło.
• Tag przy imieniu to dopisek w owalnej ramce obok imienia, na przykład skrót MBA albo zaimki.
• Dodatkowa linia mieści jedno zdanie o tym, czym się zajmujesz.
• Adres i Dane formalne to pola wieloliniowe: enter przenosi tekst do nowej linii także w stopce. Dane formalne, na przykład NIP, numer KRS albo numer licencji, generator drukuje małym tekstem nad klauzulą.

Generator ma osiem układów. W sekcji Wygląd każdy z nich widać na miniaturze, która pokazuje stopkę z Twoimi danymi i kolorami. Zmiana układu nie kasuje żadnego pola:

• Standard: dane jedna pod drugą, a telefon, e-mail i strona w jednym wierszu z etykietami.
• Pasek u góry: imię, stanowisko i awatar na pasku w kolorze akcentu, pozostałe dane pod paskiem.
• Kolumna etykiet: telefon, e-mail i strona jeden pod drugim, z etykietami w osobnej kolumnie.
• Wyśrodkowany: wszystko wyrównane do środka, awatar nad imieniem.
• Kompaktowy: imię, stanowisko, firma i kontakt w jednej linii, pod nią media społecznościowe i klauzula.
• Dwie kolumny: awatar, imię i stanowisko po jednej stronie, kontakt, media i przyciski po drugiej, rozdzielone pionową linią.
• Minimalistyczny: imię, stanowisko, firma, e-mail i telefon, bez strony, awatara i przycisków.
• Pasek na dole: dane u góry, a przyciski i nazwa firmy na pasku w kolorze akcentu pod spodem.

Gdy wypełnisz pole, którego wybrany układ nie pokazuje, pod podglądem pojawi się ostrzeżenie z nazwą tego pola.

W sekcji Przyciski ustawisz dwa przyciski. Pierwszy ma tło w kolorze akcentu, a jego tekst i adres wpisujesz w polach Tekst przycisku i Link CTA. Drugi ma samą ramkę, a służą mu pola Tekst drugiego przycisku i Link drugiego przycisku. Każdy przycisk potrzebuje tekstu i linku. Gdy jedno z tych pól zostanie puste, przycisk nie pojawi się w stopce.

Link może prowadzić do strony, do nowej wiadomości (mailto:biuro@firma.pl) albo do połączenia (tel:+48600000000). Adresu strony nie musisz zaczynać od https://, bo generator dopisze je sam. Adresy zaczynające się od javascript:, data:, vbscript: i file: generator odrzuca, więc przycisk z takim linkiem się nie pokaże.

Zaokrąglenie przycisków ma trzy warianty: Brak, Lekkie i Pełne. Outlook dla Windows nie obsługuje zaokrąglania narożników w CSS[3], więc tam przycisk ma zawsze proste rogi. Układy Kompaktowy i Minimalistyczny nie pokazują przycisków. Ten sam link, na przykład do kalendarza spotkań, umieścisz na wizytówce jako kod z generatora kodów QR.

W sekcji Media społecznościowe kliknij nazwę serwisu pod napisem Dodaj profil, a edytor doda pole na adres profilu. Do wyboru jest 12 serwisów: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram i Pinterest. W stopce pojawiają się tylko serwisy z wpisanym adresem, a przycisk z krzyżykiem obok pola usuwa profil. Profile stoją w stopce w tej samej kolejności co w edytorze. Nowy dopisuje się na końcu listy, a kolejność zmienisz, przeciągając profil za uchwyt przy polu. Z klawiatury przesuniesz go strzałkami w górę i w dół, gdy uchwyt jest zaznaczony.

Pełny adres profilu nie jest konieczny. W polach Instagram, Facebook, TikTok, YouTube, X, GitHub, Dribbble, Behance, Telegram i Pinterest wystarczy @nazwa, a generator zbuduje z niej adres profilu. LinkedIn wymaga adresu, bo profile osób i firm mają tam różne ścieżki (/in/ i /company/). W polu WhatsApp wpisz numer telefonu z kierunkowym kraju: generator zamieni go na link https://wa.me/ z samymi cyframi, czyli w formacie, który opisuje pomoc WhatsApp[4].

Ikony zamiast nazw serwisów

Opcja Pokaż ikony zamiast nazw serwisów zamienia nazwy na ikony w rozmiarze 16, 20 albo 24 px i w trzech kolorach: Kolory platform, Ciemne albo Białe, te ostatnie na ciemne tło stopki. Ikony są obrazami PNG z serwera arteontools.com. Ikona SVG wstawiona wprost do kodu nie wyświetla się w Gmailu, Outlooku ani Yahoo Mail[5], a obrazy zapisane w base64 wycina Gmail[6]. Każda ikona ma opis alternatywny z nazwą serwisu, więc gdy program pocztowy zablokuje obrazy, odbiorca zobaczy tę nazwę.

Kolory

Kolor akcentu wybierzesz z pięciu gotowych próbek albo z palety przeglądarki, która otwiera się po kliknięciu kwadratu z kolorem. Możesz też wpisać kod HEX w polu obok kwadratu, na przykład skopiowany z księgi znaku. Pole przyjmuje kod z krzyżykiem i bez niego, w sześciu albo trzech znakach, na przykład #1d4ed8 albo 14c. Tak samo, tylko bez gotowych próbek, ustawisz Kolor tekstu i Kolor tła. Kolor akcentu trafia do imienia, linków, przycisków, ramki i pasków w układach Pasek u góry i Pasek na dole. Kolor tła wypełnia całą stopkę. Jasny tekst na kolorowym tle sprawdzisz w testerze kontrastu kolorów, a kod koloru z identyfikacji wizualnej przeliczysz w konwerterze HEX na RGB. Gdy księga znaku podaje kolory w RGB, kod HEX odczytasz w konwerterze RGB na HEX, a kolory drukarskie zapisane w CMYK zamienisz najpierw na RGB w konwerterze CMYK na RGB. Kolor akcentu z logo odczytasz w ekstraktorze kolorów z obrazu, a pasujące odcienie dobierzesz w generatorze palet kolorów.

Czcionka i rozmiar tekstu

Do wyboru są Arial, Verdana, Tahoma, Trebuchet MS i Georgia, czyli czcionki, które Microsoft dostarcza razem z systemem Windows[7]. Gdy urządzenie odbiorcy nie ma wybranej czcionki, program pocztowy użyje swojej czcionki bezszeryfowej, a przy Georgii szeryfowej, bo tak zapisuje ją generator.

Rozmiar tekstu ma trzy stopnie: Mały 12 px, Standard 13 px i Większy 14 px. Imię jest o 2 px większe od reszty tekstu, a klauzula o 2 px mniejsza. Outlook podaje rozmiar czcionki w punktach, a 13 px to 9,75 pt, co sprawdzisz w konwerterze px na pt.

Kierunek tekstu

Opcja Kierunek tekstu z wyborem Od prawej do lewej ustawia stopkę tak, jak wymaga tego podpis po arabsku albo hebrajsku. Generator dopisuje wtedy do stopki atrybut dir="rtl", który obsługują Gmail, Outlook i Apple Mail[8]. Numery, adresy e-mail i strony zostawia w kierunku od lewej do prawej, żeby cyfry się nie odwróciły. Arabskie litery mają Arial i Tahoma[9], a Verdana, Georgia i Trebuchet MS ich nie mają[10].

Ramka stopki

W polu Ramka stopki zaznaczasz boki, przy których ma stać ramka w kolorze akcentu: Lewa, Prawa, Góra i Dół. Pojedynczy bok ma 4 px, a zaznaczenie wszystkich czterech rysuje pełną ramkę o grubości 2 px.

Sekcja Styl tekstu pokazuje osobny wiersz dla każdego elementu stopki: Imię i nazwisko, Stanowisko, Firma, Dane kontaktowe, Media społecznościowe i Klauzula. Kolor wybierasz z palety przeglądarki po kliknięciu kwadratu z kolorem. Gdy tekst ma już własny kolor, obok kwadratu pojawia się przycisk Przywróć domyślny kolor. Rozmiar zmieniają przyciski minus i plus, każde kliknięcie o 2 px, a między nimi widać rozmiar tekstu w pikselach. Zmienisz go najwyżej o 4 px w dół albo w górę względem rozmiaru bazowego.

Sekcja Odstępy ustawia Margines wewnętrzny stopki (8, 16 albo 24 px) i odstępy między elementami w krokach po 2 px, od 0 do 32 px. Widać tylko odstępy dla elementów, które są w stopce i w wybranym układzie:

• Pod imieniem i nazwiskiem
• Pod stanowiskiem
• Pod dodatkową linią
• Nad danymi kontaktowymi
• Nad mediami społecznościowymi
• Nad przyciskiem
• Nad klauzulą

W sekcji Klauzula, w polu Klauzula pod stopką, wpiszesz tekst drukowany na końcu stopki mniejszą czcionką, na przykład informację o poufności wiadomości. Pole jest na starcie puste, a przycisk Wstaw przykładową klauzulę wstawia gotową informację o poufności, którą możesz zmienić. Puste pole nie dodaje do stopki niczego.

Opcja Pokaż linię oddzielającą dane od klauzuli pojawia się, gdy w stopce jest klauzula albo dane formalne, i dodaje nad nimi poziomą linię. Styl linii może być ciągły, kreskowany albo kropkowany, grubość wynosi 1, 2 albo 3 px, a Kolor linii jest dowolny, z przyciskiem Domyślny przywracającym jasnoszary #e5e7eb. Linię rysują układy Standard, Pasek u góry, Kolumna etykiet i Wyśrodkowany. W układzie Dwie kolumny klauzulę oddziela od reszty własna cienka linia.

Kliknij Kopiuj stopkę (Gmail / Outlook). Przycisk kopiuje stopkę razem z formatowaniem, więc po wklejeniu zostają kolory, linki i obrazy. Pod podglądem pojawią się wtedy trzy kroki wklejenia, te same co poniżej, z przełącznikiem Gmail i Outlook. Jeśli po skopiowaniu zmienisz coś w stopce, edytor przypomni, żeby skopiować ją ponownie.

Gmail w przeglądarce

1. Kliknij ikonę ustawień w prawym górnym rogu i wybierz Zobacz wszystkie ustawienia.
2. W sekcji Podpis wklej stopkę w pole podpisu skrótem Ctrl + V, a na Macu Cmd + V.
3. Na dole strony kliknij Zapisz zmiany.

Gmail przyjmuje podpis do 10 000 znaków, a obraz wstawiony do podpisu też liczy się do tego limitu[11].

Nowy Outlook dla Windows i Outlook w sieci Web

1. Wybierz Ustawienia, a następnie Konta i Podpisy.
2. Dodaj nowy podpis, nadaj mu nazwę i wklej stopkę w pole edycji.
3. Kliknij Zapisz.

W klasycznym Outlooku dla Windows otwórz nową wiadomość, w menu Wiadomość wybierz Podpis, a potem Podpisy[12].

Podgląd pokazuje stopkę tak, jak rysuje ją przeglądarka. Programy pocztowe obsługują HTML w węższym zakresie i każdy trochę inaczej, dlatego generator omija elementy, których nie wyświetlają. Część różnic zależy jednak od tego, co wpiszesz:

• Obraz zapisany w samym adresie (data:image/png;base64,…) nie pojawia się w Gmailu[6]. Kod base64 przydaje się w plikach HTML i CSS, ale w polu awatara potrzebny jest adres pliku, dlatego po wklejeniu kodu base64 edytor wyświetla ostrzeżenie.
• Gmail nie wyświetla obrazów w formacie SVG na kontach Google[13], więc logo zapisane jako SVG zamień na PNG, na przykład w konwerterze SVG na PNG.
• Outlook dla Windows nie wyświetla obrazów WebP[14], więc logo i zdjęcie do stopki zapisz jako PNG albo JPG, na przykład w konwerterze WebP na PNG.
• Outlook dla Windows domyślnie blokuje automatyczne pobieranie obrazów z internetu[15]. Dopóki odbiorca nie pozwoli na pobranie, zamiast ikon zobaczy nazwy serwisów, a awatara nie zobaczy wcale.
• Adres obrazu musi prowadzić wprost do pliku. Link udostępniania z Dysku Google albo Dropboxa otwiera stronę z podglądem pliku, więc obraz się nie wyświetli.

Generator zapisuje dane i ustawienia w pamięci przeglądarki (localStorage) przy każdej zmianie, osobno dla każdej wersji językowej strony. Po powrocie w tej samej przeglądarce stopka czeka w ostatnim zapisanym stanie. Dane stopki nie trafiają na nasz serwer.

Eksportuj ustawienia zapisuje dane, kolory, układ, odstępy i style tekstu w pliku .json, a Importuj ustawienia wczytuje taki plik na innym komputerze albo u współpracownika, który zmieni tylko swoje dane. Import sprawdza każdą wartość: kolor zapisany inaczej niż w HEX i czcionka spoza listy zostają przy ustawieniach sprzed importu.

Przywróć domyślne po potwierdzeniu czyści wszystkie pola i przywraca początkowy wygląd stopki. Tej operacji nie da się cofnąć, więc wcześniej wyeksportuj ustawienia.

Wszystkie te przyciski stoją w karcie podglądu, pod przyciskiem kopiowania. Są tam też Kopiuj kod HTML (surowy kod do edytora HTML) i Pobierz jako HTML (plik stopka-email.html). Przełącznik nad podglądem ze słońcem (Jasne) albo z księżycem (Ciemne) pokazuje stopkę na jasnym albo na ciemnym tle.