Vektorové šablóny:

prečo ich používať a na čo slúžia

Vektorové šablóny predstavujú jednoduchý systém štýlovania popiskov (widgetov) pri produktoch, kategóriách a článkoch na blogu. Vďaka týmto šablónám možno vytvoriť rozmanitý a rozmanitý dizajn stránok pomocou CSS premenných, ktoré určujú vzhľad popiskov.

V nasledujúcom článku popíšeme jednoduché príklady, ako docieliť zmenu rozostupov medzi widgetmi, zmenu veľkosti nadpisov od H2 po H4, odsekov, odrážok a ďalších prvkov. Ďalej si vysvetlíme tzv. "scope systém", vďaka ktorému je možné meniť vzhľad konkrétneho widgetu pri konkrétnom produkte, kategórii alebo článku.

Struktúra widgetov 

Pre správne pochopenie vektorových šablón je nevyhnutné ukázať kód widgetov. Každý obsahuje HTML, ktoré je nastylované BEM metodikou, čo zaručuje stabilný vzhľad a predvídateľné správanie. Nastavenie vzhľadu widgetov a ich obsahu možno nastaviť pomocou tzv. CSS premenných, ktoré sa vytvárajú a upravujú v editore kódu.

Predtým, ako začneme tvoriť prvý dizajn, musíme sa uistiť, že majú v nastavení režimu vzhľadu zvolenú možnosť "Generický systém štýlovania popiskov". Ďalej v sekcii "Vzhľad" zvoľte "Pobo original".

V prípade, že chceme zmeniť typografiu nadpisov (H2, H3, H4) vo wysiwyg editore, môžeme meniť vlastnosti ako je veľkosť, tučnosť, farba, výška riadkovania, typ fontu, vonkajší a vnútornéodsadenie. V neposlednom rade môžete využiť (v predvolenom nastavení vypnuté) before pseudo elementy.

U nadpisov sa nastavujú tieto premenné:

Pre úpravu nadpisov vytvoríme v sekcii “Vzhľad” nový kód s názvom “Úprava typografie” a vložíme do neho nasledujúci obsah:

Ako zistiť, ktoré prvky je možné upravovať pomocou premenných

Najrýchlejší spôsob je tzv. inspekcia kódu, kde stačí kliknúť napr. na odsek pravým tlačítdkom myši a z roletkového menu vybrať "Inspekcia kódu" alebo "Preskúmať" (v závislosti od operačného systému a prehliadača). Následne sa otvorí panel, v ktorom je v ľavéj časti HTML popisku a pravéj časti zoznam premenných.

Premenné začínajúcé s prefixom --pobo-* je možné preklikať a zistiť ich východiskové hodnoty. Následne je možné ich upraviť.

Všetky widgety majú v predvolenom nastavení nasledujúcu maximálnu šírku, margin a padding:

Tieto hodnoty je možné upraviť podľa potreby, napr. znížiť padding, čím sa zmenšuje priestor medzi widgetmi. Dôležité je aj poznamenať, že sa aplikujú pre všetky widgety, avšak existuje cesta, ako nastaviť konkrétnemu widgetu konkrétne vlastnosti, ako je pozadie, odsadenie a pod.  

Existujú situácie, keď je potrebné ovplyvniť konkrétny widget konkrétneho produktu, kategórie alebo článku blogu. Pre tieto účely sme vytvorili tzv. scope systém, ktorý umožňuje ovplyvňovať vzhľad konkrétneho widgetu (resp. jeho ID). Teraz si ukážeme, ako invertovať widget s pásom ikon, ktorý vidíte na tejto stránke. A to iba pre jeden konkrétny widget, teda v prípade, že rovnaký widget použijete znova, nebudú na neho tieto štýly automaticky aplikované.

Každý widget obsahuje niekoľko kľúčových atribútov, ktoré sú dôležité pre jeho správnu funkciu a úpravy. Pre globálne úpravy konkrétneho widgetu, ktoré budú viditeľné pri každom použití daného widgetu, môžeme využiť atribút data-pobo-widget-id. Tento atribút nesie informáciu o unikátnom ID pre konkrétny widget a je spoločný pre všetky widgety jedného typu.

Pre individuálne úpravy jednotlivých inštancií widgetov je dôležitejší atribút data-pobo-unique-id. Tento atribút je pre každé použitie widgetu unikátny, čo nám umožňuje štýlovať konkrétny widget bez ovplyvnenia ostatných inštancií tohto widgetu.

Praktické použitie v CSS môže vyzerať nasledovne:

Ak máme CSS kód v nasledujúcej podobe, môžeme upravovať iba jeden konkrétny widget. V našom prípade chceme upraviť pozadie widgetu, farbu textu a veľkosť jednotlivých ikoniek. Kompletný kód, ktorý nám pomôže dosiahnuť požadovaný vzhľad widgetu s ikonkami, môže vyzerať takto:

Teraz si na jednoduchom príklade ukážeme, ako postupovať krok za krokom v prípade, že si chcete nejaký widget z našej ponuky upraviť. Na dvoch obrázkoch nižšie vidíte zobrazenie dvoch widgetov, naľavo v Pobo Page Builderi a napravo sú už widgety exportované do e-shopu.

Povedzme, že nám ale tento klasický vzhľad úplne nevyhovuje a chceme vykonať menšie zmeny. Napr. by sme radi zmenili farbu, veľkosť a font nadpisu 2. úrovne. Ako teda na to pomocou vektorových šablón?

Krok č.1 – Vytvorenie Pobo CSS súboru

Prejdite v hornom menu do záložky Vzhľad –> Custom CSS Code a kliknite na tlačidlo "Vytvoriť nový štýl". Štýl pomenujeme napr. "Úprava widgetov s obrázkom vpravo a vľavo" a vložíme nasledujúci HTML kód.

Krok č. 2 – Vyhľadanie premenných

Ešte raz si pripomeňme, aké úpravy chceme vykonať. 

• Farba nadpisu 2. úrovne
• Veľkosť nadpisu 2. úrovne
• Font nadpisu 2. úrovne

Zameriame sa teda na nadpis, pretože tu teraz budeme vykonávať úpravy. Prejdeme na náš produkt na e-shope. Označíme si nadpis pomocou myši, klikneme naň pravým tlačidlom a vyberieme "Preskúmať alebo Skontrolovať prvok". Teraz by sme mali v prehliadači vidieť túto časť CSS kódu.

Krok č. 3 – Vloženie do CSS

Skopírujeme si len premenné, ktoré nás budú zaujímať. Teda premenné u font-size, color a font-family. Postačí nám len názvy týchto premenných, (ktoré vždy začínajú dvoma pomlčkami) a vložíme ich do nášho CSS kódu, ktorý sme si predtým vytvorili.

Krok č. 4 – Naplnenie hodnotami

Teraz už nám stačí iba HTML kód naplniť hodnotami, ktoré potrebujeme. Veľkosť textu sa najčastejšie určuje v pixeloch. Teda môžete vyskúšať napr. hodnotu 30px a následne upravovať podľa svojho najlepšieho úsudku. U fontu stačí ako hodnotu vložiť do úvodzoviek jeho názov napr. "Impact" a u farby jeho hexadecimálny kód. Napríklad pre červenú farbu: #ed0004

V editore klikneme na tlačidlo uložiť a môžeme ísť pozrieť sa na zmeny do e-shopu.