Color Settings
In diesem Theme-Abschnitt finden Sie alle Einstellungen, um Ihre Website mithilfe von Farben unverwechselbar zu gestalten.
Reiter: »Color«
Anleitung Hinweise, Tipps & Tricks
Schritt für Schritt
Hintergrundfarbe:
- Klicken Sie den Reiter Farbe.
- Bei Hintergrundfarbe stellen Sie mit einem HTML-Code die Hintergrundfarbe Ihrer Website ein. Für die Hashtag- und Zahlen/Ziffer-Kombinationen finden Sie unzählige Farbtafeln im Netz.
- Klicken Sie über der Arbeitsfläche auf den Button Speichern.
Schriftfarbe:
- Bei Vorschläge für Schriftfarben legen Sie fest, ob Sie eine eigene Farbvariante verwenden (Custom) oder die voreingestellten Schriftfarben schwarz beziehungsweise graublau.
- Custom: Mit den Eingabefeldern bei Basis-Schriftfarbe, Helle Schriftfarbe und Dunkle Schriftfarbe legen Sie die Farben für verschiedene Schrift-Kategorien fest.
- Klicken Sie über der Arbeitsfläche auf den Button Speichern.
Primärfarben:
- Bei Vorschläge für Primärfarben legen Sie mit einer Farbe aus der Drop-Down-Liste die Hauptfarbe der Website fest.
- Custom: Alternativ legen Sie in den dann gezeigten Eingabefeldern Basis-Primärfarbe, Helle Primärfarbe und Dunkle Primärfarbe die Hauptfarben der Website fest.
- Klicken Sie über der Arbeitsfläche auf den Button Speichern.
Sekundärfarben:
- Wie bei den Primärfarben legen Sie bei Vorschläge für Sekundärfarben mit der Drop-Down-Liste die »Zweitfarbe« der Website fest.
- Custom: Alternativ legen Sie mit den dann gezeigten Eingabefeldern Basis-Sekundärfarbe, Helle Sekundärfarbe und Dunkle Sekundärfarbe die Sekundärfarben der Website fest.
- Klicken Sie über der Arbeitsfläche auf den Button Speichern.
Signalfarben:
- Bestimmte Dialogmeldungen und Systemantworten können farblich betont werden, hier bei den Eingabefeldern Farbe für Erfolgsmeldungen, Farbe für Warnungen und Farbe für Fehlermeldungen.
- Klicken Sie über der Arbeitsfläche auf den Button Speichern.
Desktop- und Mobil-Navigation:
- Hier legen Sie fest, welches der eingestellten Farbsets für die Navigation am Desktop sowie an mobilen Geräten verwendet wird. Für die Desktop Navigation werden die Werte Primärfarben, Sekundärfarben und Schriftfarben angeboten, für die Mobile Navigation nur Primärfarben sowie Sekundärfarben.
- Klicken Sie über der Arbeitsfläche auf den Button Speichern.
Hinweise, Tipps & Tricks
Die in toujou voreingestellten Farbvorschläge werden stets im Dreierpack geliefert: Einem Grundton, einer helleren Variante des Grundtons und respektive einer dunkleren Variante dessen. Die unterschiedlichen Farbtöne dienen der Darstellung von Interaktion (z.B. Mouse-over auf Links) oder zum Erzeugen einer Tiefendimension im Design. Sie sind frei in der Entscheidung, ob bis zu drei Farbvarianten eingesetzt werden sollen.
Als Quelle für diese Designentscheidung gelten die weitgehend als »Standardwerk« zu wertende Material-Design-Guidelines von Google ↗.
In toujou bestimmen Sie den Farbwert für die Schriftfarbe (Font Color). Für Überschriften gelten abweichende Farbeinstellungen, die zusätzlich auf die Einstellungen zu Primär- und Sekundärfarbe zurückgreifen:
Headline 1: Font Color
Headline 2: Primary Color
Headline 3: Secundary Color
Headline 4: Font Color
Headline 5: Font Color
Verknüpfte Elemente
Elemente aus der toujou-Elementbibliothek, die mit diesen Einstellungen in Verbindung stehen.