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. Podle vlastního citu a zkušeností si vytvoříte profesionální grafiku vycházející z vašich individuálních potřeb.

Přejděte do modulu  Grafika / Designer

Jako základ grafiky si vyberte jednu z přednastavených grafik a motivů. Vložte své logo (Logo a favicon), upravte barevnost (Barvy), případně změňte písmo (Texty), zarovnání, ohraničení, případně využijte další rozšířené funkce. Je možné také přizpůsobit vzhled a rozležení e-shopu. Např. si přepnete hlavičku č. 1 na č. 4 a přebarvíte ji do světlého elegantního stylu bez ohraničení.

Podrobnosti, jak pracovat v designerovi, se dozvíte ve video návodu:

Průvodce: Designer - základní nastavení

Průvodce: Designer - vzhled a rozložení e-shopu

Funkce designera

Možnost výběru z široké nabídky přednastavených grafik a hotových grafických motivů.

Průvodce: Základní přednastavení tématu

Vložení loga e-shopu a favicon (ikona v záložce prohlížeče).

Průvodce: Logo a favicon

Vytvoření jednotného barevného stylu dle nastavení základní a doplňkové barvy. Grafické prvky jsou tvořeny ze základní barvy. Pouze u konverzních prvků je použitá barva doplňková. Při určování barev je možné vycházet z barevnosti loga.

K základní a doplňkové barvě se přidají odstíny šedé (zejména v obsahové části grafiky). Toto nastavení se používá v případě, že základní barva je příliš výrazná. Barvy nebudou působit rušivým dojmem, přitom e-shop neztratí na živosti.

Průvodce: Nastavení barev

  • Typ písma - Výběr z nabídky přednastavených fontů nebo možnost vložení vlastního z Google Fonts. Nastavení rozdílného typu písma u nadpisů.
  • Velikost písma.
  • Řádkování.
  • Poměr velikosti nadpisů k běžnému textu.
  • Styl nadpisů - tenký, normální, tučný, zhuštění.
  • Elasticita - zvětšování velikosti fontu při zvětšování velikosti obrazovky.

Průvodce: Písmo a texty

Výchozí zarovnání obsahu a kontejnerů je nastaveno na střed. Máte ale možnost zarovnání vlevo.

Průvodce: Zarovnání obsahu kontejnerů

V rámci jednotného stylu je možné upravit ohraničení grafických prvků tak, aby odpovídalo firemní stylu.

  • Tloušťka - Tloušťka linie ohraničení v pixelech.
  • Styl - Plná, přerušovaná, tečkovaná čára.
  • Zaoblení - Nastavení poloměru zaoblení hran.
  • Kontrast - Ztmavení nebo zesvětlení barvy linie ohraničení.

Průvodce: Ohraničení

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

Průvodce: Další nastavení - stíny

Animace prvků po najetí myší. Animace vybraných prvků po jejich zobrazení na obrazovce.

Máte rádi vzdušnou grafiku nebo šetříte každý pixel, aby toho měl zákazník co nejvíce na jedné obrazovce? V rámci jednotného stylu je možné nastavit velikost rozestupů mezi jednotlivými částmi grafiky.

Průvodce: Další nastavení - zhuštění obsahu

Poskládejte si strukturu e-shopu tak, aby co nejlépe vyhovovala vašemu způsobu prodeje. Z výběru možností rozložení jednotlivých komponent si zvolte tu nejvhodnější. 

Možnosti nastavení:

  • Základní rozložení - Nastavení struktury e-shopu do sloupců.
  • Rozložení stránky - Nastavení hlavní stránky, seznam produktů, detail produktu, textové stránky.
  • Rozložení komponent - Jednotlivé části stránky. Např. hlavička, seznam produktů, bannery, články, patička atd.

Průvodce: Modul Designer - struktura, vzhled a administrace stránek e-shopu

Komponenty máte vybrány, takže se můžete pustit do přizpůsobení jejich vzhledu vašim potřebám.

Např. chcete mít v hlavičce stránky menu v inverzní barvě a zbytek v bílé.

Možnosti barvení:

  • Bílá
  • Bílá s ohraničením
  • Výchozí (světlejší varianty základní barvy)
  • Primární (doplňková barva)
  • Inverzní (základní barva)

Vedle barvení nabízíme ve vybraných komponentách také možnosti zarovnání, vložení obrázku do pozadí a mnoho další užitečných nástrojů.

Průvodce: Modul Designer - struktura, vzhled a administrace stránek e-shopu

Zalóhování podoby grafiky. V budoucnu lze kdykoliv obnovit daný stav.

Průvodce: Základní rozhrání - zálohy

  • Testování responzivity:
    • mobil,
    • tablet,
    • desktop.
  • Zobrazení obsahu:
    • s testovacím obsahem,
    • s vlastním obsahem.

Průvodce: Základní rozhrání - zobrazení modulu

Diskuse