Tento návod vás provede procesem vytvoření obrázkových odkazů na kategorie a podkategorie na úvodní straně vašeho e-shopu pomocí textového editoru v administraci.

Krok 1: Vytvoření nového článku na úvodní stranu

Přihlaste se do administrace vašeho e-shopu.
Přejděte do sekce Obsah → Obsah webu → Úvodní strana webu.
Klikněte na tlačítko Přidat nový článek na úvodní stranu nebo upravte existující článek, který chcete použít pro zobrazení obrázkových odkazů.



V tomto návodu si ukážeme, jak vytvořit tabulku, která byla nastylovaná naším grafikem a má tak určité zobrazení, stíny a efekty, a jak vytvořit čistou tabulku bez stylování (tu si pak pomocí CSS můžete sami upravit do požadované podoby. Pamatujte, že nenastylovaná tabulka se nepřizpůsobuje mobilním zařízením).

1. Nenastylovaná tabulka

V článku si vytvořte tabulku, která bude reflektovat počet požadovaných kategorií (například 1x4 nebo třeba 2x3).



Do každé buňky tabulky vložte připravený obrázek, který bude kategorii reprezentovat. Postupujte krok za krokem dle obrázků níže:



























Článek uložte a podívejte se, jak vypadá výsledek na domovské stránce vašeho e-shopu!

2. Nastylovaná tabulka – responzivní:

Postupujte stejně jako v předchozích krocích. Pokud chcete v každém řádku mít jiný počet bannerů (obrázků), pak vytvořte vždy tabulku s jedním řádkem a pod ni pak další s dalším řádkem atp.
Každá tabulka by tedy měla mít 1 řádek a počet sloupců (max. 4) podle toho, kolik chcete mít v daném řádku kategorií – obrázků. Viz ukázka:



V případě použití našeho stylu je nutné pod obrázek vložit text (pomocí klávesy enter na nový řádek v rámci téže buňky) a odkaz vkládat jen na tento text, nikoli na samotný obrázek.

Abyste mohli aplikovat námi připravený styl, nejprve si raději tento článek uložte.

Poté do něj vstupte znovu a v textovém editoru klikněte na tlačítko "Zdrojový kód".



Zde můžete vidět, že pro každou tabulku (pamatujte, máme zde vloženy 2 pod sebou) je tu samostatný zápis. Nás bude zajímat vždy tag "table":



Do něj je nutné vložit styl. To provedete tak, že přímo za "table" vložíte mezeru a za ní jeden z následujících zápisů, kdy číslo na konci značí, kolik obrázků se v daném řádku nachází:

class="homepage-categories homepage-categories--col-1"
class="homepage-categories homepage-categories--col-2"
class="homepage-categories homepage-categories--col-3"
class="homepage-categories homepage-categories--col-4"

Zdrojový kód našeho příkladu vypadá následovně, všimněte si, že pro první tabulku jsme vložili zápis s číslem 3 a pro druhou s číslem 2:



Okno se zdrojovým kódem uložte, stejně tak i celý článek. Na domovské stránce e-shopu by pak náš příklad vypadal takto:



V ukázce vidíte, že obrázky se přizpůsobily velikosti plochy a v řádku, kde jsou dva obrázky, jsou tyto větší, než v prvním řádku, kam se musely vejít obrázky tři. Po najetí na kategorii můžete také vidět hover efekt.

Tabulek pod sebe si můžete vložit, kolik chcete, pamatujte na to, že:

Každá tabulka musí mít jeden řádek.
Pod každý obrázek je nutné pomocí klávesy "enter" vložit text – název kategorie.
Obrázky by měly mít stejnou velikost.
Do jednoho řádku je možné vložit i jen jeden obrázek – buňku.
Takováto tabulka je responzivní a přizpůsobuje se tak různým zařízením.

Aktualizováno dne: 09/09/2024