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. Bez nich przyciski kopiowania pozostają nieaktywne. 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.

• Linia nad imieniem to krótki tekst nad imieniem, zapisany wersalikami, na przykład nazwa firmy albo hasło.
• 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.
• Tag przy imieniu to dopisek w owalnej ramce obok imienia, na przykład zaimki.
• Stanowisko i Nazwa firmy stoją w jednej linii, rozdzielone kropką.
• Dodatkowa linia mieści jedno zdanie o tym, czym się zajmujesz.
• 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.
• 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ą. Część firm musi podawać dane rejestrowe w korespondencji, a ich zakres zależy od formy prawnej, więc listę ustal ze swoją księgową.

W zakładce Przyciski są dwa przyciski: Przycisk główny z tłem w kolorze akcentu i Przycisk dodatkowy z samą ramką. Każdy 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.

Zakładka Media społecznościowe ma pola dla 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.

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

Motyw kolorystyczny jednym kliknięciem ustawia kolor akcentu i kolor tekstu: Ciemny, Niebieski, Fioletowy, Zielony albo Szary. 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. 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

Ramka może stać po dowolnej stronie stopki w kolorze akcentu. Pojedynczy bok ma 4 px, a zaznaczenie wszystkich czterech rysuje pełną ramkę o grubości 2 px.

Zakładka Styl tekstu pokazuje osobny wiersz dla każdego wypełnionego elementu: Imię i nazwisko, Stanowisko, Firma, Dane kontaktowe, Media społecznościowe i Klauzula. Kolor wybierasz z palety albo z listy własnych kolorów, których zapiszesz do ośmiu. Rozmiar zmieniają przyciski minus i plus o 2 px, w zakresie od −4 do +4 px względem rozmiaru bazowego.

Zakładka 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 zakładce Klauzula wpiszesz tekst drukowany na końcu stopki mniejszą czcionką, najczęściej informację o poufności wiadomości. Przykładowy tekst możesz zmienić albo usunąć, a puste pole nie dodaje do stopki niczego.

Opcja Pokaż linię oddzielającą dane od klauzuli dodaje poziomą linię nad danymi formalnymi i klauzulą. 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.

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, co pokazuje konwerter obrazu na Base64, ale w polu awatara potrzebny jest adres pliku, dlatego po wklejeniu kodu base64 edytor wyświetla ostrzeżenie. Plik obrazu odzyskasz z takiego kodu w konwerterze Base64 na obraz, a potem opublikujesz go na swojej stronie.
• 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 zastępuje wszystkie dane i ustawienia wartościami startowymi. Tej operacji nie da się cofnąć, więc wcześniej wyeksportuj ustawienia.

Pod podglądem są też Kopiuj kod HTML (surowy kod do edytora HTML), Pobierz jako HTML (plik stopka-email.html) i Pokaż kod HTML (okno z kodem). Przełączniki nad podglądem pokazują stopkę na tle Jasne, Ciemne i Szachownica.