Running a website · Basics · 0:58 min

Design: style editor, presets, navigation

Try presets, colours with contrast checks, navigation – with a live preview.

No sound, with subtitles German and English subtitles – switch them on and off with “CC” in the player. The video is hosted on this server and only loads when you press play. The steps below are the full text of the video.

Goal

You adjust colours, fonts and navigation – checked for accessibility and without changing the kit.

Prerequisites

Permission “design (style editor)” and the design feature.

Step by step

Transcript: every step matches one subtitle in the video.

Administration › Design: colours, fonts and shapes of the kit for this website.
Presets fill the form with a matching set – the preview on the right shows it right away.
Every colour with a contrast check (AA/AAA) – for light and dark mode.
Tabs “Typografie”, “Navigation”, “Kopfbereich: Suche & Aktionen” (header: search & actions) – fonts, menu, search field and button at the top.
Check the preview: pick a page, switch to “Mobil” (mobile) and “Dunkel” (dark).
“Speichern” puts the design online, “Verlauf” (history) restores earlier versions. Here: “Verwerfen” (discard).

Tips & pitfalls

Tip

Which pages appear in the menu is controlled in the page list (“Menü” switch) or via sections with an anchor (“show in main navigation”).

Tip

Export/Import transfer a design to another website with the same kit.

Watch out

Fix red contrast values before saving – otherwise text is hard to read (WCAG).