Für ein einheitliches Erscheinungsbild stellt OBS eine Button-CSS-Vorlage bereit. Dieser Beitrag erklärt die Button-Typen, wie Du eigene Gruppen anlegst und wo Du die Vorlage herunterlädst.
Die Button-Vorlage
HINWEIS
Mit dem neuen OBS-Block-System wird das Erscheinungsbild (Farben, Schriften, Buttons) zentral über das Design Kit gepflegt – nicht mehr je Block oder per eigenem CSS. Eigenes Button-CSS ist damit nur noch ein Sonderfall. Wie der Shop heute aufgebaut wird, zeigt So funktioniert der Shop-Aufbau.
Für ein einheitliches Erscheinungsbild der Buttons stellt OBS eine CSS-Datei bereit. Sie definiert die Zustände aktiv, deaktiviert und Hover und enthält vier Button-Typen als Ausgangspunkt.
Button-Typen
| Typ | Wofür er gedacht ist |
|---|---|
| Primär | zentrale Aktionen wie „In den Warenkorb“ oder „Jetzt kaufen“; auffällig gestaltet |
| Sekundär | unterstützende Aktionen wie „Modell auswählen“ oder „Zur Kasse“; dezenter, meist am häufigsten verwendet |
| Tertiär | nachrangige Aktionen |
| Link | als Textlink gestalteter Button |
Jede Gruppe bringt eigene CSS-Variablen mit, über die Du Farben, Größen und weitere Eigenschaften steuerst.
Eigene Button-Gruppen anlegen
aus den anderen Blöcken – jeder Selektor gehört nur zu einer Gruppe.
- Kopiere den CSS-Variablen-Block einer bestehenden Gruppe.
- Setze die gewünschten Selektoren vor den kopierten Block und entferne diese Selektoren
- Passe die Variablen an (Farben, Größen …).
- Binde den Code in Deine WordPress-Seite oder eine CSS-Datei ein.
Download
Die fertige Vorlage steht zum direkten Verwenden bereit:
- obs-css-button-variable-v1.1.css
- obs-css-button-variable-v1.2.1.css (mit BFSG-Anpassungen)
WEITERLESEN