CSS-Rezepte in X-Bar
Verwende X-Bar CSS-Rezepte, um wiederverwendbare, Kadence-fertige Styles von Eyebrow-Headings bis zu Pseudo-Element-Utilities im Frontend-X-Bar und Block-Editor anzuwenden.
Was CSS-Rezepte sind
CSS-Rezepte sind kuratierte, fertige CSS-Snippets für Kadence, die du aus X-Bar kopierst und auf deine Blöcke anwendest. Jedes Rezept passt zu einem typischen Muster wie gestaltete Eyebrows, Badges, Separatoren oder Farbverlauf-Rahmen, damit du das CSS nicht von Hand schreiben musst.
Jedes Rezept funktioniert gleich:
- X-Bar kopiert das vollständige CSS-Snippet in deine Zwischenablage, wenn du auf ein Rezept klickst.
- Du wählst, wo dieses CSS leben soll, indem du es entweder in den X-Bar-Editor im Frontend oder in den X-Bar-Editor einfügst, der auf einen bestimmten Kadence-Block scoped.
- Danach kannst du Farben, Abstände oder Klassen direkt im eingefügten CSS anpassen, wenn du das Aussehen individualisieren möchtest.
CSS-Rezepte ändern nie direkt deine Theme- oder Plugin-Dateien. Du behältst die Kontrolle darüber, wo jedes Snippet liegt, indem du entscheidest, wo du das CSS einfügst.
Frontend- vs. Block-Editor-Rezepte
CSS-Rezepte gibt es in zwei Haupttypen, je nachdem, wo du sie anwendest und was sie ansprechen.
Frontend-Rezepte
Frontend-Rezepte wirken auf das, was du auf der Live-Seite siehst, wenn du X-Bar im Frontend öffnest.
Verwende Frontend-Rezepte, wenn du:
- Inhalte stylen möchtest, die bereits auf der Seite existieren, zum Beispiel Eyebrows über Überschriften oder Block-Header-Styles.
- Elemente über Selektoren und benutzerdefinierte Klassen ansprechen willst, die du in den Block-Einstellungen hinzufügst (zum Beispiel eine gemeinsame Eyebrow-Klasse für mehrere Überschriften).
- Änderungen vornehmen willst, die alle passenden Elemente auf dieser Seite oder über Templates hinweg betreffen, in denen die gleiche Struktur und Klassen existieren.
Typische Anwendungsfälle:
- Eyebrow-Styles für Abschnittslabel oder Kategorie-Tags.
- Block-Header-Styles, die Abschnitte oder Inhaltsgruppen visuell voneinander trennen.
Entdecke die verfügbaren Frontend-Rezepte:
Block-Editor-Rezepte
Block-Editor-Rezepte hängen direkt an bestimmten Kadence Row Layout- und Section-Blöcken über den X-Bar-Editor innerhalb des Block-Editors.
Verwende Block-Editor-Rezepte, wenn du:
- Styles eng auf eine einzelne Reihe, einen Abschnitt oder ein Set von Spalten beschränken willst.
- Strukturelle Dekorationen wie Trennlinien, Badges oder Farbverlauf-Rahmen hinzufügen möchtest, die zu einem bestimmten Layout-Block gehören, nicht zur gesamten Seite.
- Utilities wiederverwenden willst, indem du dasselbe Rezept in mehrere Blöcke kopierst, jeweils über das Kadence-Selector-Keyword scoped.
Typische Anwendungsfälle:
- Trennlinien unter einem bestimmten Abschnitt.
- Eck-Badges auf ausgewählten Cards oder Preistabellen.
- Farbverlauf-Rahmen um Spalten in einem Feature-Grid.
Entdecke die verfügbaren Block-Editor-Rezepte:
So verwendest du CSS-Rezepte
Nutze das Recipes-Panel, um CSS in wenigen Klicks zu durchsuchen, zu sehen und zu kopieren und es dann dort einzufügen, wo es wirken soll.
Öffne das Recipes-Panel
- Klicke auf den Sterne-Button (✨) in der Fußzeile von X-Bar.
- X-Bar öffnet das Recipes-Panel an der Seite, gruppiert nach Rezept-Typ (zum Beispiel Eyebrow Styles, Pseudo-Element-Utilities).
Wähle ein Rezept aus
- Klappe eine Rezeptgruppe auf, indem du auf ihren Titel klickst.
- Scanne die Rezeptnamen und Kurzbeschreibungen, bis du das Muster findest, das du brauchst (zum Beispiel eine Eyebrow-Pill oder eine Trennlinie).
Kopiere das CSS in deine Zwischenablage
- Klicke einmal auf einen Rezeptnamen.
- X-Bar kopiert das vollständige CSS-Snippet in deine Zwischenablage; du siehst oder bearbeitest den Code nicht im Panel selbst.
Füge es im richtigen Editor ein
- Für Frontend-Rezepte fügst du in den X-Bar-Editor im Frontend ein, sodass das CSS auf das zielt, was du gerade siehst.
- Für Block-Editor-Rezepte wählst du den Kadence Row Layout- oder Section-Block aus, den du stylen möchtest, und fügst dann in den X-Bar-Editor für diesen ausgewählten Block im Editor ein.
- Passe Klassen oder Inhalte im CSS entsprechend der Hinweise auf der jeweiligen Rezeptseite an, wenn du bestimmte Elemente anvisieren musst.
Last updated 2 days ago
Built with Documentation.AI