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ůžete vytvořit vlastní šablonu od úplného začátku nebo máte možnost pro rozesílku využít námi předpřipravené šablony. Na výběr máte více než 140 návrhů šablon.
Veškeré šablony můžete libovolně upravovat.
💡TIP: Nemáte na tvorbu šablony čas? Neváhejte zažádat o vytvoření Šablony na míru přímo ve vašem účtu.
1. 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.
a) 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.
b) 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.
2. 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.
3. 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
4. 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ě.
💡 TIP: Využijte při práci v editoru klávesové zkratky 👇
Ctrl + B | Označený text bude napsaný tučně. |
Ctrl + I | Označený text bude napsaný kurzívou. |
Ctrl + U | Označený text bude podtržený. |
Ctrl + K | Na označený text vložte odkaz. |
Ctrl + P | Zkratka pro zobrazení náhledu šablony |
Ctrl + S | Zkratka pro uložení šablony |
Ctrl + Shift + S | Zkratka pro uložení a zavření šablony |
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.
5. Komentáře v editoru šablon
Spolupráce na šablonách je pohodlnější než kdy předtím. V editoru můžete přidávat komentáře k jednotlivým blokům nebo celým strukturám.
Stisknutím tlačítka Okomentovat 💬 se otevře vlákno, ve kterém reagujete. Uvidíte e-mail uživatele, který komentář přidal, čas přidání komentáře a další reakce. 👍👎
Na nové komentáře od dalších uživatelů figurujících v účtu vás aplikace upozorní v notifikačním centru 🔔
Notifikaci uvidíte také v přehledu šablon.
💭 Nenašli jste odpověď? Napište nám na chat nebo e-mail support@ecomail.cz. 😊