Fonty jiné než základní tj: Arial, Times New Roman, Verdana, Georgia, Tahoma, Lucida, Lucida Grande, Trebuchet MS a Courier se nebudou zobrazovat na drtivé většině e-mailových klientů.
V případě potřeby “extra” fontu je jediná spolehlivá cesta obrázek a na něj ve Photoshopu napsat něco požadovaným fontem.

Autor: bartos@incomaker.com

00. Blok (widget)

Blok (widget) je obsahový prvek editoru, kterým vytváříme e-mailové sdělení. Dělí se na řádkové a sloupcové. Všechny bloky (widgety) s nacházejí v levé části editoru. Viz obrázek níže.

00.01 Řádkové bloky (widgety)

Řádkové bloky (widgety) dělíme na prázdné a obsahové.

00.01.1 Prázdné řádkové bloky (widgety)

Prázdné řádkové bloky (widgety) obsahují pouze prázdné sloupce (1 až 4), do kterých se vkládá obsah jako např. obrázky, text, tlačítka atd.. Viz obrázek níže.

00.01.2 Obsahové řádkové bloky (widgety)

Obsahové řádkové bloky (widgety), jak název napovídá, obsahují předem připravené sloupce s obsahem. Jedná se téměř o všechny bloky (widgety) mimo následující kategorie.

• Základní
• Texty
• Tlačítka

01. Pozadí za tělem e-mailu

Pozadí za tělem e-mailu je oblast, ve které se nachází tělo e-mailu. Viz modrá oblast na obrázku níže.

02. Tělo e-mailu

Tělo e-mailu je oblast, ve které se nachází obsah sdělení. Viz oblast v červeném rámečku na obrázku níže.

03. Řádek

Řádek je oblast v těle e-mailu, ve které se nachází sloupce s obsahem. Viz červeně orámované plochy na obrázku níže. Řádky lze libovolně přesouvat a styluje se na nich barva pozadí.

04. Sloupec

Sloupec je oblast v řádku, ve které se nachází jednotlivé prvky obsahu, např. obrázky, text, tlačítka atd.. Viz zeleně orámovaná oblast na obrázku níže. Sloupce jsou statické nelze je přesouvat, a stylují se na nich vnitřní okraje.

05. Obsah sloupců

Obsah sloupců jsou obrázky, tlačítka a texty atd.. Tyto najdeme v kategoriích

• Základní,
• Texty,
• Tlačítka.

Autor: bartos@incomaker.com

00. Nastavení barvy pozadí

Barva pozadí se dá nastavit na 3 místech v editoru kromě globálních stylů a nastavení stránky. Globálním stylům a nastavení stránky se budeme věnovat později. 

1. Na řádku.
2. Na sloupci.
3. Na textovém divu.

Ve většině případů nastavujeme barvu pozadí na řádku.

00.00 Nastavení barvy pozadí na řádku

Nastavení barvy pozadí na řádku používejte jako primární způsob pro změnu barvy pozadí.

00.01 Nastavení barvy pozadí na sloupci

Nastavení barvy pozadí na sloupci používejte, pouze pokud chcete dosáhnout různě barevných sloupců v jednom řádku. Viz obrázek níže.

00.02 Nastavení barvy pozadí na textovém divu

Nastavení barvy pozadí na textovém okně – zde uvádíme pouze pro informaci. V praxi jej nepoužívejte.

01. Nastavení textu

Text se dá mimo globální styly stylovat na 2 místech v editoru. Globálním stylům se budeme věnovat později. 

1. Menu základní
2. Menu styly

01.00 Menu základní

Stylování textu přes “menu základní” používáme primárně pro stylování částí odstavce. Dají se takto stylovat barvy textu, velikost textu, váha/tučnost a zarovnání. Pro většinu nastavení textu však používejte “menu styly” viz odstavec níže.

01.01 Menu styly

Stylování přes “menu styly” používáme jako hlavní způsob pro nastavení vzhledu textu. Pokud máme nadpis a pod ním text, vložíme si do požadovaného sloupce dva textové bloky viz GIF níže.

02. Nastavení vnitřních okrajů (padding)

Nastavení vnitřních okrajů (padding) se dá stylovat na čtyřech místech:

• na sloupci,
• na řádku,
• na textovém divu,
• v nastavení stránky.

02.01 Nastavení vnitřních okrajů (padding) na sloupci

Nastavení vnitřních okrajů (padding) na sloupci, používáme jako hlavní způsob stylování pro e-mailové šablony.
Ostatní způsoby používáme pouze při vytváření pop-up oken nebo vstupních stránek. A i tak upřednostňujeme nastavení vnitřních okrajů (padding) na sloupci.

02.02 Nastavení vnitřních okrajů (padding) na řádku

Nastavení vnitřních okrajů (padding) na řádku používáme pouze při vytváření pop-up oken a vstupních stránek.

02.02 Nastavení vnitřních okrajů (padding) na textovém divu

Nastavení vnitřních okrajů (padding) na textovém divu používáme pouze při vytváření pop-up oken a vstupních stránek.

02.02 Nastavení vnitřních okrajů (padding) v nastavení stránky

Nastavení vnitřních okrajů (padding) v nastavení stránky používáme pouze při vytváření pop-up oken a vstupních stránek.

Následující návod vychází z
našich zkušeností a vědomostí.
Pokud se v něčem mýlíme, neváhejte nám to napsat na bartos@incomaker.com, rádi se naučíme něco
nového.

Shrnutí designu

• Prvky designu se nemůžou překrývat, e-maily toto
  neumožňují. Překrytí lze dosáhnout tím, že si jej vytvoříte jako obrázek, který se pak do e-mailu
  přidá.
• Fonty které se budou zobrazovat prakticky všude a je dobré na nich návrh
  stavět jsou: Arial, Verdana, Helvetica, Georgia, Tahoma, Lucida,
  Trebuchet, Times New Roman, Courier, Courier New, Geneva. Jiné fonty se
  nebudou zobrazovat na 99 % e-mailových klientů.
• Zarovnání prvků je dobré navrhnout tak, aby bylo stejné jak na mobilních
  (telefony) zařízeních, tak na stolních zařízeních (PC).
• Obrázky a GIFy by měly velikostně odpovídat bloku ve kterém budou umístěny (např. do bloku o šířce 200 px nevkládat obrázek o velikosti 150 px. Buď by nevyplnil celý blok a pokud byste nastavili aby ano, zdeformuje se a nebude kvalitní).
  Formáty: .jpeg, .gif, .png.
  Datová velikost obrázků není nijak penalizovaná, nicméně velké obrázky se
  načítají dlouho, klienta budou stát data z jeho paušálu a klient se Vám může odhlásit z odběru e-mailů.
• Obrázky pozadí navrhovat bez nutnosti přesného umístění. Velikost
  individuální. Obrázek jako pozadí se nebude všude zobrazovat.
• Velikost fontů 14px desktop 16px mobil pro text, velikost nadpisů je
  individuální.
• Výchozí šířka těla e-mailu je v Incomakeru nastavena na 640 px a je s ní počítáno v
  produktových blocích. Užší email může mít za následek, že produktové prvky nebudou na stejném řádku.
• Video v e-mailu pouze formou odkazu na video. Incomaker má v editoru šablon
  nástroj na automatické vytváření náhledů Youtube videí s linkem na příslušné video.

Požadavky na návrh

• Návrh vytvářejte např. v Affinity Designeru, Photoshopu nebo nějakém jiném vektorovém editoru, nebo jejich webové
  obdobě např Canva.
• Velikost návrhu 1:1, veškeré rozměry v pixelech.
• Veškerou grafiku jako obrázky, ikony atd. pošlete společně s návrhem odděleně, ve formátu .png s průhledným
  pozadím.
• Pokud si přejete importovat existující e-mailovou šablonu, tak prosím o její zaslání (ne přeposlání) na
  bartos@incomaker.com nebo o přístup do editoru, ve kterém se daná šablona nachází.

Vysvětlení designu

1. Fonty písma

• Fonty jiné než základní tj: Arial, Verdana, Helvetica, Georgia,
  Tahoma, Lucida, Trebuchet, Times New Roman, Courier, Courier New, Geneva,  se nebudou zobrazovat na drtivé
  většině emailových klientů. V případě potřeby “extra” fontu je jediná spolehlivá cesta obrázek a na něj ve
  Photoshopu napsat něco požadovaným fontem, viz. obr.  níže.

2. Design “mobile first”

• Čím složitější je šablona, tím je větší šance, že se bude někde zobrazovat
  chybně/nestejně. Všeobecně se doporučuje šablony designovat “mobile first”, viz obr. níže.

3. Více elementů na jednom řádku

• Pokud bude víc elementů na jednom řádku, například text-logo-text, je dobré aby
  zabíraly v řádku stejnou šířku, a byly vycentrovány stejně jako zbytek šablony ideálně vše na střed. Viz obrázky
  níže a obrázky výše.

4. Rozměry

• Šířka těla e-mailu je v Incomakeru nastavena na 640 px a je s ní počítáno v produktových blocích, užší email může mít za následek že produktové prvky nebudou na stejném řádku.
• Velikosti obrázků nemusí být přesně 1:1, dají se upravovat pomocí html/css. Pokud se nějaký obrázek nebo element
  zobrazuje někde jinak velký nebo zarovnaný než jinde, je to věc k testování a doladění. Faktory, které to mohou
  způsobit se různí a čas od času se něco “rozsype”, i když to předtím fungovalo. A to z důvodu updatu jednotlivých
  emailových klientů. Ideální je, aby měly všechny obrázky na jednom řádku stejnou šířku nebo výšku. Nebo
  obojí.

• Velikosti a rozpětí písma je na Vašem uvážení/testování.
  Obecně se udává:
  14px velikost standardního textu
  pro desktop a 16px pro mobily.
  Velikosti nadpisů jsou čistě na designu.
  Velikost/zobrazení fontů se může na
  zařízeních lišit (ne všude to vypadá stejně).

• Obrázky na pozadí se na některých email. klientech nezobrazují, a je obtížné zajistit přesné usazení elementů
  vůči obrázku jako pozadí. Osobně používám obrázek jako pozadí za tělem emailu, motiv je tapeta nebo něco co
  nevyžaduje přesnou pozici, a vždy k němu přidávám barvu která se zobrazí na klientu který obrázky na pozadí
  nepodporuje. Velikost obrázku na pozadí je individuální.

• Paddingy jsou otázkou designu. Nicméně platí to, co jsem uváděl výše. Pokud možno vše zarovnávat na střed. Paddingy
  se potom dost často nemusí zleva či zprava řešit.

• Rozměry GIFu by měli být +- odpovídající šířce containeru ve kterém bude umístěn.
• Video se do emailů přidává formou linku, nebo formou GIFu jako párvteřinový náhled toho videa, vedoucí například
  na youtube nebo eshop/web pokud hostujete videa tam. Velikost GIFU viz výše. Samotné video nelze do emailu
  umístit.
  Incomaker má v editoru šablon nástroj na automatické vytváření náhledů Youtube videí s linkem na příslušné video. Viz obr. níže.

  
  

Některé UTM tagy jsou v Incomakeru přidávány ke každému odkazu automaticky.  

Konkrétně budou při jakékoliv rozesílce e-mailové, SMS nebo kampaně do sociálních sítí doplněny tyto tagy:

• utm_source (Incomaker)
• utm_medium (pode typu kampaně)
• utm_campaign (název kampaně)

Editace UTM tagů

Pokud si chcete nastavit jiné UTM tagy, v konkrétní kampani klikněte na tlačítko UTM tagy a přepište předvyplněná pole, která chcete změnit a uložte.

Pokud děláte změny v automatizované kampani, je potřeba kampaň uložit kliknutím na tlačítko Dokončit.

Změny je potřeba udělat ve všech kampaních, ve kterých chcete použít jiné než přednastavené tagy.

Struktura e-mailu

Nejdříve si připravte strukturu e-mailu přetažením bloků s počtem sloupců do editoru. Například chcete, aby e-mail začínal logem a pod ním byl obrázek a vedle něho text s tlačítkem. Do editoru tedy přetáhněte nejdříve blok s jedním sloupečkem a pod to se dvěma. 

Do jednotlivých bloků vložte  žádané komponenty. 

Pro přehlednost jsou komponenty roztříděné do kategorií. V kategorii základní najdete základní komponenty jako právě text, tlačítko a obrázek. Logo najdete v kategorii hlavička v kategorii Obrázek jsme pro vás připravili celé řádky – například dva obrázky vedle sebe a pod nimi dvě tlačítka. 

Změna obrázku

Chcete-li vyměnit obrázek, který je v těle e-mailu již vložen, klikněte na něj a otevře se dialogové okno s možnostmi nastavení obrázku. Klikněte na tlačítko Změnit obrázek a Incomaker Vám ukáže nabídku obrázků, které máte uložené nebo si přes tlačítko Nahrát obrázek nahrajete nové obrázky.

Vložení personalizace

Pokud potřebujete vložit prvky, které se mají v mailu přizpůsobovat podle toho, komu e-mail jde, např. oslovení, klikněte v menu na ikonu Personalizace a vyberte, o jaké pole máte zájem. Např. oslovení, název firmy, apod. Incomaker obsah potom při odesílání doplňuje každému jednotlivému zákazníkovi zvlášť, takže maily vypadají, jako byste je psali ručně.

Podrobnější návod naleznete v článku Zástupné texty.

Vložení dynamického obsahu

Incomaker zvládne snadno velmi pokročilou personalizaci obsahu mailů. Tato funkcionalita se nazývá dynamický obsah a vkládá se v editoru prostřednictvím speciálních prvků, které zajistí doplnění specifického obsahu do jednotlivých mailů. V kategoriích komponent zvolíte E-commercea vyberete si z připravených automatizovaných bloků. Ten přetáhnete do připravené jednosloupcové struktury v mailu. Otevře se dialog s nastavením dynamického obsahu a vy zvolíte počet položek (produktů), které se mají doplnit. Pokud chcete poslat 4 produkty, vložíte jeden blok a do pole počet položek napíšete 4. Dále vyberete, jestli chcete posílat plně personalizovaný obsah (zvolte možnost Chytré doporučení produktů) nebo například Novinky nebo Produkty v akci. Nakonec zvolte měnu a nastavení pro daný blok uložte tlačítkem Potvrdit.

Při odesílání e-mailu bude doplněn patřičný obsah (obrázky, názvy produktů, apod.). Podle svých preferencí můžete změnit například barvu písma, tlačítek, velikosti písma a podobně.

Editace dynamického obsahu

Pokud potřebujete změnit, co má Incomaker do dynamického obsahu doplňovat, klikněte kamkoliv do prvku a rovnou se otevře editace dynamického obsahu

V dialogu Dynamický obsah můžete nastavit, kolik položek (produktů) se má v mailu zobrazit, případně můžete upravit kritéria výběru produktů. Nic nebrání ani tomu, aby v mailu bylo více prvků Dynamický obsah a váš e-mail pak může např. vypadat tak, že nejprve bude obsahovat výběr novinek (Novinky) následovaný článkem z vašeho blogu (Chytré doporučení článků) k danému tématu a nakonec nabídkou několika produktů, relevantních pro daného zákazníka (Chytré doporučení produktů).

Incomaker umožňuje řadu možností, jak personalizovat obsah. Můžete personalizovat maily podle uživatelů, kterým je směřován mailing, personalizovat příspěvky do sociálních sítí podle profilu, kam má být umístěn, obsah webu podle uživatele, který si jej prohlíží apod.

Vložení zástupného textu

V případě mailů se personalizace děje pomocí zástupných polí, která lze vkládat do těla emailu a za ty je automaticky doplněn obsah. Zástupný text lze vložit tak, že kurzor umístíte tam, kde chcete zástupný text mít a kliknete na tlačítko Personalizace na nástrojové liště.

Objeví se nabídka možných zástupných polí, kde si můžete vybrat. Nabídka obsahuje všechna pole z karty kontaktu, pole z předchozích kroků editace, stejně jako pole uživatelsky definovaná z nejrůznějších databází.

Po výběru dojde k vložení vlastního zástupného textu. Například při výběru Oslovení se v textu objeví následující zástupný text:

__salutation__

Pokročilí uživatelé nemusejí hledat zástupné znaky v menu a mohou je psát rovnou z klávesnice.

V případě, že příslušná datová položka neexistuje, například příslušný uživatel nemá oslovení vyplněno, nebude mu email odeslán. To nemusí být žádoucí a proto pole umožňuje zařadit alternativy. To lze docílit pomocí oddělovače || (dvě svislítka).

__salutation||name__,

…značí, že pokud má uživatel vyplněno oslovení, bude dosazeno oslovení. Pokud tomu tak není, bude dosazeno jméno. V případě, že ani to u daného kontaktu neexistuje, nebude email odeslán.

Aby byl mail odeslán i v případě nevyplněného oslovení, lze na konec řady alternativ zařadit text v uvozovkách, který je doplněn, pokud nic z předchozího není dostupné. Následující příklad je velmi častý a dosadí oslovení z kontaktu a pokud by nebylo vyplněno, dosadí Dobrý den. Nezapomeňte v tomto případě na konec řádky vložit čárku, kterou obvykle příslušné pole samo o sobě neobsahuje, aby oslovení odpovídalo pravidlům českého pravopisu.

__salutation||name||"Dobrý den"__,

Obrázky jsou pro marketingové kampaně klíčové

Téměř všechny vaše marketingové kampaně budou vyžadovat obrázky, aby byly úspěšné. V Incomakeru chápeme, že vaše firma používá v marketingu nesčetné množství obrázků. Proto jsme vytvořili nástroj Správce obrázků, pomocí kterého můžete nahrát obrázky rychlé a jednoduše najednou.

Import obrázků

Chcete-li importovat obrázky, najeďte myší na ozubené kolečko a klikněte na možnost Knihovna obrázků.

Otevře se nové okno, kde po kliknutí na tlačítko Nahrát obrázek se otevřou složky v počítači, standardně vyberete obrázky a buď je přetáhnete do okna v Incomakeru nebo potvrdíte tlačítkem otevřít.

Metadata obrázku

Ke každému obrázku si můžete vyplnit metadata, minimálně název obrázku doporučujeme upravit tak, aby dával smysl, protože pokud nemají vaši zákazníci povolené stahování obrázků v e-mailu, zobrazí se jim název. A například název Člověk a hory vypadá důvěryhodněji než název mountain-298999_1280.jpg. Dále si můžete doplnit například klíčová slova pro snazší vyhledávání obrázků.