Editor Rezepte

Separator Line Editor-Rezept

Füge mit dem X-Bar Separator Line (::after) Rezept eine horizontale Linie unter einem Kadence Row Layout oder Section Block hinzu, ohne zusätzliche Divider-Blöcke.

Separator Line (::after) Überblick

Separator Line fügt unter einem Kadence Row Layout- oder Section-Block eine horizontale Linie ein, ohne zusätzliche Divider-Blöcke in deinem Inhalt zu platzieren.

Nutze dieses Rezept, wenn du eine klare, vollbreite Trennlinie zwischen größeren Seitenabschnitten brauchst und gleichzeitig deine Block-Struktur schlank und das Layout leicht zu pflegen bleiben soll.

Separator Line ist ein Editor-Rezept. X-Bar hängt die Styles direkt an den ausgewählten Kadence-Block an und scoped sie so, dass der Separator nur die Ausgabe dieses Blocks beeinflusst.

Wo Separator Line wirkt

Separator Line zielt ausschließlich auf Container-Blöcke, die größere Layout-Sektionen definieren.

Unterstützte Blöcke: Kadence Row Layout- und Section-Blöcke im Block-Editor.
Scope: X-Bar nutzt das Kadence Selector-Keyword, damit das CSS nur auf die Ausgabe des ausgewählten Blocks wirkt und nicht auf andere Rows oder Sections.
Ergebnis: Die Separator-Linie erscheint direkt unter genau dieser Row oder Section und bildet eine klare visuelle Grenze zum nachfolgenden Inhalt.

Wenn du einen Separator brauchst, der sich über mehrere Blöcke oder Bereiche erstreckt, nutze stattdessen einen normalen Divider-Block oder eine entsprechende Theme-Layout-Option.

Separator Line im Block-Editor anwenden

Nutze X-Bar, um das Separator Line-Rezept an ein beliebiges Kadence Row Layout oder eine Section anzuhängen.

Kadence Container auswählen

Klicke im Block-Editor den Kadence Row Layout- oder Kadence Section-Block an, den du vom Inhalt darunter trennen möchtest.
Prüfe in der Seitenleiste oder in der Breadcrumb-Navigation, dass du wirklich die Row oder Section selbst ausgewählt hast – nicht eine innere Spalte oder einen verschachtelten Block.

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

Lass den Block ausgewählt und öffne X-Bar, damit das X-Bar Editor-Panel sichtbar wird.
Kontrolliere, ob X-Bar genau diesen Block als aktuelles Ziel für Rezepte und Styles anzeigt.

Separator Line Rezept einfügen

Klicke im X-Bar Editor in den Bereich für Block-spezifisches CSS des ausgewählten Blocks.
Füge den Separator Line (::after) Rezept-Code in dieses Editorfeld ein.
X-Bar speichert das Rezept als Styles, die nur auf dieses konkrete Kadence Row Layout oder diese Section angewendet werden.

Layout aktualisieren und prüfen

Aktualisiere oder speichere die Seite und öffne danach die Vorschau im Frontend.
Prüfe, ob direkt unter der gewählten Row oder Section eine horizontale Linie erscheint, die sie vom folgenden Inhalt trennt.
Wenn der Separator an der falschen Stelle auftaucht, kontrolliere erneut, ob X-Bar wirklich mit der richtigen Row oder Section verknüpft ist.

Wie Separator Line funktioniert

Separator Line nutzt ein Pseudo-Element, damit du kein zusätzliches Markup oder neue Blöcke einfügen musst.

Verwendet das ::after Pseudo-Element: Das Rezept hängt mit CSS ::after eine visuelle horizontale Linie an den Zielblock an, sodass der Separator Teil der Ausgabe dieses Blocks ist.
Positioniert die Linie unter dem Block: Das Pseudo-Element sitzt unterhalb des eigentlichen Inhaltsbereichs der Row oder Section und erzeugt einen klaren Bruch vor dem nächsten Block.
Respektiert Kadence Global Spacing: Der Abstand zwischen Inhalt und Separator-Linie nutzt die Kadence Global Spacing Variable, damit der vertikale Abstand konsistent mit dem generellen Spacing-System deiner Website skaliert.
Begrenzt die Breite auf die Content-Breite: Auch wenn die Linie optisch die Section trennt, ist ihre effektive Breite auf die globale Content-Breite begrenzt, sodass sie sich sauber an deine Content-Spalte und das Typografie-Raster anpasst.

Da das Rezept auf Block-Ebene angehängt wird und das Kadence Selector-Keyword nutzt, kannst du Separator Line auf mehreren Rows oder Sections wiederverwenden, ohne dass sie sich gegenseitig beeinflussen.

Wann du dieses Rezept nutzen solltest

Separator Line eignet sich am besten für strukturelle Abschnittstrenner und weniger für feingliedrige Trennungen innerhalb von Inhalten.

Nutze es, wenn du:

Einen konsistenten Abschnittsseparator über längere Seiten hinweg möchtest, zum Beispiel zwischen größeren Content-Bändern.
Trennung zwischen vollbreiten Rows brauchst, die denselben Hintergrund haben und bei denen Abstand allein nicht ausreicht.
Einen systematischen visuellen Rhythmus suchst, der sich sauber in Kadence Global Spacing- und Content-Breite-Einstellungen einfügt.

Vermeide es, wenn:

Du nur eine kleine, Inline-Markierung innerhalb von Text brauchst; nutze dafür besser eine Text- oder Icon-Lösung.
Die Trennung stark dekorativ und nur für eine einzelne Section gedacht ist; erstelle dafür besser ein individuelles Block-Design statt eines wiederverwendbaren Rezepts.