Designer

Co je to Designer?

Jak vytvořit rychle a zdarma design e-shopu tak, aby co nejlépe vyhovoval vašim individuálním požadavkům a přitom to nebyla žádná šablona? Díky modulu Designer nabízí Upgates širokou škálu možností, jak tento grafický úkol elegantně vyřešit.

Příklad: Jako základ grafiky si vyberte jednu z přednastavených grafik. Vložte své logo, upravte barevnost grafiky, případně změňte písmo, zarovnání, ohraničení a využijte další rozšířené funkce. Je možné přizpůsobit rozložení sloupců a jednotlivých prvků e-shopu. Např. si zapnete zobrazení hlavičky č. 4 a přebarvíte ji do světlého elegantního stylu. Na hlavní stránce můžete např. preferovat informace o novinkách a aktualitách před nabídkou produktů.

V rámci běžné praxe vývojových platforem, můžeme garantovat správné zobrazení stránek pouze pro aktuální verze prohlížečů a v grafických šablonách od verze 5.0.

V Designerovi již není možné editovat nižší verze grafických šablon než 4.0. V tomto případě modul nabídne možnost aktualizovat Designera na nejnovější šablony anebo je přepnout do Editoru kódu.

Úvod

Základní navigační prvky Designera naleznete ve vrchní liště. Kliknutím na konkrétní položku ve vrchním menu se následně zobrazí okno s dalšími volbami pro podrobnější nastavení.

Obsah tohoto okna se liší podle toho, jakou část šablon momentálně nastavujete. Pro lepší orientaci si můžete okno přesunout na jiné místo přetažením za jeho vrchní část.

Druhou možností je umístit si toto okno natrvalo na levou stranu obrazovky Designera. Tuto změnu provedete kliknutím na ikonu zámku v hlavičce okna.

Vrchní lišta

Ve vrchní liště se nachází 5 hlavních navigačních částí:

• Šablony - Nabízí seznam předpřipravených šablon, které si můžete dále upravit. (více v sekci Šablony)
• Výchozí - Obsahuje soubor možností nastavení šablony od jejího rozložení, přes texty, až po motiv. (více v sekci Výchozí)
• Stránky - Obsahuje soupis typů stránek a sekcí vyskytujících se na eshopu. (více v sekci Stránky)
• Rozložení - Nabídne kompletní výpis sekcí, kterých můžete měnit rozložení stránek. Rozložením lze stránky přizpůsobit dle vašich preferencí (více v sekci Rozložení)
• Prvky - Obsahuje soubor všech prvků na konkrétní stránce (více v sekci Prvky)

Dále obsahuje editaci responsivního zobrazení, ukládání změn, publikace změny a více.

Šablony

Možnost výběru z široké nabídky přednastavených grafik. Na tomto základě budete moci provádět ohromné množství dalších individuálních úprav.

Výběr přednastavené grafiky

Nejdříve si tedy vyberete jednu z přednastavených grafik, která se nejvíce blíží vaší představě.

Důležité je si pamatovat, že výběrem šablony nejste nijak omezeni. Pokud se vám na konkrétní šabloně například něco zalíbí, ale vámi vybraná šablona to má jinak, tak to neznamená, že o toto přicházíte. Každý z přednastavených šablon vychází z jednoho konceptu. To tedy znamená, že ať už si vyberete jakoukoli šablonu, vždy na ní můžete nastavit to co vidíte na jiné šabloně. (viz část o Rozložení)

Nezapomeňte však, že pokud už máte nějakou šablonu upravenou a měníte si jí za jinou, dojde touto změnou k přepsání všech dosavadních nastavení v grafice, které jste udělali, na původní hodnoty.

Ještě před nastavením si můžete vybranou grafiku prohlédnout - klikněte na odkaz  Prohlédnout demo.

Výchozí

V sekci výchozí najdete všechny základní "obecné" nastavení, které pro šablonu potřebujete. Nastavíte zde na jednom místě tedy například Barvy e-shopu a tlačítek, upravíte font, ohraničení, atd.

Barvy

Možnost nastavení barev obecně pro váš e-shop najdete v sekci Výchozí / Barvy.

Umožňuje vytvoření jednotného barevného stylu dle nastavené základní a doplňkové barvy. Většina prvků v grafice je bílá, v základní barvě nebo jejích odstínech. Pouze u vybraných prvků, které směřují ke konverzi stránky, je použitá barva doplňková. Při určování barev je dobré vycházet z barevnosti vašeho loga.

U velmi světlých odstínů vybraných pro pozadí prvků může dojít k automatickému ztmavení zvolené barvy (při zachování stejného odstínu a saturace). Důvodem je zajištění dobré čitelnosti textových prvků na stránce, aby se negativně neovlivnily konverze nákupu.

• Základní barva - Nastavuje se v designerovi. Barva textů a tmavých ploch. V případě textů se barva doladí tak, aby byla optimálně čitelná (může dojít ke ztmavení). Tip! Doporučujeme vybrat dostatečně tmavou barvu, aby byla dobře čitelná. Neměla by být také přehnaně sytá, protože web pak může působit ostře na oči.
• Sekundární barva - Nastavuje se v designerovi. Barva konverzních tlačítek. Dále je použitelná v hlavičce e-shopu a v marketingových prvcích jako jsou bannery a headliny.
• Bílá barva - Systémová barva, kterou nelze změnit.
• Černá barva - Systémová barva, kterou nelze změnit.
• Ostatní barvy - Barvy speciálních prvků jako jsou výzvy, upozornění, štítky atd.

Barvení grafických prvků šablony

Na základě nastavených barev se vytvoří paleta možností pro lokální obarvování jednotlivých komponent a grafických prvků. Stačí v náhledovém okně najet myší na daný prvek a upravit jeho nastavení.

Barevné možnosti se mohou lišit podle konkrétního prvku, který nastavujete. U některých prvků můžete také nastavovat překrývání

Texty a písma

Základní nastavení textů naleznete v menu Výchozí / Texty.

Při nastavování stylu textů v grafice e-shopu si můžete vybrat z široké nabídky fontů základního písma a nadpisů. Měnit můžete velikost, zhuštění a další formátování jako výšku řádků.

• Zarovnání - Zarovnání textů a vybraných prvků grafiky na střed nebo doleva. Jednotlivé komponenty grafiky lze zarovnat také lokálně.
• Výška řádku - Nastavení vzdušnosti řádků textů. Přidání nebo ubrání prostoru mezi řádky.
• Běžné texty
  • Písmo - Výběr z nabídky přednastavených fontů, které se použijí ve všech textech mimo nadpisů. Fonty se importují z Google Fonts. 
  • Tučnost písma - Nastavuje tučnost vámi vybraného písma.
  • Velikost - Velikost vámi vybraného písma.
  • Rozestup písmen - Nastavení rozestupu mezi jednotlivými písmeny v textech. Čím vyšší hodnotu nastavíte, tím větší rozestupy budou.
  • Nativní písmo v mobilu - Nastavuje, zda-li se má vámi nastavená Velikost fontu přizpůsobit menším zařízením.
• Nadpisy
  • Písmo - Výběr z nabídky přednastavených fontů, které se použijí ve všech nadpisech. Fonty se importují z Google Fonts. 
  • Tučnost písma - Nastavuje tučnost vámi vybraného písma.
  • Zvětšení - Určuje o kolik mají být nadpisy větší než základní text.
  • Rozestup písmen - Nastavení rozestupu mezi jednotlivými písmeny v nadpisech. Čím vyšší hodnotu nastavíte, tím větší rozestupy budou.

Texty můžete upravovat také v rámci jednotlivých sekcí v obsahu stránky. Stačí když kliknete například do popisku bannerů, článků, kategorií atd.
Vybrat si můžete z šiřoké škály nastavení

• Písmo - Nastavení stylu vybraného textu, zda-li se jedná o běžný text nebo nadpis. Dále umožňuje nastavit speciální formátování typu všechna písmena velká, přeškrtnutí atd.
• Tučnost písma - Určuje tučnost vybraného textu, který zrovna editujete.
• Barva textu - Nastavení barvy vybraného textu. Zděděná barva přebírá nastavení z nadřazeného prvku pro sjednocení vzhledu.
• Velikost písma - Určuje velikost vybraného textu, který zrovna editujete.
• Rozestup písmen - Změní rovnoměrně mezeru mezi jednotlivými písmeny textu. Vyšší hodnoty zvětšují rozestupy, zatímco záporné hodnoty rozestupy zmenšují.
• Zarovnat text -  Zarovnává vybraný text, který zrovna editujete, v rámci bloku ve kterém se nachází.
• Výška řádku - Nastavení umožňuje změnit výšku řádku ze standardní velikost určené podle nejvyššího prvku na řádku. Tímto se změní rozestupy mezi jednotlivými řádky, kde větší rozestupy obvykle zlepší čitelnost textu.

Ohraničení a linie

Obecné nastavení ohraničení provedete v menu Výchozí / Ohraničení

Nastavte si grafický styl různých linií a ohraničení v grafických prvcích. Lépe tak přizpůsobíte grafiku firemní identitě vašeho e-shopu.

• Styl - Plný, přerušovaný nebo tečkovaný styl linií.
• Tloušťka - Tloušťka linií u grafických prvků, které mají nastavené ohraničení.
• Zaoblit - Nastavení poloměru zaoblení hran u vybraných grafických prvků.
• Ztmavení - Ztmavení barvy linií.

U jednotlivých prvků, které podporují ohraničení, si lze provést nastavení v oddílu Ohraničení.

• Zaoblit - Umožňuje nastavit zaoblení vybraného prvku. 
• Linka - Nastavuje šířku ohraničení vybraného prvku.
• Styl čáry - Nastavuje styl ohraničení vybraného prvku, zda-li má být ohraničení plne, přerušované, anebo tečkované.
  "prázdná hodnota" při výběru znamená výchozí stav.

Motiv

Motiv nastavíte v sekci Výchozí / Motiv.

Motiv nastavuje do pozadí e-shopu vámi vybraný motiv. Pokud daný motiv na e-shopu mít nechcete můžete zvolit jednoduše hodnotu "Žádný".

Vámi vybraný motiv se následně zobrazí na pozadí e-shopu.

Ostatní

Ostatní globální nastavení šablony najdete v sekci Výchozí / Ostatní.

Toto nastavení určuje různé detailní nastavení, které se týkají vašeho e-shopu. Ze začátku se však touto sekcí nemusíte vůbec zabývat. Přednastavili jsme totiž pro vás ideální nastavení, které zajišťuje běžné fungování šablony.

• Zarovnat obsah - Zarovnává obsah šablony
• Rozsetupy sekcí -  Ovládá rozestupy mezi jednotlivými sekcemi
• Rozostřední stínů - Rozostření stínů "zlepšuje" grafický dojem z nastaveného stínu prvku
• Animované přechody
• Animace po najetí
• Povinná pole s obrysem - Zvýrazní pole, které je povinné. Například při registraci zákazníka do e-shopu. Barva zvýraznění se převezme z Sekundární barvy

Zpět do výchozího stavu

Vrácení zpět do výchozího stavu, můžete pro šablonu učinit v sekci Výchozí / Zpět do výchozího stavu.

Po kliknutí na tuto sekci se vás systém optá, zda-li to chcete udělat. Potvrzením dotazu v pop-up okně vrátít veškeré vámi provedéné změny na šabloně do výchozího stavu.

Vrácení pouze konkrétní změny

Provedené změny na konkrétním prvku lze snadno vrátit do výchozího stavu tlačítkem Vrátit změny. Jakmile potvrdíte tuto volbu, Designer automaticky odstraní uživatelsky provedená nastavení.

Šipky pro vrácení se zobrazí pouze tehdy, pokud na daném prvku jste provedli uživatelskou změnu. Pokud se šipky na dané sekci nezobrazují, pravděpoodbně přebírají hodnotu z výchozího nastavení.

Revize změn a Zálohy

Abychom vám usnadnili práci s designerem, vytvořili jsme funkci Revize změn, která vám ukáže poslední proběhlé změny na dané šabloně.

Více o zálohách se dozvíte v naší nápovědě.

Stránky

Po kliknutí na stránky se vám v postranním panelu rozbalí seznam stránek, které lze v Designerovi editovat.

• Základní prvky - Jsou zde obsaženy všechny základní prvky, se kterými se lze setkat na stránkách e-shopu.
• Hlavní stránka - Přesměruje vás na Hlavní stránku e-shopu
• Seznam produktů - Přesměruje vás do detailu kategorie s produkty
• Detail produktu - Přesměruje vás na detail produktu
• Textová stránka - Přesměruje vás na kategorii článku
• Detail článku - Přesměruje vás na detail článku
• Objednávka přijata: Přesměruje vás na detail děkovací stránky objednávky

Po kliknutí na konkrétní stránku se vám zobrazí rovnou sekce Prvky a již vybíráte a upravujete konkrétní část, kterou si vyberete.

Rozložení

Každá šablona se skládá z několika bloků (záhlaví, obsah, zápatí). Každý tento blok má v sobě konkrétní prvky (Záhlaví - Kontakty, Logo, Vyhledávání, atd.)

Rozložení umožňuje každý tento blok upravovat.

Pokud budete chtít nějaké rozložení upravit, stačí kliknout na vybranou sekci a rozbalí se vám nabídka různých typů rozložení.
Každý typ rozložení ukazuje, jak následně po dané změně bude rozložení vypadat.

Rozložení prvku

Rozložení můžete editovat i kdykoliv později. Pokud vámi vybraný prvek umožňuje změnit rozložení, zobrazí se v navigačním panelu postraně, anebo v samotném obsahu stránky ikonka s rozložením.
Po jejím prokliku můžete měnit rozložení konkrétního prvku jako například záhlaví, produktové karty v seznamu produktů atd.

Přemístění bloků na stránce

Pokud vám určitá pozice bloků na stránce nevyhovuje. Můžete je přemístit jednoduchým přetažením v levém sloupci designeru, anebo v obsahu stránky. Sekce, které lze přesouvat jsou zvýrazněny šipkami.

Příklad: Stránka kategorií má základní pozici popisu kategorie hned za záhlavím stránky. Pokud se tedy rozhodnete, že popisek pro vás není až tak důležitý a chcete mít výpis produktů z kategorie co nejvýše, můžete provést přesun tohoto bloku s popisem kategorie.

Přesouvání v rámci obsahu stránky

1. V Designerovi si označte sekci, kterou chcete přesouvat.
2. Pokud danou sekci lze přesunout bude mít zobrazeny navigační šipky.

Přesouvání v rámci navigačního sloupce

1. V levé části si tedy nastavte Seznam produktů / Hlavní sloupec,
2. Najeďte myší na blok, které chcete přesouvat Popis stránky,
3. Myš umístěte na modré pole po pravé straně sekce a na symbol šipek,
   
   
4. Chyťte sekci levým tlačítkem myši a přetáhněte jí do příslušné pozice.
   
   
5. Jakmile přemístění dokončíte, proces se automaticky uloží a v náhledu designeru, ihned uvidíte jak se sekce přesune.

Prvky

Každá šablona se skládá z několika bloků (záhlaví, obsah, zápatí). Každý tento blok má v sobě konkrétní prvky (Záhlaví - Kontakty, Logo, Vyhledávání, atd.,)
Každý tento blok a prvek můžete v Designerovi upravovat.

Výběr prvku

Prvky můžete upravovat velmi jednoduše. V defaultním nastavení je vždy zapnutý tzv. Inspektor prvků.
Inspektor prvků se chová tak, že pouhým najetím myši na požadovaný prvek, vám označí prvky, které lze editovat (oranžové zvýraznění).

Na konkrétní prvek se můžete i postupně proklikat pomocí postranního panelu. Například pokud budeme chtít najít sekci, která je výše znázorněna gifem, tak je potřeba postupovat po krocích:

1. Ve vrchní liště zvolíme sekci Stránky,
2. Vybereme Detail produktu,
3. Postranní panel se automaticky přepne na Prvky,
4. Sekci najdeme v zanoření Pozadí a sloupce / Obsahová část / Hlavní info / Hlavní popis.

Vypnutí Inspektora prvků

Pokud inspektora prvků vypnete, prvky se vám již nebudou označovat. Můžete si tak procházet váš e-shop podobně jako běžnou stránku.

Inspektora prvků vypnete pomocí tlačítka v pravém horním rohu navigační lišty.

Jakmile s procházením skončíte, můžete ispektora opětovně zapnout stejným tlačítkem.

Postranní panel v prvcích

Postranní panel vám umožňuje zobrazit kompletní možnosti jednotlivých prvků, od barev, přes fonty, až po různé rozšířené možnosti úprav.

Správa navigačního panelu

• Zámeček - Ikona popsaná již dříve v Úvodu článku.
  
• Terčík - Pokud kliknete na ikonku terčíku  , vybraný prvek se na stránce označí obrysem.
  
• Šipka úrovně - Tlačítko šipky vám umožní přesun mezi jednotlivými úrovněmi zanoření. Pokud máte například tlačítko v banneru, pomocí šipky se můžete posunout o úroveň výš a označí se vám například celý banner. Nebudete tak muset zbytečně zdlouhavě hledat potřebnou úroveň v menu.
  
• Strom zanoření - Tlačítko pro menu rozbalí aktuální celý strom zanoření, ve kterém se aktuálně nacházíte. 
  

Některé prvky je možné vidět pouze v určitých typech zobrazení. V takovém případě je vedle názvu prvku zobrazena informační ikonka upozorňující na danou velikost obrazovky.

Při prokliknutí na takový prvek (ikonou terčíku nebo při otevření jeho detailu) Designer automaticky vyhodnotí viditelnost prvku v jednotlivých zobrazeních. Dle potřeby buď ponechá stávající typ zobrazení, anebo přepne na nejbližší vyšší/nižší zobrazení, ve kterém je tento prvek viditelný.

Možnosti editace prvku

Každý editační panel prvku se skládá z několika částí

• Záhlaví - které jsme si popsali výše
• Akční ikonky
  •  Tužka - Upraví obsah konkrétního prvku. Např. Pokud tedy editujete produkt ABC, kliknete na tužku otevře se vám detail karty tohoto produktu.
  •  Kopírování - Uloží si nastavení úprav (barev, ohraničení, atd.) a přenese jej do jiného prvku, který je v této sekci.
  •  Vnitřní prvky - Zobrazí vám seznam prvků, které jsou zanoženy ve vámi označeném prvku.
  •  Odkaz - Umožní zkopírovat odkaz na konkrétní stránku a prvek, který upravujete a můžete jej tak nasdílet kolegům, anebo grafikovi.
  •  Obnovení - Obnovuje individuální ruční úpravy na prvku. Více v Zpět do výchozího stavu
  •  Skrýt - Skrývá konkrétní prvek na tomto typu stránky. Více v Zobrazení a Skrývání prvku
• Možnosti editace prvku - Jednotlivá nastavení pvrku jsou rozdělena do samostatných oddílů (pozadí, texty, ohraničení, atd.). Dostupné možnosti se liší podle konkrétního prvku. Z tohoto důvodu nemusí být pokaždé přístupná všechna nastavení, jelikož nejsou v daném prvku využitelná.
• Všechny možnosti - Rozšířené možnosti skrývají další možnosti úprav. Více v sekci Základní vs. Všechny možnosti

Editace konkrétního prvku

Jakmile si vyberete prvek, který si přejete upravit, klikněte v menu na konkrétní oddíl (například Texty) a rozbalí se vám možnosti jeho nastavení.

Abychom vám usnadnili práci s jednotlivými prvky šablony, upravili jsme pro vás možnost “rychlé editace”. Můžete jí využít tak, že když si například budete chtít upravit článek, který máte zrovna na Homepage stránce tak jednoduchým klikem na tlačítko Upravit obsah, se přesměrujete přímo do detailu článku, ve které můžete příslušný článek upravit. Využít funkci můžete také na jiné sekce, jako jsou produkty, kategorie, a další.

Některá nastavení, nejčastěji ta složitější (všechny možnosti), se namísto v daném prvku provádí v souvisejícím obalovém prvku (kontejneru). V takovém případě se u daného nastavení zobrazí tlačítko Kontejner. Po kliknutí na něj budete přesměrování do konkrétní části, kde si můžete provést potřebné nastavení. Například změna vnitřních rozestupů po stranách banneru se provádí v kontejneru, viz ukázka níže.

Zobrazení a Skrývání prvku

Jednou z možností editací je skrýt prvek  Schovat prvek. Pokud je již prvek schovaný, Designer u něj neumožní provádět úpravy. Skrytý prvek můžete znovu zobrazit kliknutím na tlačítko Zobrazit prvek.

Textová pole v grafických šablonách

V grafických šablonách jsou předdefinovaná umístění pro několik textových polí, jejichž obsah lze vyplnit pomocí překladů nebo vlastních polí. Více zde.

Ukládání změn

Ukládání změn, které provedete, se tlačítkem Uložit. Dokud stránku editujete a jste stále na dané stránce designera, není třeba nic ručně ukládat. Avšak doporučujeme změny průběžně ukládat, abyste o ně například technickou chybou, výpadkem elektřiny atd. nepřišli. Vaše práce tak zůstane v bezpečí a vy se můžete soustředit na kreativitu místo stresu z neuložených změn. Propis následných změn na vaši publikovanou verzi můžete pomocí tlačítka Publikovat

Publikovat na doméně

Jakmile budete s provedenými změnami spokojeni a budete je mít otestovány v designerovi. Můžete provést publikaci změn na váš ostrý projekt.
Provedené změny můžete publikovat na doméně pomocí tlačítka Publikovat ve vrchní liště..
Po kliknutí se zobrazí vyskakovací okno s potvrzením, zdali si opravdu přejete publikovat grafické změny na ostré verzi e-shopu.

V následném vyskakovacím okně klikněte na tlačítko PUBLIKOVAT TESTOVACÍ VERZI NA OSTRÉ DOMÉNĚ

Responsivní zobrazení

V Designerovi si můžete simulovat velikost obrazovky, na které uvidí e-shop váš zákazník. Některé prvky mají odlišné chování v různých rozlišeních obrazovky, např. jsou skryty v mobilním zobrazení pro úsporu místa. Přepnutím ihned uvidíte výsledné zobrazení.

Více

Tato položka horního menu nabízí několik prvků:

• Verze: zobrazí verzi grafických šablon, které aktuálně používáte. Také umožňuje přepnout se na nejnovější grafické šablony e-shopu. Více zde.
• Zálohy: můžete si provést zálohu aktuálního nastavení grafických šablon, případně si obnovit některou z předchozích záloh. Více zde.
• Editor kódu: přejdete se do sekce Editor kódu. Více zde.
• Začínáme: zobrazí vyskakovací okno s videonávodem na modul Designer.
• Nápověda: přesměrování na tuto nápovědu.

Základní vs. Všechny možnosti

Abychom vám usnadnili práci a nezahltli vás hromadou (a že je to skutečně pořádná kupa) možností jak si jednotlivé prvky šablony nastavovat, Designer funguje ve dvou modech:

• Základní možnosti (Výchozí nastavení)
  Zahrnuje všechny klíčové funkce, které většině uživatelů stačí pro jednoduchou správu vzhledu e-shopu, jsou nyní přístupné rovnou a v přehledné podobě postranního panelu.
• Všechny možnosti
  Pokud si chcete s grafikou opravdu vyhrát a přizpůsobit šablonu do nejmenších detailů, stačí si aktivovat Všechny možnosti a popustit uzdu své fantazie.

Pozor! Všechny možnosti doporučujeme zapínat pouze uživatelům, kteří s editací grafiky mají zkušenosti. Nastavení v těchto možnostech může totiž rozhodit vaši grafiku e-shopu, pokud se udělají neodborně.

Transformace

Tranformace různých prvků vám umožní pracovat se stylizací. Můžete prvek například prostorově pokřivit, posunout atd.

Otočit

• Horizontálně - Otočení prvku podle horizontální osy. Zadávání ve stupních, o kolik se má prvek otočit. CSS: rotateX.
• Vertikálně - Otočení prvku podle vertikální osy. Zadávání ve stupních, o kolik se má prvek otočit. CSS: rotateY.
• Prostorově - Otočení prvku podle jeho středové osy. Zadávání ve stupních, o kolik se má prvek otočit. CSS: rotateZ.

Velikost

• Horizontálně - Mění šířku prvku.
• Vertikálně - Mění výšku prvku.

Posunout

• Horizontálně - Posune prvek po horizontální ose. Záporné hodnoty posunují prvek směrem doleva, zatímco kladné hodnoty jej posouvají směrem doprava. Nula je výchozí bod. CSS: translateX.
• Vertikálně - Posune prvek po vertikální ose. Záporné hodnoty posunují prvek směrem nahoru, zatímco kladné hodnoty jej posouvají směrem dolů. Nula je výchozí bod. CSS: translateY.

Zkosit

• Horizontálně - Zkosení prvku ve vodorovném směru, zadané ve stupních. Kladná hodnota provede zkosení směrem vlevo, zatímco záporná hodnota ve směru vpravo. Výchozí hodnota je nula. CSS: skewX.
• Vertikálně - Zkosení prvku ve svislém směru, zadané ve stupních. Kladná hodnota provede zkosení směrem nahoru, zatímco záporná hodnota ve směru dolů. Výchozí hodnota je nula. CSS: skewY.

Počátek

• Horizontálně - Umožňuje změnit umístění prvku ve vodorovném směru jeho přesunutím vlevo, na střed nebo vpravo.
• Vertikálně - Umožňuje změnit umístění prvku ve svislém směru jeho přesunutím nahoru, na střed nebo dolu.

Pozor! Tyto transformace nemusí některé verze prohlížeče akceptovat, například prohlížeče v iOS zařízeních.

Aktualizace verze (redesign)

Příjde doba, kdy grafika vašeho e-shopu zestárne a chtělo by to něco nového, modernějšího. U Upgates je řešení jednoduché. V podstatě se jen přepnete v modulu Designer do nejnovější verze grafiky.

Automaticky se vytvoří systémová záloha staré grafiky. Pomocí ní se můžete v budoucnu vrátit k původní grafice (platnost automatických záloh je maximálně 180 dnů). Více zde.

Postup v administraci

1. Přejděte do sekce Grafika / Designer.
2. V horním menu vyberte položku Více / Verze.
   
   

Zobrazí se informace o číslu aktuální verze grafiky vašeho e-shopu.

Co se změní?

• Původní grafický vzhled se nahradí novým. Grafický systém se ladí a doplňuje o nové prvky. Vznikají nové grafické prvky a ty méně moderní naopak zanikají nebo se modernizují. Vzniká nová funkcionalita, kterou je třeba dodat do grafiky. 
• Přicházíte o všechny úpravy provedené v Editoru kódu! Tzn. včetne stylů v _custom.css, které jsou součástí základních možností Editoru kódu.

Co se nezmění?

• Nastavení Designera, která jsou kompatibilní s novou verzí. Nové nebo upravené prvky je třeba dodatečně donastavit. 
• Veškerý obsah, který jste vyplnili v administraci e-shopu (tzn. produkty, články, kategorie, zákazníci, objednávky, logo atd.).
• Rovněž obsah souboru Poznámky, který najdete v Editoru kódu (Grafika / Editor kódu).