Hero Color Picker
Hero Color Picker fügt der Seitenleiste des Editors pro Beitrag Steuerelemente für Hintergrund- und Schriftfarbe hinzu, um Elemente mit der Klasse hero-colored per CSS zu stylen.
Funktionen:
– Zwei Farboptionen: Hintergrundfarbe und Schriftfarbe
– Farbwähler bei Bedarf in kompakten Dropdown-Popovers
– Live-Vorschau beider Farben zusammen direkt in der Seitenleiste
– Wendet die ausgewählten Farben auf den Beitragszusammenfassungsbereich im Editor an, für eine realistischere Backend-Vorschau
– Entfernt die Umrandung der Beitragsbild-Vorschau, solange eine benutzerdefinierte Hintergrundfarbe aktiv ist
– Barrierefreiheitsprüfung für WCAG AAA Normal Text mit ERFÜLLT– / NICHT ERFÜLLT-Status
– Das Panel wird nur beim Bearbeiten von Beiträgen (post) angezeigt, nicht in Template-Bearbeitungskontexten
– Fügt eine Core-ähnliche Beitragslistenansicht Hero-Hintergrund hinzu, die nur Beiträge mit benutzerdefinierter Hero-Hintergrundfarbe anzeigt
– Funktioniert auf Elementen mit der CSS-Klasse hero-colored
Gespeichert als Beitragsmetadaten:
– hero_color_picker_hero_color
– hero_color_picker_font_color
Frontend-Ausgabe (nur wenn Werte gesetzt sind):
.hero-colored {
background-color: $background;
color: $font;
}
Wichtige Template-Einrichtung:
– Öffne dein Block-Theme-Template (zum Beispiel Single) im Website-Editor.
– Wähle den Gruppe-Block aus, der die Hero-Stile erhalten soll.
– Füge in den Block-Einstellungen hero-colored zu Zusätzliche CSS-Klasse(n) hinzu.