Editor Rezepte

Gradient Section Border (::before)

Erzeuge einen mehrstufigen Farbverlauf-Rahmen um jede Kadence-Spalte in einem Row Layout oder Section-Block mit dem Gradient Section Border Editor-Rezept für X-Bar.

Was das Gradient Section Border-Rezept macht

Gradient Section Border erzeugt einen Verlaufsrahmen um jede Kadence-Spalte innerhalb eines ausgewählten Row Layout- oder Section-Blocks.

Das Rezept verwandelt jede Spalte in ein kartenartiges Panel, dessen Rahmenfarbe aus deinen Design Tokens kommt, während das Innere der Spalte im Block-Editor vollständig transparent und bearbeitbar bleibt.

Gradient Section Border ist ein Editor-Rezept für X-Bar. Es hängt an einem Kadence Row Layout- oder Section-Block im Block-Editor und ist nur auf diesen Block gescoped.

Wie der Gradient Border funktioniert

Das Rezept nutzt ein ::before-Pseudo-Element um jede Kadence-Spalte, um den Verlaufsrahmen zu rendern, ohne deinen eigentlichen Spalteninhalt zu verändern.

Im Kern des Effekts stehen drei CSS-Custom-Properties:

--card-border-width steuert die Dicke des Verlaufsrahmens um jede Spalte.
--card-border-radius definiert, wie stark die Ecken der Karte abgerundet sind, damit du dein Designsystem triffst.
--card-border-gradient legt den mehrstufigen Verlauf für die Rahmenfarben fest.

Das ::before-Pseudo-Element sitzt um jede Spalte herum und nutzt mask-composite: exclude, sodass nur der Rahmen sichtbar ist. Die Maske hält das Spalteninnere transparent und zeigt den Verlauf nur an den Kanten, wodurch die Spalten wie Karten wirken, die auf deine globalen Design Tokens reagieren.

Rezept in X-Bar anwenden

Nutze diesen Ablauf, wenn jede Spalte in einem Kadence Row Layout oder einer Section den Verlaufsrahmen anzeigen soll.

Kadence Row Layout oder Section auswählen

Öffne den Block-Editor für die Seite oder das Template, das du gestalten möchtest.
Klicke den Kadence Row Layout- oder Kadence Section-Block an, der die Spalten enthält, die du in Karten verwandeln möchtest.
Prüfe in der Seitenleiste, dass du den übergeordneten Row- oder Section-Block ausgewählt hast, nicht eine einzelne Spalte.

X-Bar für den gewählten Block öffnen

Lass den Kadence Row Layout- oder Section-Block ausgewählt und öffne X-Bar, damit sich der X-Bar-Editor auf diesen Block fokussiert.
Kontrolliere, dass der X-Bar-Editor anzeigt, dass du CSS für genau diese Row oder Section bearbeitest.

Gradient Section Border-Rezept einfügen

Kopiere das Gradient Section Border (::before)-Rezept aus deiner Rezept-Bibliothek.
Füge das Rezept im X-Bar-Editor ein, während der Kadence Row Layout- oder Section-Block weiterhin ausgewählt ist.
Das Rezept nutzt das Kadence-Selector-Keyword, damit das CSS nur auf diese konkrete Row oder Section im Frontend angewendet wird.

Design Tokens bei Bedarf anpassen

Passe deine Designsystem-Werte für --card-border-width, --card-border-radius oder --card-border-gradient an, wenn du eine andere Rahmendicke, Eckrundung oder einen anderen Verlauf möchtest.
Lade die Seite neu oder nutze die Vorschau: Jede Kadence-Spalte in der Row zeigt nun einen Verlaufsrahmen als Kartenborder, während das Innere transparent bleibt.

Wenn der Rahmen nicht erscheint, prüfe Folgendes:

Das Rezept ist am übergeordneten Kadence Row Layout- oder Section-Block angehängt.
Das Kadence-Selector-Keyword ist vorhanden, damit das CSS korrekt gescoped ist.
Dein Theme oder deine Tokens definieren Werte für die --card-border-*-Custom-Properties.

Warum dieses Rezept auf die Row gescoped ist

Block-Editor-Rezepte für X-Bar hängen direkt an Kadence Row Layout- und Section-Blocks, nicht an einzelnen Spalten.

Indem du das Gradient Section Border-Rezept mit dem Kadence-Selector-Keyword auf die übergeordnete Row oder Section scopest:

Kann das Rezept jede Spalte innerhalb dieser Row konsistent ansprechen.
Bleibt dein Spalteninhalt sauber, während das ::before-Pseudo-Element den visuellen Rahmen übernimmt.
Kannst du dasselbe Rezept auf mehreren Rows wiederverwenden, wobei jede Instanz nur ihren eigenen Block beeinflusst.

So bleiben deine Verlaufsrahmen gut wartbar und passen zur Art, wie Kadence Spalten innerhalb von Rows und Sections strukturiert.

Gradient Section Border (::before)

Was das Gradient Section Border-Rezept macht

Wie der Gradient Border funktioniert

Rezept in X-Bar anwenden

Warum dieses Rezept auf die Row gescoped ist

Verwandte Rezepte und Ressourcen