31d6cfe0d16ae931b73c59d7e0c089c2

Čo je to Designer?

Ako vytvoriť rýchlo a zadarmo dizajn e-shopu tak, aby čo najlepšie vyhovoval vašim individuálnym požiadavkám a pritom to nebola žiadna šablóna? Vďaka modulu Designer ponúka Upgates širokú škálu možností, ako túto grafickú úlohu elegantne vyriešiť.

Príklad: Ako základ grafiky si vyberte jednu z prednastavených grafík. Vložte svoje logo, upravte farebnosť grafiky, prípadne zmeňte písmo, zarovnanie, ohraničenia a využite ďalšie rozšírené funkcie. Je možné prispôsobiť rozloženie stĺpcov a jednotlivých prvkov e-shopu. Napr. si zapnete zobrazenie hlavičky č. 4 a prefarbíte ju do svetlého elegantného štýlu. Na hlavnej stránke môžete napr. preferovať informácie o novinkách a aktualitách pred ponukou produktov.

V rámci bežnej praxe vývojových platforiem, môžeme garantovať správne zobrazenie stránok len pre aktuálne verzie prehliadačov av grafických šablónach od verzie 4.3.

V Designerovi už nie je možné editovať nižšiu verziu grafických šablón ako 4.0. V tomto prípade modul ponúkne možnosť aktualizovať Designera na najnovšie šablóny alebo ich prepnúť do Editora kódu.

Úvod

Základné navigačné prvky Designera nájdete vo vrchnej lište. Kliknutím na konkrétnu položku vo vrchnom menu sa následne zobrazí okno s ďalšími voľbami pre podrobnejšie nastavenie.

Obsah tohto okna sa líši podľa toho, akú časť šablón momentálne nastavujete. Pre lepšiu orientáciu si môžete okno presunúť na iné miesto pretiahnutím za jeho vrchnú časť.

Druhou možnosťou je umiestniť si toto okno natrvalo na ľavú stranu obrazovky Designera. Túto zmenu vykonáte kliknutím na ikonu zámku v hlavičke okna.

Vrchná lišta

V hornej lište sa nachádza 5 hlavných navigačných častí:

• Šablóny - Ponúka zoznam predpripravených šablón, ktoré si môžete ďalej upraviť. (viac v sekcii Šablóny)
• Predvolené - Obsahuje súbor možností nastavenia šablóny od jej rozloženia, cez texty, až po motív. (viac v sekcii Predvolené)
• Stránky - Obsahuje súpis typov stránok a sekcií vyskytujúcich sa na eshope. (viac v sekcii Stránky)
• Rozloženie - Ponúkne kompletný výpis sekcií, ktorých môžete meniť rozloženie stránok. Rozložením je možné stránky prispôsobiť podľa vašich preferencií (viac v sekcii Rozloženie)
• Prvky - Obsahuje súbor všetkých prvkov na konkrétnej stránke (viac v sekcii Prvky)

Ďalej obsahuje editáciu responsívneho zobrazenia, ukladanie zmien, publikácie zmeny a viac.

Šablóny

Možnosť výberu zo širokej ponuky prednastavených grafík. Na tomto základe budete môcť vykonávať ohromné ​​množstvo ďalších individuálnych úprav.

Výber prednastavenej grafiky

Najskôr si teda vyberiete jednu z prednastavených grafík, ktorá sa najviac blíži vašej predstave.

Dôležité je si pamätať, že výberom šablóny nie ste nijako obmedzení. Pokiaľ sa vám na konkrétnej šablóne napríklad niečo zapáči, ale vami vybraná šablóna to má inak, tak to neznamená, že o toto prichádzate. Každý z prednastavených šablón vychádza z jedného konceptu. To teda znamená, že nech už si vyberiete akúkoľvek šablónu, vždy na nej môžete nastaviť to čo vidíte na inej šablóne. (viď časť o Rozložení)

Nezabudnite však, že pokiaľ už máte nejakú šablónu upravenú a meníte si ju za inú, dôjde touto zmenou k prepísaniu všetkých doterajších nastavení v grafike, ktoré ste urobili, na pôvodné hodnoty.

Ešte pred nastavením si môžete vybranú grafiku prezrieť - kliknite na odkaz Prezrieť demo.

Predvolené

V sekcii predvolené nájdete všetky základné "všeobecné" nastavenia, ktoré pre šablónu potrebujete. Nastavíte tu na jednom mieste teda napríklad Farby e-shopu a tlačidiel, upravíte font, ohraničenie, atď.

Farby

Možnosť nastavenia farieb všeobecne pre váš e-shop nájdete v sekcii Východiskové / Farby.

Umožňuje vytvorenie jednotného farebného štýlu podľa nastavenej základnej a doplnkovej farby. Väčšina prvkov v grafike je biela, v základnej farbe alebo jej odtieňoch. Iba pri vybraných prvkoch, ktoré smerujú ku konverzii stránky, je použitá farba doplnková. Pri určovaní farieb je dobré vychádzať z farebnosti vášho loga.

Pri veľmi svetlých odtieňoch vybraných pre pozadie prvkov môže dôjsť k automatickému stmaveniu zvolenej farby (pri zachovaní rovnakého odtieňa a saturácie). Dôvodom je zaistenie dobrej čitateľnosti textových prvkov na stránke, aby sa negatívne neovplyvnili konverzie nákupu.

• Základná farba - Nastavuje sa v designerovi. Farba textov a tmavých plôch. V prípade textov sa farba doladí tak, aby bola optimálne čitateľná (môže dôjsť k stmaveniu). Tip! Odporúčame vybrať dostatočne tmavú farbu, aby bola dobre čitateľná. Nemala by byť tiež prehnane sýta, pretože web potom môže pôsobiť ostro na oči.
• Sekundárna farba - Nastavuje sa v designerovi. Farba konverzných tlačidiel. Ďalej je použiteľná v hlavičke e-shopu av marketingových prvkoch ako sú bannery a headliny.
• Biela farba - Systémová farba, ktorú nemožno zmeniť.
• Čierna farba - Systémová farba, ktorú nemožno zmeniť.
• Ostatné farby - Farby špeciálnych prvkov ako sú výzvy, upozornenia, štítky atď.

Farbenie grafických prvkov

Na základe nastavených farieb sa vytvorí paleta možností pre lokálne zafarbovanie jednotlivých komponentov a grafických prvkov. Stačí v náhľadovom okne nabehnúť myšou na daný prvok a upraviť jeho nastavenie.

Farebné možnosti sa môžu líšiť podľa konkrétneho prvku, ktorý nastavujete. Pri niektorých prvkoch môžete tiež nastavovať prekrývanie

Texty a písma

Nastavenia textov nájdete v menu Predvolené / Texty.

Pri nastavovaní štýlu textov v grafike e-shopu si môžete vybrať zo širokej ponuky fontov základného písma a nadpisov. Meniť môžete veľkosť, zhustenie a ďalšie formátovanie ako výšku riadkov.

• Zarovnanie - Zarovnanie textov a vybraných prvkov grafiky na stred alebo doľava. Jednotlivé komponenty grafiky je možné zarovnať aj lokálne.
• Výška riadku - Nastavenie vzdušnosti riadkov textov. Pridanie alebo ubránenie priestoru medzi riadkami.
• Elasticita - Velikosť písma sa prispôsobuje veľkosti obrazovky. Čím väčšia je šírka okna prehliadača, tým väčšie je aj písmo textov.
• Bežné texty
  • Písmo - Výber z ponuky prednastavených fontov, ktoré sa použijú vo všetkých textoch mimo nadpisov. Fonty sa importujú z Google Fonts.
  • Veľkosť - Veľkosť písma základného textu.
  • Rozostup písmen - Nastavenie rozstupu medzi jednotlivými písmenami v textoch. Čím vyššiu hodnotu nastavíte, tým väčšie rozostupy budú.
• Nadpis
  • Písmo - Výber z ponuky prednastavených fontov, ktoré sa použijú vo všetkých nadpisoch. Fonty sa importujú z Google Fonts.
  • Veľkosť - Veľkosť písma základného textu.
  • Rozostup písmen - Nastavenie rozstupu medzi jednotlivými písmenami v nadpisoch. Čím vyššiu hodnotu nastavíte, tým väčšie rozostupy budú.
• Tučnosť písma: Nastavenie tučnosti textu.

Texty môžete upravovať aj v rámci jednotlivých sekcií v obsahu stránok. Stačí keď kliknite napríklad do popisu bannerov, článkov, kategórií atď.
Vybrať si môžete zo širokej škály nastavení

• Písmo - Nastavenie štýlu vybraného textu, či sa jedná o bežný text alebo nadpis. Ďalej umožňuje nastaviť špeciálne formátovanie typu všetky písmená veľké, prečiarknutie atď.
• Tučnosť písma - Určuje tučnosť vybraného textu, ktorý práve editujete.
• Farba textu - Nastavenie farieb vybraného textu. Zdedená farba preberá nastavenia z nadradeného prvku na zjednotenie vzhľadu.
• Veľkosť písma - Určuje veľkosť vybraného textu, ktorý práve upravujete.
• Rozostup písmen - Zmení rovnomerne medzeru medzi jednotlivými písmenami textu. Vyššie zväčšujú rozostupy, zatiaľ čo záporné hodnoty rozostupy zmenšujú.
• Zarovnať text -  Zarovnáva vybraný text, ktorý práve editujete, v rámci bloku, v ktorom sa nachádza.
• Výška riadku - Nastavenie umožňuje zmeniť výšku riadku zo štandardnej veľkosti podľa najvyššieho prvku na riadku. Týmto sa zmenia rozostupy medzi jednotlivými riadkami, kde väčšie rozostupy obvykle zlepšia čitateľnosť textu.

Ohraničenia a línie

Všeobecné nastavenie ohraničenia vykonáte v menu Predvolené / Ohraničenie

Nastavte si grafický štýl rôznych línií a ohraničení v grafických prvkoch. Lepšie tak prispôsobíte grafiku firemnej identite vášho e-shopu.

• Štýl - Plný, prerušovaný alebo bodkovaný štýl línií.
• Hrúbka - Hrúbka línií pri grafických prvkoch, ktoré majú nastavené ohraničenie.
• Zaobliť - Nastavenie polomeru zaoblenia hrán u vybraných grafických prvkov.
• Stmavenie - Stmavenie farby línií.

Pri jednotlivých prvkoch, ktoré podporujú ohraničenie, si možno vykonať nastavenie v oddieli Ohraničenie.

Všeobecné nastavenie vykonáte v menu Predvolené / Orámovanie. Pri jednotlivých prvkoch, ktoré podporujú ohraničenie, si možno vykonať nastavenie v oddiele Ohraničenie.

• Zaobliť - Umožňuje nastaviť zaoblenie vybraného prvku.
• Linka - Nastavuje šírku ohraničenia vybraného prvku.
• Štýl čiary - Nastavuje štýl ohraničenia vybraného prvku, či má byť ohraničenie plne, prerušované, alebo bodkované.
  "prázdna hodnota" pri výbere znamená východiskový stav.

Motív

Motív nastavíte v sekcii Východiskový / Motív.

Motív nastavuje do pozadia e-shopu vami vybraný motív. Pokiaľ daný motív na e-shope mať nechcete môžete zvoliť jednoducho hodnotu "Žiadny".

Vami vybraný motív sa následne zobrazí na pozadí e-shopu.

Ostatné

Ostatné globálne nastavenia šablóny nájdete v sekcii Predvolené / Ostatné.

Toto nastavenie určuje rôzne detailné nastavenia, ktoré sa týkajú vášho e-shopu. Zo začiatku sa však touto sekciou nemusíte vôbec zaoberať. Prednastavili sme totiž pre vás ideálne nastavenie, ktoré zaisťuje bežné fungovanie šablóny.

• Zarovnať obsah - Zarovnáva obsah šablóny
• Rozsetupy sekcií - Ovláda rozostupy medzi jednotlivými sekciami
• Rozostrené tieňov - Rozostrenie tieňov "zlepšuje" grafický dojem z nastaveného tieňa prvku
• Animované prechody
• Animácia po nabehnutí
• Povinné polia s obrysom - Zvýrazní pole, ktoré je povinné. Napríklad pri registrácii zákazníka do e-shopu. Farba zvýraznenia sa prevezme z Sekundárnej farby

Späť do východiskového stavu

Vrátenie späť do východiskového stavu, môžete pre šablónu urobiť v sekcii Predvolené / Späť do východzieho stavu.

Po kliknutí na túto sekciu sa vás systém opýta, či to chcete urobiť. Potvrdením dotazu v pop-up okne vráti všetky vami vykonané zmeny na šablóne do východiskového stavu.

Vrátenie iba konkrétnej zmeny

Vykonané zmeny na konkrétnom prvku je možné ľahko vrátiť do východzieho stavu tlačidlom Vrátiť zmeny. Akonáhle potvrdíte túto voľbu, Designer automaticky odstráni užívateľsky vykonané nastavenia.

Šípky pre vrátenie sa zobrazia iba vtedy, ak na danom prvku ste vykonali užívateľskú zmenu. Pokiaľ sa šípky na danej sekcii nezobrazujú, pravdepodobne preberajú hodnotu z východiskového nastavenia.

Revízia zmien a Zálohy

Aby sme vám uľahčili prácu s dizajnérom, vytvorili sme funkciu Revízia zmien, ktorá vám ukáže posledné prebehnuté zmeny na danej šablóne.

Viac o Revíziách zmien a zálohách sa dozviete v našej napovede.

Stránky

Po kliknutí na stránky sa vám v bočnom paneli rozbalí zoznam stránok, ktoré je možné v Designerovi editovať.

• Základné prvky - Sú tu obsiahnuté všetky základné prvky, s ktorými sa dá stretnúť na stránkach e-shopu.
• Hlavná stránka - Presmeruje vás na Hlavnú stránku e-shopu
• Zoznam produktov - Presmeruje vás do detailu kategórie s produktmi
• Detail produktu - Presmeruje vás na detail produktu
• Textová stránka - Presmeruje vás na kategóriu článku
• Detail článku - Presmeruje vás na detail článku
• Objednávka prijatá - Presmeruje vás na detail ďakovacej stránky objednávky

Po kliknutí na konkrétnu stránku sa vám zobrazí rovno sekcia Prvky a už vyberáte a upravujete konkrétnu časť, ktorú si vyberiete.

Rozloženie

Každá šablóna sa skladá z niekoľkých blokov (hlavička, obsah, päta). Každý tento blok má v sebe konkrétne prvky (Záhlavie - Kontakty, Logo, Vyhľadávanie, atď.)

Rozloženie umožňuje každý tento blok upravovať.

Pokiaľ budete chcieť nejaké rozloženie upraviť, stačí kliknúť na vybranú sekciu a rozbalí sa vám ponuka rôznych typov rozloženia.
Každý typ rozloženia ukazuje, ako následne po danej zmene bude rozloženie vyzerať.

Rozloženie prvku

Rozloženie môžete editovať aj kedykoľvek neskôr. Pokiaľ vami vybraný prvok umožňuje zmeniť rozloženie, zobrazí sa v navigačnom paneli postranne, alebo v samotnom obsahu stránky ikonka s rozložením.
Po jej kliknutí môžete meniť rozloženie konkrétneho prvku ako napríklad záhlavie, produktové karty v zozname produktov atď.

Premiestnenie blokov na stránke

Ak vám určitá pozícia blokov na stránke nevyhovuje. Môžete ich premiestniť jednoduchým pretiahnutím v ľavom stĺpci dizajnéra, alebo v obsahu stránky. Sekcie, ktoré je možné presúvať sú zvýraznené šípkami.

Príklad: Stránka kategórií má základnú pozíciu popisu kategórie hneď za záhlavím stránky. Pokiaľ sa teda rozhodnete, že popisok pre vás nie je až taký dôležitý a chcete mať výpis produktov z kategórie čo najvyššie, môžete vykonať presun tohto bloku s popisom kategórie.

Presun v rámci obsahu stránky

1. V aplikácii Designer vyberte časť, ktorú chcete presunúť.
2. Vyberte časť, ktorú chcete presunúť. Ak je možné sekciu presunúť, zobrazia sa v nej navigačné šípky.
   

Pohyb v navigačnom paneli

1. V ľavej časti si teda nastavte Zoznam produktov / Hlavný stĺpec,
2. Nájdite myšou na blok, ktorý chcete presúvať Popis stránky,
3. Myš umiestnite na modré pole po pravej strane sekcie a na symbol šípok,
   
   
4. Chyťte sekciu ľavým tlačidlom myši a pretiahnite ju do príslušnej pozície.
   
   
5. Akonáhle premiestnenie dokončíte, proces sa automaticky uloží av náhľade dizajnéra, ihneď uvidíte ako sa sekcia presunie.

Prvky

Každá šablona sa skladá z niekoľkých blokov (hlavička, obsah, pata). Každý tento blok má v sebe konkrétne prvky (Záhlavie - Kontakty, Logo, Vyhľadávanie, atď.,)
Každý tento blok a prvok môžete v Designerovi upravovať.

Výber prvku

Prvky môžete upravovať veľmi jednoducho. V defaultnom nastavení je vždy zapnutý tzv. Inšpektor prvkov.
Inšpektor prvkov sa chová tak, že jednoduchým nabehnutím myši na požadovaný prvok, vám označí prvky, ktoré je možné editovať (oranžové zvýraznenie).

Na konkrétny prvok sa môžete aj postupne preklikať pomocou postranného panelu. Napríklad pokiaľ budeme chcieť nájsť sekciu, ktorá je vyššie znázornená gifom, tak je potrebné postupovať po krokoch:

1. Vo vrchnej lište zvolíme sekciu Stránky,
2. Vyberieme Detail produktu,
3. Bočný panel sa automaticky prepne na Prvky,
4. Sekciu nájdeme v zanorení Pozadie a stĺpce / Obsahová časť / Hlavné info / Hlavný popis.

Vypnutie Inšpektora prvkov

Ak inšpektora prvkov vypnete, prvky sa vám už nebudú označovať. Môžete si tak prechádzať váš e-shop podobne ako bežnú stránku.

Inšpektora prvkov vypnete pomocou tlačidla   v pravom hornom rohu navigačnej lišty.

Akonáhle s prechádzaním skončíte, môžete ispektora opätovne zapnúť rovnakým tlačidlom.

Bočný panel v prvkoch

Postranný panel vám umožňuje zobraziť kompletné možnosti jednotlivých prvkov, od farieb, cez fonty, až po rôzne rozšírené možnosti úprav.

Správa navigačného panelu

• Zámok - Ikona popísaná už skôr v Úvode článku.
  
• Terčík - Ak kliknete na ikonku terčíka  , vybraný prvok sa na stránke označí obrysom.
  
• Šípka úrovne - Tlačidlo šípky vám umožní presun medzi jednotlivými úrovňami zanorenia. Ak máte napríklad tlačidlo v banneri, pomocou šípky sa môžete posunúť o úroveň vyššie a označí sa vám napríklad celý banner. Nebudete tak musieť zbytočne zdĺhavo hľadať potrebnú úroveň v menu.
  
• Strom zanorenia - Tlačidlo pre menu rozbalí aktuálny celý strom zanorenia, v ktorom sa aktuálne nachádzate.
  

Niektoré prvky je možné vidieť iba v určitých typoch zobrazenia. V takom prípade je vedľa názvu prvku zobrazená informačná ikonka upozorňujúca na danú veľkosť obrazovky.

Pri prekliknutí na takýto prvok (ikonou terčíka alebo pri otvorení jeho detailu) Designer automaticky vyhodnotí viditeľnosť prvku v jednotlivých zobrazeniach. Podľa potreby buď ponechá existujúci typ zobrazenia, alebo prepne na najbližšie vyššie/nižšie zobrazenie, v ktorom je tento prvok viditeľný.

Možnosti editácie prvku

Každý editačný panel prvku sa skladá z niekoľkých častí

• Záhlavie - ktoré sme si popísali vyššie
• Akčné ikonky
  • Ceruzka - Upraví obsah konkrétneho prvku. Napr. Pokiaľ teda editujete produkt ABC, kliknete na ceruzku otvorí sa vám detail karty tohto produktu.
  • Kopírovanie - Uloží si nastavenie úprav (farby, ohraničenia, atď.) a prenesie ho do iného prvku, ktorý je v tejto sekcii.
  • Vnútorné prvky - Zobrazí vám zoznam prvkov, ktoré sú zanožené vo vami označenom prvku.
  • Odkaz - Umožní skopírovať odkaz na konkrétnu stránku a prvok, ktorý upravujete a môžete ho tak nazdieľať kolegom, alebo grafikovi.
  • Obnovenie - Obnovuje individuálne ručné úpravy na prvku. Viac v Späť do východiskového stavu
  • Skryť - Skrýva konkrétny prvok na tomto type stránky. Viac v Zobrazení a Skrývanie prvku
• Možnosti editácie prvku - Jednotlivé nastavenia pvrku sú rozdelené do samostatných oddielov (pozadia, texty, ohraničenia, atď.). Dostupné možnosti sa líšia podľa konkrétneho prvku. Z tohto dôvodu nemusia byť zakaždým prístupné všetky nastavenia, pretože nie sú v danom prvku využiteľné.
• Všetky možnosti - Rozšírené možnosti skrývajú ďalšie možnosti úprav. Viac v sekcii Základné vs. Všetky možnosti

Editácia konkrétneho prvku

Akonáhle si vyberiete prvok, ktorý si prajete upraviť, kliknite v menu na konkrétny oddiel (napríklad Texty) a rozbalia sa vám možnosti jeho nastavenia.

Aby sme vám uľahčili prácu s jednotlivými prvkami šablóny, upravili sme pre vás možnosť „rýchlej editácie“. Môžete ju využiť tak, že keď si napríklad budete chcieť upraviť článok, ktorý máte práve na Homepage stránke tak jednoduchým klikom na tlačidlo Upraviť obsah, sa presmerujete priamo do detailu článku, v ktorom môžete príslušný článok upraviť. Využiť funkciu môžete aj na iné sekcie, ako sú produkty, kategórie, a ďalšie.

Niektoré nastavenia, najčastejšie tie zložitejšie (Všetky možnosti), sa namiesto v danom prvku vykonávajú v súvisiacom obalovom prvku (kontajneri). V takom prípade sa pri danom nastavení zobrazí tlačidlo Kontajner. Po kliknutí naň budete presmerovaní do konkrétnej časti, kde si môžete vykonať potrebné nastavenia. Napríklad zmena vnútorných rozostupov po stranách bannera sa vykonáva v kontajneri, viď ukážka nižšie.

Zobrazenie a Skrývanie prvku

Jednou z možností editácií je skryť prvok Schovať prvok. Pokiaľ je už prvok schovaný, Designer u neho neumožní vykonávať úpravy. Skrytý prvok môžete znova zobraziť kliknutím na tlačidlo Zobraziť prvok.

Textové polia v grafických šablónach

V grafických šablónach sú preddefinované umiestnenia pre niekoľko textových polí, ktorých obsah je možné vyplniť pomocou prekladov alebo vlastných polí. Viac tu.

Ukladanie zmien

Ukladanie zmien, ktoré urobíte sa vykonáva úplne automaticky. Kým stránku editujete, nie je potrebné nič ručne ukladať.
Nemusíte sa báť nečakaného výpadku elektriny alebo internetu. Designer si všetky vaše úpravy pamätá a pokiaľ ich ručne neuložíte, systém ich do hodiny spracuje a uloží. Nevykoná sa ale Publikácia. Vaša práca tak zostane v bezpečí a vy sa môžete sústrediť na kreativitu namiesto stresu z neuložených zmien.

Pokiaľ si budete chcieť prácu uložiť ručne. Môžete tak urobiť vo vrchnej lište na pravej strane, tlačidlom Uložiť

Ak ste žiadne zmeny nevykonali, tlačidlo bude neaktívne. Zapína sa až v momente, keď nejakú zmenu urobíte.

Publikovať na doméne

Akonáhle budete s vykonanými zmenami spokojní a budete ich mať otestované v designerovi. Môžete vykonať publikáciu zmien na váš ostrý projekt.
Vykonané zmeny môžete publikovať na doméne pomocou tlačidla   Publikovať vo vrchnej lište.
Po kliknutí sa zobrazí vyskakovacie okno s potvrdením, či si naozaj prajete publikovať grafické zmeny na ostrej verzii e-shopu.

Responsívne zobrazenie

V Designerovi si môžete simulovať veľkosť obrazovky, na ktorej uvidí e-shop váš zákazník. Niektoré prvky majú odlišné správanie v rôznych rozlíšeniach obrazovky, napr. sú skryté v mobilnom zobrazení pre úsporu miesta. Prepnutím ihneď uvidíte výsledné zobrazenie.

Viac

Táto položka horného menu ponúka niekoľko prvkov:

• Verzia: zobrazí verziu grafických šablón, ktoré aktuálne používate. Tiež umožňuje prepnúť sa na najnovšie grafické šablóny e-shopu. Viac tu.
• Zálohy: môžete si vykonať zálohu aktuálneho nastavenia grafických šablón, prípadne si obnoviť niektorú z predchádzajúcich záloh. Viac tu.
• Editor kódu: prejdete sa do sekcie Editor kódu. Viac tu.
• Začíname: zobrazí vyskakovacie okno s videonávodom na modul Designer.
• Nápoveda: presmerovanie na túto pomoc.

Základné vs. Všetky možnosti

Aby sme vám uľahčili prácu a nezahltli vás hromadou (a že je to skutočne poriadna kopa) možností ako si jednotlivé prvky šablóny nastavovať, Designer funguje v dvoch modech:

• Základné možnosti (Predvolené nastavenie)
  Zahŕňa všetky kľúčové funkcie, ktoré väčšine užívateľov stačí na jednoduchú správu vzhľadu e-shopu, sú teraz prístupné rovno av prehľadnej podobe postranného panelu.
• Všetky možnosti
  Pokiaľ si chcete s grafikou naozaj vyhrať a prispôsobiť šablónu do najmenších detailov, stačí si aktivovať Všetky možnosti a popustiť uzdu svojej fantázie.

Pozor! Rozšírené možnosti odporúčame zapínať iba užívateľom, ktorí s editáciou grafiky majú skúsenosti. Nastavenie v týchto možnostiach môže totiž rozhodiť vašu grafiku e-shopu, pokiaľ sa urobia neodborne.

Transformácia

Transformácia rôznych prvkov vám umožní pracovať so štylizáciou. Môžete prvok napríklad priestorovo pokriviť, posunúť atď.

Otočiť

• Horizontálne - Otočenie prvku podľa horizontálnej osi. Zadávanie v stupňoch, o koľko sa má prvok otočiť. CSS: rotateX.
• Vertikálne - Otočenie prvku podľa vertikálnej osi. Zadávanie v stupňoch, o koľko sa má prvok otočiť. CSS: rotateY.
• Priestorovo - Otočenie prvku podľa jeho stredovej osi. Zadávanie v stupňoch, o koľko sa má prvok otočiť. CSS: rotateZ.

Veľkosť

• Horizontálne - Mení šírku prvku.
• Vertikálne - Mení výšku prvku.

Posunúť

• Horizontálne - Posunie prvok po horizontálnej osi. Záporné hodnoty posúvajú prvok smerom doľava, zatiaľ čo kladné hodnoty ho posúvajú smerom doprava. Nula je východiskový bod. CSS: translateX.
• Vertikálne - Posunie prvok po vertikálnej osi. Záporné hodnoty posúvajú prvok smerom nahor, zatiaľ čo kladné hodnoty ho posúvajú smerom nadol. Nula je východiskový bod. CSS: translateY.

Skosiť

• Horizontálne - Skosenie prvku vo vodorovnom smere, zadané v stupňoch. Kladná hodnota vykoná skosenie smerom vľavo, zatiaľ čo záporná hodnota v smere vpravo. Predvolená hodnota je nula. CSS: skewX.
• Vertikálne - Skosenie prvku vo zvislom smere, zadané v stupňoch. Kladná hodnota vykoná skosenie smerom nahor, zatiaľ čo záporná hodnota v smere nadol. Predvolená hodnota je nula. CSS: skewY.

Začiatok

• Horizontálne - Umožňuje zmeniť umiestnenie prvku vo vodorovnom smere jeho presunutím vľavo, na stred alebo vpravo.
• Vertikálne - Umožňuje zmeniť umiestnenie prvku vo zvislom smere jeho presunutím nahor, na stred alebo dolu.

Pozor! Tieto transformácie nemusia niektoré verzie prehliadača akceptovať, napríklad prehliadače v iOS zariadeniach.

Aktualizácia verzie (redesign)

Príde doba, kedy grafika vášho e-shopu zostarne a chcelo by to niečo nové, modernejšieho. U Upgates je riešenie jednoduché. V podstate sa len prepnete v module Designer do najnovšej verzie grafiky.

Automaticky sa vytvorí systémová záloha starej grafiky. Pomocou nej sa môžete v budúcnosti vrátiť k pôvodnej grafike (platnosť automatických záloh je maximálne 180 dní). Viac tu.

Postup v administrácii

Prejdite do sekcie Grafika / Designer.
V hornom menu vyberte položku Viac / Verzia.

Zobrazia sa informácie o čísle aktuálnej verzie grafiky vášho e-shopu.

Čo sa zmení?

• Pôvodný grafický vzhľad sa nahradí novým. Grafický systém sa ladí a dopĺňa o nové prvky. Vznikajú nové grafické prvky a tie menej moderné naopak zanikajú alebo sa modernizujú. Vzniká nová funkcionalita, ktorú treba dodať do grafiky.
• Prichádzate o všetky úpravy vykonané v Editore kódu! Tzn. vrátane štýlov v _custom.css, ktoré sú súčasťou základných možností Editora kódu.

Čo sa nezmení?

• Nastavenia Designera, ktoré sú kompatibilné s novou verziou. Nové alebo upravené prvky je potrebné dodatočne donastaviť.
• Všetok obsah, ktorý ste vyplnili v administrácii e-shopu (tzn. produkty, články, kategórie, zákazníci, objednávky, logo atď.).
• Rovnako obsah súboru Poznámky, ktorý nájdete v Editore kódu (Grafika / Editor kódu).