Test vector label templates using CSS variables

What are vector templates and what are their advantages

These templates are largely configurable using i.e. native CSS variables that allow coders to modify or fix the look without writing extra code.

How to test the function

To enable variables in templates, you need to add code in the administration (Appearance and Content > Editor) that will switch the template:

Now refresh the page and view the properties of e.g. the title, where you will see the following code:

The list of these variables can be edited as needed very easily - in Pobo Page Builder create a new CSS edit and insert the following as code:

What all can be modified using variables

You can use variables to modify the typography of headings, bullets, paragraphs, etc. (text size, line spacing, color, indentation, ...) in quite a bit of detail, as well as for widgets. For more complex widgets, you can also change the rounding, shadows, color, etc.

A list of all variables can be found at https://github.com/pobo-builder/widget-asset/blob/master/src/utils/native-variable.scss.

A concrete example

We will demonstrate the vector template on the first e-shop www.ksd-art.cz, which uses the following variables:

This simple code can be used to customize the look and feel of the e-shop.

Sample appearance