Jak přizpůsobit rozložení postranních listů ve vašem e-shopu

Pokud si přejete vytvořit design e-shopu, který bude maximálně vyhovovat vašim individuálním požadavkům a zároveň se vyhnout generickým šablonám, tento návod je přesně pro vás. S Designerem můžete snadno upravovat rozložení sloupců a jednotlivých prvků e-shopu.

Začínáme s Designerem

V Designerovi již není možné editovat nižší verze grafických šablon než 4.0. Existují dvě základní možnosti, jak pracovat s nastavením šablony:

  • Výchozí - Obsahuje soubor možností nastavení šablony od jejího rozložení, přes texty, až po motiv. Obsah tohoto okna se liší podle toho, jakou část šablon momentálně nastavujete.
  • Druhou možností je umístit si toto okno natrvalo na levou stranu obrazovky Designera.

Přednastavené grafiky a jejich úpravy

Přednastavené grafiky vám poslouží v případě, kdy nechcete s nastavením začínat úplně od začátku. Každá z přednastavených šablon vychází z jednoho konceptu. Pokud se vám přednastavená grafika zalíbí, ale přesto byste chtěli konkrétní blok / prvek upravit dle svého, neznamená to, že o možnosti úprav přicházíte.

Základní nastavení v sekci "Výchozí"

V sekci Výchozí najdete všechny základní "obecné" nastavení, které pro šablonu potřebujete.

Práce s rozložením a elementy

Každá šablona se skládá z několika bloků (záhlaví, obsah, zápatí). Rozložení můžete editovat i kdykoliv později, 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. Například, stránka kategorií má základní pozici popisu kategorie hned za záhlavím stránky.

Čtěte také: Od Vyřezávaných Listů k Lídrovi: Příběh FK Dřevěné Lišty

Inspektor prvků a rychlá editace

V defaultním nastavení je vždy zapnutý tzv. inspektor prvků, který umožňuje kliknutím na prvek v zobrazeném e-shopu zobrazit jeho nastavení. Na konkrétní prvek se můžete i postupně proklikat pomocí postranního panelu. 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.

Skrývání prvků

Jednou z možností editací je skrýt prvek. Pokud je již prvek schovaný, Designer u něj neumožní provádět úpravy.

Grafické úpravy

Barevná paleta a její nastavení

Paleta barev umožňuje vytvoření jednotného barevného stylu. Na základě nastavených barev se vytvoří paleta možností pro lokální obarvování jednotlivých komponent a grafických prvků. Barevné možnosti se mohou lišit podle konkrétního prvku, který nastavujete. 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).

  • Světlé barvy - Tvoří alternativní paletu barev pro zejména světlé eshopy.
  • Barva textového okénka - Definuje barvu textu.

Styl textů a fonty

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ů. Texty můžete upravovat také v rámci jednotlivých sekcí v obsahu stránky.

  • Písmo - Výběr z nabídky přednastavených fontů, které se použijí ve všech textech mimo nadpisů.
  • Rozestup písmen - Nastavení rozestupu mezi jednotlivými písmeny v textech.
  • Písmo - Výběr z nabídky přednastavených fontů, které se použijí ve všech nadpisech.
  • Rozestup písmen - Nastavení rozestupu mezi jednotlivými písmeny v nadpisech.
  • Zarovnání - Zarovnání textů a vybraných prvků grafiky na střed nebo doleva.
  • Výška řádku - Nastavení vzdušnosti řádků textů.
  • Barva textu - Nastavení barvy vybraného textu.

Liniové a ohraničující styly

Nastavte si grafický styl různých linií a ohraničení v grafických prvcích.

Čtěte také: Nátěry palubky a jejich ochrana

Motivy a další nastavení

Motiv nastavuje do pozadí e-shopu vámi vybraný motiv. 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.

  • Povinná pole s obrysem - Zvýrazní pole, které je povinné. Například při registraci zákazníka do e-shopu.

Ukládání a publikování změn

Ukládání změn, které provedete, se provádí 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.

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 pomocí tlačítka Publikovat ve vrchní liště.

Nástroje pro pokročilé úpravy

Simulace velikosti obrazovky

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.

Verze a zálohy

  • 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.
  • 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.
  • Editor kódu: Přesměruje vás do sekce Editor kódu.

Transformace prvků

Transformace různých prvků vám umožní pracovat se stylizací.

Čtěte také: Tvrdé jehlice

Otočení:

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

Posun:

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

Zkosení:

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

Aktualizace grafiky e-shopu

Přijde 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é. 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ů). 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í.

Doporučení pro úpravy grafických šablon
Možnost Popis Poznámka
Základní editace Přemístění bloků, změna barev, fontů. Pro všechny uživatele.
Pokročilé možnosti Transformace prvků, Editor kódu. Doporučujeme pouze zkušeným uživatelům.
Aktualizace šablony Přechod na novou verzi grafické šablony. Ztráta úprav v Editoru kódu, záloha původní grafiky.

Pamatujte, že nastavení Designera, která jsou kompatibilní s novou verzí, zůstanou zachována. Veškerý obsah, který jste vyplnili v administraci e-shopu, zůstává nedotčen.

tags: #blogger #premisteni #postranni #listy #na #druhou

Oblíbené příspěvky: