Nová generace šablon nabízí rozšířený editor šablony, pomocí kterého dokážete bez zásahů zkušeného kodéra snadno vyladit barevnost a základní design tak, aby odpovídal vašemu brandingu či představám.

Pamatujte, že rozšířený editor šablony je aktivní pouze u nové generace šablon 4.0.

Kde editor najdete?

Vstupte do Nastavení → Design → Editovat šablonu.

Nechcete-li, aby prováděné změny viděli vaši zákazníci ihned veřejně na e-shopu, doporučujeme aktivovat tzv. pracovní mód. Prováděné změny pak vidíte pouze vy během přihlášení do administrace, nikdo jiný, dokud se nerozhodnete je vypublikovat ven veřejně. Více v návodu Používání pracovního módu.

Tip pro šablonu New York
Barevnost šablony je laděna vždy do určitého spektra. Např. šablona New York byla odladěna na světlé barevné tóny. Pokud šablonu nastavíte na tmavý tón (viz. obrázek níže), mohou se některé prvky stát těžko čitelné (viz. obrázek níže) a nejdou dále v editoru odladit. Barevné úpravy proto provádějte v kontextu celé šablony a vždy s ohledem na barevné spektrum, pro které je šablona určena!

Práce s editorem šablony

Pomocí rozšířeného editoru máte rozsáhlé možnosti úprav barvy textů, nadpisů, tlačítek – včetně rozdílné barvy po najetí myší (tzv. hover efekt), barvy hlavičky, patičky, pozadí atd. Pro snadnější orientaci, jak se které nastavení projeví na vašem e-shopu, naleznete níže na obrázku přehled, na jakých místech můžete změnu na e-shopu očekávat.

Některé konkrétní nastavení se projeví na více místech šablony. Příklad v návodu je uveden na šabloně New York. Prvky, které nastavení editoru ovlivňuje, se u dalších šablon verze 4.0 mohou (a budou) pochopitelně měnit.

Vzhled a možnosti editoru šablony

Očíslované možnosti nastavení v editoru. Příslušné editační číslo naleznete dále ve vzorové ukázkové šabloně, abyste měli lepší představu, co které nastavení ovlivňuje.

Úprava barevnosti šablony

Hlavní barva šablony

Vedlejší barva šablony

Barva konverzních tlačítek (bližší popis viz. samostatný bod níže)

Barva obecných tlačítek

Barva obecných tlačítek 2

Ještě jednou připomínáme, že se jedná o ukázku práce s editorem na šabloně New York. Rozložení prvku je tedy ilustrativní a u dalších šablon se může měnit.

Barva konverzních tlačítek

Konverzní tlačítka představují velmi důležitý grafický prvek vašeho e-shopu a jejich barevnost byste měli upravovat uvážlivě! Jedná se totiž o tlačítka, přes která zákazníci vkládají zboží do košíku a následně prochází celým objednávkovým procesem.

Základní poučka zní, že konverzní tlačítko (zejména nákupní tlačítko na detailu produktu) by mělo být kontrastní ke svému okolí. Tedy aby v kontextu designu stránky vždy upoutalo pozornost a nezapadlo.

Můžete editovat základní barvu konverzních tlačítek (3) i barvu tlačítek po najetí myši. Konverzní tlačítka a s tím související objednávkový proces představují úzce spojený řetězec na sebe navazujících kroků. Barva konverzních tlačítek (3) je proto automaticky generována v předdefinovaném poměru také na další prvky (iii), které pak společně tvoří barevnou spojnici důležitých kroků.

Barevnost písma, hlavičky, pozadí a patičky

Písmo šablony

Barva e-shopového menu
Barva článkového menu
Barva textů
Barva nadpisů

Hlavička

Obrázek loga
Barva pozadí

Informační lišta

Barva pozadí
Barva textu

Pozadí stránek

Barva pozadí
Obrázek pozadí (volitelně může být, na obrázku není)
Obrázek pozadí lze zvolit fixní / pohyblivý

Patička

Barva pozadí
Barva textu
Barva nadpisu
Barva odkazu

Favicon

Obrázek favicon

CSS

Slouží k ruční editaci CSS stylů. Nedoporučujeme upravovat bez odborného zásahu. Grafik vám tímto způsobem může nicméně poupravit v podstatě jakýkoli prvek na stránce – jeho pozici, barvu, orámování,… možnosti jsou nekonečné.

HTML kód

Slouží pro vložení vlastních HTML bloků (doporučujeme vkládat pouze grafické úpravy, pro vložení scriptů a negrafických kódů využijte k tomu určenou sekci v E-shop → Měřící kódy → Vlastní kódy).

Vkládat lze takto do záhlaví (nad celým tělem webu, tedy i nad hlavičkou), nebo do zápatí (pod celým designem webu, tedy i pod patičkou) – ilustrativní rozložení viz. níže.







Nové rozvržení patičky a editor patičky nabízí zcela nové možnosti editace. Podívejte se na podrobnější návod na práci s patičkou.

Názvosloví rozložení bloků a prvků šablony

Záhlaví
Hlavička
Produktové menu kategorií e-shopu
Rotátor obrázků
Levý sloupec – Novinky, blogové články, sloupcový odběr newsletteru, prostor pro vlastní obsah
Výpis produktů
Řádkový widget pro přihlášení k odběru newsletteru
Prostor nad patičkou
První sloupec patičky
Druhý sloupec patičky
Třetí sloupec patičky
Čtvrtý sloupec patičky tzv. kontaktní box
Patička
Zápatí

Aktualizováno dne: 23/08/2024