Eyebrow Styles

Eyebrow Pill 01

Verwandle dein Eyebrow-Label in ein weiches, gefülltes Pillen-Badge, das sich aus deiner ersten Akzentfarbe tönt und auf unterschiedlichen Hintergründen gut lesbar bleibt.

Eyebrow - Pill 01

Was Eyebrow – Pill 01 macht

Eyebrow – Pill 01 verwandelt dein Eyebrow-Label in ein gefülltes, pillenförmiges Badge, das hinter dem Text liegt, statt ihn zu unterstreichen oder zu umranden.

Nutze dieses Rezept, wenn du Folgendes möchtest:

Ein Badge-ähnliches Label, das das Eyebrow klar von der Hauptüberschrift trennt
Eine dezente, markengerechte Füllfarbe, die sich automatisch an deine erste Palettenfarbe anpasst
Gute Lesbarkeit auf hellen und mittleren Hintergründen, ohne Farben manuell anpassen zu müssen

Das Rezept hält die Typografie konsistent mit anderen Eyebrow-Styles, sodass du zwischen ihnen wechseln kannst, ohne den Kadence-Block neu zu konfigurieren.

Alle Eyebrow-Rezepte teilen sich das gleiche Grund-Setup:

Füge einen Kadence Advanced Heading-Block für deinen Eyebrow-Text ein.
Füge in den Block-Einstellungen die benutzerdefinierte Klasse wpt-eyebrow hinzu.
Öffne X-Bar, kopiere das gewünschte Eyebrow-CSS-Rezept und füge es in den X-Bar-Editor ein.

Sobald diese Basis steht, kannst du zwischen Eyebrow-Rezepten wechseln, indem du nur das CSS in X-Bar austauschst.

Eyebrow – Pill 01 Rezept anwenden

Eyebrow-Text hinzufügen

Füge dort, wo du das Eyebrow-Label haben möchtest, einen Kadence Advanced Heading-Block ein.
Trage deinen Eyebrow-Text ein, zum Beispiel: Featured insight oder New.

Deine Seite sollte jetzt den schlichten Eyebrow-Text über oder neben deiner Hauptüberschrift anzeigen.

Die gemeinsame Eyebrow-Klasse hinzufügen

Wähle den Advanced-Heading-Block aus und öffne die Erweitert-Einstellungen.
Gib im Feld Zusätzliche CSS-Klasse(n) wpt-eyebrow ein.

Nach diesem Schritt ist der Block bereit, jedes Eyebrow-Rezept zu übernehmen, das du über X-Bar lädst.

Eyebrow – Pill 01 CSS in X-Bar einfügen

Öffne X-Bar in deinem WordPress-Admin.
Suche im X-Bar-Editor den Bereich, in dem du Frontend Recipes oder benutzerdefiniertes CSS verwaltest.
Füge das Eyebrow – Pill 01 CSS-Rezept in den Editor ein.
Speichere oder aktualisiere deine Änderungen.

Lade eine Seite neu, auf der die wpt-eyebrow-Überschrift verwendet wird. Du solltest jetzt eine abgerundete, gefüllte Pillenform hinter dem Eyebrow-Text sehen.

Darstellung prüfen und Abstände anpassen

Prüfe, ob das Eyebrow als abgerundete Pille mit einem weichen, markengerechten Hintergrund erscheint.
Stelle sicher, dass der Text vor deinem Seitenhintergrund weiterhin gut lesbar ist.
Falls nötig, optimiere die umliegenden Abstände über die Layout-Steuerung des Blocks (Margin, Padding), ohne das Rezept-CSS zu ändern.

Wenn alles ausgewogen aussieht, ist dein Eyebrow – Pill 01 Setup abgeschlossen.

Wie Eyebrow – Pill 01 funktioniert

Eyebrow – Pill 01 legt den Eyebrow-Text in einen abgerundeten Hintergrund und macht daraus ein pillenförmiges Badge, das direkt hinter dem Label sitzt.

Auf Farbebene macht das Rezept Folgendes:

Es nutzt die CSS-Funktion color-mix(), um eine ~15% Tönung deiner ersten Palettenfarbe zu erzeugen.
Es verwendet diese Tönung als Eyebrow-Hintergrund, damit die Pille automatisch zu deiner globalen Palette passt.
Es hält die Typografie konsistent mit anderen Eyebrow-Rezepten, sodass sich nur der Hintergrundstil ändert.

Um mit älteren oder eingeschränkten Browsern kompatibel zu bleiben, enthält das CSS ein Fallback: Wenn color-mix() nicht unterstützt wird, fällt der Hintergrund auf transparent zurück. So behältst du ein sauberes Eyebrow-Label ohne kaputte oder unpassende Farbe.

Diese Kombination gibt dir ein Badge-artiges Eyebrow, das bewusst gestaltet und markenkonform wirkt, ohne dass du für jede Website manuell Farben auswählen musst.

Eyebrow Pill 01

Eyebrow - Pill 01

Was Eyebrow – Pill 01 macht

Eyebrow – Pill 01 Rezept anwenden

Wie Eyebrow – Pill 01 funktioniert

Verwandte Rezepte und Ressourcen