Vizuální tvůrce má svou vlastní hierarchii prvků. Můžeme začít od pruhů (Stripes) a postupovat sestupně, přes struktury a kontejnery až k blokům.
Všech 12 základních bloků je v editoru k dispozici v nabídce Content/Blocks.
Chcete-li některý z bloků použít, stačí jej přetáhnout do šablony a poté začít s úpravami.
Můžete vkládat obrázky ve formátu PNG, JPG nebo GIF. Existují tři způsoby, jak obrázek vložit:
Obrázek můžete jednoduše přetáhnout ze složky ve vašem počítači, nebo jej vložit kliknutím do zóny pro přetažení obrázku a výběrem obrázku z vašeho počítače.
Pokud nemáte obrázek uložený v počítači, můžete do pole “External link” vložit odkaz na obrázek uložený na vašem FTP serveru, nebo například ve Správci souborů v Mailkitu.
Pokud chcete tento obrázek použít pouze jednou, v rozbalovací nabídce vyberte možnost „Ponechat jako externí odkaz/Leave as external link“ (viz výše uvedený příklad) a klepněte na zaškrtávací políčko .
Pokud se chystáte použít tento obrázek i pro jiné e-mailové kampaně, klikněte v rozbalovacím menu na „Stáhnout do galerie/Download to the gallery“ a potvrďte kliknutím na. Obrázek bude vložen do galerie, odkud jej poté kliknutím můžete vložit do šablony.
Můžete využít obrázky, které jste si do galerie uložili dříve (viz předchozí 2 body).
Obrázky jsou v galerii řazeny podle data – od nejnovějšího po nejstarší. Pomocí lupymůžete obrázky v galerii vyhledávat podle jejich názvu.
Pokud chcete vložit obrázek z galerie, stačí na něj kliknout a obrázek se automaticky vloží do vašeho e-mailu.
V dalším nastavení v levém menu pak můžete např.:
Textové pole opět do šablony/e-mailu vložíte přetažením bloku na místo, kam text chcete vložit.
V levém menu pak můžete upravit např.:
Text lze editovat i pomocí horní nástrojové lišty.
Po přetažení bloku do šablony můžete v levém menu vyplnit URL tlačítka a jeho text. Všechna ostatní nastavení vycházejí z defaultního nastavení definovaného v menu Appearance –> Button.
Parametry je samozřejmě možné upravit. Pokud na jiném místě šablony vložíte další tlačítko, opět bude nastaveno s výchozími parametry.
Pokud některé parametry nejsou aktivovány v menu Appearance –> Button (například zvýraznění/změna barvy tlačítka při najetí myší), při editaci tlačítka s nimi poté není možné pracovat.
Dynamický oddělovač –> oddělovač bez linky, v šabloně si pak pouhým tahem myši můžete jeho výšku jednoduše upravit.
Pokud není nastaven dynamický oddělovač, můžete nastavit např.:
Video do vašeho e-mailu můžete vložit dvěma způsoby:
1) Vložením URL odkazu na vaše video
Jedná se o způsob, který funguje ve všech e-mailových klientech i na všech zařízeních. V levém menu stačí vložit link na video, případně vyplnit pole pro atributy “Alt” a “Title” – automaticky vložen jejich název, text je samozřejmě editovatelný. Dále můžete nastavit např.:
2) Embedované (vložené) video
Takto vložená video se přehrávají přímo v e-mailech. Příjemci tedy nejsou přesměrování na jiné webové stránky, aby si mohli video prohlédnout.
NIcméně použití tohoto způsobu má značná omezení – většina e-mailových klientů tento způsob nepodporuje. Aktuálně je podporován pouze v Apple Mail, nativním iOS mail, Thunderbirdu a Outlooku pro Mac.
Jak video vložit:
<video class="adapt-img" controls="controls" poster="https://www.mailkit.com/video/nahled_600x300.jpg" width="100%" height="313">
<source src="https://www.mailkit.com/video/video_600x300.mp4" type="video/mp4">
<!-- fallback -->
<a href="https://vimeo.com/mailkit" class="esd-frame-element esd-hover-element esdev-disable-select"><img class="adapt-img" src="https://www.mailkit.com/video/nahled_600x300.jpg" alt="" width="600" height="300"></a>
</video>
controls: zobrazí ovladače videa v klientech, které ovládání podporují
poster: URL náhledového obrázku videa
source src: URL vkládaného videa
První část kódu (nad “fallback”) je určena pro příjemce, jejichž zařízení a e-mailoví klienti vložení videa podporují.
Druhá část kódu (pod “fallback”) je pak určena pro ty, jejichž e-mailoví klienti embedovaná videa nepodporují –> tito příjemci jsou přesměrováni na Vimeo (případně jakýkoli jiný web hostující video).
Použitím tohoto kódu zajistíte, že všichni vaši příjemci uvidí video, které s nimi chcete sdílet.
Po přetažení bloku do šablony můžete v další editaci v levém menu přizpůsobit blok s odkazy na vaše sociální sítě dle vašich představ. Ve výchozím nastavení jsou vloženy 4 ikony. Pokud potřebujete více ikon, stačí kliknout na tlačítko. Můžete si vybrat z velkého množství stylu ikon a tří velikostí (24 px, 32 px a 64 px).
Po rozbalení dalšího nastavení můžete u každé z ikon nastavit:
Samozřejmě i zde můžete nastavit zarovnání bloku (případně rozdílně pro zobrazení v mobilních telefonech) či ohraničení. Jednoduchým způsobem nastavíte odsazení mezi ikonami.
Po přetažení bloku do šablony a vložení obrázku, můžete provádět další úpravy:
Pokud potřebujete umístit jakýkoliv text na obrázek banneru, klikněte na tlačítkona horním panelu nástrojů. Jakmile je tlačítko aktivní, můžete do banneru nakreslit textové pole na místo, kam má být finální text vložen. Po umístění textové pole se do něj vloží defaultní text “Caption”, který můžete dále editovat a vložit místo něj vlastní text. Pomocí nástrojů v horní liště můžete nastavit parametry textu (velikost, barvu, font a další).
Na banner můžete umístit další obrázek. Může to být cokoli, co se vám líbí: nálepka, rámeček, logo…
Pro zefektivnění kampaní můžete do e-mailu vložit odpočet.
Po přetažení bloku do šablony e-mailu můžete dále nastavit např.:
Můžete také nahrát obrázek, který se příjemcům zobrazí poté, co čas odpočtu vyprší, čímž příjemce jasně informujete, že kupón/nabídka vypršel(a) a již nelze využít.
Po vložení bloku do e-mailu se menu zobrazí ve výchozím vzhledu – tzn. zobrazí se 3položkové menu. Přidat další položky je možné kliknutím na tlačítko “Add menu item”, které je umístěno úplně dole v menu pro editaci bloku “Menu”
Dále můžete nastavit:
Po vložení bloku do šablony e-mailu klikněte na “Insert your HTML in the code editor” –> otevře se vám editor, kam můžete vložit svůj kód a dále s ním pracovat.
Pro vytvoření karuselu přetáhněte blok do šablony, a pak už stačí jen přidat potřebný počet slidů/obrázků. Protože AMPHTML zatím podporuje minimum providerů (Google, Yahoo..), doporučujeme vždy myslet na záložní variantu pro příjemce, jejichž provider AMPHTML nepodporuje – tzn. kontejneru přidat například obrázek a přiřadit zobrazení pouze v HTML verzi (tím pádem zůstane skryté v AMPHTML verzi – těmto příjemcům by se jinak zobrazil karusel i tento záložní obrázek)
AMP-Accordion je užitečná komponenta, pokud chcete skrýt/zobrazit velké množství obsahu. Umožňuje příjemcům nahlédnout do osnovy obsahu a přejít na kteroukoli sekci, čímž například snižuje potřebu rolování na mobilních zařízeních.
Pro vytvoření přetáhněte blok do šablony. Můžete nastavit pozadí, orámování či barvu a velikost fontu písma. Kliknutím na tlačítko “Add Section” přidejte potřebný počet sekcí a naplňte je obsahem.