Themes und Aussehen
Die 6 Éclair-Themes ändern das Aussehen deiner Website mit einem Klick, mit Live-Vorschau, ohne Eingriff ins HTML und ohne Folgen für dein SEO. So geht’s.
Inhalt
- Welche sind die 6 Éclair-Themes?
- Wie wechselst du das Theme?
- Was stellt jedes Theme ein, wenn du es auswählst?
- Welche weiteren Einstellungen zum Aussehen kannst du ändern?
- Warum bremsen die Éclair-Themes deine Website nicht aus?
- Wie fügst du dein eigenes CSS hinzu?
- Was können die Éclair-Themes nicht?
- Was tun, wenn sich das Aussehen nicht ändert?
- Fragen zu den Themes
Die 6 Éclair-Themes ändern das Aussehen deiner Website mit einem Klick: Farbe, Schriften, Header und Darstellung der Listen. Du probierst sie in der Live-Vorschau an deiner echten Website aus, am Desktop oder auf dem Smartphone, und nichts wird veröffentlicht, bevor du speicherst. Deine Inhalte, deine Geschwindigkeit und dein SEO bleiben dabei unverändert.
Welche sind die 6 Éclair-Themes?
Die Éclair-Themes gehören seit Version 1.3.0 zum Lieferumfang des CMS. Jedes hat seinen eigenen Charakter und seine Zielgruppe:
| Theme | Charakter | Für wen |
|---|---|---|
| Éclair | Klar, modern und vielseitig: das Original-Theme | Alle Websites |
| Editorial | Magazin-Look: Serifenschrift, feine Linien, Initiale, hervorgehobener Beitrag | Blogs, Medien, Autoren |
| Atelier | Warm und handgemacht: Creme- und Terrakottatöne, weiche Formen | Handwerksbetriebe, Restaurants, Wellness |
| Studio | Minimalistisches Portfolio: Schwarz-Weiß, große Überschriften, Bilder ohne Rahmen | Fotografen, Designer, Agenturen |
| Shop | Zum Verkaufen gemacht: quadratische Fotos, fixierter Header, markante Buttons | Shops, Kreative |
| Kontrast | Maximale Lesbarkeit: große Schrift, starke Kontraste, unterstrichene Links | Öffentliche Einrichtungen, Vereine, Senioren |
Alle Themes zeigen dieselben Blöcke, den Blog und den schlanken Shop: Wähle das Theme, das zu deinem Beruf passt, nicht das, das eine bestimmte Funktion „enthält“.
Wie wechselst du das Theme?
Fünf Schritte genügen, Vorschau inklusive:
- Öffne Einstellungen › Design.
- Klicke im Feld Theme auf die Karte, die dir gefällt. Ihre Farbe, ihre Schriften, ihr Header und ihre Darstellung der Listen werden sofort ins Formular übernommen.
- Wähle unter Live-Vorschau die angezeigte Seite („Startseite“, „Blog“, „Ein Beitrag“, „Der Shop“ oder „Ein Produkt“) und wechsle dann von Desktop zu Mobil. Du kannst in der Vorschau klicken: Links bleiben in der Vorschau.
- Passe an, was du möchtest (Hauptfarbe, Schriften, Header, Listen, Dunkelmodus): Die Vorschau folgt jeder Änderung.
- Klicke auf Speichern. Der Seiten-Cache wird automatisch geleert: Deine Website ändert sich sofort.
Was stellt jedes Theme ein, wenn du es auswählst?
Das sind die empfohlenen Einstellungen, die jedes Theme übernimmt. Du kannst alle danach ändern:
| Theme | Hauptfarbe | Schriftarten (Überschriften / Text) | Header | Listen |
|---|---|---|---|---|
| Éclair | Violett #5b4cf0 | System (modern) | Logo links | Kartenraster |
| Editorial | Rot #b42318 | Elegante Serifenschrift / Moderne Serifenschrift | Zentriert | Kartenraster |
| Atelier | Terrakotta #c2410c | Humanistisch | Logo links | Kartenraster |
| Studio | Schwarz #111111 | Neo-Grotesk | Logo links | Kartenraster |
| Shop | Blaugrün #0f766e | Geometrisch / System (modern) | Zentriert | Kartenraster |
| Kontrast | Blau #1d4ed8 | System (modern) | Logo links | Liste: Bild links |
Welche weiteren Einstellungen zum Aussehen kannst du ändern?
Ebenfalls unter Einstellungen › Design, unterhalb der Vorschau:
| Einstellung | Was du wählst |
|---|---|
| Header | „Logo links, Menü rechts“ oder „Zentriert: Logo über dem Menü“ |
| Beitrags- und Produktlisten | „Kartenraster“ oder „Liste: Bild links“ |
| Logo | Ein PNG oder WebP mit transparentem Hintergrund, etwa 400 px breit |
| Website-Icon (Favicon) | Ein quadratisches Bild von mindestens 512 px; ohne Icon wird ein Blitz in deiner Farbe erzeugt |
| Hauptfarbe | Jede beliebige Farbe: Der Textkontrast wird automatisch angepasst |
| Schriftart für Überschriften und Schriftart für Fließtext | Systemschriftarten: kein Download, sofortige Anzeige |
| Dunkelmodus | „Automatisch (je nach Gerät des Besuchers)“ oder „Immer hell“ |
| Footer-Text | Dein Text und die Option „Erstellt mit ⚡ Éclair“ anzeigen |
| Eigenes CSS | Deine eigenen Stilregeln, maximal 64 KB |
Bei der Hauptfarbe strebt Éclair einen Kontrast von mindestens 4,5:1 zwischen Links und Hintergrund an, die Schwelle des WCAG-Kriteriums 1.4.3 für Fließtext. Fehlt deiner Farbe dieser Kontrast, verwenden die Links eine dunklere Variante (im Dunkelmodus eine hellere), und der Text der Buttons wird weiß oder schwarz, je nachdem, was besser lesbar ist.
Warum bremsen die Éclair-Themes deine Website nicht aus?
Weil jedes Theme nur ein Stylesheet von 1,5 bis 3 KB ist, das zum Basis-Stylesheet hinzukommt. Das Theme Éclair fügt nichts hinzu: Es ist der Basisstil.
- Das HTML ändert sich von Theme zu Theme nicht: Geschwindigkeit, Barrierefreiheit, strukturierte Daten und SEO bleiben gleich.
- Nur das aktive Theme wird zusammen mit dem übrigen CSS in die Seite eingefügt: keine zusätzliche Datei zum Herunterladen.
- Der automatische Dunkelmodus funktioniert mit jedem der 6 Themes.
- Die Stile des Shops werden nur eingefügt, wenn er geöffnet ist: Eine Website ohne Shop lädt sie nie.
Wie fügst du dein eigenes CSS hinzu?
Um über das Theme hinauszugehen (die Farbe eines Buttons, Abstände, der Stil eines Blocks), füge deine Regeln unter Einstellungen › Design › Eigenes CSS ein und speichere.
- Sie haben Vorrang vor dem Theme: Sie werden auf jeder Seite nach ihm eingefügt.
- Sie überstehen Updates seit Éclair 1.5.0: Sie liegen zusammen mit deinen Daten in
data/, und das Update rührt diesen Ordner nicht an. - Die Markierungen für den Dunkelmodus funktionieren: Regeln zwischen
/*dark*/und/*/dark*/entfallen, wenn der Dunkelmodus auf „Immer hell“ steht. - Aus Sicherheitsgründen werden das Zeichen
<,@import-Regeln und Steuerzeichen entfernt, und das Feld nimmt maximal 64 KB auf.
Zum Beispiel für Buttons mit leicht abgerundeten Ecken und einen dunkleren Footer im Dunkelmodus:
.btn { border-radius: 6px; }
/*dark*/@media (prefers-color-scheme: dark) { .site-footer { background: #0d0d12; } }/*/dark*/Was können die Éclair-Themes nicht?
- Sie ändern nicht die Struktur der Seiten. Um ein Element zu verschieben oder einen Bereich hinzuzufügen, musst du die PHP-Vorlagen in
app/theme/anpassen, wie die Seite Für Entwickler erklärt. Ein Update ersetzt sie: Bewahre eine Kopie deiner Dateien auf. - Es gibt weder einen Katalog zum Herunterladen noch Erweiterungen: Die 6 Themes sind in Éclair enthalten. Dass es keine Erweiterungen gibt, ist Absicht, für Geschwindigkeit und Sicherheit.
- Keine Webfonts in den Einstellungen: nur Systemschriftarten, die schon auf dem Gerät des Besuchers vorhanden sind.
- Das eigene CSS importiert nichts: Ohne
@importkann es kein anderes Stylesheet laden.
Was tun, wenn sich das Aussehen nicht ändert?
| Symptom | Lösung |
|---|---|
| Die Website hat sich nicht verändert | Die Vorschau speichert nichts: Klicke auf Speichern. Das CSS steckt in jeder Seite, es gibt keine alte Datei, die du aktualisieren müsstest. |
| „Der Shop“ und „Ein Produkt“ fehlen in der Vorschau | Sie erscheinen erst, wenn der Shop geöffnet ist, und „Ein Produkt“ nur mit einem veröffentlichten Produkt. |
| Eine Regel deines eigenen CSS wird ignoriert | Prüfe, ob sie weder < noch @import enthält: Beides wird beim Speichern entfernt. Bleibt sie wirkungslos, formuliere sie genauer: Eine spezifischere Regel des Themes hat Vorrang. |
| „Eigenes CSS zu lang: maximal 64 KB.“ | Fasse deine Regeln zusammen oder kürze sie. |
| Regeln verschwinden | Sie stehen zwischen /*dark*/ und /*/dark*/, und der Dunkelmodus steht auf „Immer hell“: Das ist gewollt. |
Deine Änderungen an theme.css sind weg | Das Update hat app/ ersetzt. Verschiebe deine Regeln ins eigene CSS. |
Die ursprüngliche Anleitung steht auch im offiziellen Éclair-Handbuch, die Einzelheiten der Versionen 1.3.0 bis 1.5.0 im Changelog.
Fragen zu den Themes
Verliere ich beim Wechsel des Themes meine Inhalte oder mein SEO?
Nein. Die Éclair-Themes berühren weder deine Inhalte noch das HTML deiner Seiten: Überschriften, strukturierte Daten, Geschwindigkeit und Barrierefreiheit bleiben gleich. Nur das Aussehen ändert sich.
Kann ich zum ursprünglichen Theme zurückkehren?
Ja, jederzeit: Wähle unter Einstellungen › Design die Karte Éclair und speichere. Ihre empfohlenen Einstellungen werden wieder übernommen, und dein eigenes CSS bleibt bestehen.
Funktioniert der Dunkelmodus mit allen Themes?
Ja: Er wird automatisch je nach Gerät des Besuchers angewendet, mit jedem der 6 Themes. Um ihn zu vermeiden, stelle den Dunkelmodus auf „Immer hell“.
Welches Theme passt zum Online-Verkauf?
Das Theme Shop ist zum Verkaufen gemacht: quadratische Fotos, fixierter Header, markante Buttons. Die anderen Themes zeigen den Shop ebenfalls an; die Anleitung steht unter Der schlanke Shop.
Übersteht mein eigenes CSS Updates?
Ja, seit Éclair 1.5.0: Es liegt in data/, und das Update rührt diesen Ordner nicht an. Ersetzt werden nur Änderungen, die du direkt in app/theme/ gemacht hast.