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 Color.
- Bei Background Colors 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 den Recommendations for font colors legen Sie fest, ob Sie eine eigene Farbvariante verwenden (Custom) oder die voreingestellten Schriftfarben black beziehungsweise grey blue.
- Custom: Mit den Eingabefeldern bei Base Font Color, Light Font Color und Dark Font Color legen Sie die Farben für verschiedene Font-Kategorien fest.
- Klicken Sie über der Arbeitsfläche auf den Button Speichern.
Primärfarben:
- Bei den Recommendations for primary colors legen Sie mit einer Farbe aus der Drop-Down-Liste die Hauptfarbe der Website fest.
- Custom: Alternativ legen Sie in den dann gezeigten Eingabefeldern Base, Light und Dark Primary Color 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 den Recommendations for secondary colors mit der Drop-Down-Liste die »Zweitfarbe« der Website fest.
- Custom: Alternativ legen Sie mit den dann gezeigten Eingabefeldern Base, Light und Dark Secondary Color 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 Success Color, Warning Color sowie Error Color.
- 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 Primary Colors, Secondary Colors und Font Colors angeboten, für die Mobile Navigation nur Primary Colors sowie Secondary Colors.
- 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.