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. Tip! Je možné ji upravit v souboru _variables.scss v Editoru kódu, proměnná $white.
  • Základní barva - Nastavuje se v designerovi. Barva textů a tmavých ploch. 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 nepříjemně ostře.
  • Světlé barvy - Světlé odstíny generující se na barevné škále od bílé do základní barvy. Systém odstíny využívá pro obarvení světlejších prvků. Tip! Je možné ji upravit v souboru _variables.scss v Editoru kódu, proměnná $default.
  • Doplňková barva - Nastavuje se v designerovi. Barva konverzních tlačítek a marektingově poutavých ploch jako jsou např. bannery.
  • Černá barva - Systémová barva. Tip! Je možné ji upravit v souboru _variables.scss v Editoru kódu, proměnná $black.
  • Ostatní barvy - Barvy speciálních prvků jako jsou upozorňovací texty a plochy, štítky atd. Tip! Je možné je upravit v souboru _variables.scss v Editoru kódu, proměnné $red, $yellow, $green, $cyan.

Funkce

  • Základní a doplňková barva - Nastavení barev z palety možností. Na základě tohoto nastavení je možné provádět lokální obarvování jednotlivých komponent. Např. změnit hlavičku do tmavých barev atd. Více zde.
  • Barevné přechody - Aktivace barevných přechodů v tlačítcích od světléjšího 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.

Video návod

Upozornění! Vzhled rozhraní a některé funkce modulu Designer se v aktuální verzi trochu liší od verze, pro kterou byl natočený tento video návod.

Diskuse
Často se ptáte