Stránka /emailer-layout slouží k nastavení obecného vzhledu — tzv. layoutu — všech odesílaných e-mailů. Layout je rámec, do kterého se vkládá obsah jednotlivých zpráv. Typicky obsahuje hlavičku s logem, tělové ohraničení a patičku s kontaktními a právními údaji.
Oddělením layoutu od jednotlivých šablon získáte jednotný vizuál napříč celou komunikací. Jednu hlavičku a patičku nastavíte jednou a automaticky ji použijí všechny transakční e-maily i newsletterové kampaně.
Co je layout
Layout je HTML dokument s jedním povinným zástupným místem htmlBody, kam systém při odesílání vkládá tělo konkrétní zprávy (například potvrzení objednávky). Vše ostatní v layoutu — hlavička, okraje, fonty, barvy, patička — zůstává stejné.
Zjednodušeně:
<layout>
<header> <!-- logo, navigace -->
{{htmlBody}} <!-- sem se vloží obsah e-mailu -->
<footer> <!-- patička s kontakty a odhlášením -->
</layout>
Výsledná odeslaná zpráva je tak kombinací layoutu (globální) + šablony (konkrétní událost) + dosazených proměnných (data zákazníka).
Editor a náhled
Stránka nabízí dva režimy:
- Editace — úprava HTML kódu layoutu a textu patičky ve dvou oddělených polích.
- Náhled — živý náhled, ve kterém systém dosadí do layoutu vzorový obsah zprávy. Okamžitě vidíte, jak bude vypadat výsledný e-mail.
Přepínač v horní části umožňuje přepnout náhled mezi zobrazením pro desktop (šířka běžného monitoru) a mobil (zúžená šířka). Vzhled e-mailu je nutné vždy kontrolovat v obou režimech — většina příjemců čte poštu na telefonu.
💡 Mnoho poštovních klientů (Outlook, Gmail v různých verzích) nepodporuje moderní CSS v plném rozsahu. Pro spolehlivý vzhled se osvědčuje tradiční tabulkové HTML a inline styly.
Dostupné proměnné
V layoutu lze použít tyto proměnné:
htmlBody— povinné místo, kam se vloží obsah konkrétní zprávy. Layout bez této proměnné by znemožnil zobrazení jakéhokoli e-mailu.logoUrl— URL adresa loga organizace. Obrázek nahraný v modulu úložiště se zde automaticky propíše.footer— text patičky (HTML). Slouží pro kontaktní údaje, právní doložky, odkazy na sociální sítě a povinný odhlašovací odkaz u marketingových zpráv.
Ke každé proměnné je v editoru zobrazen podrobný popis a ukázková hodnota.
Logo organizace
Logo se nahrává jako obrázek do úložiště a odtud se propojí s layoutem pomocí funkce Nastavit logo. Systém kontroluje, že soubor je obrázek (nepovoluje PDF, dokumenty, spustitelné soubory) a uloží URL do konfigurace. Po uložení se automaticky propíše do proměnné logoUrl u všech budoucích odeslaných zpráv.
ℹ️ Doporučená velikost loga je okolo 200×60 pixelů; větší rozměry způsobují pomalé načítání a v mobilních klientech se stejně zmenší. Preferujte PNG s průhledným pozadím.
Patička e-mailu
Patička je společný text umístěný na konci každé zprávy. Obvykle obsahuje:
- Název a adresu organizace — vyžadované v mnoha jurisdikcích (IČO, sídlo).
- Kontaktní údaje — e-mail technické podpory, telefon.
- Odkazy na sociální sítě — ikony nebo textové odkazy.
- Odkaz na obchodní podmínky / zásady soukromí.
- Odhlašovací odkaz — u marketingových kampaní se automaticky doplňuje i strojově rozpoznávaný odhlašovací link v patičce (systém přidává samostatně).
Patičku můžete zapsat jako čisté HTML. Při odesílání se uloží do proměnné footer a vloží do layoutu na příslušném místě.
Uložení změn
Tlačítko Save uloží obě pole — layout i patičku. Změny se projeví u všech e-mailů odeslaných po uložení. Již zařazené zprávy ve frontě si nesou snapshot předchozí verze a odešlou se s původním vzhledem.
⚠️ Před uložením zásadní změny doporučujeme odeslat testovací zprávu (funkce dostupná ze stránky Šablony e-mailů — tlačítko „Poslat testovací e-mail"). Ověříte tak, že layout korektně obalí obsah konkrétní šablony a že všechny proměnné fungují.
Test šablony
Přestože samotná stránka Rozložení e-mailů nabízí živý náhled se vzorovými daty, skutečné doručení do schránky otestujete takto:
- Otevřete libovolnou šablonu v modulu Šablony e-mailů.
- Použijte akci Poslat testovací e-mail.
- Zpráva přijde na adresu aktuálně přihlášeného uživatele se zabaleným layoutem.
Pokud test nedorazí, problém může být v konfiguraci SMTP (viz modul E-mailer — Stav systému), nikoli v layoutu.
Fullscreen režim
Tlačítko pro zvětšení editoru přepne pole do režimu přes celou obrazovku. V tomto režimu máte více prostoru pro práci s HTML, a zároveň vedle sebe vidíte editaci i náhled. Režim opustíte tlačítkem pro zmenšení nebo klávesou Esc.
Tipy pro dobře fungující layout
- Maximální šířka 600 px — bezpečná hodnota pro většinu poštovních klientů.
- Fallback font — vedle hlavního fontu uvádějte systémový (Arial, Helvetica, sans-serif). Vlastní webfonty mnoho klientů nenačte.
- Žádný JavaScript — e-mailoví klienti JS ignorují nebo blokují.
- Inline styly — styly umístěné přímo u elementů jsou spolehlivější než třídy v
<style>. - Alt text u obrázků — při zakázaném načítání obrázků uvidí příjemce alespoň textový popisek.