Otestujte vektorové šablóny popiskov pomocou CSS premenných

Čo sú to vektorové šablóny a aké majú výhody

Tieto šablóny sú z veľkej časti nastaviteľné pomocou tzv. natívnych CSS premenných, ktoré umožňujú kóderom upraviť alebo opraviť vzhľad bez nutnosti písania zbytočného kódu navyše. 

Ako funkciu otestovať

Pre zapnutie  premenných v šablónách je potrebné v administrácii (Vzhľad a obsah > Editor) pridať kód, ktorý prepne šablónu:

Teraz obnovíme stránku a zobrazíme si vlastnosti napr. nadpisu, kde uvidíme nasledovný kód:

Zoznam týchto premenných je možné upravovať podľa potreby veľmi ľahko - v Pobo Page Builder vytvoríme novú CSS úpravu a ako kód vložíme nasledovný:

Čo všetko lze upraviť pomocou premenných

Pomocou premenných lze upraviť pomerne detailne typografiu nadpisov, odrážok, odsekov atď. (veľkosť textu, riadkovanie, farbu, odsadenie, ...) rovnako aj u widgetov. Pri zložitejších widgetoch lze meniť také zaoblenie, tiene, farbu a pod.

Zoznam všetkých premenných na stránke https://github.com/pobo-builder/widget-asset/blob/master/src/utils/native-variable.scss . 

Konkrétna ukážka  

Vektorovú šablónu si ukážeme na prvom e-shope www.ksd-art.cz, v ktorom sú použité nasledovné premenné:

Pomocou tohto jednoduchého kódu lze vzhľad prispôsobiť danému e-shopu. 

Ukážka vzhľadu