Die Schlüssel mit Sonderrolle
Acht Kennungen binden ein Theme an das Branding des Betriebs, zwölf erscheinen sofort in der Vorschau — wer sie anders benennt, verliert beides.
Für EntwicklerVoraussetzungen
- Recht: website:write
Diese ACHT Kennungen werden aus dem Branding des Betriebs gefüllt, solange der Redakteur sie nicht abweichend gesetzt hat: `color_bg` und `color_surface` (aus der Hintergrundfarbe), `color_accent` (aus der Primär- beziehungsweise Akzentfarbe), `color_text` und `color_text_muted` (aus der Textfarbe), `font_headline`, `font_body` und `logo`.
Wer sein Theme so benennt, bekommt die Einrichtung geschenkt: Ein Betrieb, der im Assistenten seine Farben und sein Logo hinterlegt hat, sieht sein Theme sofort in der eigenen Handschrift. Wer die Felder anders nennt, muss alles von Hand pflegen lassen.
ZWÖLF Kennungen erscheinen zusätzlich SOFORT in der Vorschau des Theme-Editors, ohne Speichern und Neuladen: `color_bg`, `color_surface`, `color_text`, `color_text_muted`, `color_accent`, `color_border`, `font_headline`, `font_body`, `headline_scale`, `letter_spacing_eyebrow`, `section_padding_y` und `container_max`.
Jede andere Kennung braucht Speichern und einen Neuaufbau der Vorschau. Wenn also eine Farbe beim Schieben sofort mitgeht und eine andere nicht, liegt es genau daran — nicht an einem Fehler.
Für die Vorschau gilt darüber hinaus eine strenge Prüfung: Es werden nur Kennungen aus Kleinbuchstaben, Ziffern und Bindestrichen übernommen, nur kurze Werte, und höchstens 64 Stück auf einmal.
Codebeispiele
[ { "name": "Farben", "settings": [ { "type": "color", "id": "color_bg", "label": "Hintergrund", "default": "#FBFAF8" }, { "type": "color", "id": "color_surface", "label": "Flächen", "default": "#FFFFFF" }, { "type": "color", "id": "color_accent", "label": "Akzent", "default": "#9A7B4F" }, { "type": "color", "id": "color_text", "label": "Text", "default": "#1C1B19" }, { "type": "color", "id": "color_text_muted", "label": "Text, gedämpft", "default": "#6E6A63" } ] }, { "name": "Marke", "settings": [ { "type": "font_family", "id": "font_headline", "label": "Schrift für Überschriften", "default": "Cormorant Garamond" }, { "type": "font_family", "id": "font_body", "label": "Schrift für Fliesstext", "default": "Inter" }, { "type": "image_picker", "id": "logo", "label": "Logo" } ] }]:root { --farbe-hintergrund: {{ settings.color_bg | default: '#FBFAF8' }}; --farbe-akzent: {{ settings.color_accent | default: '#9A7B4F' }}; --farbe-text: {{ settings.color_text | default: '#1C1B19' }}; --schrift-titel: "{{ settings.font_headline | default: 'Cormorant Garamond' }}", Georgia, serif; --schrift-text: "{{ settings.font_body | default: 'Inter' }}", system-ui, sans-serif; --breite-inhalt: {{ settings.container_max | default: 1280 }}px;} .knopf { background: var(--farbe-akzent); font-family: var(--schrift-text); }Siehe auch
- Theme-Einstellungen: Schema, Werte und ihre RangfolgeWie aus Schema, gespeicherten Werten und dem Branding des Betriebs das Objekt settings entsteht.
- Welche Einstellungstypen es gibtZwölf Typen, die der Editor darstellt — alles andere erscheint stillschweigend gar nicht.
- Logo, Farben und Kontaktdaten an einer Stelle pflegenDie Branding-Seite ist die Quelle, aus der Theme, Widget und Website ihre Farben, Schriften und Kontaktangaben ziehen.