Designeinstellungen: Farben und Schriften der Website
Das Aussehen deiner Website steuerst du an zwei Stellen: Layout → Basisfarben legt die Grundfarben fest, Layout → Designeinstellungen die Feinheiten. Beides erzeugt am Ende dieselbe Datei: das Design-CSS deiner Seiten. Du brauchst dafür keine Programmierkenntnisse.
1. Basisfarben
Unter Layout → Basisfarben steht eine kurze Liste benannter Farben mit Systemname, Beschreibung und einer Vorschau. Über „Farbe hinzufügen“ kommt eine neue dazu, über das Stiftsymbol änderst du eine bestehende.
Die Schaltfläche „Detailfarben aus Basisfarben neu ableiten“ rechnet aus diesen Grundfarben die komplette Farbpalette der Designeinstellungen neu aus. Achtung: eigene Feinabstimmungen gehen dabei verloren. Die Software fragt vorher nach. Denselben Knopf gibt es in den Designeinstellungen als „Farbpalette auf Basisfarben zurücksetzen“ — er ist der Weg zurück, wenn du dich beim Herumprobieren verrannt hast.
2. Allgemein
Ganz oben in den Designeinstellungen steht die Hauptfarbe CI. Manche Browser färben damit ihre eigene Leiste ein, wenn jemand deine Seite auf dem Handy öffnet.
Ob eine Seite mit oder ohne Kopf und Fuß erscheint, stellst du nicht hier ein, sondern an der Seite selbst: Seitenverwaltung → Seite bearbeiten → Seitentemplate.
3. Titellayout
Hier bestimmst du, wo dein Logo sitzt: links neben dem Menü, rechts neben dem Menü, über der Menüzeile oder unter der Menüzeile. Darunter gibt es ein Feld für eigenen Code in der Titelzeile — für den Normalfall bleibt es leer.
4. Headerlayout
Die Abschlussleiste ist die Linie unter dem Kopfbereich. Mitgeliefert sind headerstrip_none (keine), headerstrip_1px (dünne Linie), headerstrip_shadow_5 und headerstrip_shadow_10 (weicher Schatten). Daneben lässt sich die Farbe der Leiste setzen.
5. Die Bereiche
Darunter kommt für jeden Bereich der Website ein eigener Kasten:
- Überschrift 1, 2 und 3
- Kopfzeile — die schmale Infozeile ganz oben
- Menübereich
- Seitenbereich — der normale Fließtext
- Schaltflächen (Buttons)
- Widerrufsbutton
- Seitenfuß und Seitensockel
- Gerahmt — Kästen mit Rahmen, etwa Angebotskarten
- Mitteilungen — Hinweis- und Fehlermeldungen
- Terminbuchung — Leistungsauswahl und Kalender der Buchungsstrecke
Je Bereich stellst du Schriftart, Schriftgröße, Schriftstil und Schriftstärke ein und dazu die Farben: Hintergrund, Hintergrund bei Mauszeiger, Text, Link, Link bei Mauszeiger, Rahmen und Rahmen bei Mauszeiger. Die Terminbuchung hat ein eigenes Farb-Set aus Fläche und Akzentfarbe.
In der Schriftart-Auswahl steht ab Werk nur „Open Sans“. Alles, was du unter Layout → Schriftarten installierst, erscheint hier zusätzlich.
6. Überschriften genauer
Die drei Überschriften haben zusätzlich Abstand oben und Abstand unten in Pixeln (0 bis 300), eine Ausrichtung (links, zentriert, rechts) und eine Schreibweise (normal, GROSS, klein).
7. Schaltflächen und feste Leisten
- Eckenradius in Pixeln — 0 ergibt eckige Knöpfe, große Werte runde.
- Schatten anzeigen und Schattengröße (klein, mittel, groß). Der Schatten gilt für Knöpfe und Auswahl-Pillen.
- Infozeile beim Scrollen oben festhalten und Menü beim Scrollen oben festhalten — die Leiste bleibt dann sichtbar, während der Besucher nach unten scrollt.
8. Speichern
Erst „Änderungen speichern“ schreibt das Design-CSS neu. Siehst du die Änderung im Browser nicht sofort, lade die Seite mit gedrückter Umschalttaste neu — der Browser zeigt sonst die alte Datei aus seinem Zwischenspeicher.