Przetestuj szablony wektorowe etykiet za pomocą zmiennych CSS

Czym są szablony wektorowe i jakie mają zalety

Te szablony są w dużej mierze konfigurowalne przy użyciu tzw. natywnych zmiennych CSS, które pozwalają koderom dostosować lub poprawić wygląd bez konieczności pisania dodatkowego zbędnego kodu. 

Jak przetestować funkcję

W celu włączenia zmiennych w szablonach należy w administracji (Wygląd i zawartość > Edytor) dodać kod, który przestawi szablon:

Teraz odświeżamy stronę i wyświetlamy właściwości np. nagłówka, gdzie zobaczymy następujący kod:

Listę tych zmiennych można łatwo dostosować według potrzeb - w Pobo Page Builder tworzymy nową modyfikację CSS i jako kod wstawiamy następujący:

Co można dostosować za pomocą zmiennych

Za pomocą zmiennych można dość szczegółowo dostosować typografię nagłówków, punktów, akapitów itp. (rozmiar tekstu, interlinię, kolor, odstępy, ...) tak samo jak u widgetów. W bardziej skomplikowanych widgetach można zmieniać również zaokrąglenia, cienie, kolor itp.

Listę wszystkich zmiennych znajdziesz na stronie https://github.com/pobo-builder/widget-asset/blob/master/src/utils/native-variable.scss . 

Konkretny przykład  

Szablon wektorowy pokażemy na pierwszym e-sklepie www.ksd-art.cz, w którym użyto następujące zmienne:

Za pomocą tego prostego kodu można dostosować wygląd do danego e-sklepu. 

Podgląd wyglądu