Systém pro rychlé vytvoření webových stránek nebo e-shopů

Úprava šablonových e-mailových zpráv v systému FLOX

Zpět na kategorii

Návrh a přípravu vlastní šablony pro notifikační e-mail, který se posílá zákazníkům, zvládnete ve FLOXu bez programátora.

Vytvoření designové šablony pro notifikační zprávu síce nemá přímý vliv na rozhodnutí nakoupit ve vašem e-shopu, ale taková zpráva působí na příjemce mnohem serióznějším a profesionálnějším dojmem než klasická textová.

 

Jak postupovat při vytvoření šablony pro automatické zprávy?


Prvním krokem je navržení základního rozložení. Pro tyto účely použijeme základní rozložení notifikačních e-mailů:

  • Pozadí e-mailu
  • Hlavička (logo)
  • Obsah zprávy

Návrh může vypadat třeba takto:

navrh pro upravu sablonovych mailu ve FLOXu od ByznysWeb.cz

Když už máme návrh připravený, pustíme se do přípravy samotné zprávy.

Většina e-mailových zpráv se skládá z tabulek. Na rozdíl od responzivního designu, kde tabulky není vhodné využívat, jelikož by mohly vyčnívat až za okraj stránky, je použití tabulek v e-mailech i v roce 2018 úplně běžné. Hlavním důvodem je absence nebo omezená podpora moderních CSS stylů v e-mailových klientech jako Outlook, Gmail, Seznam a jiných.


Náš návrh si můžeme rozdělit na několik tabulek, ze kterých každá bude obsahovat určitou část zprávy:

ukazka vlastni sablony automatickych emailu ve FLOXu od ByznysWebu

5 kroků k designové šabloně automatických mailů

 

1. Vytvoření tabulky pro pozadí


Vytvoření tabulky pro pozadí je snadné. Stačí v textovém editoru vložit novou tabulku s 1 řádkem a 1 sloupcem, přičemž šířka bude 100 %. 100 % šířka zabezpečí, že se bude tělo zobrazovat na celou šířku prostoru v e-mailovém klientovi.


Jelikož máme v návrhu mezeru mezi okrajem pozadí a samotným obsahem, nastavíme si v políčkuOdsazení obsahu hodnotu 15 a rozestup buněk 0. Tím dosáhneme mezery mezi samotným obsahem a okrajem tabulky.

příprava tabulky pro pozadí automatických mailů

Na záložce Rozšířené si nastavíme pozadí tabulky podle představ:

jak upravit pozadi sablonovych mailu v e-shopu od ByznysWebu

Tabulku vložíme kliknutím na tlačítko Vložit.

2. Vložení loga


V návrhu, který jsme si připravili, máme logo umístěné nad tabulkou s textovým obsahem zprávy. Přímo v textovém editoru si tedy nastavíme zarovnání textu na střed a vložíme logo pomocí ikonky pro vložení obrázku.

jak vložit logo do vlastní šablony automatických mailů

3. Vložení tabulky s obsahem


Po vložení loga přesuneme kurzor na nový řádek (pomocí klávesy Enter). Abychom do existující tabulky mohli vložit novou tabulku, musíme kliknout na prázdné místo pravým tlačítkem myši a ze zobrazené nabídky vybrat možnost Vložit novou tabulku:

vložení tabulky s obsahem

Počet sloupců nastavíme na 1, počet řádků rovněž na 1. Šířku tabulky nyní nastavíme na pevnou hodnotu, jelikož nechceme, aby tabulka zabírala celý prostor pozadí (například 630) a v nabídce pro Zarovnání vybereme možnost Na střed. Abychom dosáhli odsazení obsahu zprávy okrajů tabulky, v políčku Odsazení obsahu nastavíme hodnotu 15 a v poli Rozestup buněk hodnotu 0.

parametry tabulky pro obsah - vlastni sablona automatickych emailu FLOX

Na záložce Rozšířené opět nastavíme barvu pozadí tabulky. Pro tabulku s obsahem nastavíme jinou barvu pozadí než pro tabulku s pozadím, abychom dosáhli kontrastu mezi pozadím zprávy a pozadím samotného obsahu:

kontrast barvy pozadí automatického e-mailu a pozadí obsahu

Tabulka, kterou jsme si vytvořili, bude sloužit jako oblast, kam budeme vkládat další obsah zprávy (tzv. kontejner). Do této tabulky budeme vkládat text, obrázky, případně jiné tabulky podle potřeby.

4. Vytvoření obsahu e-mailové zprávy


Obsah ve vytvořené tabulce tvoří samotné tělo zprávy. Můžete sem tedy vložit všechny informace, které chcete zákazníkovi zprávou oznámit.
V obsahu zpráv doporučujeme využít i možnost vkládání proměnných, které najdete v pravé části textového editoru. Email pro zákazníka tak bude personalizovanější. V závislosti ne upravované šabloně nezapomeňte vložit potřebné proměnné, například:


Šablona pro změnu stavu objednávky: číslo objednávky, nový status objednávky, zpráva pro příjemce
Šablona pro souhrn objednávky e-mailem: proměnná souhrn objednávky…


Pro upoutání pozornosti zákazníka doporučujeme důležité informace v textovém editoru označit tlustým písmem. V textovém editoru můžete využívat i jiné možnosti formátování textu jako kurzíva nebo nadpisy (h2, h3).


⇨ TIP: Určitě si všimnete, že po ukončení řádku přes klávesu Enter vznikne více místa mezi dvěma řádky. Toto je způsobeno formátováním elementů p (paragraph), do kterých se jednotlivé řádky vkládají. Pokud chcete dosáhnout mezi řádky menší mezery, můžete přejít na nový řádek kombinací kláves Shift + Enter (cmd ⌘ + Enter). Tato klávesová kombinace nevytvoří přímo nový řádek, ale vloží na jeho konec znak pro zalomení řádku. 

Po vložení obsahu, označení podstatných částí tlustým písmem a vložení proměnných může vaše šablona vypadat i takto:

ukazka upravene sablony automatickych e-mailu ve FLOXu od ByznysWeb.cz

5. Vložení informačních proužků

Textový editor umožňuje vložit do jedné tabulky jinou tabulku. V nové tabulce můžete uvést informace, na které chcete zákazníka upozornit. Mezi hlavní výhody vkládání tabulek uvnitř tabulek patří hlavně možnost nastavit takové tabulce speciální pozadí. Takové, které ladí s vaším logem, firemní identitou.

Novou tabulku v rámci existující tabulky vytvoříme tak, že si vytvoříme nový řádek na místě, kam chceme tabulku vložit, klikneme do nového řádku pravým tlačítkem myši a z nabídky vybereme možnost Vložit novou tabulku:

jak vlozit tabulku v tabulce v CMS FLOX od ByznysWebu

Tabulce již standardně nastavíme 1 řádek, 1 sloupec, rozestup buněk 0 a odsazení obsahu podle toho, jak uznáme za vhodné. Důležitou změnou je nastavení šířky tabulky opět na 100 %, protože chceme, aby se tabulka zobrazovala na celou šířku volného místa předešlé tabulky:

parametry tabulky pro informacni prouzky v sablone automatickych e-mailu

Jestli chcete buňce v tabulce nastavit barvu pozadí nebo orámování, stačí kliknout na buňku pravým tlačítkem myši a vybrat Buňka ⇢ Vlastnosti buňky:

priklad vlastnosti bunky pro informacni prouzky v sablonovych emailech ve FLOXu

Ve vlastnostech buňky na záložce Rozšířené najdeme položky Barva orámování a Barva pozad, pomocí kterých můžeme nastavit této buňce barvu rámu nebo barvu pozadí:

vlastnosti bunky informacnich prouzku v automatickych e-mailech ve FLOXu od ByznysWeb

Na záložce Obecné vlastnostech buňky můžete případně upravit zarovnání textu v tabulce na střed nebo doprava.
Změny uložíme kliknutím na tlačítko Aktualizovat.


Do buňky vložíme obsah podle představ. Naše nová tabulka s dodatečným obsahem může vypadat například takto:

informacni prouzek v automatickych e-mailech v e-shopu od ByznysWebu

Nebo:

informacni lista v automatickych emailech smerujici na blog, FAQ

Celá šablona e-mailové zprávy, kterou jsme právě vytvořili, bude vypadat takto ⇢ pro větší rozlišení klikněte na obrázek:

ukazka na miru upravene sablony automatickych e-mailu v e-shopu

Nyní stačí už jenom otestovat zprávu, a to tak, že vykonáme akci, po které se zasílá daná šablona.
Pokud se například jedná o šablonu, která se zasílá po změně stavu objednávky, vytvoříme si objednávku s naší e-mailovou adresou a změníme její status.

TIP na závěr: Nezapomeňte nastavit jednotlivým obrázkům odkazy. Nejen ikonky sociálních sítí v patičce e-mailu mohou odkazovat zákazníky na jednotlivé sítě, ale i logo může směřovat přímo na adresu vaší webové stránky.
Fantazii se meze nekladou a možnosti textového editoru jsou bohaté, můžete tedy experimentovat s textem, tabulkami i obsahem a vytvořit si vlastní, unikátní šablony svých e-mailových zpráv.

Inspirujte se ⇢ pro větší rozlišení klikněte na GIF:

ukazky automatickych e-mailu v CMS FLOX upravených na míru

K tomuto tématu by vás mohlo zajímat, jak zvýšit open rate a CTR svých e-mailů.

Chcete se ještě na něco zeptat? Napište nám:

Přihlášení (Flox 2)

Vyzkoušejte web nebo e-shop zdarma

Výběr designu:

Adresa stránek s koncovkou .flox.cz je zdarma. Adresu můžete kdykoliv změnit na tvar bez koncovky .flox.cz zakoupením nebo přesmerováním vlastní domény.

Vyberte si prosím některou z připravených šablon.
Design stránek můžete kdykoliv změnit v administraci, kde
najdete bohaté možnosti přizpůsobení šablon.
Rádi Vám vytvoříme i unikátní design na míru.

Tato stránka používá cookies. Vice info