Zpět na blog

Brand & Design

Váš eshop je největší součástí vaší značky. To, jak se zákazníci budou při nakupování cítit značně ovlivní, jak si váš brand zafixují v hlavě. Při výběru barev, loga, fotek i textů je proto třeba přemýšlet, jak má vaše značka působit.

V této kapitole se dáme do tvorby obsahu vašeho webu. Nainstalujeme si šablonu a plugin, který nám pomůže s tvorbou designu. Nadesignujeme si menu, patičku a vytvoříme vzhled úvodní stránky.

Základní pravidla

Nejprve několik pravidel, kterými je dobré řídit se při tvorbě designu eshopu:

  • Zachovejte jednotný styl napříč vašimi marketingovými kanály. Použijte stejné logo, barvy i podobný styl písemné komunikace na vašich sociálních médiích, na webu i v emailech.
  • Zvolte si logo, které je dobře čitelné i v malých formátech.
  • Logo by mělo dávat smysl ať už je barevné nebo černobílé.
  • Barvy volte podle vaší cílovky – cílíte na mladé ženy nebo na starší muže?
  • Nemixujte příliš mnoho barev dohromady. I lentilky mají čistě bílé logo obtáhnuté hnědou barvou.
  • Nepoužívejte font Comic Sans. Fakt ne. Zákaz. Vyberte takový font, který podtrhne atmosféru vašeho produktu, ale zároveň je dobře čitelný a nepůsobí amatérsky.
  • Celkově nemixujte více než 2, maximálně 3 hlavní fonty.
  • Text by měl být vždy kontrastní s pozadím, aby šel snadno přečíst. Nevolte proto světle šedou barvu textu na bílém pozadí, což je v posledních letech docela trend.

Výběr šablony

Vzhled webu budeme upravovat pomocí populárního pluginu Elementor ve spojení se šablonou OceanWP. Je to jako když se čokoláda spojí s karamelem. Samy o sobě chutnají skvěle, ale dohromady tvoří božské kombo dosahující delikátnosti nepopsatelné slovy.

Šablon existují tisíce a jejich procházením můžete strávit celé dny, ale pokud jde o tvorbu eshopu, nenarazil jsem na vhodnější šablonu, než je OceanWP.

Plugin, česky zásuvný modul, je rozšíření, které webu přidává nové funkce. Takových pluginů (placených i neplacených) je nepřeberné množství, kdokoliv totiž může vytvořit plugin a zpřístupnit ho ostatním ke stažení. Ať už budete v budoucnu potřebovat jakékoliv rozšíření funkčnosti webu, na 99.99% pro to již někdo vytvořil plugin.

OceanWP a Elementor vám umožní přizpůsobit si design dle svého gusta a ušetří vám obrovské množství času. Pokud navíc nejste graficky zdatní, oceníte možnost tvorby stránek pomocí stovek připravených designů jednotlivých prvků i celých hotových stránek.

K efektivní a snadné tvorbě stránek pomáhá placené rozšíření Elementoru – Elementor Pro. Jeho výhody a také postupy, jak s ním pracovat, představuji v kompletním PDF průvodci založením e-shopu, který jsem vydal v rámci svého projektu SellOnline.

 

1. krok
Přejděte do záložky Vzhled > Šablony a klikněte na tlačítko Instalovat.

Jak na eshop – Nastavení šablon 1
2. krok
Vyhledejte šablonu OceanWP a nainstalujte ji. Jakmile se doinstaluje, klikněte na Aktivovat. Při načtení webu zjistíte, že se jeho vzhled změnil.

Jak na eshop – Nastavení šablon 2
3. krok
Abychom využili plný potenciál této skvělé šablony, bude třeba nainstalovat 3 pluginy, které s ní pracují. Jedním z nich je již zmiňovaný Elementor. Klikněte proto na “Begin installing plugins”.

Jak na eshop – Nastavení šablon 3
4. krok
Označte všechny pluginy a zvolte možnost Instalovat. Pokud v seznamu některé z pluginů nemáte, v levém menu přejděte do Pluginy > Instalovat a vyhledejte daný plugin. Následně u něho klikněte na Instalovat a poté Aktivovat.

Jak na eshop – Nastavení šablon 4

Vytvoření stránek

Než se dáme do upravování vzhledu webu, je třeba vytvořit několik základních stránek jako je Úvodní stránka, Obchod, O nás a Kontakt.

Rozdíl mezi stránkami a příspěvky je ten, že stránky jsou převážně statické, často se nemění (úvodní stránka, kontakt, obchodní podmínky,…). Jako příspěvky jsou ve WordPressu značeny články blogu a ty při tvorbě našeho eshopu nevyužijeme.

Pojďme tedy vytvořit 4 základní stránky!

Stránka Úvod

  1. Navigujte do Stránky > Přehled stránek.
  2. Smažte zkušební stránku.
  3. Klikněte na Vytvořit stránku
  4. Pojmenujte ji například Úvod.
  5. Nascrollujte níže a zvolte Content layout “100% Full Width” a jako šablonu stránky “Elementor celá šířka”. Tím docílíme toho, aby úvodní stránka byla roztažena přes celou šířku prohlížeče.Jak vytvořit eshop – jak vytvořit stránky 2
  6. Klikněte na Publikovat nebo Publish v pravém horním rohu (zeptá se vás to na potvrzení, odsouhlaste).

Stránka Obchod

  1. Znovu klikněte na Vytvořit stránku.
  2. Pojmenujte ji Obchod nebo třeba Eshop.
  3. Content layout zvolte “Full width” a šablonu “Elementor celá šířka”.
  4. Klikněte Publikovat.

Stránka O nás

Opakujte postup z druhého bodu.

Stránka Kontakt

Opakujte postup z druhého bodu.

Tímto byste měli získat 4 stránky.

Jak vytvořit eshop – jak vytvořit stránky 2

Nyní zabrouzdejte do Nastavení > Zobrazování a jako úvodní stránku dejte zobrazit Statickou stránku Úvod.

Jak vytvořit eshop – jak vytvořit stránky 3

Menu

Vytvořené stránky použijeme jako odkazy do hlavního menu webu.

  1. Přejděte na Vzhled > Menu
  2. Zadejte název menu a vytvořte ho. Jak vytvořit eshop - nastavení menu 1
  3. V levé části označte vytvořené stránky a přidejte je do menu. Jak vytvořit eshop - nastavení menu 2
  4. Upravte pořadí stránek jejich přetažením do kýžené pozice (jako první Úvod, poté nejspíše Obchod, O nás a na konec umístěte Kontakt) a klikněte na Aktualizovat menu.

Hlavní funkcí menu je orientace na webu. Proto ho udržujte přehledné a jasné.

Patička (footer)

Patička webu slouží ke 3 hlavním účelům:

  1. Orientace na webu – do patičky je vhodné umístit odkazy na všechny důležité stránky na vašem webu. V našem případě to znamená stránky Domů, O nás, Obchod, Kontakt a přibudou tam i Obchodní podmínky, Ochrana osobní údajů a EET. Tato orientace se netýká pouze lidí, ale i internetových robotů, například těch od Googlu nebo Seznamu, kteří skenují váš web. Aby se v něm vyznali a mohli váš eshop lépe zobrazovat ve vyhledávání, je dobré mít v patičce přehlednou strukturu odkazů.
  2. Poskytnutí informací – telefonní číslo a email, odkazy na sociální média, v případě kamenného obchodu otevírací doba.
  3. Akce – přihlášení do Newsletteru, like na Facebookový profil atd.

Lidé v patičkách svých webů také často uvádějí copyright. (Určitě znáte to céčko v kolečku.) Uvedení copyrightu na webu ale nemá v České republice žádný význam. To proto, že vám při vytvoření webu, zveřejnění článku nebo vytvoření jakéhokoliv jiného autorského díla vzniká copyright automaticky, nemusíte ho na svém webu uvádět (pokud ho nechcete jako dekoraci).

Design patičky upravíte v záložce Vzhled > Přizpůsobit > Patička.

Pokud si chcete patičku (footer) nebo i hlavičku (header) webu nadesignovat úplně podle sebe, využijte placený modul Elementor Pro. Stojí cca 1000 Kč ročně a vytvoříte s ním naprosto cokoliv. Společně s WP Rocket (optimalizace rychlosti) to jsou jediné dva placené pluginy, jejichž zakoupení opravdu doporučuji.

Přizpůsobení vzhledu

Nainstalovali jsme šablonu, vytvořili základní stránky a přidali je do menu. Teď začíná legrace – jdeme upravit vzhled webu k obrazu svému. Klikněte na Vzhled > Přizpůsobit. Zde si můžete pohrát se vším různým nastavením. Nebudu zabíhat do detailů, ale ukáži vám pár základních věcí.

  1. Jako první klikněte na Menu > Hlavní menu a zvolte možnost umístění menu v šabloně na pozici “Main”. Tímto umístíme naše vytvořené menu do hlavičky webu.Jak na eshop – Přizpůsobení vzhledu šablony 1
  2. Nyní odstraníme prázdný panel na vrchu obrazovky, který nepotřebujeme. Vraťte se o 2 kroky zpět z navigujte do Top Bar > General a odškrtněte možnost Enable top bar.
  3. V Header > Menu nastavíme vzhled menu. Změním efekt při najetí myší na položky menu a také změním jejich barvu. Jak na eshop – Přizpůsobení vzhledu šablony 3
  4. V Header > Logo změním barvu loga při najetí myší také na oranžovohnědou. Zde také můžete nahrát své logo. Já si vystačím pouze s psaným názvem webu. Ten ale v následujícím kroku lehce upravím.
  5. Typografie > Logo. Font family: Trocchi. Font weight (tloušťka písma): Medium. Font size (velikost): 22px. Letter spacing (mezery mezi písmeny loga): 3.
  6. Typography > Main menu. Font family: Trocchi. Font size (velikost textu): 14px. Letter spacing: 1. Jak na eshop – Přizpůsobení vzhledu šablony 4
  7. Takto si můžete dále hrát se vzhledem webu, upravit typografii nadpisů, vzhled menu a patičky atd. Např. v General styling si nastavíte hlavní barvu webu (já použil #dd9933) a barvu při najetí myší (o něco světlejší / tmavší). V General settings jsem nastavil Layout: Fullwidth, abych při každém tvoření stránky nemusel znovu zadávat, že chci stránku roztáhnout na celou šířku.

Při designování pamatujte na pravidla ze sekce Tvorba brandu – použijte vámi zvolené barvy, fonty a nepřeplácejte to.

Homepage

Základní nastavení vzhledu bychom měli, teď se pustíme do detailů. Začneme hezky od začátku – od úvodní stránky! A protože je většinou to první stránka, kterou návštěvník (potenciální zákazník) uvidí, musíme jí vyšperkovat. To nám naštěstí usnadní plugin Elementor.

  1. Přejděte na detail stránky Úvod (Stránky > Přehled stránek > Úvod).
  2. V nastavení stránky klikněte na Title a u Display Page Title přepněte na Disabled. Tím skryjeme nadpis stránky a můžeme si celou homepage vytvořit podle sebe.Jak vytvořit eshop – jak vytvořit stránky 1b
  3. Klikněte na modré tlačítko Upravit s Elementorem. Teleportuje vás to do módu editace stránky, kde můžete přidávat jednotlivé prvky jako jsou textové bloky, obrázky, tlačítka, mapy google, prostě cokoliv.
  4. My si usnadníme práci a použijeme předpřipravenou šablonu. Klikněte na tlačítko složky. Jak vytvořit eshop - vytvoření úvodní stránky 2
  5. Mohli bychom stránku budovat postupně pomocí bloků, vložíme ale rovnou celou předpřipravenou stránku. Vyhledejte “business” a vložte šablonu s kulatým obrázkem.Jak vytvořit eshop - vytvoření úvodní stránky 3
  6. Booooom! Elementor vytvořil celou stránku za nás. Pecka, ne? Obsah je trochu užší, než naše menu, tak ho upravíme. Najeďte myší na obsah a klikněte na ikonku 6 teček. Jak vytvořit eshop - vytvoření úvodní stránky 4
  7. Šířku obsahu upravíme na 1200px, poté vybereme levý sloupec a v záložce Pokročilé změníme vnitřní levé odsazení na 0. Jak vytvořit eshop - vytvoření úvodní stránky 5
  8. Změníme texty, barvy a nastavíme odkaz tlačítka na naší vytvořenou stránku Obchod (nebo jakkoliv jinak jste si ji pojmenovali).Jak vytvořit eshop - vytvoření úvodní stránky 6

Další postup je již na vás. Já jsem postupoval takto:

  1. Odstranil jsem pravý sloupec pomocí kliknutí pravého tlačítka a Odstranit. Jak vytvořit eshop - vytvoření úvodní stránky 7
  2. Přes celé pozadí jsem přidal fotku, kterou jsem si stáhnul na pexels.com Jak vytvořit eshop - vytvoření úvodní stránky 8
  3. Fotce jsem nastavil barevný odstupňovaný překryv (hnědý vlevo, průhledný vpravo), abych více zčitelnil text. Jak vytvořit eshop - vytvoření úvodní stránky 10
  4. Dále jsem odstranil dvě sekce úvodní stránky a přidal 2 nové sekce kliknutím na modré tlačítko se symbolem plus. Tentokrát jsem využil šablon jednotlivých bloků, ne celé stránky Jak založit eshop - homepage přidání sekce přes ElementorJak založit eshop - homepage přidání sekce přes Elementor 2Jak vytvořit eshop - vytvoření úvodní stránky 11homepage sekce3 minJak vytvořit eshop - vytvoření úvodní stránky 12
  5. Tímto je úvodní stránka hotová, prohlédněte si ji na www.pouziteknizky.cz.

Podobně si můžete nadesignovat i ostatní stránky webu.

Rejstřík

Úvod
1. kapitola: Byznys plán
2. kapitola: Doména a webhosting
3. kapitola: Instalace WordPressu a doporučených pluginů
4. kapitola: Design & Brand
5. kapitola: Instalace WooCommerce a nastavení produktů
6. kapitola: Doprava
7. kapitola: Platby
8. kapitola: Administrativa
9. kapitola: Marketing
Bonus: Mindset a automatizace

Vít Aora

EMOČNÍ OČISTA: ZAČÍNÁME UŽ BRZY!

7. dubna 2024 začne skupinový online kurz emoční očisty.

Budeme se učit lépe pracovat s emocemi a čistit usazenou emoční zátěž, která blokuje přirozený proud naší energie a radosti. Společně se s pomocí funkčních technik osvobodíme od tlaku negativity a vplujeme do větší lehkosti a pohody.

 

Chcete zjistit více a být u toho?

Všechny informace najdete zde:

Vodopád emoční očista