Eyebrow - Icon 01
Füge mit dem Eyebrow Icon 01 CSS-Rezept in X-Bar und der wpt-eyebrow-Klasse ein kompaktes quadratisches Icon vor Kadence Advanced Heading Eyebrows hinzu.
Was Eyebrow Icon 01 macht
Eyebrow Icon 01 fügt ein kompaktes, quadratisches Icon vor einem Eyebrow-Label in Kadence Advanced Heading-Blöcken hinzu, die die benutzerdefinierte Klasse wpt-eyebrow verwenden.
Das Rezept:
-
Rendert vor dem Eyebrow-Text ein kleines Quadrat über das
::beforePseudo-Element. -
Nutzt die aktuelle Textfarbe für die Quadratkontur, damit der Look zu deinem Design passt.
-
Lässt das Label fett und in Großbuchstaben, sodass es weiterhin klar als Abschnittslabel lesbar bleibt.
Nutze dieses Rezept, wenn du einen dezenten, geometrischen Akzent möchtest, der den Eyebrow visuell an die Hauptüberschriftfarbe bindet.
Eyebrow-Rezepte stylen ein kleines Label oberhalb einer Überschrift. Alle Eyebrow-Rezepte, inklusive Icon 01, zielen auf Kadence Advanced Heading-Blöcke mit der benutzerdefinierten Klasse wpt-eyebrow.
Erwartete Selektoren und Struktur
Eyebrow Icon 01 erwartet:
-
Blocktyp: Kadence Advanced Heading.
-
Benutzerdefinierte Klasse am Block:
wpt-eyebrow. -
Eyebrow-Textposition: Das Überschriftenfeld innerhalb dieses Kadence-Blocks.
Das CSS-Rezept, das du aus X-Bar kopierst, zielt auf die Klasse wpt-eyebrow und nutzt ein ::before Pseudo-Element, um das quadratische Icon vor dem Label-Text zu zeichnen.
Wenn du mehrere Eyebrow-Styles im gleichen Layout verwendest, kannst du sie mischen – wichtig ist nur, dass jeder Kadence Advanced Heading-Block die passende Eyebrow-Klasse zugewiesen bekommt.
Eyebrow Icon 01 anwenden
Kadence Advanced Heading-Block hinzufügen
-
Füge an der gewünschten Stelle einen Kadence Advanced Heading-Block für deinen Eyebrow-Text ein.
-
Gib deinen Eyebrow-Text (zum Beispiel
Featured Story) in das Überschriftenfeld ein.
Die Eyebrow-Klasse hinzufügen
-
Wähle den Kadence Advanced Heading-Block aus.
-
Suche in der Sidebar der Blockeinstellungen das Feld Zusätzliche CSS-Klasse(n).
-
Trage dort
wpt-eyebrowein.
Rezept aus X-Bar kopieren
-
Öffne X-Bar.
-
Gehe im Bereich Frontend Recipes zu Eyebrow – Icon 01.
-
Kopiere das angezeigte CSS-Rezept in deine Zwischenablage.
CSS im X-Bar-Editor einfügen
-
Öffne deinen X-Bar-Editor, in dem du eigenes CSS verwaltest.
-
Füge das Eyebrow Icon 01 CSS-Rezept in den Editor ein.
-
Speichere oder aktualisiere die X-Bar-Konfiguration.
Deine Seite sollte jetzt den Eyebrow-Text fett, in Großbuchstaben und mit einem kleinen quadratischen Icon vor dem Label anzeigen.
Anpassen und Troubleshooting
Die meisten Anpassungen für Eyebrow Icon 01 nimmst du direkt im CSS innerhalb von X-Bar vor (zum Beispiel Quadratgröße, Rahmenstärke oder Abstand zwischen Quadrat und Text).
Wenn das Icon nicht erscheint, prüfe zuerst, ob der Kadence-Block wirklich ein Advanced Heading ist und ob die Klasse wpt-eyebrow korrekt und ohne zusätzliche Leerzeichen eingetragen wurde.
Typische Checks:
-
Stelle sicher, dass nur die Blöcke, die wie ein Eyebrow aussehen sollen, die Klasse
wpt-eyebrowverwenden. -
Leere den Cache von Caching- oder Performance-Plugins, nachdem du das X-Bar CSS aktualisiert hast.
-
Prüfe, ob kein Theme- oder Plugin-CSS das
::beforePseudo-Element fürwpt-eyebrowüberschreibt.
Verwandte Rezepte und Ressourcen
Last updated today
Built with Documentation.AI