Darmowe szablony e-mail HTML (tabelowe i gotowe na tryb ciemny)
Darmowe szablony e-mail HTML
Darmowe szablony e-mail HTML: 8 tabelowych, gotowych na tryb ciemny, do skopiowania | We.Inc
Osiem darmowych szablonów e-mail HTML, które możesz edytować i podglądać na stronie: powitanie, paragon, reset hasła, newsletter, weryfikacja adresu e-mail, wysyłka zamówienia, zaproszenie na wydarzenie i prośba o opinię. Układ tabelowy, niezawodne przyciski, obsługa trybu ciemnego i lista kontrolna testów.
Niezawodny e-mail HTML używa zagnieżdżonych tabel do układu, stylów inline, szerokości treści około 600 pikseli, przycisków zbudowanych z linków z paddingiem zamiast obrazów oraz tekstu alt przy każdym obrazie. Osiem poniższych szablonów stosuje te zasady, obsługuje tryb ciemny tam, gdzie pozwalają na to klienty poczty, i można je edytować oraz podglądać na żywo przed skopiowaniem.
Osiem szablonów
Szablon
Wysyłany, gdy
Powitanie
Ktoś się rejestruje
Paragon
Płatność się powiodła
Reset hasła
Ktoś prosi o reset
Newsletter
Regularne wiadomości
Weryfikacja adresu e-mail
Po rejestracji
Zamówienie wysłane
Zamówienie zostaje nadane
Zaproszenie na wydarzenie
Zapraszasz klientów
Prośba o opinię
Po wizycie lub zamówieniu
Edytuj kod po lewej stronie dowolnego szablonu, a podgląd po prawej się zaktualizuje. Podglądy renderuje Twoja przeglądarka, więc traktuj je orientacyjnie: klienty poczty się różnią, dlatego lista kontrolna testów na dole ma znaczenie.
Wybierz szablon pasujący do e-maila, którego potrzebujesz.
Zmień tekst, linki i kolory w polu kodu i obserwuj podgląd.
Skopiuj HTML do opcji własnego HTML w swojej platformie e-mailowej.
Wyślij testy do prawdziwych skrzynek na telefonie i komputerze, w trybie jasnym i ciemnym.
Zostaw jedno główne działanie na e-mail; drugi przycisk dzieli uwagę na pół.
Napisz preheader celowo; w przeciwnym razie klienty pokażą pierwszy tekst, jaki znajdą.
Hostuj obrazy we własnej domenie lub na platformie e-mailowej, z bezwzględnymi adresami https.
Skorzystaj z naszego kreatora szablonów e-mail HTML, jeśli wolisz wypełnić formularz.
Najczęściej zadawane pytania
Dlaczego e-maile HTML wciąż używają tabel?
Niektóre klienty poczty, zwłaszcza starsze programy desktopowe, renderują za pomocą silników ignorujących nowoczesny układ CSS. Tabele to jedyna metoda układu, która działa we wszystkich.
Jak sprawić, by e-mail działał w trybie ciemnym?
Dodaj metatagi color-scheme i media query prefers-color-scheme z ciemnymi kolorami. Klienty, które to obsługują, ich użyją; inne mogą same odwracać kolory, więc unikaj tekstu wtopionego w obrazy i testuj oba tryby.
Czy mogę używać tych szablonów komercyjnie?
Tak. Napisaliśmy je dla tej strony; kopiuj, zmieniaj i wysyłaj je w dowolnym projekcie.
Czym jest niezawodny przycisk (bulletproof button)?
To przycisk zbudowany z linku z paddingiem wewnątrz kolorowej komórki tabeli zamiast z obrazu. Nadal jest widoczny i działa, gdy obrazy są zablokowane.
Zwykły tekst też się liczy
Wysyłaj wersję tekstową razem z HTML. Większość platform e-mailowych ją generuje; przeczytaj ją raz, bo paragon czy link do resetu hasła muszą mieć sens także bez formatowania.
Osiem szablonów na żywo
E-mail powitalny
Dziękuje osobie, mówi, co będzie dalej, i proponuje jedno jasne działanie.
Paragon
Zagnieżdżona tabela utrzymuje wyrównanie nazw produktów i cen w każdym kliencie, także w starych programach desktopowych.
Reset hasła
Krótki, z czasem wygaśnięcia i informacją, co zrobić, jeśli ktoś o niego nie prosił. Dodaj też link jako tekst dla klientów, które blokują przyciski.
Newsletter
Jedna historia na blok z nagłówkiem, zdaniem i linkiem. Adres URL obrazu jest tu zastępczy, więc podgląd pokazuje, co widzą czytelnicy przy zablokowanych obrazach: tekst alt w polu o właściwym rozmiarze.
Weryfikacja adresu e-mail
Używany po rejestracji. Kod oprócz przycisku pomaga osobom, które otwierają e-mail na innym urządzeniu.
Zamówienie wysłane
Stawia link do śledzenia na pierwszym miejscu; właśnie po to czytelnik otworzył e-mail.
Zaproszenie na wydarzenie
Data, godzina i miejsce w łatwym do przejrzenia bloku, a potem jedno działanie.
Prośba o opinię
Jedno pytanie z odpowiedziami na jedno dotknięcie daje znacznie więcej odpowiedzi niż link do długiej ankiety.
Dlaczego kod tak wygląda
Zasady, dzięki którym e-mail HTML wyświetla się wszędzie
Zasada
Dlaczego
Buduj układ z tabel (role="presentation")
Niektóre klienty desktopowe wciąż ignorują flexbox, grid i wiele reguł pozycjonowania
Wpisz ważne style inline
Niektóre klienty i widoki poczty webowej usuwają lub ignorują bloki style
Utrzymuj szerokość treści około 600px
Mieści się w panelu czytania większości klientów
Twórz przyciski z linku z paddingiem w kolorowej komórce
Działają w klientach, które blokują obrazy i ignorują część CSS
Ustaw width, height i alt dla każdego obrazu
Obrazy są często blokowane, dopóki czytelnik na nie nie zezwoli
Dodaj ukryty preheader
Kontroluje tekst podglądu wyświetlany po temacie wiadomości
Użyj meta color-scheme i prefers-color-scheme
Klienty obsługujące tryb ciemny używają Twoich ciemnych kolorów zamiast je odwracać
Dodaj link do wypisania się w e-mailach marketingowych
Wymagają tego przepisy antyspamowe i duzi dostawcy skrzynek pocztowych
Zanim wyślesz
Lista kontrolna testów
Test
Jak
Prawdziwe klienty
Wyślij na konta w dużych serwisach poczty webowej, do klienta desktopowego i na telefon
Obrazy wyłączone
Wyłącz wczytywanie obrazów i sprawdź, czy e-mail nadal ma sens
Tryb ciemny
Przełącz telefon i klienta desktopowego w tryb ciemny
Linki
Kliknij każdy link, w tym link do wypisania się
Część tekstowa
Wyślij też wersję tekstową; niektórzy czytelnicy i filtry z niej korzystają
Kontrola spamu
Uwierzytelnij swoją domenę (SPF, DKIM, DMARC), zanim zaczniesz wysyłać masowo