Designeinstellungen: Farben und Schriften der Website
Das Aussehen deiner Website steuerst du an zwei Stellen. Layout → Basisfarben legt die wenigen Grundfarben fest. Layout → Designeinstellungen regelt die Feinheiten je Bereich, zum Beispiel Schrift und Farbe der Überschriften. Du brauchst dafür keine Programmierkenntnisse.
Wer hat Zugriff?
- Administratoren — sehen und bearbeiten alles auf dieser Seite.
- BackOffice (Büro & Buchhaltung), BackOffice (Sach- und Rechnungsbearbeitung) und Beratung, Training & Betreuung — sehen das Menü Layout nicht.
- Besucher und Kunden — sehen nur das Ergebnis auf deiner Website.
- Details zu den Rollen: Rollen und Rechte.
Welche E-Mails werden verschickt?
Diese Seite verschickt keine E-Mails.
Kurz gesagt: Ändere unter Layout → Basisfarben die Primärfarbe und klicke danach auf Detailfarben aus Basisfarben neu ableiten. Feinheiten stellst du unter Layout → Designeinstellungen ein und klickst auf Änderungen speichern.
So änderst du die Farben deiner Website
- Klicke im Menü auf Layout → Basisfarben.
- Suche die Farbe, die du ändern willst. Die wichtigste ist die Primärfarbe (Überschriften, Links, Rahmen und Hauptlinien). Daneben gibt es Sekundärfarbe, Textfarbe und mehrere Hintergrundfarben — die Spalte „Beschreibung“ sagt, wofür jede gilt.
- Klicke in der Zeile auf ≡ → Bearbeiten. Wähle die neue Farbe im Feld „Farbe“ mit dem Farbwähler aus — die Felder „RGB-A: R“, „G“ und „B“ passen sich an. Im Feld „RGB-A: A“ stellst du die Deckkraft ein (1 = deckend). Speichere.
- Wiederhole das für die anderen Farben, die du ändern willst.
- Klicke oben auf „Detailfarben aus Basisfarben neu ableiten“ und bestätige die Rückfrage. Die Software rechnet daraus alle Farben der Designeinstellungen neu aus.
- Öffne deine Website und lade sie mit gedrückter Umschalttaste neu, damit der Browser nicht die alten Farben aus seinem Zwischenspeicher zeigt.
Achtung: „Detailfarben aus Basisfarben neu ableiten“ überschreibt alle Farben, die du in den Designeinstellungen von Hand fein abgestimmt hast. Denselben Knopf gibt es in den Designeinstellungen als „Farbpalette auf Basisfarben zurücksetzen“ — er ist der Weg zurück, wenn du dich beim Ausprobieren verrannt hast.
So stellst du die Designeinstellungen ein
- Klicke im Menü auf Layout → Designeinstellungen.
- Suche den Kasten des Bereichs, den du ändern willst, zum Beispiel Überschrift 1.
- Wähle Schriftart, Schriftgröße und Farben.
- Klicke auf Änderungen speichern. Öffne deine Website und lade sie neu.
Was die einzelnen Kästen bedeuten, steht hier:
Allgemein: die Hauptfarbe CI (nur für unterstützende Browser). 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).
Titellayout: wo dein Logo sitzt — links oder rechts neben dem Menü, über oder unter der Menüzeile. Das Feld „Benutzerdefinierter Code für Titelzeile“ bleibt im Normalfall leer.
Headerlayout: die Abschlussleiste unter dem Kopfbereich. Mitgeliefert sind headerstrip_none (keine), headerstrip_1px (dünne Linie), headerstrip_shadow_5 und headerstrip_shadow_10 (weicher Schatten), dazu die Farbe der Leiste.
Darunter folgt je Bereich der Website ein Kasten: Überschrift 1, 2 und 3, Kopfzeile, Menübereich, Seitenbereich (der normale Fließtext), Schaltflächen, Widerrufsbutton, Seitenfuß, Seitensockel, Gerahmt (Kästen mit Rahmen), Mitteilungen und Terminbuchung. Je Bereich stellst du Schriftart, Schriftgröße, Schriftstil und Schriftstärke ein und die Farben für Hintergrund, Text, Links und Rahmen, jeweils auch für den Zustand unter dem Mauszeiger.
Die Überschriften haben zusätzlich Abstand oben und Abstand unten in Pixeln, eine Ausrichtung und eine Schreibweise. Bei den Schaltflächen stellst du den Eckenradius (0 = eckig) und einen Schatten ein; außerdem kannst du die Infozeile und das Menü beim Scrollen oben festhalten.
Speichern
Erst „Änderungen speichern“ übernimmt die Einstellungen. Den Knopf gibt es oben nach dem Kasten Headerlayout und noch einmal ganz unten. Siehst du die Änderung im Browser nicht sofort, lade die Seite mit gedrückter Umschalttaste neu.
So legst du einen Hintergrund für die Website fest
Hinter allen Kundenseiten kann ein Hintergrund liegen: ein Farbverlauf oder ein Bild. Das stellst du unter Layout → Hintergrund ein.
- Klicke im Menü auf Layout → Hintergrund.
- Wähle oben die Art: „Kein Hintergrund“, „CSS (z. B. Farbverlauf)“ oder „Bild“. Rechts daneben siehst du eine Vorschau der Fläche.
- Bei CSS trägst du die Anweisungen in das Feld darunter ein, zum Beispiel
background-image: linear-gradient(180deg, #ffffff, #eef0f6); - Bei Bild wählst du eine Datei aus (JPG, PNG, GIF oder WebP) und stellst ein, wo es sitzt (Position), wie es die Fläche ausfüllt (Darstellung: füllend, einpassen, strecken oder Originalgröße), ob es gekachelt wird und ob es beim Scrollen mitscrollt oder stehen bleibt.
- Klicke auf Speichern.
Eine einzelne Seite darf davon abweichen: im Seitenformular unter Extras → „Hintergrund dieser Seite“ stehen dieselben Felder, dazu die Möglichkeiten „wie die Website“ (die Vorgabe) und „kein Hintergrund“ — damit schaltest du den Hintergrund der Website für genau diese eine Seite ab.
Tipp: Die Paletten Aurora (hell) und Aurora (dark) (Einrichtungsassistent → Alle anzeigen → Gruppe „Specials“) bringen ihren Hintergrund mit. Jede andere Palette setzt den Hintergrund beim Anwenden wieder auf „Kein Hintergrund“.
Wenn etwas nicht klappt
- Die Website zeigt noch die alten Farben. — Dein Browser zeigt eine gespeicherte Fassung. — Lade die Seite mit gedrückter Umschalttaste neu.
- Die Änderung an den Basisfarben wirkt nicht. — Die Detailfarben wurden nicht neu berechnet. — Klicke auf „Detailfarben aus Basisfarben neu ableiten“ und bestätige.
- Deine fein abgestimmten Farben sind weg. — „Detailfarben aus Basisfarben neu ableiten“ oder „Farbpalette auf Basisfarben zurücksetzen“ wurde geklickt. — Stelle die Farben in den Designeinstellungen erneut ein.
- Der Hintergrund ist nach dem Wechsel der Palette verschwunden. — Jede Palette außer Aurora setzt ihn auf „Kein Hintergrund“. — Stelle ihn unter Layout → Hintergrund neu ein.