Vektorschablonen:

warum sie nutzen und wozu sie dienen

Vektorschablonen stellen ein einfaches System zur Stilgestaltung von Beschriftungen (Widgets) bei Produkten, Kategorien und Blogartikeln dar. Dank dieser Schablonen lässt sich ein vielfältiges und abwechslungsreiches Design von Seiten mittels CSS-Variablen erstellen, die das Aussehen der Beschriftungen definieren.

Im folgenden Artikel beschreiben wir einfache Beispiele, wie Änderungen bei Abständen zwischen Widgets, Größenänderungen der Überschriften von H2 bis H4, Absätzen, Aufzählungszeichen und weiteren Elementen erreicht werden. Zudem erklären wir das sogenannte "Scope-System", mit dem das Aussehen eines bestimmten Widgets bei einem bestimmten Produkt, einer Kategorie oder einem Artikel geändert werden kann.

Struktur der Widgets

Um das Verständnis von Vektorschablonen zu erleichtern, ist es notwendig, den Code der Widgets zu zeigen. Jedes enthält HTML, das mit der BEM-Methodik gestylt ist, was ein stabiles Aussehen und vorhersehbares Verhalten gewährleistet. Die Aussehensgestaltung der Widgets und ihres Inhalts kann über sogenannte CSS-Variablen vorgenommen werden, die im Code-Editor erstellt und bearbeitet werden.

Bevor wir das erste Design erstellen, müssen wir sicherstellen, dass wir im Moduseinstellungen das „Generische Beschriftungsstil-System“ als Option gewählt haben. Weiterhin im Abschnitt „Erscheinungsbild“ wählen Sie „Pobo original“.

Wenn wir die Typografie von Überschriften (H2, H3, H4) im wysiwyg-Editor ändern möchten, können wir Eigenschaften wie Größe, Fettgedrucktheit, Farbe, Zeilenhöhe, Schriftart, äußere und innere Abstände ändern. Schließlich können Sie auch die (standardmäßig deaktivierten) Before-Pseudoelemente verwenden.

Bei Überschriften werden diese Variablen eingestellt:

Zur Anpassung der Überschriften erstellen wir im Abschnitt „Aussehen“ einen neuen Code namens „Typografie Anpassung“ und fügen den folgenden Inhalt ein:

Wie man herausfindet, welche Elemente mittels Variablen angepasst werden können

Der schnellste Weg ist die sogenannte Code-Inspektion, wobei es genügt, beispielsweise auf einen Absatz mit der rechten Maustaste zu klicken und im Dropdown-Menü "Code-Inspektion" oder "Untersuchen" (abhängig vom Betriebssystem und Browser) auswählen. Anschließend öffnet sich ein Panel, in dem in der linken Seite das HTML des Beschriftungcodes und in der rechten Seite eine Liste der Variablen zu sehen sind.

Variablen, die mit dem Präfix --pobo-* beginnen, können angeklickt werden, um ihre Standardwerte zu erfahren. Anschließend können sie angepasst werden.

Alle Widgets haben standardmäßig die folgende maximale Breite, Margin und Padding:

Diese Werte lassen sich je nach Bedarf anpassen, beispielsweise das Padding reduzieren, was den Raum zwischen den Widgets verringert. Es ist auch wichtig zu erwähnen, dass sie für alle Widgets angewendet werden, dennoch gibt es einen Weg, einem bestimmten Widget spezifische Eigenschaften zuzuweisen, wie Hintergrund, Abstände usw.   

Es gibt Situationen, in denen es notwendig ist, ein bestimmtes Widget eines bestimmten Produkts, einer Kategorie oder eines Blogartikels zu beeinflussen. Zu diesem Zweck haben wir das sogenannte Scope-System geschaffen, das es ermöglicht, das Aussehen eines bestimmten Widgets (d.h. seine ID) zu beeinflussen. Jetzt zeigen wir, wie ein Widget mit einem Icons-Band invertiert wird, welches Sie auf dieser Seite sehen. Und das nur für ein bestimmtes Widget, das heißt, wenn Sie das gleiche Widget erneut verwenden, werden diese Stile nicht automatisch angewendet. 

Jedes Widget enthält mehrere Schlüsselattribute, die wichtig für seine ordnungsgemäße Funktion und Anpassungen sind. Für globale Anpassungen eines bestimmten Widgets, die bei jeder Nutzung des jeweiligen Widgets sichtbar werden, können wir das Attribut data-pobo-widget-id verwenden. Dieses Attribut trägt die Information über eine einzigartige ID für ein bestimmtes Widget und ist bei allen Widgets eines Typs gleich.

Für individuelle Anpassungen einzelner Instanzen der Widgets ist das wichtigere Attribut data-pobo-unique-id. Dieses Attribut ist bei jeder Nutzung eines Widgets einzigartig, was uns ermöglicht, ein bestimmtes Widget ohne Beeinflussung anderer Instanzen dieses Widgets zu stylen.

Eine praktische Verwendung in CSS könnte wie folgt aussehen:

Wenn wir den CSS-Code im folgenden Format haben, können wir nur ein bestimmtes Widget anpassen. In unserem Fall möchten wir den Hintergrund des Widgets, die Textfarbe und die Größe der einzelnen Icons anpassen. Der vollständige Code, der uns hilft, das gewünschte Aussehen des Icon-Widgets zu erreichen, könnte wie folgt aussehen:

Jetzt zeigen wir anhand eines einfachen Beispiels, wie man Schritt für Schritt vorgeht, wenn man ein Widget aus unserem Angebot anpassen möchte. Auf den zwei Bildern unten sehen Sie die Darstellung von zwei Widgets, links im Pobo Page Builder und rechts sind die Widgets bereits in den E-Shop exportiert. 

Sagen wir, dieser klassische Look entspricht nicht ganz unseren Vorstellungen und wir möchten einige kleinere Änderungen vornehmen. Beispielsweise würden wir gerne die Farbe, Größe und Schriftart der Überschrift der 2. Ebene ändern. Wie machen wir das mit Hilfe von Vektorschablonen?

Schritt Nr. 1 – Erstellen Sie eine Pobo CSS-Datei

Gehen Sie im oberen Menü auf den Reiter Erscheinungsbild –> Benutzerdefinierter CSS-Code und klicken Sie auf die Schaltfläche „Neuen Stil erstellen“. Den Stil benennen wir beispielsweise „Anpassung von Widgets mit Bild rechts und links“ und fügen den folgenden HTML-Code ein.

Schritt Nr. 2 – Suchen der Variablen

Erinnern wir uns noch einmal daran, welche Anpassungen wir vornehmen möchten. 

• Farbe der Überschrift der 2. Ebene
• Größe der Überschrift der 2. Ebene
• Schriftart der Überschrift der 2. Ebene

Wir konzentrieren uns also auf die Überschrift, denn hier werden wir jetzt Anpassungen vornehmen. Wir gehen zu unserem Produkt im E-Shop. Wir markieren die Überschrift mit der Maus, klicken mit der rechten Maustaste darauf und wählen „Untersuchen oder Element prüfen“. Nun sollten wir in unserem Browser diesen Teil des CSS-Codes sehen.  

Schritt Nr. 3 – Einfügen ins CSS

Wir kopieren nur die Variablen, die uns interessieren. Das wären die Variablen bei Schriftgröße, Farbe und Schriftfamilie. Es reicht nur die Namen dieser Variablen zu haben (die immer mit zwei Bindestrichen beginnen) und sie in unseren CSS-Code einzufügen, den wir zuvor erstellt haben. 

Schritt Nr. 4 – Werte einfüllen

Jetzt reicht es aus, den HTML-Code mit den benötigten Werten zu füllen. Die Textgröße wird am häufigsten in Pixeln angegeben. Sie können z. B. den Wert 30px ausprobieren und anschließend nach Ihrem besten Ermessen anpassen. Bei der Schrift muss der Name in Anführungszeichen als Wert eingegeben werden, z. B. „Impact“ und bei der Farbe deren hexadezimale Codierung. Zum Beispiel für die rote Farbe: #ed0004

Im Editor klicken wir auf die Schaltfläche speichern und können uns die Änderungen im E-Shop ansehen.