template_01.png

  • ✓ Responsivní design

  • ✓ Univerzální

  • ✓ Variabilní

  • ✓ Možnost vlastního nastavení
    (barva, velikost písma, fonty, zarovnání textu apod.)

template_02.png

Vyberte si z naší nabídky motivů v Knihovně předloh tu předlohu, které nejvíce vyhovuje Vašim požadavkům na obsah a design mailingu.

Pak už jen stačí vyměnit obrázky, doplnit texty a odkazy, vybrat barvy odpovídající Vaší corporate identity a máte hotovo.
Přesun, mazání a přidávání designových bloků je samozřejmostí.

Podporované designové bloky

Designové bloky určené pro obsah mailingu

Vámi zvolená šablona bude obsahovat jen některé z níže uvedných designových bloků. Vy máte samozřejmě vždy možnost jakýkoliv z bloků do obsahu Vašeho mailingu přidat a přizpůsobit si ho. Jak na to, se dozvíte v části Obecné chování předlohy.
Potřebujete si přizpůsobit design? Co všechno lze v šabloně změnit se dozvíte zde. U všech šablon lze navíc automaticky změnit vzhled podle designu Vašich www stránek.

Designové bloky určené pro hlavičku/patičku mailingu

Do hlavičky a patičky předlohy jsme Vám připravili designové bloky, které jsou pro mailingy nutností. Tyto bloky máte možnost částečně editovat.

Odkaz na náhled v prohlížeči

Odhlášení

Copyright

Imprint

Stručný popis designových bloků

Tento designový blok kombinuje tyto prvky:

  • logo společnosti

  • text (jméno společnosti)

  • odkaz

Na mobilních telefonech bude logo i hlavička vycentrována.

Vložit pomocí

Počítač

Mobilní telefon

1_logo.png

template_logo.png

template_logo_r.png

Obrázek

Vloží do předlohy klikací obrázek.

Tento designový blok obsahuje prvky:

  • obrázek

  • odkaz

Do předlohy lze vložit jeden, dva, tři nebo čtyři obrázky. Jejich rozložení se automaticky přizpůsobí šířce zařízení.

Na mobilních telefonech jsou obrázky umístěny pod sebou.

Jeden obrázek

Vložit pomocí

Počítač

Mobilní telefon

2_banner1_s.png

template_banner1.png

template_banner1_r.png

Dva obrázky

Vložit pomocí

Počítač

Mobilní telefon

2_banner2_s.png

template_banner2.ng

template_banner2_r.png

Tři obrázky

Vložit pomocí

Počítač

Mobilní telefon

2_banner3_s.png

template_banner3.ng

template_banner3_r.png

Čtyři obrázky

Vložit pomocí

Počítač

Mobilní telefon

2_banner4_s.png

template_banner4.ng

template_banner4_r.png

Doporučení pro vkládané obrázky naleznete zde.

Oslovení a obsah

Tento designový blok Vám umožní oslovit adresáta jménem a příjmením. Pokud má adresát uloženo ve svých datech hodnotu oslovení, jména a příjmení, budou při odesílání mailingu automaticky doplněny. V opačném případě bude hodnota před čárkou prázdná. Designový blok kombinující tyto prvky:

  • oslovení adresáta

  • textový odstavec

  • tlačítko s odkazem

Příklad variant prvku:

Oslovení

Oslovení a text

Oslovení, text a tlačítko

Vložit pomocí

Počítač

Mobilní telefon

3_text_s.png

template_salutation.png

template_salutation_r.png

Oslovení podle pohlaví a obsah

Tento designový blok automaticky vybere oslovení definované v designovém bloku (např. "Vážený pane") podle pohlaví adresáta. Informaci o pohlaví adresáta není potřeba znát. Při generování personalizovaného obsahu mailingu se hodnoty v bloku automaticky nastaví podle hodnoty oslovení uložené v detailu adresáta.
Kromě oslovení musí být v detailu adresáta uloženo také jméno a příjmení adresáta. Pokud není jméno a/nebo příjemní adresáta v detailu uoženo, bude chybějící hodnota před čárkou prázdná.
V případě neznámého oslovení se použije poslední z uvedených možností.

Designový blok kombinující tyto prvky:

  • oslovení adresáta podle jeho pohlaví

  • textový odstavec

  • tlačítko s odkazem

Příklad variant prvku:

Oslovení

Oslovení a text

Oslovení, text a tlačítko

Vložit pomocí

Počítač

Mobilní telefon

20_gender_s.png

20_gender.png

20_gender_r.png

Nadpis a podnadpis

Tento designový blok kombinuje tyto prvky:

  • výrazný nadpis s odkazem

  • podnadpis

Na mobilních telefonech budou nadpisy umístěny pod sebou.

Vložit pomocí

Počítač

Mobilní telefon

14_headline.png

template_heading.png

template_heading_r.png

Obrázek a obsah

Designový blok tvořený dvěma sloupci kombinující tyto prvky:

  • obrázek v jednom ze sloupců

  • ve druhém sloupci:

    • nadpis

    • textový odstavec

    • tlačítko s odkazem

Tento blok má dvě varianty umístění obrázku (v levé nebo pravé části).

Na mobilních telefonech jsou sloupce umístěny pod sebou, obrázek jako první.

Obrázek/Obsah

Vložit pomocí

Počítač

Mobilní telefon

4_image_text_s.png

template_itext.png

template_itext_r.png

Obsah/Obrázek

Vložit pomocí

Počítač

Mobilní telefon

4_text_image_s.png

template_texti.png

template_texti_r.png

Doporučení pro vkládané obrázky naleznete zde.

Text a tlačítko

Designový blok kombinující tyto prvky:

  • nadpis

  • textový odstavec

  • tlačítko s odkazem

Vložit pomocí

Počítač

Mobilní telefon

15_texttB.png

template_text.png

template_text_r.png

Text

Designový blok pro zadání textového odstavce.

Vložit pomocí

Počítač

Mobilní telefon

19_text.png

template_txt.png

template_txt_r.png

Tlačítko

Tento designový blok vkládá do obsahu šablony tlačítko s odkazem.

Vložit pomocí

Počítač

Mobilní telefon

117_button.png

template_button.png

template_button_r.png

Ikony a obsah

Designový blok tvořený až čtyřmi sloupci. Každý sloupec obsahuje tyto prvky:

  • velkou ikonu

  • nadpis

  • text

  • tlačítko s odkazem

Na mobilních telefonech jsou sloupce umístěny pod sebe.

Nastavení designového bloku:

  • Individuální
    Pro každý ze sloupců lze volit vlastní barvu pozadí, textů a tlačítka nebo třeba zarovnání textů. Toto nastavení je dostupné po kliknutí na ikonu edit.svg.

  • Společná
    Nastavení jako počet sloupců, velikost ikon, velikost nadpisů, tvar tlačítek apod. jsou dostupná po kliknutí na ikonu buffer.svg.

Vložit pomocí

Počítač

Mobilní telefon

5_icons_r.png"

template_icons.ng

Sloupce se umístí pod sebe

Doporučení pro vkládané obrázky naleznete zde.

Sloupce (obrázek a obsah)

Designový blok kombinující tyto prvky:

  • obrázek

  • textový odstavec

  • tlačítko s odkazem

Tento designový blok existuje ve variantách jeden, dva, tři a čtyři sloupce. Šířka sloupců se přizpůsobuje použitému zařízení. U více sloupcových variant se sloupce na mobilním telefonu umístí pod sebe.

Jeden sloupec

Vložit pomocí

Počítač

Mobilní telefon

8_col1_s.png

template_col1.png

template_col1_r.png

Dva sloupce

Vložit pomocí

Počítač

Mobilní telefon

8_col2_s.png

template_col2.ng

Sloupce se umístí pod sebe

Tři sloupce

Vložit pomocí

Počítač

Mobilní telefon

8_col3_s.png

template_col3.ng

Sloupce se umístí pod sebe

Čtyři sloupce

Vložit pomocí

Počítač

Mobilní telefon

8_col4_s.png

template_col4.ng

Sloupce se umístí pod sebe

Doporučení pro vkládané obrázky naleznete zde.

Oddělovač

Designový blok určený pouze pro oddělení bloků umístěných v obsahové části mailingu. Můžete měnit barvu dělící čáry a jejího pozadí, tloušťku i styl čáry.

Blok se přizpůsobí šířce zařízení.

Vložit pomocí

Počítač

Mobilní telefon

11_divider_s.png

template_divider.png

template_divider_r.png

Logo a Impressum

Tento designový kombinuje tyto prvky:

  • logo

  • text

Na mobilním telefonu je textová část umístěna pod logem.

Vložit pomocí

Počítač

Mobilní telefon

13_imp_s.png

template_impress.png

template_impress_r.png"

Sociální sítě

Loga sociálních sítí jsou vygenerována automaticky, pokud je zadán odkaz na danou síť. Vlastní loga nelze použít.

Designový blok kombinuje tyto prvky:

  • loga a odkazy na www stránky známých sociálních sítí

  • e-mailovou adresu

  • telefonní číslo

Na mobilním telefonu jsou loga umístěna pod sebou.

Vložit pomocí

Počítač

Mobilní telefon

9_soc_s.png.png

template_soc.ng

template_soc_r.png"

Net Promoter Score

Chcete dát Vašim adresátům možnost ohodnotit Váš mailing? Připojte do obsahu mailingu tento designový blok.

Připravili jsme celou řadu různých typů hodnocení, najdete je v detailu bloku v části NPS type: nps_score.png

Můžete definovat i vlastní nadpis, kterým bude část pro hodnocení mailingu uvedena.

A jak hodnocení funguje?
Každý odeslaný e-mail bude obsahovat zvolené hodnocení. Pokud adresát e-mailu na některou z možností klikne, bude přesměrován na předdefinovanou cílovou stránku a jeho odpověď se zaznamená do statistiky mailingu.

Designový blok obsahuje tyto prvky:

  • výběr z nabídky předdefinovaných šablon na Net Promoter Score

  • nadpis

Následující obrázek zobrazuje jednu z možných předloh pro hodnocení mailingu.

Vložit pomocí

Počítač

Mobilní telefon

18_nps.png

template_nps.ng

template_nps_r.png"

Do hlavičky a patičky předlohy nelze přidávat žádné další designové bloky. Tato část je vyhrazená pouze předdefinovaným blokům pro Odkaz na náhled v prohlížeči, Odhlášení a Copyright.

  • pozice těchto bloků je neměnná,

  • blok nelze vložit,

  • text odkazu na odhlášení musí být vyplněn,

  • prvky bloku, které necháte prázdné, nebudou vidět ani v šabloně ani v obsahu mailingu,

  • blok se nezobrazí, pokud jsou všechny jeho prvky prázdné.

Odkaz na náhled v prohlížeči

V hlavičce mailingu je vložen předdefinovaný textový blok určený pro zobrazení náhledu e-mailu ve webovém prohlížeči. Tento blok se zobrazí pouze při zobrazení e-mailu v počítači.

Obsah prvku můžete editovat po kliknutí na ikonu global settings přímo v editoru předlohy.

Vložit pomocí

Počítač

Mobilní telefon

nelze vložit

template_preview2.png

blok není zobrazen

Odhlášení

Designový blok vložený v patičce mailingu. Obsahuje pouze pole pro vložení povinného textu odhlašovacího odkazu.

Blok se přizpůsobí šířce zařízení.

Vložit pomocí

Počítač

Mobilní telefon

nelze vložit

template_uns.png

template_uns_r.png"

Designový blok vložený v patičce mailingu. Obsahuje text, logo XCAMPAIGN a odkaz na informační stránku o produktu.

Editovat lze pouze pole pro vložení textu, ostatní pole jsou skrytá. Pokud máte zaplacené předplatné, můžete text vymazat. Blok pak nebude v mailingu zobrazen.

Vložit pomocí

Počítač

Mobilní telefon

nelze vložit

copyright.png

copyright_r.png

Imprint

Tento designový blok se vkládá do patičky mailingu a využijete ho na vložení až 4 odkazů na Vaše důležité www stránky (např. stránky s podmínkami používání, ochranou osobních údajů apod.).

Designový blok kombinuje tyto prvky:

  • Odkazy (až 4)

  • text

Na mobilním telefonu je textová část umístěna pod odkazy.

Vložit pomocí

Počítač

Mobilní telefon

16_imp.png

template_impr.png

template_impr_r.png"

Zásady pro vkládání obrázků a ikon

Pokud dodržíte následující zásady, budou vaše e-maily působit vždy profesionálně. Vložený obrázek se automaticky přizpůsobí požadované velikosti a při škálování je zachován poměr stran.

Designový prvek

Rozměry obrázku

Ikony a obsah

  • čtvercové obrázky

  • minimální velikost obrázků je 150x150 px

  • formát obrázku s průhledným pozadím (png, gif)

Banner (jeden)
Sloupec (jeden)

  • obdélníkové obrázky o minimální šířce 750 px

Banner (více sloupců)
Sloupec (více sloupců)

  • obdélníkové obrázky se stejným poměrem stran

  • minimální šířka je dána počtem obrázků umístěných vedle sebe
    (375 px, 249 px a 187 px pro 2, 3 a 4 obrázky)

Obrázek a obsah

  • obrázek o minimální šířce 355 px

Obecné chování předlohy

  • Po kliknutí na vybraný designový blok se vpravo objeví nástroje pro editaci.

  • Šablona má přednastavený ukázkový obsah.

    • K zadání vlastního obsahu slouží editační dialog, který lze u každého prvku vyvolat kliknutím na ikonu edit.svg.
      Kromě obsahu můžete také definovat požadované nastavení designového bloku (barvy, velikosti písma apod.).

    • Pokud v textovém poli zůstane výchozí hodnota (lorem ipsum) je v editačním poli zobrazena ikona warning.svg.
      Kontrolu obsahu předlohy můžete také vyvolat přímo z kontextového menu dots.svg.
      Bloky, kde byla nalezena výchozí hodnota, jsou zvýrazněny.

    • Do textového pole můžete vkládat také názvy polí z Vaší struktury dat a připravit tak osobnější (personalizovaný) obsah mailingu.
      Stačí využít volbu Vložit datové pole, pokud je nabízena:

      insert_data_field.png

    • Tlačítka se v bloku zobrazí až po zadání odkazu.

    • Veškerá pole pro zadání odkazů (s výjimkou odhlašovacího odkazu) jsou ve výchozím nastavení prázdná.

    • Prvky bloku, které necháte prázdné, nebudou v obsahu mailingu zobrazeny.

  • Výběr fontů použitých pro nadpisy a texty je součástí nastavení designového prvku Odkaz na náhled v prohlížeči.

  • Designové bloky umístěné v hlavní části předlohy, tedy mimo hlavičku a patičku předlohy, lze:

    • libovolně přesouvat pomocí ikon "up.svg down.svg nebo pomocí myši

    • kopírovat (copy.svg) i smazat (delete.svg).

  • Pro přidání nového designového bloku slouží ikona add.svg vlevo nahoře. Blok se vloží na konec obsahu.

  • Změnit v celém mailingu barvy (textů, tlačítek, pozadí), fonty nebo třeba loga můžete velmi rychle pomocí ikony "brush-solig.svg. Více informací najdete v kapitole Změna designu mailingu pomocí X-Designer.

Úpravy vzhledu

Pokud lze editovat vzhled designového prvku, je v jeho detailu zobrazena záložka Vzhled.

Pak lze upravit i vzhled dílčích prvků použitých v designovém bloku (např. nadpis, text, tlačítko atd.). Který prvek momentálně upravujete poznáte z názvu pole, editovanou vlastnost pak určuje text v závorce např. "Tlačítko (barva pozadí)".

Jakmile některý z výchozích designových prvků upravíte, bude při vložení stejného bloku do editovaného mailingu použito Vaše nastavení bloku. Není tedy nutné opakovaně provádět stejné změny vzhledu.

Note

Pokud potřebujete změnit barvu jen části textu, použijte editor přímo u daného textového pole. Více informací zde.

Vlastní nastavení textu

Rodina písma (Font-family)

Můžete specifikovat font použitý pro nadpis a pro ostatní text.
Výběr rodiny písma je k dispozici po kliknutí na ikonu global settings přímo v editoru předlohy.

Klikněte do pole a vyberte požadovanou rodinu písma. Ta je vždy složena z několika fontů. První font ve vybraném seznamu bude použit jako výchozí. Další fonty budou použity postupně v případě, že předchozí font nemá příjemce e-mailu ve svém počítači nainstalovaný.

Zarovnání textů

Z předdefinovaných možností vyberte požadovaný způsob zarovnání textů (vlevo, na střed, vpravo). Pokud editujete zarovnání u designových prvků Ikony a obsah a Sloupce (obrázek a obsah), je toto nastavení společné pro všechny sloupce obsažené v prvku a je dostupné pouze v editaci prvního sloupce.

Velikost písma

Podle typu zvoleného designového bloku lze nastavit velikost písma pro nadpisy, tlačítka a samotný text. Velikost lze měnit pomocí šipek vedle pole nebo pomocí posuvníku.

Síla (tučnost) textu

Chcete použít silnější písmo nebo naopak slabší? Stačí kliknout do pole vybrat z nabízených hodnotu tu, která Vám nejvíce vyhovuje.

Změna velikosti textu

Máte připravený text a potřebujete, aby byl např. celý velkými písmeny?
Stačí kliknout do pole a zvolit, jak má být text změněn:

  • všechna velká písmena (uppercase)

  • všechna malá písmena (lowercase)

  • všechna první písmena velká (capitalize)

  • ponechán tak, jak je napsaný (none).

Vnitřní okraj (padding)

Toto nastavení určuje vzdálenost mezi vloženým obsahem, (např. textem tlačítka) od horního a spodního okraje prvku, do kterého obsah vkládáte (v našem případě od okraje tlačítka).

Tento pojem je v designu znám jako "padding".

Tvar tlačítka

Pomocí poloměru zakulacení rohů si můžete nastavit, zda bude tlačítko obdélníkové nebo bude mít zakulacené rohy (a jak velké to zakulacení bude).
Velikost lze měnit pomocí šipek vedle pole nebo pomocí posuvníku.

Barva celého textu

Měnit můžete barvu textů, pozadí textu i barvu pozadí tlačítek. V poli je zadaný kód zvolené barvy a v levé části pak náhled na zvolenou barvu. Na první pohled tak vidíte, jaká barva je momentálně nastavena.

Výběr barvy z palety

Pro změnu barvy klikněte do pole a vyberte z nabídky (palety) požadovaný odstín.

Definování vlastní barvy

Pro změnu barvy:

  1. Klikněte do pole s názvem barvy.

  2. Vyberte volbu jiná barva.

    color.png

  3. Místo původního názvu barvy je teď v poli text "jiná barva".
    Pokud znáte hexadecimální kód barvy, zapište ho přímo do pole (např. FA9F25).

    color_select.png

  4. Pokud potřebujete odstín vybrat přímo z palety, klikněte na ikonu colorpicker.svg vedle náhledu barvy.
    Otevře se dialog pro výběr barvy.

    color_other.png

    Pro výběr barvy použijte jednu z těchto možností:

    • Klikněte myší do pole na požadovaný odstín barvy.

    • V panelu nad hexadecimálním kódem zvolte požadovaný typ barvy (například odstíny zelené) a pak odstín upřesněte kliknutím myši do pole nad panelem.

    • Pokud znáte hexadecimální kód barvy, zapište ho přímo do pole (např. 4c6874).

      Výběr potvrďte tlačítkem Close. Okno se zavře a v náhledu barvy vidíte zvolený odstín.

Změna části textu

Potřebujete v textu zvýraznit některou jeho část nebo například přidat do textu odkaz?

  1. Kliknutím vyberte editační blok textu, který potřebujete změnit.

  2. Klikněte na editační tlačítko (ikona edit.svg).

    change_col_part1.png

  3. Otevře se dialog pro editaci obsahu. K dispozici máte řadu ikon známých z textových editorů.

    change_col_part2

  4. Vyberte část textu, kterou budete měnit.

  5. Zvolte odpovídající editační tlačítko, např. tlačítko barvy textu. Můžete vybrat barvu z předdefinovaných odstínů.

  6. Pokud chcete zadat barvu mimo přednastavený rozsah barev, klikněte na volbu Color picker. Otevře se dialog na výběr barev:

    color_change_picker.png

    Pro výběr barvy použijte jednu z těchto možností:

    • Klikněte myší do pole na požadovaný odstín barvy.

    • Zadejte barvu do pole HEX pomocí jejího hexadecimálního kódu.

    • V panelu nad hexadecimálním kódem zvolte požadovaný typ barvy (například odstíny zelené) a pak odstín upřesněte kliknutím myši do pole nad panelem.

      Výběr barvy potvrďte kliknutím na ikonu button-save.svg. Barvy přidané pomocí možnosti Color picker se automaticky přidávají do části Barvy dokumentu

      color_document.png

Změna designu mailingu pomocí X-Designer

Máte vlastní webové stránky a chcete, aby Vaše mailingy používaly stejný design?
Stačí při výběru typu obsahu vybrat X-Designer. X-Designer oskenuje zadanou webovou stránku a vytvoří Vaši novou šablonu s použitím firemního loga, barev a fontů. Vytvořená šablona ve Vašem firemním designu obsahuje nejčastěji používané designové prvky. Šablonu pak lze pak upravovat stejně jako předlohy, které nabízí Knihovna předloh.

Funkcionalitu můžete použít samozřejmě na jakýkoliv mailing vytvořený ze šablon nabízených na záložce Knihovna předloh.
Stačí otevřít X-Designer kliknutím na ikonu brush-solid.svg a zvolit možnost Webová stránka. Do pole zadejte Vaši webovou stránku a klikněte na volbu Spustit. X-Designer vytvoří ze zadané webové stránky automaticky šablonu podle Vaší firemní identity.

Více informací o používání X-Designer naleznete zde.