Rozvržení e-mailů

Stránka /emailer-layout slouží k nastavení celkového vzhledu – tzv. rozvržení (layoutu) – všech odchozích e-mailů. Rozvržení je rámec, do kterého se vkládá obsah jednotlivých zpráv. Typicky obsahuje hlavičku s logem, ohraničení těla a patičku s kontaktními a právními informacemi.Oddělením rozvržení od jednotlivých šablon dosáhnete konzistentního vizuálu napříč veškerou komunikací. Jednu hlavičku a patičku nastavíte jednou a automaticky ji budou používat všechny transakční e-maily i newsletterové kampaně.## Co je to rozvrženíRozvržení je HTML dokument s jedním povinným zástupným symbolem htmlBody, kam systém při odesílání vloží tělo konkrétní zprávy (např. potvrzení objednávky). Vše ostatní v rozvržení – hlavička, okraje, písma, barvy, patička – zůstává stejné.Jednoduše řečeno:<layout><header> <!-- logo, navigace --><{{htmlBody}}> <!-- zde bude vložen obsah e-mailu --><footer> <!-- patička s kontakty a odkazem pro odhlášení --></layout>Výsledná odeslaná zpráva je tedy kombinací rozvržení (globální) + šablony (konkrétní událost) + nahrazených proměnných (zákaznická data).## Editor a náhledStránka nabízí dva režimy:- Úprava — úprava HTML kódu rozvržení a textu patičky ve dvou samostatných polích.- Náhled — živý náhled, kam systém vloží ukázkový obsah zprávy do rozvržení. Okamžitě vidíte, jak bude finální e-mail vypadat.Přepínač nahoře umožňuje přepínat náhled mezi zobrazením na počítači (standardní šířka monitoru) a mobilu (zúžená šířka). Vždy je nutné zkontrolovat vzhled e-mailu v obou režimech – většina příjemců čte poštu na telefonu.> 💡 Mnoho e-mailových klientů (Outlook, Gmail v různých verzích) plně nepodporuje moderní CSS. Pro spolehlivý vzhled se osvědčuje tradiční HTML založené na tabulkách a inline styly.## Dostupné proměnnéV rozvržení lze použít následující proměnné:- htmlBody — povinný zástupný symbol, kam se vkládá obsah konkrétní zprávy. Rozvržení bez této proměnné by znemožnilo zobrazení jakéhokoli e-mailu.- logoUrl — URL adresa loga organizace. Obrázek nahraný v modulu úložiště se sem automaticky propaguje.- footer — text patičky (HTML). Používá se pro kontaktní údaje, právní doložky, odkazy na sociální média a povinný odkaz pro odhlášení z marketingových zpráv.Podrobný popis a příklad hodnoty jsou zobrazeny pro každou proměnnou v editoru.## Logo organizaceLogo se nahraje jako obrázek do úložiště a poté se pomocí funkce Nastavit logo propojí s rozvržením. Systém zkontroluje, zda je soubor obrázkem (nepovoluje PDF, dokumenty, spustitelné soubory) a uloží URL do konfigurace. Po uložení se automaticky propaguje do proměnné logoUrl pro všechny budoucí odeslané zprávy.> ℹ️ Doporučená velikost loga je kolem 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-mailuPatička je společný text umístěný na konci každé zprávy. Obvykle obsahuje:- Název a adresa organizace — vyžadováno v mnoha jurisdikcích (IČO, sídlo).- Kontaktní informace — e-mail technické podpory, telefon.- Odkazy na sociální média — ikony nebo textové odkazy.- Odkaz na obchodní podmínky / zásady ochrany osobních údajů.- Odkaz pro odhlášení — u marketingových kampaní se do patičky automaticky přidává také strojově rozpoznatelný odkaz pro odhlášení (systém ho přidává samostatně).Patičku můžete napsat jako čisté HTML. Při odesílání se uloží do proměnné footer a vloží se do rozvržení na příslušné místo.## Ukládání změnTlačítko Uložit uloží obě pole – rozvržení i patičku. Změny se projeví ve všech e-mailech odeslaných po uložení. Zprávy, které jsou již ve frontě, nesou snímek předchozí verze a budou odeslány s původním vzhledem.> ⚠️ Před uložením významné změny doporučujeme odeslat testovací zprávu (funkce dostupná ze stránky Šablony e-mailů — tlačítko „Odeslat testovací e-mail“). Tím se ověří, že rozvržení správně obaluje obsah konkrétní šablony a že všechny proměnné fungují.## Testování šablonyPřestože stránka Rozvržení e-mailů sama nabízí živý náhled s ukázkovými daty, skutečné doručení do schránky můžete otestovat takto:1. Otevřete libovolnou šablonu v modulu Šablony e-mailů.2. Použijte akci Odeslat testovací e-mail.3. Zpráva dorazí na adresu aktuálně přihlášeného uživatele s obaleným rozvržením.Pokud test nedorazí, problém může být v konfiguraci SMTP (viz modul E-mailer — Stav systému), nikoli v rozvržení.## Režim celé obrazovkyTlačítko pro zvětšení editoru přepne pole do režimu celé obrazovky. V tomto režimu máte více prostoru pro práci s HTML a můžete vidět úpravy i náhled vedle sebe. Režim opustíte tlačítkem pro minimalizaci nebo klávesou Esc.## Tipy pro správně fungující rozvržení- Maximální šířka 600 px — bezpečná hodnota pro většinu e-mailových klientů.- Náhradní písmo — kromě hlavního písma uveďte i systémové písmo (Arial, Helvetica, sans-serif). Mnoho klientů nenačítá vlastní webová písma.- Žádný JavaScript — e-mailoví klienti ignorují nebo blokují JS.- Inline styly — styly umístěné přímo na elementech jsou spolehlivější než třídy v <style>.- Alt text pro obrázky — pokud je načítání obrázků zakázáno, příjemce alespoň uvidí textový popis.