Vektorové šablony:

proč je používat a k čemu slouží

Vektorové šablony představují jednoduchý systém stylování popisků (widgetů) u produktů, kategorií a článků na blogu. Díky těmto šablonám lze vytvořit různorodý a rozmanitý design stránek pomocí CSS proměnných, které definují vzhled popisků.

V následujícím článku popíšeme jednoduché příklady, jak docílit změny rozestupů mezi widgety, změny velikosti nadpisů od H2 po H4, odstavců, odrážek a dalších prvků. Dále si vysvětlíme tzv. "scope systém", díky kterému lze měnit vzhled konkrétního widgetu u konkrétním produktu, kategorii nebo článku.

Struktura widgetů 

Pro správné pochopení vektorových šablon je nutné ukázat kód widgetů. Každý obsahuje HTML, které je nastylované BEM metodikou, což zaručuje stabilní vzhled a předvídatelné chování. Nastavení vzhledu widgetů a jeho obsahu lze nastavit pomocí tzv. CSS proměnných, které se vytváří a upravují v editoru kódu.

Předtím, než začneme tvořit první design, musíme se ujistit, že máme v nastavení režimu vzhledu zvolenou možnost "Generický systém stylování popisků". Dále v sekci "Vzhled" zvolte "Pobo original". 

V případě, že chceme změnit typografii nadpisů (H2, H3, H4) ve wysiwyg editoru, můžeme měnit vlastnosti jako je velikost, tučnost, barvu, výšku řádkování, typ fontu, vnější a vnitřní odsazení. V neposlední řadě také můžete využít (ve výchozím nastavení vypnuté) before pseudo elementy.

U nadpisů se nastavují tyto proměnné:

Pro úpravu nadpisů vytvoříme v sekci „Vzhled“ nový kód s názvem „Úprava typografie“ a vložíme do něj následující obsah:

Jak zjistit, které prvky lze upravovat pomocí proměnných

Nejrychlejší způsob je tzv. inspekce kódu, kdy stačí kliknout např. na odstavec pravým tlačítkem myší a z roletkového menu vybrat "Inspekce kódu" nebo "Prozkoumat" (v závislosti na operačním systému a prohlížeči). Následně se nám otevře panel, ve kterém je v levé části HTML popisku a pravé části seznam proměnných.

Proměnné začínající s prefixem --pobo-* lze je prokliknout a zjistit tak jejich výchozí hodnoty. Následně je lze upravit.

Všechny widgety mají ve výchozím nastavení následující maximální šířku, margin a padding:

Tyto hodnoty lze upravit podle potřeb, např. snížit padding, a tím se zmenšit prostor prostor mezi widgety. Důležité je také zmínit, že se aplikují pro všechny widgety, nicméně existuje cesta, jak nastavit konkrétnímu widgetu konkrétní vlastnosti, jako je pozadí, odsazení a pod.   

Existují situace, kdy je potřeba ovlivnit konkrétní widget konkrétního produktu, kategorie nebo článku blogu. Pro tyto účely jsme vytvořili tzv. scope systém, který umožňuje ovlivňovat vzhled konkrétní widgetu (resp. jeho ID). Nyní si ukážeme, jak invertovat widget s pásem ikon, který vidíte na této stránce. A to pouze pro jeden konkrétní widget, tedy v případě, že stejný widget použijete znovu, nebudou na něj tyto styly automaticky aplikovány. 

Každý widget obsahuje několik klíčových atributů, které jsou důležité pro jeho správnou funkci a úpravy. Pro globální úpravy konkrétního widgetu, které budou viditelné při každém použití daného widgetu, můžeme využít atribut data-pobo-widget-id. Tento atribut nese informaci o unikátním ID pro konkrétní widget a je společný pro všechny widgety jednoho typu.

Pro individuální úpravy jednotlivých instancí widgetů je důležitější atribut data-pobo-unique-id. Tento atribut je pro každé použití widgetu unikátní, což nám umožňuje stylovat konkrétní widget bez ovlivnění ostatních instancí tohoto widgetu.

Praktické použití v CSS může vypadat následovně:

Pokud máme CSS kód v následující podobě, můžeme upravovat pouze jeden konkrétní widget. V našem případě chceme upravit pozadí widgetu, barvu textu a velikost jednotlivých ikonek. Kompletní kód, který nám pomůže dosáhnout požadovaného vzhledu widgetu s ikonkami, může vypadat takto:

Nyní si na jednoduchém příkladu ukážeme, jak postupovat krok za krokem v případě, že si chcete nějaký widget z naší nabídky upravit. Na dvou obrázcích níže vidíte zobrazení dvou widgetů, nalevo v Pobo Page Builderu a napravo jsou již widgety vyexportovány do e-shopu. 

Řekněme, že nám ale tento klasický vzhled úplně nevyhovuje a chceme provést menší změny. Např. bychom rádi změnili barvu, velikost a font nadpisu 2. úrovně. Jak tedy na to pomocí vektorových šablon?

Krok č.1 – Vytvoříme si v Pobo CSS soubor

Přejděte v horním menu do záložky Vzhled –> Custom CSS Code a klikněte na tlačítko "Vytvořit nový styl". Styl pojmenujeme např. "Úprava widgetů s obrázkem vpravo a vlevo" a vložíme následující HTML kód.

Krok č. 2 – Vyhledání proměnných

Ještě jednou si připomeňme, jaké úpravy chceme provést. 

• Barva nadpisu 2. úrovně
• Velikost nadpisu 2. úrovně
• Font nadpisu 2. úrovně

Zaměříme se tedy na nadpis, protože zde nyní budeme provádět úpravy. Přejdeme na náš produkt na e-shopu. Označíme si nadpis za pomocí myši, klikneme na něj pravým tlačítkem a zvolíme "Prozkoumat nebo Zkontrolovat prvek". Nyní bychom měli v prohlížeči vidět tuto část CSS kódu.  

Krok č. 3 – Vložení do CSS

Zkopírujeme si jen proměnné, které nás budou zajímat. Tedy proměnné u font-size, color a font-family. Postačí nám jen názvy těchto proměnných, (které vždy začínají dvěma pomlčkami) a vložíme je do našeho CSS kódu, který jsme si předtím vytvořili. 

Krok č. 4 – Naplnění hodnotami

Nyní už nám stačí jen HTML kód naplnit hodnotami, které potřebujeme. Velikost textu se nejčastěji určuje v pixelech. Tedy můžete vyzkoušet např. hodnotu 30px a následně upravovat podlé svého nejlepšího mínění. U fontu stačí jako hodnotu vložit do uvozovek jeho název např. "Impact" a u barvy její hexadecimální kód. Například pro červenou barvu: #ed0004

V editoru klikneme na tlačítko uložit a můžeme se jít podívat na změny do e-shopu.