Der Color Picker ermöglicht es dir, Marken-, Standard- und benutzerdefinierte Farben zu definieren und überall auf deinen Seiten anzuwenden – sogar auf einzelne Wörter oder Buchstaben. Dieser Leitfaden erklärt, was der Color Picker ist, warum er wichtig ist und wie du seine Funktionen optimal nutzt.
Was ist der Color Picker?
Der Color Picker ist die Design-Komponente im HighLevel Funnels & Websites Builder, die alle Farben steuert, die du verwendest – von Abschnitt-Hintergründen bis hin zu hyper-spezifischen Text-Highlights.
Zeigt Brand-, Standard- und benutzerdefinierte Farben zusammen an
Unterstützt HEX, RGB und benutzerdefinierte Werte
Erlaubt präzises Styling auf Zeichen- oder Wortebene direkt aus der Inline-Textleiste
Hinweis: Standardfarben können sich im Laufe der Zeit ändern, z. B. durch neue Starter-Designs. Für strikte Marken-Konsistenz: verwende Brand Board Farben oder Globale benutzerdefinierte Farben.
Vorteile des Color Pickers
Einheitliche Palette: Marken-, Standard- und benutzerdefinierte Farben in einem Panel
Pro-Zeichen-Kontrolle: Farbe für einzelne Wörter oder Buchstaben
Benutzerdefinierte Labels: Farben benennen, z. B. „CTA Blue“, für schnelle Wiederverwendung
Formatflexibilität: HEX, RGB oder benutzerdefinierte Werte
Duplicate Protection: Warnung bei doppelten Farbwerten
Kompaktes Layout: Modern, platzsparend und performant
Per-Character und Per-Word Styling
Mit dem Inline-Texteditor kannst du Farben auf einzelne Wörter oder Zeichen anwenden. So kannst du gezielt Akzente setzen und das Design präzise steuern.
Benutzerdefinierte Farb-Labels & Tooltips
Farb-Benennung: Vergib Namen wie „Warning Red“ für neue Farben
Tooltips: Hover über die Farbe zeigt das Label an, damit ähnliche Farbtöne leichter unterschieden werden können
Unterstützte Farbformate
HEX: Sechsstelliger Code, z. B.
#1E90FFRGB: Rot/Grün/Blau-Werte, z. B.
rgb(30,144,255)Custom Values: Dynamische Tokens wie
{{ custom_values.primary_color }}für zentrale Steuerung
Validierung & Duplicate-Color Prevention
Custom Color Validation: Benutzerdefinierte Werte müssen existieren, bevor sie gespeichert werden, um Fehler zu vermeiden
Duplicate Color Prevention: Warnung bei doppelten Farbtönen, Anpassung wird vorgeschlagen
So benutzt du den Color Picker
Schritt 1: Color Picker öffnen
Öffne eine bestehende Funnel- oder Website-Seite
Wähle einen Abschnitt, ein Element oder einen Textblock
Klick auf das Farbfeld im Style-Panel oder das A-Icon in der Inline-Toolbar für Text
Schritt 2: Farbe wählen
Wähle aus Standardfarben, Brand-Farben oder benutzerdefinierten Farben
Neue Farbe hinzufügen:
+ Add
Schritt 3: Benutzerdefinierte Farbe erstellen
Farbe auswählen
Format wechseln zwischen HEX, RGB und Custom
Beschreibenden Namen eingeben
Auf
Saveklicken → Farbe erscheint in der Palette
Button Icon Color (Page Builder)
Unabhängige Kontrolle: Icon-Farbe ist getrennt von Text und Subtext
Farbquellen: Brand Board Farben oder Custom Colors
Design-Flexibilität: Icon farblich anpassen, Text bleibt gut lesbar
Alt Text für Screenshot: „Button element Colors panel showing the new Icon Color control.“
Häufig gestellte Fragen
Q: Werden bestehende Seiten verändert, wenn ich eine Brand Color bearbeite?
A: Nein, Änderungen wirken nur auf neue Elemente.
Q: Warum erscheint „duplicate color“?
A: Farbwert existiert bereits in der Palette. Wert ändern oder bestehenden Swatch bearbeiten.
Q: Kann ich eine Custom Color umbenennen oder löschen, ohne Seiten zu zerstören?
A: Ja, bestehende Elemente behalten ihre Farbe.
Q: Kann ich Brand Colors importieren?
A: Ja, über das Brand Board.
Q: Warum speichert mein Custom Value nicht?
A: Token muss im aktuellen Standort existieren und darf nicht mit einem bestehenden Swatch identisch sein.
Q: Warum sehen neue Seiten anders aus als ältere?
A: Page Builder Defaults können sich ändern; Brand Board oder gespeicherte Templates sichern konsistentes Design.