Styling-Überblick
Jedes Badge hat seine eigenen Styling-Felder. Was Sie leer lassen, fällt auf den Slot, dann die Platzierung, dann die Globalstandards zurück. Diese Seite dokumentiert die verfügbaren Felder und die Auflösungsreihenfolge.
Verfügbare Stilfelder
Abschnitt betitelt „Verfügbare Stilfelder“Dieselbe Menge Felder existiert auf einem Badge, einem Slot, einer Platzierung und den Globalstandards:
| Feld | Wirkung |
|---|---|
| Hintergrundfarbe | Hintergrundfüllung (beliebige CSS-Farbe). |
| Textfarbe | Farbe von Text und Inline-Icon. |
| Schriftgröße | Größe des Badge-Texts. |
| Zeilenhöhe | Vertikaler Abstand des Badge-Texts. |
| Padding | Innenabstand zwischen Text und Badge-Kante. |
| Margin | Außenabstand um das Badge. |
| Gap | Abstand zwischen Text und Icon. |
| Rahmenradius | Eckenrundung (auf 0 setzen für Eckbänder). |
| Backdrop-Filter | CSS-backdrop-filter (z.B. blur(8px)) für Milchglas-Effekte. |
| Icon-Größe | Größe des SVG-Icons, falls vorhanden. |
| Flex-Richtung | Reihenfolge von Text und Icon (row, row-reverse, column, column-reverse). |
Alle Werte verwenden intern CSS Custom Properties — sie integrieren sich sauber in jedes Theme.
Vererbungsreihenfolge
Abschnitt betitelt „Vererbungsreihenfolge“Stile werden von höchster zu niedrigster Priorität aufgelöst. Die erste Ebene mit nicht-leerem Wert gewinnt:
- Das Badge — sein eigenes Styling überschreibt alles.
- Die Platzierung — wenn das Badge eine Nicht-Overlay-Platzierung verwendet (über/unter Kaufbox, über/unter Produktinfo), gelten als nächstes die Platzierungs-Defaults.
- Der Slot — wenn das Badge das Bild-Overlay verwendet, gelten als nächstes die Defaults des linken oder rechten Slots.
- Die Globalstandards — die Werte im Tab Badge-Standards der globalen Konfiguration gelten zuletzt.
Ein Wert auf Badge-Ebene überschreibt alles andere — selbst wenn Slot und Globalstandards uneins sind, gewinnt das Badge.
Wann Defaults vs. Pro-Badge-Werte setzen
Abschnitt betitelt „Wann Defaults vs. Pro-Badge-Werte setzen“- Globalstandards — wählen Sie Werte, die zur visuellen Sprache Ihres Shops passen. Die meisten Badges sollten ohne Pro-Badge-Styling „gut genug” aussehen.
- Slot-Defaults — verwenden Sie sie, wenn eine Seite des Bildes einen eigenen Stil braucht (z.B. Eckbänder rechts mit wuchtigem Padding, flache Sticker links mit engem Padding).
- Platzierungs-Defaults — setzen Sie sie, wenn über-Kaufbox- und unter-Kaufbox-Badges unterschiedliche Optik brauchen (z.B. größer oben, kleiner unten).
- Pro Badge — überschreiben Sie nur, was wirklich badge-spezifisch ist (die Markenfarbe einer Kampagne, eine übergroße Schrift für eine Hero-Promotion).
Farben mit Backdrop-Filter kombinieren
Abschnitt betitelt „Farben mit Backdrop-Filter kombinieren“Für Milchglas-Effekte paaren Sie einen Backdrop-Filter wie blur(8px) mit einem halbtransparenten Hintergrund wie rgba(255, 255, 255, 0.6). Das Plugin gibt diese als CSS Custom Properties aus, sodass der Effekt auf jedem Bildhintergrund funktioniert.
Live-Vorschau
Abschnitt betitelt „Live-Vorschau“Das Badge-Bearbeitungsformular bietet ein Vorschau-Panel (Umschalter im Header). Es rendert in Echtzeit neu, während Sie ein Stilfeld bearbeiten. Schalten Sie die Vorschau zwischen Platzierungen um, um zu prüfen, wie das Badge in jeder Position aussieht.
Siehe Live-Vorschau-Tipps für mehr.