Editor Rezepte

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 einzelne Karten oder Elemente (zum Beispiel einen hervorgehobenen Preistarif) innerhalb eines Kadence Row Layouts oder einer Section badgen 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 mit einem Badge versehen möchtest.
Prüfe, ob der Block ausgewählt ist, damit 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 auf den aktuellen Block beschränkt sind.
Füge das Container Badge ::before-Rezept in den X-Bar Editor ein, während der Block noch ausgewählt ist, damit das CSS nur an diesen Block angehängt wird.

Badge an bestimmte Kindelemente anhängen

Füge im Block-Editor die Ziel-Klasse (standardmäßig .replace-me-class) zu den inneren Blöcken hinzu, die das Badge erhalten sollen (zum Beispiel einzelne Karten-Container).
Stelle sicher, dass diese Kindelemente position: relative verwenden, damit das ::before-Badge an deren rechter oberer Ecke andocken kann.
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.