Seznamte se s užitečnými funkcemi editoru
V aplikaci Ecomail máte k dispozici náš skvělý drag & drop editor, pomocí kterého můžete vytvářet krásné šablony newsletterů opravdu snadno.
V tomto článku se podíváme na:
užitečné funkce a možnosti nastavení šablony
výjimky, ke kterým může u některých funkcí docházet
TOP FUNKCE, KTERÉ BYSTE NEMĚLI PŘEHLÉDNOUT:
1. NASTAVENÍ ŠABLONY
1.1. Nastavení tzv. neviditelného preheaderu
Preheader je první text, který se zobrazí v e-mailové schránce ihned po předmětu. Standardně se takto propíše první dostupný text ze šablony.
V editoru vám však umožňujeme nastavit jako preheader také text, který není viditelný přímo v šabloně (není součástí jejího textového obsahu).
Využijte k tomu funkci Neviditelný preheader a vepište znění preheaderu do pole "Text pro náhled":
Takto pak bude vypadat doručený e-mail s propsaným neviditelným preheaderem:
💡TIP: Preheader má spolu se jménem odesílatele a předmětem (o nich se dočtete více zde) rozhodující vliv na míru otevření (open rate) vašich kampaní. Poskytuje unikátní šanci, jak příjemcům přiblížit obsah newsletteru a nalákat je k přečtení zaslaného obsahu.
Někdy můžete v e-mailové schránce narazit na situaci, kdy se za vámi nastavený preheader propíše ještě další text ze šablony, který již není žádoucí mít na tomto místě zobrazený -> situaci můžete vyřešit přidáním tzv. nedělitelné mezery do pole pro preheader.
Nedělitelnou mezeru vložte ve formě dlouhé řady znaků ‌ ihned za nastavený text preheaderu:
Abyste dosáhli správného zobrazení ve schránce, může být potřeba vložit do pole pro preheader i velmi vysoké množství těchto znaků. Doporučujeme si tak vždy pečlivě otestovat různé varianty.
1.2. Nastavení vlastní šířky newsletteru
Vlastní šířku newsletteru můžete jednoduše nadefinovat, a to v rozmezí od 320 do 1920 pixelů.
⚠️ Upozornění:
Doporučovaná šířka je šablony newsletteru je stále 600 pixelů. Zákazníci využívají různé e-mailové klienty od Seznam.cz, Gmail, Outlook atd., které mají odlišná menu a toolbary, jež mohou překrýt váš obsah. Šířka okolo 600 pixelů minimalizuje dopad těchto překrytí.
1.3. Bohaté možnosti přednastavení nadpisů a textů
Kromě velikosti a fontů pro nadpisy H1, H2, H3 a běžné texty lze také zadat další možnosti nastavení:
tloušťky, kurzívy
transformace (všechna velká či malá písmena, první písmena velká)
podtržení, přeškrtnutí, apod.
odsazení jednotlivých písmen
💡 Výsledné zobrazení vámi zvoleného fontu se může lišit napříč poštovními klienty. Ne všichni poštovní příjemci totiž akceptují všechny fonty, a mohou je tak někdy zobrazovat rozdílně oproti nastavení v editoru.
Doporučujeme proto pracovat v šabloně primárně s tzv. "safe fonts" -> jde o fonty, které jsou čitelné pro většinu operačních systémů, pro různá zařízení i poštovní klienty a schránky. Za "safe fonts" se považují například Arial, Courier New, Garamond, Georgia, Helvetica, Impact, Lucida, Times New Roman, Tahoma, Trebuchet, Verdana.
Pokud chcete používat jiný font, je vhodné jeho zobrazení otestovat napříč různými poštovními klienty, abyste měli jistotu, že bude font zobrazován správně.
1.4. Barevný gradient
Díky barevnému gradientu můžete na tlačítkách, ve sloupcích i ve strukturách kombinovat více barev a vytvořit tak vizuálně přitažlivé barevné přechody, kterými své čtenáře zaujmete.
Barevný gradient přidáte přes možnost Přidat gradient:
V rámci gradientu můžete nastavovat tyto parametry:
a) Opakovat
Určuje, jakým způsobem barevný přechod obsahový prvek vyplní -> pokud možnost aktivujete, vzor přechodu se znásobí; jinak se zobrazí jen jednou a vyplní celý prostor:
b) Radiální
Tato možnost mění styl přechodu: pokud je vypnuta, přechod je lineární, podél přímky (viz printscreeny výše). Pokud možnost zapnete, přechod se stává radiálním = začíná od středu a rozprostírá se směrem ven.
c) Gradientní osa
Zde ovládáte samotnou barevnou podobu přechodu: pracovat je potřeba s alespoň dvěma zarážkami, které vymezují vaši "počáteční" a "koncovou" barvu. Zarážky můžete libovolně posunovat po ose a upravovat tak, kolik místa bude která barva zabírat a jak ostrý přechod mezi barvami bude (čím jsou zarážky sobě blíže, tím ostřejší bude přechod).
Barvy na ose jsou uspořádány ve stejném pořadí, v jakém se zobrazují v šabloně. Kdykoliv můžete přidat na osu i další barevné zarážky, stačí kliknout na libovolné místo na ose. Kliknutím na barevnou zarážku se otevře pole pro výběr barvy, můžete si ji upravit dle přání.
d) Úhel
Umožňuje měnit úhel (naklopení) lineárního barevného přechodu:
Barevné přechody můžete nastavovat na různých místech editoru: aktuálně jsou k dispozici pro tlačítka (Styl tlačítek); sloupce (Nastavení sloupce); pro hover efekt na tlačítku (Hover na tlačítku); a dále pro barvu pozadí šablony a jejích sekcí (Nastavení -> Nastavení barev).
💡TIP: V sekci "Nastavení" můžete nastavit globální výchozí nastavení barevného přechodu pro celé pozadí šablony; pro všechny struktury; nebo pro všechna tlačítka. Tato výchozí nastavení se automaticky použijí na všechny prvky, které ještě nemají nastaveno vlastní specifické barevné pozadí nebo barevný přechod.
POZOR: Ne všichni poštovní klienti zvládají barevný gradient správně zobrazit. Při použití barevných přechodů proto doporučujeme nastavit podobnou barvu pozadí jako "záložní barvu" pro případ, že se gradient nenačte.
1.5. Hover efekt na tlačítku
Hover efekt je dalším zajímavým interaktivním prvkem, který pomáhá podpořit zapojení čtenářů a click rate. Jde o vizuální proměnu podoby tlačítka, která nastane v okamžiku, kdy čtenář najede na tlačítko myší.
Hover efekt můžete nastavit pro specifické tlačítko (po kliknutí na něj vyberte "Hover na tlačítku" v levém postranním menu), nebo pro všechna tlačítka v dané šabloně, a to v sekci "Nastavení" -> "Hover na tlačítku").
Pro přidání hover efektu klikněte na Přidat hover:
Využijte pak nastavení barvy tlačítka, barvy textu či stylu ohraničení pro vytvoření speciální alternativní verze tlačítka – ta se zobrazí v okamžiku, kdy čtenář e-mailu či vy v editoru šablon najedete na tlačítko kurzorem.
Před přesunem kurzoru si tlačítko zachová své standardní nastavení...
...když na tlačítko najedete myší, změní se jeho vizuální podoba dle nastavení hoveru:
Také pro hover efekt můžete nastavit barevný gradient (v takovém případě má gradient přednost před nastavením barvy tlačítka při najetí):
POZOR: Ne všichni poštovní klienti zvládají hover efekt správně zpracovat, nespoléhejte se proto při designu tlačítka jej na něj. Doporučujeme se zaměřit na to, aby tlačítko vypadalo dobře i ve výchozím stavu.
2. STRUKTURA ŠABLONY
2.1. Automatické nezalomování sloupců na telefonu
Zobrazení na mobilních telefonech je standardně nastaveno tak, že se sloupce automaticky skládají pod sebe, aby se přizpůsobily obrazovkám mobilních telefonů.
Pokud však bloky chcete mít zachované vedle sebe i na mobilech, můžete si aktivovat funkci "Nezalamovat sloupce na mobilu".
2.2. Možnost přidat ohraničení struktury
2.3. Možnost skrýt celou strukturu na telefonu i na desktopu
⚠️ Upozornění na výjimky:
Někteří poštovní klienti nemusí reagovat/respektovat nastavení šablony newsletteru z našeho editoru, protože některé funkce nepodporují. Níže naleznete, k jakým rozdílům může ve výsledných rozesílkách docházet a jakých e-mailových schránek se tyto výjimky týkají:
Editor umožňuje nastavení skrytí obsahu nejen na mobilních zařízeních, ale také na desktopu. V případě, že si u vybrané struktury nastavíte skrytí pro desktop, však bude toho nastavení ignorováno u poštovních příjemců Centrum.cz, Volny.cz, Thunderbird a Outlook z důvodu jejich specifického nastavení, a obsah se na PC zobrazí.
Pokud e-mail otevíráte na telefonu v prohlížeči, mohou se e-maily zobrazit stejně jako na desktopu (neplatí pro mobilní poštovní aplikace - např. Gmail či Seznam e-mail, ve kterých je bráno v potaz, že je e-mail otevírán na mobilu).
V poštovním klientovi Thunderbird se při zobrazení na PC zobrazí newsletter jako by šlo o mobilní zařízení, a to u všech verzí před verzí 78.11.0.
2.4. Bohaté nastavení sloupců
Pro každý sloupec se dá individuálně nastavit barva pozadí, odsazení či okraje.
Kolem celé struktury i jednotlivých sloupců si můžete vytvořit rám, a tím je ohraničit samostatně ze všech stran. Styl, barva a tloušťka okrajů jsou jen na vás.
3. OBSAH ŠABLONY
Stejně jako strukturu, lze i pro jednotlivé obsahy aktivovat funkci "Skrýt na mobilu" a nově také "Skrýt na desktopu".
3.1. Obsah: TEXT
Pro úpravu textu máte k dispozici snadno ovladatelný textový editor, který umožňuje:
nastavit a měnit font či velikost písma
vložit pevnou nezalomitelnou mezeru ( )
vložit speciální znaky jako jsou různé měny, symboly, šipky apod.
využít bohatší nastavení číslování a odrážek
přidat merge tagy pro personalizaci šablony (základní i vlastní pole)
podtržení či přeškrtnutí vybraného textu
vložit barvu pozadí pro text (zvýraznění textu)
mazat formátování kopírovaného textu, nebo kopírovaný text vkládat i s přednastaveným formátováním
3.2. Obsah: OBRÁZEK
V této části na vás čekají tyto funkce:
pro přidání a práci s obrázky je vám k dispozici přehledný Správce souborů.
možnost nahrát obrázek z fotobanky Pexels, která nabízí více než 3 miliony fotografií k volnému použití
možnost editace obrázku v našem obrázkovém editoru
3.3. Obsah: GIF
Možnost přidat GIF z vlastního zdroje
3.4. Obsah: TLAČÍTKO
Tlačítko se ovládá a upravuje pomocí textového editoru a také nabízí tyto možnosti:
formátovat text stejne jako běžný textový blok
nastavit nejen vnější, ale i vnitřní odsazení textu
vložit merge tag
editovat kód tlačítka pomocí textového editoru
3.5. Obsah: MEZERA
Možnost přidat barvu pozadí mezery
3.6. Obsah: SOCIÁLNÍ SÍTĚ
U ikon pro sociální média máte následující možnosti:
nastavit libovolné odsazení ikon
nastavit ikonu jako "Odkaz pro sdílení"
přidat vlastní sociální síť (zvolíte vlastní název, ikonu a odkaz)
3.7. Obsah: VIDEO
Možnost vložit alternativní text jako u obrázků
3.8. Obsah: PRODUKT
Možnost nahradit a použít jiný obrázek než je ve feedu (a také jej libovolně upravit v obrázkovém editoru)
Kromě zlevněné ceny je možné přidat i Cenu před slevou (původní nezlevněnou cenu produktu)
Zobrazení e-mailu se může lišit u konkrétního zařízení, operačního systému, nebo poštovního klienta, který příjemce využívá.
💡TIP: Otestujte před odesláním e-mailu šablonu newsletteru nebo rovnou otestujte celou e-mailovou kampaň.
Můžete se také podívat na webinář, ve kterém detailně popisujeme náš editor e-mailových šablon a jeho funkce:
💭 Nenašli jste odpověď? Napište nám na chat nebo e-mail support@ecomail.cz. 😊