bloqyDokumentation

Theme

Farben

Die Grundfarben der Website festlegen und eigene Farben ergänzen.

Unter Gestaltung → Theme → Farben legst du die Farbpalette der Website fest. Alle mitgelieferten Blöcke verwenden ausschließlich diese Farben. Die Farben erscheinen außerdem bei den Stilen Hintergrund, Button-Stil und Textfarbe.

Grundfarben

FarbeWofür
PrimärDie Hauptfarbe der Marke: Buttons, Links, Hervorhebungen
SekundärZweite Markenfarbe, z. B. für zweite Buttons oder Verläufe
AkzentKleine Hingucker, z. B. Badges
Hell / DunkelHelle und dunkle Hintergründe von Sektionen
TextDie normale Schriftfarbe
HintergrundDer Seitenhintergrund
FlächeKarten, Lightbox, Popups und Ausklapplisten
AbdeckungDie halb durchsichtige Fläche hinter Lightbox und Popup
Rahmen und LinienRahmen, Trennlinien, Tabellenlinien
Erfolg / Warnung / FehlerHinweise und Rückmeldungen, z. B. in Formularen

Farbe ändern

  1. Klicke in der Spalte Wert auf das Farbfeld und wähle die Farbe – oder tippe den Farbwert direkt ein (z. B. aus dem Styleguide).
  2. Prüfe die Spalte Kontrast (siehe Schrift auf Farbe und Kontrast).
  3. Sieh dir unten die Vorschau an. Sie zeigt die Farben schon vor dem Speichern.
  4. Klicke auf Speichern.

Abstufungen

Zu jeder Farbe erzeugt bloqy automatisch hellere und dunklere Abstufungen. Die Spalte Abstufungen zeigt sie als Farbleiste. Du musst nichts dafür tun – die Blöcke nutzen sie z. B. für helle Hintergründe („Primär hell“) oder dunklere Ränder.

Eigene Farben

Braucht die Website weitere Farben, etwa für einzelne Bereiche, klicke unter Eigene Farben auf Farbe hinzufügen. Gib eine Beschreibung (z. B. „Markenblau“), einen kurzen Namen in der Spalte Variable und den Farbwert an.

Abschnitt Eigene Farben mit Beschreibung Markenblau, Variable, Wert, Schrift darauf, Abstufungen und Kontrast
Eine eigene Farbe „Markenblau“

Damit Redakteure eine eigene Farbe zum Beispiel als Hintergrund auswählen können, braucht der Stil „Hintergrund“ einen weiteren Wert. Das richtest du unter Stile bearbeiten ein oder bittest deinen Administrator darum.

Tabelle der Grundfarben mit Wert, Schrift darauf, Abstufungen und Kontrast
Grundfarben mit Abstufungen und Kontrast

Vorschau

Ganz unten zeigt die Vorschau eine Überschrift, Fließtext mit Link, die drei Button-Arten, eine Karte, die Hinweise für Erfolg, Warnung und Fehler sowie die farbigen Flächen Primär, Sekundär, Akzent, Dunkel und Hell – jeweils mit Text und Buttons darauf. So prüfst du auf einen Blick, ob alles lesbar ist.

Vorschau der Farben mit Überschrift, Link, Buttons, Karte, Hinweisen und farbigen Flächen
Die Vorschau zeigt alle Farben im Zusammenhang

Warum eine Farbänderung überall wirkt, erklärt Variablen: Werte, die überall wirken.