Všechny sbírky
Příprava e-mailové šablony
Interaktivní editor
Základní práce s interaktivním editorem šablon
Základní práce s interaktivním editorem šablon

Jak vytvořit krásný newsletter v interaktivním editoru šablon a jak využít veškeré jeho funkce.

Jan Tlapák avatar
Autor: Jan Tlapák
Aktualizováno před více než týdnem

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. Naleznete zde:

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

V Ecomailu máte možnost pro rozesílku využít námi předpřipravené šablony nebo můžete vytvořit vlastní šablonu od úplného začátku. Nemáte na tvorbu šablony čas? Neváhejte zažádat o vytvoření šablony na míru. Pro více informací nás neváhejte kontaktovat na support@ecomail.cz.

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.
Nový obsah můžete do šablony také přidat po kliknutí do prázdného pole přes pop-up okno, které se vám s nabídkou obsahu otevře.

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 jakýkoliv obsah.

Základní nastavení šablony

V záložce "nastavení" si můžete nastavit tzv. neviditelný preheader či upravit šířku vaší šablony. Také si zde 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, font a další formátování jako je např. ztučnění či podtržení textu, transformace či odsazení písmen). 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)

  • de/aktivovat si nezalamování sloupců na mobilu

  • barva pozadí (je vidět v případě zúženého bloku nebo pokud není na pozadí obrázek)

  • barva, styl a tloušťka jednotlivých okrajů

  • skrytí obsahu jak pro mobil, tak i desktop

  • obrázek na pozadí (je možné odstranit obrázek a nahradit ho vlastním nebo jen použít barvu na pozadí)

  • barvu pozadí každého sloupce, jejich odsazení a okraje

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. Textové úpravy můžete provádět pomocí tool baru (kurzíva, tučné písmo, podtržení, velikost písma, přidání speciálních znaků, barva písma a jeho podbarvení, přidávání odkazu, odrážky, vkládání merge tagů 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, jako je odsazení sloupců ze stran, řádkování a skrytí obsahu pro mobil, nebo desktop.

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.

V případě, že nemáte k dispozici vlastní obrázek, můžete využít napojenou fotobanku Pexels, která zdarma nabízí více než 3 miliony obrázků k volnému použití.

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, nebo z vlastního zdroje. Můžete vložit odkaz na gif k prokliku na webové stránky, alternativní text, zarovnání, velikost obrázku a odsazení.

💡 Máte GIF uložený na ploše a chcete jej vložit do šablony? Nahrajte jej jako klasický obrázek. Pohyblivost gifu zůstane.

Tlačítko

Přímo do tlačítka vkládáte jeho text a pomocí toolbaru upravujete jeho formátování.
V levém menu pak nastavujete jeho odkaz, zarovnání, roztažení, kulaté nebo hranaté okraje, barvu tlačítka, barvu textu 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.
Přidat můžete i vaše vlastní ikony pro sociální média, a také si nastavit libovolné odsazení všech ikon.

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ů.

O práci s dynamickým blokem si lze více přečíst v nápovědě.

🆕 Článek

Obohaťte vaše newslettery o užitečné články, tipy a nápovědy z vašeho webu. Blok Článek načítá data z vloženého RSS feedu a umožní vám tak jednoduše přidat článek, aniž byste museli nahrávat obrázky, či texty.

Více informací o bloku naleznete v článku o RSS feedech.

🆕 Carousel

Díky carouselu můžete vložit galerii více obrázků, mezi kterými si vaši příjemci budou moci listovat. Maximálně můžete do carouselu vložit až pět obrázků.

V poštovní schránce příjemce se poté carousel zobrazí takto:

Obdobně jako u ostatních bloků v levém menu naleznete nastavení carouselu jako je např. viditelnost miniatur, styl a velikost šipek pro posun mezi obrázky, odsazení a vzhled obrázků při přejetí myší.

⚠️ V poštovních klientech, kteří funkci šipek u Caroueslu nepodporují se šipky nezobrazí. Mezi obrázky můžete i nadále překlikávat jejich výběrem ve spodní liště.

Dostali jste odpověď na svou otázku?