Testen Sie Vektorschablonen von Beschriftungen mit CSS-Variablen

Was sind vektorbasierte Vorlagen und welche Vorteile bieten sie

Diese Vorlagen sind größtenteils mithilfe sogenannter nativer CSS-Variablen anpassbar, die Codern erlauben, das Aussehen zu ändern oder zu korrigieren, ohne unnötigen zusätzlichen Code schreiben zu müssen. 

Wie man die Funktion testet

Um Variablen in Vorlagen zu aktivieren, muss im Administrationsbereich (Design und Inhalt > Editor) ein Code hinzugefügt werden, der die Vorlage umschaltet:

Jetzt aktualisieren wir die Seite und zeigen uns die Eigenschaften z.B. der Überschrift an, wo wir den folgenden Code sehen werden:

Diese Liste der Variablen lässt sich nach Bedarf sehr leicht anpassen - im Pobo Page Builder erstellen wir eine neue CSS-Anpassung und fügen den folgenden Code ein:

Was alles mit Variablen angepasst werden kann

Mit Variablen können relativ detailliert die Typografie von Überschriften, Aufzählungen, Absätzen usw. (Textgröße, Zeilenabstand, Farbe, Einrückung, ...) sowie von Widgets angepasst werden. Bei komplexeren Widgets können auch Rundungen, Schatten, Farbe usw. verändert werden.

Eine Liste aller Variablen finden Sie auf der Seite https://github.com/pobo-builder/widget-asset/blob/master/src/utils/native-variable.scss . 

Konkretes Beispiel  

Die vektorbasierte Vorlage zeigen wir am ersten E-Shop www.ksd-art.cz, in dem die folgenden Variablen verwendet werden:

Mit diesem einfachen Code kann das Aussehen des E-Shops angepasst werden. 

Beispiel des Aussehens