V tomto článku si představíme editor šablon Ecomailu a vysvětlíme si několik základních principů pro práci s šablonami.

Dáváte přednost instruktážnímu videu?

Bloky a obsah šablony

Základním stavebním kamenem našich šablon jsou bloky (struktury) a obsah. Každá šablona se skládá z několika bloků a v těchto blocích se pak nachází jednotlivý obsah.

Základní rozdíl mezi bloky je v počtu sloupců, které blok obsahuje. Může tak jít o blok s jedním, dvěma, třemi nebo čtyřmi sloupci. Jednotlivé bloky můžete libovolně odstraňovat nebo přidávat tak, že kliknete na záložku "struktura" a vyberete typ bloku. Blok přidáte přetažením kamkoli do šablony. 

Šablonu doporučujeme skládat z více struktur, tedy rozdělit celý obsah šablony tak, aby nebyl pouze v jedné nebo dvou strukturách. Předejte tak špatnému rozložení obsahu zejména v mobilním zobrazení šablony. Fungování struktur je podobné tabulkám. Pokud se má obsah zarovnat pod sebe, docílíte toho lépe tím, že ho budete mít rozdělený do struktur a jasně tak v šabloně deklarujete, že se například při úzkém zobrazení zarovná text pod sebe.

Do sloupců můžete následně vkládat obsah, jako je text, obrázek, tlačítko, oddělovač, mezera, sociální sítě, video, produkty, gif, dynamický obsah a dokonce i kód. Klikněte na záložku "obsah" a následně můžete přidat obsah přetažením do vybraného sloupce v bloku.

Předpřipravené bloky

Můžete také využít předpřipravené bloky, díky kterým rychleji sestavíte celou šablonu. Blok si můžete samozřejmě upravit dle libosti tak, aby seděl do vašeho tématu. Bloky i obsah můžete libovolně přesouvat v rámci vaší šablony.

Uložené bloky

Bloky si můžete také ukládat a následně vkládat i v jiných šablonách. Usnadní vám tak práci při tvorbě stejných částí a rychlejší sestavení šablony.
Blok stačí uložit kliknutím na prvním ikonku po rozkliku daného bloku tak jako na obrázku níže.

Vyskočí okénko do kterého napíšete název pro uložený blok. Následně stačí uložený blok přetáhnout do šablony jako každý obsah.

Základní nastavení šablony

V záložce "nastavení" si můžete nastavit barvu pozadí šablony, tlačítek, bloků a odkazů. Zde lze také přednastavit jednotlivé typy textů jako jsou 3 třídy nadpisů, běžný text a text tlačítek (barva textu, velikost a font). Jako poslední část nastavení jsou čtyři možnosti řádkování textu.

Práce s bloky, změna šířky nebo barvy bloků

Kliknete-li mimo obsah do bloku, dostanete se k jeho editaci. Stejně tak můžete blok přesunout pomocí přetažení. Kliknutím na dvě ikonky je možné blok duplikovat nebo smazat.

 

V panelu v levé části můžete následně nastavit:

  • počet sloupců v bloku
  • rozvržení (roztažený blok přes okraje, nebo zúžený blok)
  • šířku shora a zdola (nastavení výšky bloku)
  • barva pozadí (je vidět v případě zúženého bloku nebo pokud není na pozadí obrázek)
  • obrázek na pozadí (je možné odstranit obrázek a nahradit ho vlastním nebo jen použít barvu na pozadí)

Práce s obsahem

Práce s obsahovými částmi je jednoduchá. Stačí kliknout na obsahový blok, který chcete upravovat. Většina akcí se provádí buď přímo v šabloně, nebo v levém panelu v editaci obsahového bloku.

Textový blok

Jednoduše klikněte přímo do textu, který si přejete upravit a pište jak je libo. Základní textové úpravy můžete provádět v tool baru (kurzíva, tučné písmo, velikost písma, barva písma, přidávání odkazu, odrážky apod.) V případě odskočení na nový odstavec použijete klávesu Enter, pakliže vám stačí odskočení pouze na nový řádek použijete kombinaci kláves Shift + Enter. Jestliže chcete přidat odkaz pro odhlášení, odkaz pro online verzi nebo merge tagy jako je např. oslovení, jednoduše zkopírujte daný merge tag přímo do textového pole. Vložený text za merge tag bude mít stejné formátování jako formátování merge tagu v šabloně.

V levém panelu pak nastavíte základní vlastnosti textu, jako je font, barva, zarovnání shora a zdola nebo odsazení sloupců ze stran.

Obrázek

Obrázek do šablony vložíte přesunutím obrázkového obsahu přímo do šablony a v levém panelu zvolíte "nahrát nový obrázek". Obrázek můžete "upravit" pomocí našeho editoru obrázků. Dále je možné nastavit odkaz pro kliknutí na obrázek, šířku obrázku, velikost obrázku, zarovnání doleva, doprava nebo na střed a také odsazení. Nezapomeňte na alternativní text, který se zobrazí, pokud někdo nemá ve své schránce povolené automatické načítání obrázků.

Obrázky je možné nahrávat ve formátech jpeg nebo png o maximální velikosti 2MB a maximální šířce 600 pixelů. Většina e-mail klientů totiž nemá prostor pro větší e-mail než je 600 pixelů. Šířka šablony je nastavena tak, aby se newsletter zobrazil správně na všech zařízeních.

Pokud chcete využít obrázek, který již máte někde nahraný, například na svém webu, můžete do pole Zdroj obrázku / Dynamický obrázek vložit odkaz na daný obrázek. To se může hodit i v případě, že ho pravidelně vyměňujete, například s aktuálním datem. Vy tak nemusíte měnit každou šablonu, dynamický odkaz to udělá za vás.

 

GIF

Animovaný obrázek gif vložíte vyhledáním potřebného obrázku ze služby giphy. Můžete vložit odkaz na gif k prokliku na webové stránky, alternativní text, zarovnání, velikost obrázku a odsazení.

Tlačítko

U tlačítka lze nastavit jeho text, odkaz, zarovnání, kulaté nebo hranaté okraje, barvu tlačítka, barvu textu, velikost písma a odsazení.

Sociální sítě

V rámci tohoto obsahového bloku si nastavíte ikonky pro sociální sítě. Zvolíte si, jaké všechny sociální sítě chcete v newsletteru mít (Facebook, Twitter, Linkedin a další). Ikonky přidáváte pomocí "přidat další" a odebíráte kliknutím na "koš" vedle ikonky. Ve "stylu ikonek" je možné vybrat vzhled ikonky - hranatá, kulatá atd. Odkaz k jednotlivým ikonkám přidáte v "nastavení sociálních sítí" tak, že kliknete na tlačítko pro úpravu a následně vložíte požadovaný odkaz.

Video

Funkce video umožňuje vložit odkaz na video (například ze zdroje YouTube nebo z Vimeo) s automatickým načtením úvodního obrázku videa přímo do šablony. Video se v newsletteru neodesílá, e-mail by byl příliš velký. Odešle se pouze obrázek, který vypadá jako video k prokliku na webovou stránku, kde je video umístěno. Můžete nastavit velikost náhledu a odsazení. 

Mezera

Pokud potřebujete obsahové prvky dál od sebe, můžete vložit vertikální mezeru. Výšku mezery je také možné upravovat. Mezeru lze vkládat i do bloku s více sloupci a posouvat tak jiný obsah výše, či níže.

Oddělovač

Jedná se o grafický prvek (čáru), který slouží k oddělení jednotlivých obsahů v šabloně. Lze nastavit barvu, odsazení, tloušťku, styl (plný, čárkovaný, tečkovaný) a výšku oddělovače. 

Vlastní kód

Do každé šablony lze vložit i vlastní HTML kód. Toto však doporučujeme pouze expertům. Po přidávání vlastního kódu není zaručena plná funkčnost. Zejména scripty nebudou ve schránkách klientů fungovat, jelikož často bývají nositelem škodlivého obsahu a byly tak plošně zakázány. Doporučujeme tedy scripty vůbec nevkládat, aby nedošlo ke zhoršení reputace vaší domény.

Produkty

Do šablon lze vkládat i produktové feedy pomocí XML feedu. XML feed je datový soubor, který slouží k exportu zboží a všech potřebných doprovodných informací do porovnávačů cen (Heureka, Zbozi.cz, Google Merchants). V našem případě si díky XML feedu nahrajete produkty do systému Ecomail, a poté snadno a rychle vložíte produkty do šablon v interaktivním editoru. Jak pracovat v šabloně s produkty z XML feedu se dozvíte zde.

V tuto chvíli pro vás připravujeme funkci dynamického produktového bloku, který navrhne pro vaše zákazníky produkty, o které měli v minulosti zájem, či produkty těmto produktům podobné nebo související.

Dynamický

Dynamický obsah můžete využít, pokud máte vložený datový feed do vašeho účtu. U obsahu pak vyberete daný feed a nastavíte identifikátor (v našem případě e-mail) a klíč - tedy obsah, který se bude vkládat z feedu.

Uvedeme si příklad, kdy je identifikátor e-mail a klíč, který se bude propisovat do šablony, recommendations. V datovém feedu níže pak vidíte, že jednotlivé e-maily mají položku recommendations s vlastní hodnotou, která se pak propíše pro každý e-mail zvlášť, stejně jako u personalizace a merge tagů.

Anchor (posuvník)

Anchor slouží k posunutí na jedné stránce (v našem případě e-mailu) na určité místo. Využívá se zejména v případě delšího obsahu, což umožní uživateli přeskočit k tomu, na co anchor odkazuje.

Pokud chcete do e-mailu vložit takzvaný anchor neboli posuvník, můžete tak učinit jednoduchým přidáním tohoto do zdrojového kódu textu:

<a name="anchor"></a>

 V šabloně pak už jen vložíte odkaz na text, kde jako typ odkazu zvolíte "Kotva v této stránce" a vyberete kotvu "Podle jména kotvy".

Našli jste odpověď?