Edytor HTML szablonów Twórz piękne, responsywne emaile używając edytora HTML w Mailist.
Rozpoczęcie pracy
Nowy szablon
Szablony → + Nowy szablon → Pusty HTML
Podstawowa struktura
<! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > </ head > < body style = "margin: 0; padding: 0; font-family: Arial, sans-serif;" > < table width = "100%" cellpadding = "0" cellspacing = "0" > < tr > < td align = "center" style = "padding: 20px;" > < table width = "600" cellpadding = "0" cellspacing = "0" > <!-- Twoja treść tutaj --> </ table > </ td > </ tr > </ table > </ body > </ html >
Personalizacja Użyj zmiennych do dynamicznej treści:
< h1 > Witaj, {{firstName}}! </ h1 > < p > Dziękujemy za zakup w {{company}}. </ p > < p > Twój email to: {{email}} </ p > <!-- Z fallback --> < p > Cześć {{firstName|Przyjacielu}}, </ p >
Dostępne zmienne Zmienna Opis {{firstName}}Imię kontaktu {{lastName}}Nazwisko {{email}}Adres email {{company}}Nazwa firmy {{unsubscribeUrl}}Link do wypisania (obowiązkowy!) {{preferencesUrl}}Preferencje użytkownika
Responsive Design 60% emaili otwierane jest na mobile! Zawsze testuj na telefonie.
<!-- Responsive obrazek --> < img src = "logo.png" alt = "Logo" width = "200" style = "max-width: 100%; height: auto;" > <!-- Responsive przycisk --> < table cellpadding = "0" cellspacing = "0" style = "width: 100%;" > < tr > < td align = "center" style = "padding: 20px 0;" > < a href = "https://example.com" style = "display: inline-block; padding: 15px 30px; background: #3b82f6; color: white; text-decoration: none; border-radius: 6px; font-size: 16px;" > Kliknij tutaj </ a > </ td > </ tr > </ table >
Najlepsze praktyki
Użyj inline styles zamiast <style> tag: <!-- ✅ Dobrze --> < p style = "color: #333; font-size: 16px;" > Treść </ p > <!-- ❌ Źle (nie wszędzie działa) --> < style > p { color : #333 ; } </ style > < p > Treść </ p >
Dla layoutu używaj <table> nie <div>: <!-- ✅ Kompatybilne z wszystkimi klientami --> < table width = "600" > < tr > < td > Kolumna 1 </ td > < td > Kolumna 2 </ td > </ tr > </ table >
< img src = "produkt.jpg" alt = "Nazwa produktu - opis" width = "300" style = "max-width: 100%;" >
Następne kroki 