Designer

Č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 komponent 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 Designerovi už nie je možné editovať nižšiu verziu grafických šablón ako 3.8. 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í:

  1. Hlavné: ponúka možnosť zvoliť si niektorú z prednastavených grafík, vykonať predvolené nastavenia a navigovať sa medzi hlavnými typmi stránok z e-shopu.
  2. Zoznam: obsahuje prvky, ktoré sa vyskytujú na zvolenej stránke (napr. hlavná stránka) a je možné si ich nastaviť.
  3. Veľkosť obrazovky: simuluje veľkosť obrazovky, na ktorej sa zobrazí e-shop. Je možné si prepínať medzi niekoľkými veľkosťami od veľkého monitora až po mobilný telefón.
  4. Publikovať na doméne: umožní okamžité preklopenie grafiky na ostrú doménu e-shopu.
  5. Viac: ďalšie ponuky zahŕňajúce možnosť prepnutia na najnovšiu verziu grafických šablón atď.

1. Hlavné

V tomto menu sú k dispozícii hlavné prvky pre nastavenie grafiky e-shopu:

  • Prednastavené grafiky: umožňuje si vybrať z prednastavených grafík pre vzhľad e-shopu. Viac tu.
  • Predvolené nastavenia: tu si môžete nakonfigurovať predvolené nastavenia pre základné prvky grafiky.
  • Hlavná stránka a ďalšie: jedná sa o rôzne typy stránok, ktoré sú použité na e-shope. Jednotlivé typy stránok sa ďalej nastavujú pomocou zoznamu prvkov, ktoré sa na nich nachádzajú.
  • Základné prvky: tu sú obsiahnuté všetky prvky, s ktorými sa dá stretnúť na stránkach e-shopu. Môžete si tak ľahšie nastaviť ich vzhľad a ďalšie vlastnosti. Táto možnosť je k dispozícii až od grafických šablón verzie 4.0.

Výber šablóny

Designer má prednastavené typy stránok, ktoré sa používajú na e-shope. Ide o nasledujúce:

  • Hlavná stránka - Nastavenie hlavnej stránky a jej komponentov.
  • Zoznam produktov - Nastavenie stránky s produktmi a jej komponentov.
  • Detail produktu - Nastavenie detailu produktu a jeho komponentov.
  • Textová stránka - Nastavenie textovej stránky a jej komponentov.
  • Detail článku - Nastavenie detailu článku a jeho komponentov. Dostupné až od grafických šablón verzie 4.0.

Na konkrétny prvok sa môžete postupne preklikať pomocou tohto menu, napr. Hlavná stránka / Pozadie a stĺpce / Záhlavie / Logo.

Druhou možnosťou je priamo kliknúť v okne Designera na konkrétny prvok. V menu sa potom zobrazia možnosti nastavenia tohto prvku.

Potom môžete vykonávať jeho nastavovanie pomocou možností v Zozname.

2. Zoznam

Akonáhle si v hlavnom menu vyberiete konkrétnu šablónu (hlavná stránka, zoznam produktov atď.), otvorí sa submenu obsahujúca jej jednotlivé prvky nastaviteľné v Designerovi. Tieto prvky sa líšia podľa konkrétnej šablóny.

Po prekliknutí na detail šablóny sa v náhľade grafiky zobrazí predvolená stránka, ktorej vzhľad sa riadi danou šablónou. Napr. stránka O nás sa riadi Textovou šablónou.

Ak kliknete na ikonku terčíka  , vybraný prvok sa na stránke označí obrysom.

Niektoré prvky je možné vidieť iba v určitých typoch zobrazení. 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ý.

Jednotlivé nastavenia sú rozdelené do samostatných oddielov. Dostupné nastavenia sa líšia podľa konkrétneho prvku. Zakaždým preto nemusia byť prístupné všetky nastavenia, pretože nie sú v danom prvku využiteľné.

Akonáhle si vyberiete prvok, ktorý si prajete upraviť, kliknite v menu na konkrétny oddiel. Rozbalia sa všetky možnosti jeho nastavenia.

Samotné prvky môžu obsahovať ďalšie vnorené prvky. Ich zoznam sa zobrazí v spodnej časti menu v časti Ostatné / Vnútorné prvky. Kliknutím na niektorý z týchto vnútorných prvkov sa presuniete do jeho nastavovania.

Vrátiť zmeny, schovať prvok a uložiť

Uskutočnené zmeny je možné jednoducho vrátiť do východiskového stavu tlačidlom Vrátiť zmeny. Akonáhle potvrdíte túto voľbu, Designer automaticky odstráni užívateľsky vykonané nastavenia.

Ďalšou možnosťou je skryť prvok zo stránky voľbou 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.

Akonáhle dokončíte všetky nastavenia daného prvku, kliknite na tlačidlo Uložiť.

3. Veľkosť obrazovky

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.

Symbol vpravo otvorí testovaciu verziu e-shopu v novej záložke prehliadača, kde je viditeľná grafika bez akýchkoľvek prvkov Designera aj administrácie.

4. Publikovať na doméne

Uskutočnené zmeny môžete rovno publikovať na doméne pomocou rýchlej voľby v hornom menu. Po kliknutí sa zobrazí vyskakovacie okno s potvrdením, či si naozaj prajete publikovať grafické zmeny na ostrej verzii e-shopu. Viac tu.

5. Viac

Táto položka horného menu nabízí ízia 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.
  • Pomoc: presmerovanie na túto pomoc.

Prednastavené grafiky

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.

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

Logo

Obrázkové logo je možné nastaviť aj v module Designer. Môžete naň priamo kliknúť v hlavičke stránky, aby sa zobrazilo jeho nastavenie. Alternatívne ho nájdete v menu Designera v sekcii Pozadie a stĺpce / Záhlavie / Logo.

Toto logo prepisuje základné logo e-shopu (viac tu). Máte tak možnosť mať rozdielne logá v dokumentoch, systémových emailoch (používa sa logo pre biely podklad) av grafike e-shopu (možnosť použitia loga pre rôzne farby podklady). Do modulu Designer a tým pádom aj do grafiky e-shopu je možné použiť aj textové logo.

V prípade deaktivácia Designera jeho logo nezmizne, ale prenesie sa do sekcie Nastavenia/Základné/Nastavenia obchodu, oddiel Logo a favicon. Tu s ním môžete ďalej pracovať.

Farby

Umožňuje vytvorenie jednotného farebného štýlu podľa nastavenej základnej a doplnkové 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.

U veľmi svetlých odtieňov 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 zabezpečenie dobrej čitateľnosti textových prvkov na stránke, aby sa negatívne neovplyvnili konverzie nákupu.

Farby používané v grafike

Nastavenia farieb nájdete v menu Hlavné / Predvolené nastavenia / Farby.

  • Hlavná 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! Doporučujeme 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.
  • Svetlé farby - Svetlé odtiene sa generujú na farebnej škále od bielej do základnej/sekundárnej farby (viď. vyššie). Systém odtiene využíva na zafarbenie svetlejších prvkov.
  • Biela farba - Systémová farba, ktorú nemožno zmeniť.
  • Ostatné farby - Farby špeciálnych prvkov ako sú výzvy, upozornenia, štítky atď.
  • Čierna farba - Systémová farba, ktorú nemožno zmeniť.

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.

Texty a písma

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.

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

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

Ohraničenia a línie

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.

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

  • Š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í.

Tiene

Nastavenie tieňov pre vybrané prvky. Tie sa opticky dostanú do popredia a grafika získa hĺbku.

Animácia grafických prvkov

Animácia prvkov po nabehnutí myšou alebo po ich zobrazení na obrazovke. Prejdite do oddielu Rozšírené a začiarknite pole Animovať.</ p>

Základné rozloženie grafiky

Výber z niekoľkých základných rozložení štruktúry vášho e-shopu podľa toho, či chcete design:

  1. na celú šírku stránky,
  2. s ohraničením stránky,
  3. s ľavým stĺpcom.

V menu Hlavné zvoľte sekciu Predvolené nastavenia. V oddiele Rozloženie stĺpcov n následne vyberte jednu z možností podľa ponúkaných grafických schém.

Rozloženie komponentu

Designer umožňuje výber z rôznych grafických možností komponentov. Pokiaľ sa neponúka voľba nastavenia pre konkrétny prvok, potom si v hlavnom menu Designera kliknite na inú stránku, ktorá by tento prvok mala obsahovať. Tým sa sprístupnia v menu Designera voľby nastavenia pre tento prvok.

Obmedzenie administrácie podľa nastavenej štruktúry

Na základe výberu štruktúry v modulu Designer sa môžu obmedziť niektoré nastavenia v administrácii e-shopu. A to preto, že takéto nastavenia nemajú pri danej konfigurácii Designera už zmysel.

Príklad: Položka produktu obsahuje možnosť pridania Alternatívneho obrázku v zozname produktu. Pokiaľ si ale v Designerovi vyberiete Produkt položku č. 3, tak tá alternatívny obrázok neumožňuje. V sekcii Nastavenia / Produkty / Rozšírené sa v tom prípade možnosť nastavenia zruší.

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

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

Zobrazia sa informácie o čísle aktuálnej verzie grafiky vášho e-shopu. Pozor, ide o grafiku na testovaciu verziu (viac tu) nie ostrú verziu na doméne.

Pred prepnutím na najnovšiu verziu si nezabudnite prečítať, čo všetko sa zmenilo (viac tu).

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

Novinky v Designerovi

Zoznam nových možností a funkcií nájdete v článku tu.

Preklopiť na doménu

Chcete grafiku vytvorenú v module Designer presunúť na ostrú doménu? Ak máte aktivovaný modul Designer, môžete sa prekliknúť do Publikovať na doméne priamo z jeho vrchného menu.

Ohľadom publikovania na doméne sa dozviete viac tu.

Aktivácia Designera (zrušenie rozšírených možností Editora kódu)

Ak používate rozšírené možnosti Editora kódu, zároveň s nimi nie je možné mať aktivovaný modul Designer. Časom sa ale môžete rozhodnúť k modulu Designer opäť vrátiť. Napr. preto, že individuálna úprava, ktorú bolo nutné vykonať pomocou Editora kódu, už je dostupná v základnom vzhľade grafiky, s ktorým pracuje modul Designera.

O čo tým prichádzate?

  • Prepnutím späť do Designera prídete o všetky úpravy, ktoré ste si vykonali v Editore kódu. Zostanú iba vaše poznámky. Preto odporúčame si tento krok dôkladne premyslieť.
  • Grafika na testovaciu verziu sa nastaví do predvolenej šablóny.
  • Zrušia sa rozšírené možnosti Editora kódu. Viac tu.

Čo tým získate?

  • Kompletné možnosti a budúce aktualizácie grafiky v module Designer.
  • Pri tomto kroku sa vykonáva systémové záloha. Viac tu.

Nastavenia v administrácii

  1. Prejdite do sekcie Grafika / Designer.
  2. Pozorne si prečítajte pozitíva a negatíva tohto kroku.
  3. Potvrďte nastavenie kliknutím na tlačidlo Aktivovať.

Čo sa stane po aktivácii Designera?

  1. Po aktivácii sa v Designerovi a na testovacej verzii e-shopu (viac tu) nastaví najnovšie a predvolené prednastavená grafika. Pôvodná grafika sa na týchto miestach teda premaže.
  2. Na ostrej verzii na doméne (viac tu), ktorú vidia vaši zákazníci, však zostáva grafika stále pôvodná.
  3. V Designerovi si nastavíte novú grafiku. Zmeny sa stále prejavia iba na testovacej verzii, nie ostrej doméne, ktorú vidia vaši zákazníci.
  4. Akonáhle máte všetko hotové, preklopíte testovaciu verziu na ostrú doménu. Viac tu.
  5. Ak by bol problém, môžete uskutočnené zmeny vrátiť zo zálohy. Viac tu.

Všetok obsah vložený cez administráciu (produkty, kategórie, články, nastavenia systému) sa zachová a nemá vplyv na nastavenie Designera.

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.

Na tejto stránke

Další zdroje informací

Facebook poradna

Výměna zkušeností, rady a tipy mezi provozovateli e-shopů na systému UPgates.

Přejít do poradny

Akademie

Získejte znalosti od našich specialistů na marketing, obchod, právo a podnikání.

Přejít do akademie

Novinky z Blogu

Co nového jsme pro vás připravili nebo chystáme najdete na blogu.

Přejít do blogu

Nepodařilo se Vám najít tu správnou odpověď?

Kontaktujte naši technickou podporu, která je tu pro vás od pondělí do pátku 8:00 až 16:00 hod.

Zákaznická podpora