Magic editor - práce se strukturami
Jak mohu nastavit pořadí a šířku sloupců?
Kde nastavím odsazení sloupců?
Jak upravím konkrétní sloupec?
V rámci Magic editoru máte velmi široké možnosti tvorby celkové struktury svých kampaní. Je však dobré nejdříve pochopit, jak se s jednotlivými strukturami pracuje, kdy je dobré je používat.
Předpřipravené struktury
Předpřipravené struktury naleznete v nabídce vlevo, nad nabídkou konkrétních dílčích prvků.
Následně je samozřejmě lze editovat, nicméně je určitě vhodné si celkovou koncepci výsledné kampaně ujasnit dopředu a používat je tedy účelně.
V nabídce naleznete tyto:
1) 1 sloupec
2) 2 sloupce
3) 2 sloupce menší vlevo
4) 2 sloupce, menší vpravo
5) 3 sloupce
6) 4 sloupce
Jak si za chvíli ukážeme, jednotlivé struktury lze dále upravovat a kombinovat. Proto, pokud vám v nabídce nějaká chybí, můžete si ji jednoduše upravit či celou úplně vytvořit, dle vlastních představ. Při tvorbě však vždy myslete na:
- Velikost kampaně – i když náš editor umožňuje vzájemné vnořování jednotlivých struktur, méně je někdy více. Je proto dobré mít na paměti, že jednotlivé položky navyšují celkový kód kampaně, což může následně vést například k jejímu zkrácení ze strany Gmailu.
- Velikost zobrazovacího zařízení – většina příjemců si s největší pravděpodobností prohlédne vaši kampaň na některém mobilním zařízení. Při tvorbě kampaně byste na toto měli pamatovat.
- Účelnost – je kampaň přehledná e není pro příjemce matoucí? Opět platí zmíněné méně je někdy více a proto, i když to náš editor umožňuje, není třeba do jedné kampaně vložit všechno, co jde.
Umístění struktury do kampaně
Magic editor funguje na rozhraní Drag and drop (táhni a pusť). To znamená, že každou z nabízených struktur lze myší uchopit a přetáhnout, kam potřebujete. V praxi tedy najedete na danou strukturu a stisknete levé tlačítko myši. Zatímco držíte levé tlačítko myši, přetahujete strukturu do místa, kde ji chcete mít. Jakmile v tomto místě je (což poznáte podle zelené barvy), tlačítko pustíte.
Na obrázku níže vidíte přetažení struktury…
…a její ukotvení do těla kampaně.
Samozřejmě budete v rámci tvorby kampaně s největší pravděpodobností využívat více struktur. Proto je dobré vědět, že možností jejich vzájemného umístění je více.
Umístění nově přidávané struktury (2 sloupce) NAD strukturu stávající (1 sloupec).
Všimněte si, že při přetahování nově přidávané struktury se zvýraznila zeleně horní část struktury stávající. Výsledkem je přidání nové struktury nad tu stávající.
Umístění nově přidávané struktury DOVNITŘ struktury stávající (vnoření).
V tomto případě se zeleně zobrazila celá stávající struktura. Výsledkem je pak vnoření nově přidávané struktury do té stávající.
Umístění nově přidávané struktury POD strukturu stávající.
Při přetahování nově přidávané struktury se nyní zobrazila zeleně dolní část struktury stávající. Výsledkem je přidání nové struktury pod tu stávající.
Pro větší názornost na obrázku níže vidíte jednotlivé struktury oddělené barvami. Stávající struktura je označena černou, struktura umístěna nad ní zelenou, struktura vnořená do ní žlutou a struktura umístěna pod ní modrou barvou.
Editace struktury
Jak již bylo zmíněno, lze každou strukturu upravit. Uživatel má v tomto směru spoustu možností, které si níže představíme.
Drobečková navigace
V první řadě je však určitě dobré vědět, kterou strukturu vlastně nastavujete, což může být občas potíž, zvláště v případech, kdy máte do sebe zanořených struktur více. K lepší orientaci slouží drobečková navigace. V prostředí Magic editoru funguje tak, že si označíte danou strukturu (či prvek) a v pravé horní části se vám objeví všechny příslušné struktury, které jsou na ni navázány.
V příkladu níže jsou do jedné struktury (modrá barva) vloženy rovnou dvě další (zelená a žlutá barva). Pokud kliknete na nejvíce vnořenou strukturu (žlutá), objeví se v pravém horním rohu drobečková navigace.
Vidíte, že obsahuje 3x řádku, protože jsou použity právě 3 struktury.
Při najíždění na jednotlivé části drobečkové navigace se pak v editoru vybraná část zesvětlí.
Nejdříve 3. struktura (žlutá)…
…poté 2. struktura (zelená)…
…a nakonec 3. (původní) struktura (modrá).
Pokud v drobečkové navigaci na vybranou strukturu kliknete, máte jistotu, že budete upravovat právě její nastavení. Na obrázku níže byla vybrána 2. struktura (zelená), vidíte, že i v drobečkové navigaci se nyní nachází pouze dvě položky.
Nastavení vlastností struktury
Nyní již víte, jak spolehlivě vybrat strukturu, kterou chcete editovat, a můžete se tedy pustit do nastavování jejich parametrů.
Obecné – Pořadí a šířka sloupců
Jako první se v nabídce objevuje možnost přepnout si náhled pro zobrazení na desktopu (výchozí nastavení) či mobilním zařízení. Jistě jste si jí všimli i v levém horním rohu, v tomto případě se však netýká celé kampaně, ale pouze vybrané struktury.
Pokud si přepnete zobrazení na mobilní (1), bude při více sloupcích výchozí nastavení takové, že sloupce budou umístěny pod sebou. V případě Magic editoru však toto rozmístění jednoduše změníte (2), takže se budou sloupce zobrazovat i na mobilních telefonech vedle sebe.
Pamatujte však vždy na omezenou šířku displeje mobilních telefonů, aby i sloupce vedle sebe byly dobře čitelné.
Dalším v řadě nastavení je pořadí a šířka sloupců. Zde si můžete strukturu přizpůsobit dle vlastních požadavků, co se šířky a počtu sloupců týče. Pokud vám nevyhovuje, můžete změnit pořadí sloupců (jak je vidět na obrázku níže) jejich tažením (1).
Můžete také změnit počet sloupců jejich odebráním (2) pomocí ikony popelnice, nebo naopak jejich přidáním (3). Změnit šířku sloupce lze pomocí teček (4). Jak vidíte na obrázku níže, bylo změněno nastavení z 50:50 na 32:68 (v procentech). Procenta si můžete upravit také manuálně. Stačí kliknout na "32%" a procento upravit dle potřeby.
Pokud toto nastavení budete chtít opět vrátit na 50:50, stačí vyrovnat sloupce (5). A nakonec můžete měnit velikost mezery mezi sloupci (6) nebo jejich zarovnání, pokud je to potřeba (7).
Obecné – Barva
Nastavit lze barvu pozadí, která se týká pouze dané struktury (žlutá) a barvu vnějšího pozadí, která zbarví celý zbytek řádku (modrá).
Barvy můžete buď vybrat z palety, po kliknutí do daného pole (obrázek níže) nebo je zadat ručně, v hexadecimálním kódu (HEX). Pokud chcete barvy vrátit do výchozího nastavení, klikněte na tlačítko Reset.
Obecné – Odsazení
Struktury slouží primárně pro vkládání prvků. Z toho důvodu také může být někdy žádoucí rozmístění vložených prvků upravit, například z důvodu vetší „vzdušnosti“ kampaně. Toho docílíte právě odsazením.
Jak je vidět na obrázku níže, použít lze čtyři druhy odsazení (horní, dolní, levé a pravé) a to nezávisle na sobě.
Opět lze k vymazání všech změn použít tlačítko Reset.
Tip: Pokud chcete prvek přiblížit k úplnému okraji struktury, je potřeba změnit odsazení nejen na záložce Obecné, ale také na záložce Sloupce.
Poslední možností nastavení na záložce Obecné je Ohraničení dané struktury. Ve výchozím nastavení není zapnuto, pokud jej chcete, stačí je zapnout (1) a zvolit styl ohraničení (2), jeho šířku (3) a samozřejmě i barvu (4).
Sloupce
V této části můžete taktéž nastavovat barvu pozadí, hodnoty odsazení i případné ohraničení, nyní se však tato nastavení netýkají celé struktury, ale přímo konkrétního sloupce. V ukázce, kdy je použita struktura 2 sloupce, lze tedy nastavit rozdílné parametry pro jeden i druhý sloupec zvlášť.
Jako první je v nabídce uvedena barva pozadí sloupce. Ta je ve výchozím nastavení transparentní (průhledná). To znamená, že vidíte barvu pozadí struktury, ne sloupce jako takového.
Jakmile nastavení barvy změníte, změní se i nastavení pozadí pouze u daného sloupce (zelená). Pozadí struktury zůstává stejné, tedy žluté. Protože druhý sloupec má nastaveno zatím také transparentní pozadí, vidíte u jednoho sloupce pozadí zelené (pozadí sloupce) a u druhého zůstává žluté (pozadí struktury).
Pozadí můžete opět vrátit do výchozího nastavení kliknutím na tlačítko Reset.
Jak již bylo uvedeno, odsazení sloupce využijete (společně s odsazením struktury) k posunutí sloupce a hlavně prvku který obsahuje, až k okraji dané struktury, což pouhé odsazení struktury neumožňuje.
Pokud tedy máte v části Obecné – Odsazení nastaveno například horní odsazení na 0 a v odsazení sloupce jej nastavíte také na 0, bude výsledkem přiblížení sloupce k hornímu okraji struktury (obrázek níže).
Poslední možností nastavení vybraného sloupce, je jeho ohraničení. Ve výchozím nastavení není zapnuto, pokud jej chcete, stačí je zapnout (1) a zvolit styl ohraničení (2), jeho šířku (3) a samozřejmě i barvu (4).
