Container Badge Editor-Rezept

Füge ausgewählten Kind-Blöcken in Kadence Row Layouts oder Sections ein Eck-Badge wie Featured oder On Sale per Container Badge Editor-Rezept in der X-Bar hinzu.

Was das Container Badge Rezept macht

Nutze das Container Badge Rezept, um ein kleines Badge in der Ecke ausgewählter Kindelemente innerhalb eines Kadence Row Layouts oder einer Section zu platzieren.

Das Rezept nutzt ein ::before-Pseudoelement, um ein Badge (zum Beispiel FEATURED, ON SALE, NEW) in der oberen rechten Ecke von Kindelementen zu zeichnen, die zu einer von dir gewählten Klasse passen und auf position: relative gesetzt sind.

Die Container Badge- und Inline Badge-Rezepte werden mit Platzhalter-Selektoren und -Text ausgeliefert, damit du sofort siehst, wo du anpassen musst:

.replace-me-class als Ziel-Selektor
content-Wert wie "NEW", "BETA" oder "PRO"

Wie das Container Badge funktioniert

Das Rezept wird über den X-Bar Editor an ein bestimmtes Kadence Row Layout oder eine Section angehängt. Innerhalb dieses Blocks:

Zielst du Kindelemente an, die mit deinem gewählten Klassen-Selektor übereinstimmen (standardmäßig .replace-me-class).
Gehst du davon aus, dass diese Kindelemente position: relative verwenden, damit das ::before-Pseudoelement an deren Ecken andocken kann.
Positionierst du das Badge standardmäßig in der oberen rechten Ecke, mit Großbuchstaben und einer gut erkennbaren Hintergrundfarbe, sodass es wie eine Flagge wirkt.

Du kannst Varianten des Rezepts erstellen, die das Badge an einer anderen Ecke anheften, die Hintergrundfarbe ändern oder Padding- und Schriftstile anpassen, während das gleiche ::before-Muster erhalten bleibt.

Container Badge Rezept im Block-Editor anwenden

Nutze diesen Ablauf, wenn du bestimmte Karten oder Elemente (zum Beispiel einen hervorgehobenen Preistarif) innerhalb eines Kadence Row Layouts oder einer Section mit einem Badge versehen möchtest.

Kadence Row Layout oder Section auswählen

Öffne die Seite oder das Template im Block-Editor.
Klicke den Kadence Row Layout- oder Section-Block an, der die Elemente enthält, die du badgen möchtest.
Prüfe, ob der Block ausgewählt ist, damit die X-Bar die Controls für genau diesen Block anzeigt.

X-Bar öffnen und Container Badge Rezept einfügen

Öffne das X-Bar Panel für das ausgewählte Kadence Row Layout oder die Section.
Suche den Bereich, in dem du CSS-Rezepte hinzufügen kannst, die nur für den aktuell ausgewählten Block gelten.
Füge das Container Badge ::before-Rezept in den X-Bar Editor ein, während der Block ausgewählt bleibt, damit das CSS nur an diesen Block angehängt wird.

Badge an bestimmte Kindelemente anhängen

Füge im Block-Editor die CSS-Klasse (standardmäßig .replace-me-class) zu den inneren Blöcken hinzu, die das Badge erhalten sollen (zum Beispiel einzelne Card-Container).
Stelle sicher, dass die Klasse der Container genau mit dem Klassen-Selektor übereinstimmt, den du in deinem CSS verwendest.
Aktualisiere oder prüfe die Seite in der Vorschau, um zu sehen, ob nur die Elemente mit deiner gewählten Klasse das Badge anzeigen.

Passe die Platzhalter im Rezept an, bevor du es produktiv einsetzt:

Ersetze .replace-me-class durch einen aussagekräftigen Klassennamen, der zu deinen Ziel-Kindelementen passt (zum Beispiel .plan--featured oder .card--promo).
Ändere den content-Wert von den Platzhalter-Labels ("NEW", "BETA", "PRO") zu dem Label, das Besucher sehen sollen, etwa "FEATURED" oder "LIMITED".

Woran du Erfolg erkennst

Nachdem du gespeichert und die Seite neu geladen hast:

Zeigen nur die Kindelemente mit deiner gewählten Klasse ein kleines Badge in der Ecke an.
Erscheint der Badge-Text in Großbuchstaben mit einer klar erkennbaren Hintergrundfarbe.
Bleiben Layout und Abstände intakt, weil das Badge über ::before an relativ positionierten Kindelementen andockt.

Wenn das Badge nicht erscheint, prüfe, ob der Klassenname in deinem CSS genau mit der Klasse auf dem Kindelement übereinstimmt und ob das Kindelement auf position: relative gesetzt ist.

Badge-Position und -Stil anpassen

Das Basisrezept heftet das Badge an die obere rechte Ecke jedes passenden Kindelements. Du kannst das Rezept für andere Looks anpassen, behältst aber den gleichen Workflow im Editor.

Passe die Position des Badges pro Rezept-Variante an und hänge es weiterhin über X-Bar auf Ebene des Row Layouts oder der Section an.

Erstelle zum Beispiel eigene Varianten, die:

Das Badge oben links anheften, etwa für Labels wie "NEW".
Unten rechts oder unten links für sekundäre Flags oder Meta-Labels nutzen.
Die Offsets so anpassen, dass das Badge Innenabstände oder abgerundete Ecken sauber freistellt.

Hänge jede Variante über X-Bar an den passenden Block und nutze weiterhin dasselbe Klassenmuster auf den Kindelementen.

Nutze das Container Badge Rezept als Ausgangspunkt und passe es an dein Designsystem an:

Aktualisiere den content-Text für deine Labels ("FEATURED", "ON SALE", "POPULAR").
Richte Farben für Hintergrund, Rahmen und Text an deiner Markenpalette aus.
Feineinstellungen bei Padding, Zeichenabstand, Border Radius und Schriftgröße erzeugen Pillen-Badges oder kantigere Label-Stile.

Da das Badge über ::before gezeichnet wird, kannst du das Styling iterieren, ohne die Blockstruktur zu ändern.