toujou
+49 911 23980-870

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

Wer TYPO3 kennt, weiß, dass viele Wege nach Rom führen. toujou ist TYPO3. Wir weisen Sie an dieser Stelle auf wichtige Informationen und den einen oder anderen Kniff hin, den Sie bei der Erstellung und Bearbeitung Ihrer Website beachten sollten.

Ganz unten im Reiter »Color« innerhalb der Theme-Settings sehen Sie stets eine Übersicht Ihrer aktuellen Farbeinstellungen.

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

Zur toujou-Setup Übersicht


Verknüpfte Elemente

Elemente aus der toujou-Elementbibliothek, die mit diesen Einstellungen in Verbindung stehen.

Headline Element