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. Není k tomu potřeba umět programovat, kódovat ani být grafikem.

Příklad: Jako základ grafiky si vyberte jednu z přednastavených grafik a motivů. Vložte své logo, upravte barevnost grafiky, případně změňte písmo, zarovnání, ohraničení, případně využijte další rozšířené funkce. Je možné přizpůsobit rozložení sloupců a jednotlivých komponent 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 Designerovi již není možné editovat nižší verze Designera než 3.0. V tomto případě modul nabídne možnost aktualizovat Designera na nejnovější šablony nebo je přepnout do Editoru kódu.

Úvod

V levé části obrazovky se nachází seznam oddílů obsahujících funkcionalitu, pomocí které můžete grafiku e-shopu upravovat.

Dále uvádíme pouze popis záložky Rozšířené. Informace o ostatních oddílech najdete v dalších článcích nápovědy modulu Designer. 

Záložka Rozšířené

Oddíl je určený pro úpravu jednotlivých komponent v následujících vybraných šablonách e-shopu. V okně náhledu se zobrazí referenční stránka vybrané šablony.

Výběr šablony

• Základní rozložení - Nastavení základní struktury e-shopu, zejména sloupců a kontejnerů. Více zde.
• Hlavní stránka - Nastavení hlavní stránky a jejích komponent.
• Seznam produktů - Nastavení stránky s produkty a jejích komponent.
• Detail produktu - Nastavení detailu produktu a jeho komponent.
• Textová stránka - Nastavení textové stránky a jejích komponent.

Detail šablony

Po prokliknutí na detail šablony se v náhledu grafiky zobrazí výchozí stránka, jejíž vzhled se řídí danou šablonou. Např. stránka O nás se řídí Textovou šablonou. Více viz. kapitola níže Náhled grafiky.

V levém sloupci detailu šablony se zobrazí nabídky jednotlivých částí, které lze upravit.

Pokud kliknete na ikonku  se náhled grafiky naroluje na střed vybrané komponenty.

Některé prvky je možné vidět pouze v určitých typech zobrazení.

• Písmeno "D" vedle názvu prvku označuje, že je viditelný pouze v desktopu, 
• "T" v tabletu, 
• "M" v mobilu. 

Náhled grafiky

V pravé části obrazovky vidíte okno s náhledem upravované grafiky. Jedná se o testovací verzi e-shopu, nikoli ostrou verzi.

Stejný náhled si můžete zobrazit v novém okně prohlížeče po kliknutí na ikonku  v dolní části sloupce.

Přepnutí zobrazení

Pomocí ikon      můžete změnit šířku náhledu grafiky, aby odpovídal obrazovce mobilu, tabletu nebo desktopu. Grafika e-shopu se uvnitř náhledu responzivně přizpůsobí.

Obrázek níže zobrazuje přepnutí náhledu grafiky do modu tablet.

Funkční tlačítko

Pokud v náhledovém okně najedete myší na nějakou komponentu, ohraničí se oranžovou plnou čárou.

V levém horním rohu se zobrazí ikonka tužky. Po kliku na ni přejdete na nastavení vzhledu dané komponenty. Tu můžete následně editovat z pohledu rozložení pokud to daná komponenta nabízí více zde:

A tlačítkem Obsah se prokliknete do administrace dané komponenty. Zobrazí se konkrétní detail nebo seznam položek daného modulu.

Přednastavené grafiky a motivy

Možnost výběru z široké nabídky přednastavených grafik a motivů. Na tomto základě budete moci provádět nekonečné 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ě. U každé z nich můžete aplikovat jeden z motivů. To vám dává celkem více než 100 kombinací základních podob šablon!

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

Výběr motivu

U přednastavené grafiky lze změnit grafický motiv. Změní se styl písma, formátování textů a grafické prvky.

Logo

Obrázkové logo je možné nastavit i v modulu Designer. Toto logo přepisuje základní logo e-shopu (více zde). Máte tak možnost mít rozdílná loga v dokumentech, systémových emailech (používá se logo pro bílý podklad) a v grafice e-shopu (možnost použití loga pro různé barvy podklady). Do modulu Designer a tím i do grafiky e-shopu je možné načíst i textové logo.

V případě deaktivace Designera jeho logo nezmizí, ale přenese se do sekce Nastavení / Základní / Nastavení obchodu oddíl Logo a favicon. Zde s ním můžete dále pracovat.

Barvy

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.

Barvy používané v grafice

• Bílá barva - Systémová barva a nikde se nenastavuje.
• 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.
• Světlé barvy - Světlé odstíny se generují na barevné škále od bílé do základní barvy (viz. výše). Systém odstíny využívá pro obarvení světlejších prvků.
• Doplňková 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.
• Černá barva - Systémová barva.
• Ostatní barvy - Barvy speciálních prvků jako jsou výzvy, upozornění, štítky atd. Tip! Je možné je upravit v souboru _custom.scss v Editoru kódu.

Funkce

Přejděte do oddílu Barvy.

• Barevné přechody - Aktivace barevných přechodů v tlačítkách od světlejší po tmavší odstín.
• Šedý mód - Vytvoření alternativy k paletě světlých barev. Všude mimo hlavičky a sloupce se použije paleta šedých odstínů místo palety světlých barev vycházející ze základní barvy. Tip! Využijte tuto funkci, pokud je vaše základní barva příliš sytá a negeneruje hezké světlé odstíny. Barevnost nebude působit rušivým dojmem, přitom e-shop neztratí na živosti.

Barvení grafických prvků

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 možnosti dle návodu.

Texty a písma

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ů.

Funkce

Přejděte do oddílu Texty.

• Písmo základního textu - 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. 
• Velikost textu - Velikost písma základního textu.
• Nadpisy vs. text - Poměr mezi velikostí písma základního textu a písma nadpisů (h1 - h6). Jak velké budou nadpisy vzhledem k nastavené velikosti základního textu.
• Písmo nadpisů - 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 nadpisů - Nastavení tučnosti nadpisů. Vychází se z možností zvoleného písma nadpisů.
• Zhuštění nadpisů - Nastavení rozestupu mezi jednotlivými písmeny v nadpisech. Čím vyšší hodnotu nastavíte, tím větší rozestupy budou.
• Výška řádku - Nastavení vzdušnosti řádků textů. Přidání nebo ubrání prostoru mezi řádky.
• Zarovnání - Zarovnání textů a vybraných prvků grafiky na střed nebo doleva. Jednotlivé komponenty grafiky lze zarovnat také lokálně. Více zde.
• Elasticita - Velikost písma se přizpůsobuje velikosti obrazovky. Čím větší je šířka okna prohlížeče, tím větší je také písmo textů.

Ohraničení a linie

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.

Funkce

Přejděte do oddílu Ohraničení.

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

Na základě nastaveného stylu ohraničení provádíte lokální úpravy jednotlivých komponent. Více zde.

Stíny

Nastavení stínů a stupně jejich rozostření u vybraných prvků. Ty se opticky dostanou do popředí a grafika získá hloubku.

Funkce

Přejděte do oddílu Další funkce.

• Stíny - Aktivace nebo deaktivace funkce stíny v grafice e-shopu. Na základě aktivace stínů je možné provádět lokální úpravy jednotlivých komponent. Více zde.
• Rozostření stínů - Nastavení, zda budou stíny ostré nebo rozostřené.

Animace grafických prvků

Animace prvků po najetí myší nebo po jejich zobrazení na obrazovce.

Funkce

Přejděte do oddílu Další funkce.

• Animační přechody - Animace, která se provádí po najetí myší.
• Animace po najetí - Animace vybraných prvků po jejich zobrazení na obrazovce (animation on scroll). Na základě aktivace je možné provádět lokální nastavení animací jednotlivých komponent. Více zde.

Rozestupy oddílů

Máte rádi vzdušnou grafiku nebo spíše šetříte každý pixel na obrazovce, aby toho zákazník viděl co nejvíce na první dobrou? V rámci jednotného stylu je možné nastavit velikosti rozestupů jednotlivých oddílů v grafice.

Funkce

Přejděte do oddílu Další funkce.

Čím vyšší procento nastavíte, tím větší bude rozestup mezi oddíly.

Základní rozložení grafiky

Výběr z několika základních rozložení struktury vašeho e-shopu podle toho, jestli chcete design:

1. na celou šířku stránky,
2. s ohraničením stránky,
3. s levým sloupcem.

V záložce Hlavní, zvolte sekci Základní rozložení. Následně vyberte jednu z možností podle nabízených grafických schémat.

Vzhled komponenty

Možnosti nastavení vzhledu vybrané struktury komponenty. Komponenty se mohou skládat z menších grafických prvků, které lze také upravovat (např. hlavička obsahuje horní menu, tlačítko do košíku atd.).

Pokud se nenabízí volba nastavení pro konkrétní prvek, pak si v pravé části okna Designera klikněte na jinou stránku, která by tento prvek měla obsahovat. Tím se zpřístupní v levém menu Designera volby nastavení pro tento prvek.

Postup nastavení

1. V menu administrace přejděte do sekce Grafika / Designer.
2. Ve sloupci otevřete záložku Rozšířené.
3. Klikněte na šablonu, kterou chcete upravovat.
4. Otevře se detail šablony.
5. Ve sloupci vyberte komponentu, kterou chcete editovat.
6. Proveďte nastavení vzhledu a pomocí tlačítka ve spodní části vše Uložte.
7. Ihned se provede přenastavení komponenty.
8. Pokud chcete, aby se změny provedly i na ostré doméně, je nutné je překlopit v  Grafika / Finalizace. Více zde.

Na obrázku níže je zobrazena editace Headlines e-shopu, včetně možností editace vnitřních prvků jsou jednotlivé položky, jejich pozadí, zarrovnání atd.

Proklik z náhledového okna

Další možností, jak se dostat do nabídky komponenty je pomocí funkčního tlačítka v náhledu grafiky. Najeďte myší na vybranou komponentu a klikněte na ikonku tužky.

V levém sloupci v seznamu komponent můžete výběr ještě upřesnit. Např. když chcete vybrat komponentu Vyhledat, která je součástí Hlavičky.

Možnosti nastavení

Každá komponenta má rozdílný výčet možností nastavení vzhledu. Níže nabízíme popis všech dostupných možností.

Barevnost - Přebarvení prvku dle daných barevných možností. Barvu zvolíte kliknutím na danou ikonu.

Oddělovač / rámeček

• Linka - U běžných grafických prvků se zobrazí jako rámeček. U sekcí jako dělící linka vespod.
• Grafický (pod) - Možnost nastavení pouze u sekcí grafiky. Pod sekcí se zobrazí oddělovací obrázek podle toho, jaký máte zvolený motiv. Více zde. 
  • Otočit - Vodorovné otočení grafického oddělovače.

Obrázek na pozadí - Zobrazení obrázku na pozadí daného grafického prvku dle zvoleného motivu (více zde).

• Vlastní - Možnost vložení vlastního obrázku na pozadí. Obrázek z motivu bude nahrazen.
• Barevný filtr - Přes obrázek na pozadí se zobrazí barevný filtr, čímž vznikne barevný odstín.
• Překrytí - Jakým způsobem se na pozadí daný obrázek překryje.
  • Překrýt (cover) - Obrázek se přizpůsobí ploše (nejdelší hraně). Proto v některých zobrazeních (např. v mobilu) bývá obrázek oříznutý. Proporce obrázku však zůstávají zachovány.
  • Obsah (contain) - Obrázek se přizpůsobí ploše tak, aby nedošlo k jeho oříznutí. Na ploše mohou vzniknout nevyplněná místa. Proporce obrázku zůstávají zachovány.
• Zarovnání - Vertikální a horizontální zarovnání obrázku na pozadí.
• Opakování - V případě, že je obrázek na pozadí menší než je plocha, můžete nastavit jeho opakování. Ve výchozím stavu se obrázek neopakuje.
  • Opakovat v obou směrech - Obrázek na pozadí se opakuje jako šachovnice ve vertikálním i horizontálním směru.
  • Opakovat na ose x - Obrázek na pozadí se opakuje jen na šířku plochy.
  • Opakovat na ose y - Obrázek na pozadí se opakuje jen na výšku plochy.
• Schovat v tabletu - Obrázek na pozadí se schová v zobrazení pro tablety.
• Schovat v mobilu - Obrázek na pozadí se schová v zobrazení pro mobily.
• Fixovat - Obrázek na pozadí bude mít fixní pozici při scrollování okna prohlížeče. V případě banneru se fixování aktivuje pouze tehdy, pokud má banner pouze jeden snímek.

Stín - Individuální nastavení pro danou komponentu. Podmínkou je mít aktivní funkci Stíny. Více zde.

Barevný přechod - Na pozadí prvku bude barevný přechod. Od světlejší barvy nahoře po tmavší dole.  Podmínkou je mít aktivní funkci Barevné přechody. Více zde.

Animace po najetí - Individuální nastavení pro danou komponentu. Podmínkou je mít aktivní funkci Animace po najetí. Více zde.

Výška banneru - Nastavení výšky banneru typu cover. V případě, že se nejedná o banner typu cover, výška odpovídá výšce vloženého obrázku.

Zarovnání obrázku - Nastavení pozice obrázku vzhledem k ostatním textům.

Zarovnání textu - Horizontální zarovnání textů uvnitř komponenty.

Vertikální zarování - Svislé zarovnání obsahu komponenty.

Skrýt - Zobrazit / nezobrazit daný prvek. Pokud se tato možnost nenabízí, proklikněte se na daný prvek tlačítkem Obsah, viz níže.

Skrýt nadpis - Zobrazit / nezobrazit nadpis v dané komponentě.

Neformátovat nadpis - Zrušit / ponechat formátování nadpisu.

Obsah - Proklik do administrace dané komponenty. Zobrazí se konkrétní detail nebo seznam položek daného modulu.

Rozložení komponenty

Designer umožňuje výběr z různých grafických možností komponent. Pokud se nenabízí volba nastavení pro konkrétní prvek, pak si v pravé části okna Designera klikněte na jinou stránku, která by tento prvek měla obsahovat. Tím se zpřístupní v levém menu Designera volby nastavení pro tento prvek.

Příklad! Vyberete si hlavičku číslo 5, protože chcete, aby váš e-shop měl logo uprostřed.

Postup nastavení

1. V menu administrace přejděte do sekce Grafika / Designer.
2. Klikněte na záložku Rozšířené.
3. Klikněte na šablonu, kterou chcete upravovat. Vybrali jsme např. rozložení Hlavní stránka.
4. Otevře se detail šablony.
5. Vyberte komponentu, kterou chcete editovat. Např. Hlavička.
6. Po rozkliknutí se otevře nabídka grafických možností dané komponenty.
7. Ve sloupci otevřete nabídku Rozložení.
8. Po najetí myší na náhledový obrázek se zobrazí popis možnosti a tlačítko Vybrat. Viz. obrázek níže.
9. Stisknutím tlačítka se provede přenastavení rozložení komponenty.
10. Pokud chcete, aby se změny provedly i na ostré doméně, je nutné je překlopit v  Grafika / Finalizace. Více zde.

Na obrázku níže je zobrazena editace hlavičky e-shopu.

Omezení administrace dle nastavené struktury

Na základě výběru struktury v modulu Designer se mohou omezit některá nastavení v administraci e-shopu. A to proto, že takováto nastavení nemají při dané konfiguraci Designera již smysl. 

Příklad: Položka produktu obsahuje možnost přidání Alternativního obrázku v seznamu produktu. Pokud si ale v Designerovi vyberete Produkt položku č. 3, tak ta alternativní obrázek neumí. V nastavení / produkty / rozšířené se v tom případě možnost nastavení zruší.

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 k původní grafice kdykoli vrátit. Více zde.

Funkce

Přejděte do sekce Grafika / Designer oddíl Verze.

Zobrazí se informace o číslu aktuální verze grafiky vašeho e-shopu. Pozor, jedná se o grafiku na testovací verzi (více zde) nikoli ostré verzi na doméně.

Před přepnutím na nejnovější verzi si nezapomeňte přečíst, co vše se změnilo (více zde). V tomto článku se např. dozvíte, jak se nastavují nové grafické prvky.

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).

Novinky v Designerovi

Seznam nových možností a funkcí najdete v článku zde.

Překlopit na doménu

Chcete grafiku vytvořenou v modulu Designer přesunout na ostrou doménu? Pokud máte aktivovaný modul Designer, můžete se prokliknout do Finalizace grafiky pomocí funkčního tlačítka. Více o finalizaci grafiky zde.

Aktivace Designera (zrušení rozšířených možností Editoru kódu)

Pokud používáte rozšířené možnosti Editoru kódu, zároveň s nimi není možné mít aktivovaný modul Designer. Časem se ale můžete rozhodnout k modulu Designer opět vrátit. Např. proto, že individuální úprava, kterou bylo nutné provést pomocí Editoru kódu, už je dostupná v základním vzhledu grafiky, se kterým pracuje modul Designera.

O co tím přicházíte?

• Přepnutím zpátky do Designera přijdete o veškeré úpravy, které jste si provedli v Editoru kódu. Zůstanou pouze vaše poznámky. Proto doporučujeme si tento krok důkladně promyslet.
• Grafika na testovací verzi se nastaví do výchozí šablony. 
• Zruší se rozšířené možnosti Editoru kódu. Více zde.

Co tím získáte?

• Kompletní možnosti a budoucí aktualizace grafiky v modulu Designer.
• Při tomto kroku se provádí systémové záloha. Najdete ji v sekci Grafika / Zálohy. Přejděte do oddílu Systémové - Vypnutí Editoru kódu. Více zde.

Nastavení v administraci

1. Přejděte do sekce Grafika / Designer.
2. Pozorně si přečtěte pozitiva a negativa tohoto kroku.
3. Potvrďte nastavení kliknutím na tlačítko Aktivovat.

Co se stane po aktivaci Designera?

1. Po aktivaci se v Designerovi a na testovací verzi e-shopu (více zde) nastaví nejnovější a výchozí přednastavená grafika. Původní grafika se na těchto místech tedy přemaže.
2. Na ostré verzi na doméně (více zde), kterou vidí vaši zákazníci, však zůstává grafika stále původní.
3. V Designerovi si nastavíte novou grafiku. Změny se stále projeví pouze na testovací verzi, nikoli ostré doméně, kterou vidí vaši zákazníci.
4. Jakmile máte vše hotovo, překlopíte testovací verzi na ostrou doménu. Více zde.
5. Pokud by byl problém, můžete provedené změny vrátit ze zálohy. Více zde.

Veškerý obsah vložený přes administraci (produkty, kategorie, články, nastavení systému) se zachová a nemá vliv na nastavení Designera.