---
title: "Éclair 1.8: 12 Art Directions für eine Website wie keine andere"
description: "Éclair 1.8 bringt 12 Art Directions, eine KI, die deine eigene entwirft, und einen Design-Score im Editor. Kontraste garantiert, Lighthouse weiter bei 100."
url: "https://eclaircms.org/blog/eclair-1-8-art-directions-design-score"
lang: "de"
author: "Thierry Gustin"
published: "2026-11-01"
updated: "2026-11-01"
---

# Éclair 1.8: 12 Art Directions für eine Website wie keine andere

> **Das Wichtigste** — Die am 1. November 2026 erschienene Version 1.8 von Éclair bringt 12 Art Directions: Farbpalette, Titelschrift, Banner und Layouts, gedacht für eine eigene Bildwelt und frei anpassbar. Die KI kann aus deinem Geschäft drei davon entwerfen, für etwa 0,03 $, und ein Design-Score ergänzt SEO und GEO im Editor. Die Kontraste sind garantiert, die Schrift kommt von deiner Website, und Lighthouse bleibt bei 100.

Éclair 1.8 ist seit dem 1. November 2026 verfügbar. Bisher änderte ein Theme die Farben; eine **Art Direction** verändert die ganze Bildwelt deiner Website. Du wählst eine von 12, passt sie an oder lässt die KI deine eigene entwerfen. Und ein neuer **Design-Score** hilft dir, deine Seiten aufgeräumt zu halten.

## Was ändert sich mit Éclair 1.8?

| Neuheit | Was sie dir bringt |
| --- | --- |
| 12 Art Directions | Eine ganze Bildwelt: Farbpalette, Titelschrift, Banner, Vorteile und Symbole |
| Richtung anpassen | 5 Farben, 18 Titelschriften, Schreibweise, Ecken, Abstände, Karten und Banner |
| Meine Richtung mit KI entwerfen | Drei wirklich unterschiedliche Richtungen aus deinem Geschäft, für etwa 0,03 $ |
| Design-Score | Ein dritter Score im Editor, neben SEO und GEO |
| Unter der Haube | Garantierte Kontraste, Schrift von deiner Website, Archiv von 479 KB, 550 Prüfungen |

## Was ist eine Art Direction?

![Dieselbe Keramik-Website in sechs Art Directions: Nocturne, Galerie, Ton, Riviera, Pausenhof und Presse](https://eclaircms.org/media/2026/11/de-art-directions.webp)
*Dieselbe Website in sechs der zwölf Richtungen: Nocturne, Galerie, Ton, Riviera, Pausenhof und Presse.*

Ein Theme ändert die Farben; eine Art Direction verändert die ganze Bildwelt: Farbpalette, Titelschrift, Größe der Überschriften, Ecken, Abstände, Aufbau des Banners, Layout der Vorteile, Farbbänder und Symbole. Jede geht von einer konkreten Idee aus, nicht von einem Adjektiv:

| Richtung | Bildwelt | Titelschrift |
| --- | --- | --- |
| **Nocturne** | Die Stadt bei Nacht: tiefes Blau, bernsteinfarbenes Licht | Big Shoulders Display, in Großbuchstaben |
| **Galerie** | Weiße Wände, schwarze Werkschilder, ein Signalrot | Familjen Grotesk |
| **Ton** | Die Keramikwerkstatt: Sand, Terrakotta, weiche Formen | Young Serif |
| **Botanik** | Herbarium und Gewächshaus: tiefes Grün, salbeifarbenes Papier | DM Serif Display |
| **Plakat** | Das Schweizer Plakat: Schwarz auf gebrochenem Weiß, leuchtendes Orange | Archivo Black, in Großbuchstaben |
| **Riviera** | Am Meer: Marineblau, blasser Himmel, Koralle | Gloock |
| **Kanzlei** | Das Briefpapier: marineblaue Tinte, Bordeaux, feine Linien | Libre Caslon Display |
| **Neon** | Der Kreativbildschirm bei Nacht: fast Schwarz, Limettengrün | Unbounded |
| **Sanftheit** | Die Praxis: Puderrosa, Pflaume, viel Luft | Cormorant Garamond |
| **Baustelle** | Beton, Sicherheitsgelb, schmale Beschilderung | Barlow Condensed, in Großbuchstaben |
| **Pausenhof** | Der Schulhof: Himmelblau, Tomatenrot, runde Buchstaben | Fredoka |
| **Presse** | Die Morgenzeitung: Zeitungspapier, Titelseitenrot | Newsreader |

## Wie wählst du deine Art Direction und passt sie an?

1. Wähle unter **Einstellungen › Design** die Option **Art Direction** statt **Klassisches Theme**.
2. Klicke auf eine der 12 Karten und sieh dir die **Live-Vorschau** an: deine echte Website, am Desktop oder auf dem Smartphone.
3. Öffne **Richtung anpassen**, um sie zu personalisieren, und speichere dann: Vorher wird nichts veröffentlicht.

Unter „Richtung anpassen“ stellst du alles ein, frei kombinierbar:

- **5 Farben**: Hintergrund, Bänder und Karten, Text, Sekundärtext, Akzent der Buttons und Links.
- **Schriftart für Überschriften**: 18 Schriften, ausgewählt wegen ihres Charakters, oder eine Systemschrift. Der Fließtext bleibt in einer Systemschrift, ohne Download.
- **Schreibweise**, **Größe der Überschriften**, **Ecken** (eckig, abgerundet, rund) und **Abstände** (kompakt, normal, luftig).
- **Karten** mit feiner Linie, als Farbfläche oder mit Schlagschatten, und **Startbanner** nebeneinander, als Plakat, randloses Vollbild, Editorial oder zentriert.
- **Vorteile** als Karten, Zeilen oder Spalten, **Abschnitte** einfarbig oder in Farbbändern und **Symbole**, gezeichnet statt als Emojis.

Zum klassischen Theme kehrst du zurück, wann du willst: Seine Einstellungen warten unverändert auf dich.

## Wie entwirft die KI deine Art Direction?

![Einstellungen › Design: Auswahl zwischen Art Direction und klassischem Theme, darunter die Karten der 12 Richtungen](https://eclaircms.org/media/2026/11/de-direction-settings.webp)
*Einstellungen › Design: die Art Direction oder das klassische Theme, darunter die 12 Karten.*

Wenn der KI-Assistent aktiviert ist, erscheint unter den Karten **Meine Richtung mit KI entwerfen**. Beschreibe in ein oder zwei Sätzen dein Geschäft, deine Zielgruppe und die gewünschte Stimmung, zum Beispiel „Bio-Bäckerei im Viertel in Freiburg, Familien als Kundschaft, warm, aber modern“, und klicke dann auf **3 Richtungen vorschlagen**.

Die KI liest auch die Beschreibung deiner Website und dein Redaktionsprofil. Sie geht von der konkreten Welt deines Geschäfts aus (Orte, Materialien, Gegenstände, Licht), gibt jedem Vorschlag eine präzise Referenz und schlägt **drei wirklich unterschiedliche Richtungen** vor, fernab der Standardwahl deiner Branche und der Marotten von KI-generiertem Design. Diese Methode ist angepasst nach [Impeccable](https://github.com/pbakaus/impeccable) von Paul Bakaus.

Die drei Vorschläge erscheinen vor den Karten, mit ✦ markiert: Du probierst sie in der Vorschau aus, passt sie an und speicherst den, der dir gefällt. Die KI wählt nur aus den Einstellungen von Éclair und schreibt nie CSS: Jeder Vorschlag wird geprüft, und seine Kontraste werden korrigiert. Die geschätzten Kosten liegen bei etwa 0,03 $ für die drei Vorschläge mit Claude Sonnet 5.5 und werden vom Budget des Assistenten abgezogen.

## Was ist der Design-Score?

Im Editor zeigt der Tab **Analyse** jetzt einen dritten Ring, **Design**, neben SEO und GEO. Er prüft, ob deine Seite optisch überzeugt:

- **Zwischenüberschriften** mit klarer Hierarchie, kurz und ohne dekoratives Emoji;
- ein **Banner** mit kurzem Titel und einem Aktionsbutton;
- maßvolle **Handlungsaufforderungen**, höchstens drei Buttons;
- ein Block **„Vorteile“** mit 3 bis 6 beschriebenen Elementen;
- ein **Text** ohne Sätze in Großbuchstaben, ohne hohle Superlative, ohne wiederholte Passagen und ohne Block von mehr als 350 Wörtern am Stück.

Der Wert am Tab Analyse ist der Durchschnitt der drei Ringe: Eine gute Seite wird gefunden, zitiert und gern gelesen.

## Bleibt deine Website schnell und lesbar?

Ja, und das ist durch die Bauweise garantiert:

- **Garantierte WCAG-Kontraste**: Ganz gleich, welche Farben du oder die KI wählen, Éclair passt den Text auf 7:1 zum Hintergrund an und Sekundärtext, Links und Buttons auf 4,5:1. Geprüft an 20.000 zufällig gezogenen Paletten.
- **Kein Drittanbieter**: Die Titelschrift (12 bis 27 KB) lädt dein Server nur einmal herunter, danach liefert deine Website sie selbst aus und lädt sie vorab. Deine Besucher kontaktieren weder Google Fonts noch sonst jemanden.
- **Immer 100/100**: Lighthouse vergibt 100 in allen vier Kategorien, auch mit den Richtungen Nocturne, Riviera, Presse und Plakat.
- **Nichts geht kaputt**: Das HTML ändert sich nicht, also auch nicht SEO, strukturierte Daten und Barrierefreiheit. Die 6 klassischen Themes bleiben bis aufs Byte identisch.

## Wie aktualisierst du auf Éclair 1.8?

Das Verfahren bleibt gleich und rührt deine Inhalte nicht an:

1. Klicke unter **Sicherheit › Backup** auf **Backup herunterladen**.
2. Lösche per FTP die Ordner `app/` und `assets/` und lade dann die der neuen Version zusammen mit `index.php` und `.htaccess` hoch.
3. Lass `data/` (Inhalte, Einstellungen, Konten, eigenes CSS) und `media/` (Bilder) unverändert.
4. Klicke in der Verwaltung auf **Einstellungen › Erweitert › Cache leeren**.

Nur ein Punkt ist zu prüfen: Éclair 1.8 braucht die PHP-Erweiterung **zlib**, die fast überall standardmäßig vorhanden ist. Und wenn dein Hoster ausgehende Verbindungen blockiert, kann die Schrift einer Art Direction nicht heruntergeladen werden: Éclair weist dich darauf hin und nutzt eine Ersatzschrift aus derselben Familie. Der Leitfaden [Aktualisieren, sichern, umziehen](https://eclaircms.org/de/dokumentation/updates) erklärt jeden Schritt, und das Archiv von 479 KB wartet auf der Seite [Herunterladen](https://eclaircms.org/de/herunterladen).

## Und wie geht es weiter?

Wie bei den vorherigen Versionen bestimmen deine Rückmeldungen den weiteren Weg. Eine Idee, ein Fehler, eine Frage? Schreib mir über die [Kontaktseite](https://eclaircms.org/de/kontakt) oder eröffne ein Ticket auf [GitHub](https://github.com/Jacckisback/eclair-cms/issues).

## Häufige Fragen zu Éclair 1.8

### Machen die Art Directions meine Website langsamer?

Nein. Nur die Regeln, die deine Richtung braucht, werden in die Seite eingefügt, und die Titelschrift wird von deiner Website ausgeliefert und vorab geladen. Lighthouse bleibt in allen vier Kategorien bei 100.

### Verschwindet mein aktuelles Theme?

Nein. Die 6 klassischen Themes sind weiterhin da, bis aufs Byte identisch. Du wechselst zwischen einer Art Direction und dem klassischen Theme, wann du willst, und beide behalten ihre Einstellungen.

### Brauche ich den KI-Assistenten für die Art Directions?

Nein. Die 12 Richtungen und „Richtung anpassen“ funktionieren ohne KI. Nur „Meine Richtung mit KI entwerfen“ braucht den Assistenten, mit deinem Claude- oder ChatGPT-Schlüssel.

### Verbinden sich meine Besucher mit Google Fonts?

Nein. Dein Server lädt die Schrift einmal von Fontsource herunter (SIL Open Font License) und liefert sie dann selbst aus: keine Anfrage an einen Drittanbieter.

### Kann ich direkt von 1.6 auf 1.8 aktualisieren?

Ja: Das Verfahren ist bei jeder Version gleich, und 1.8 enthält die Neuheiten der vorherigen Versionen. Mach vorher einfach ein Backup.

[Éclair 1.8.0 herunterladen](https://eclaircms.org/de/herunterladen)

[Leitfaden zu Themes und Art Directions lesen](https://eclaircms.org/de/dokumentation/designs)

— Thierry Gustin, Créateur d’Éclair CMS, consultant SEO et formateur IA · 1. November 2026