Bausteine: Basis
Die neun Bausteine, aus denen die meisten Seiten bestehen: Kopfbereich, Kennzahlen, Überschrift, Text, Leistungen, Preise, Fragen und der Handlungsaufruf. Zu jedem stehen hier alle Einstellungen mit Typ, Pflichtangabe und Vorgabewert.
Überblick
Die Bausteine, aus denen fast jede Seite besteht: Kopfbereich, Überschriften, Text, Leistungen, Preise und Fragen.
Diese Bausteine stehen im Editor links unter „Basis" ganz oben — die Kategorie ist beim Öffnen bereits aufgeklappt. Eine typische Startseite entsteht aus Hero, Feature-Grid, Kennzahlen, Preisen, FAQ und CTA in dieser Reihenfolge.
Wie die Tabellen zu lesen sind und welche Einstellungen jeder Baustein zusätzlich hat, steht auf der Übersicht des Kapitels.
Hero hero
Kopfbereich einer Seite mit der H1, einem kurzen Untertitel und bis zu zwei Buttons.
Die Überschrift des ersten Hero einer Seite wird zur H1 — der wichtigsten Überschrift für Suchmaschinen und Vorlesehilfen. Jeder weitere Hero auf derselben Seite sieht gleich aus, zählt aber eine Stufe tiefer.
- Im Editor
- Basis
- Seitenaufbau
- Eigenständig
- Einstellungen
- 19
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
headline | Text | Pflicht | keine Vorgabe | Die H1 der Seite; ==Text== setzt einen farbigen Akzent. |
eyebrow | Text | optional | keine Vorgabe | Kleine Zeile über der Überschrift, die Fach und Ort benennt. |
subline | Text | optional | keine Vorgabe | Ein Satz unter der Überschrift. |
facts | Einträge | optional | keine Vorgabe | Bis zu drei harte Angaben, die als Karte neben dem Text stehen. |
facts[].value | Text | Pflicht | keine Vorgabe | Die Angabe selbst, zum Beispiel eine Stückzahl oder eine Zeit. |
facts[].label | Text | optional | keine Vorgabe | Eine Zeile Erläuterung unter der Angabe. |
facts[].icon | Text | optional | keine Vorgabe | Name des Icons; unbekannte Namen fallen auf ein Standard-Icon zurück. |
badges | Textliste | optional | leer | Kurze Schlagworte, die als Chips im Hero stehen. |
cta | Gruppe | optional | keine Vorgabe | Hauptbutton des Hero. |
cta.text | Text | Pflicht | keine Vorgabe | Beschriftung des Buttons. |
cta.url | Text | Pflicht | keine Vorgabe | Ziel des Buttons als Pfad oder vollständige Adresse. |
secondaryCta | Gruppe | optional | keine Vorgabe | Zweiter, weniger betonter Button. |
secondaryCta.text | Text | Pflicht | keine Vorgabe | Beschriftung des Buttons. |
secondaryCta.url | Text | Pflicht | keine Vorgabe | Ziel des Buttons als Pfad oder vollständige Adresse. |
layout | Auswahl | optional | keine Vorgabe | Anordnung des Hero: classic, centered (zentriert), compact (flacher) oder bild-neben (gerahmtes Bild neben dem Text statt vollflaechig dahinter). Mögliche Werte: classic, centered, compact, bild-neben |
image | Text | optional | keine Vorgabe | Hintergrundbild; ohne Bild rendert der Hero die Animation des Themes. |
imageAlt | Text | optional | keine Vorgabe | Alternativtext, nur nötig wenn das Bild eine eigene Aussage trägt. |
focalX | Zahl | optional | keine Vorgabe | Waagerechter Bildausschnitt in Prozent: 0 linker Rand, 50 Mitte, 100 rechter Rand. Nur setzen, wenn der Zuschnitt das Motiv anschneidet. Wertebereich: 0–100 |
focalY | Zahl | optional | keine Vorgabe | Senkrechter Bildausschnitt in Prozent: 0 oben, 50 Mitte, 100 unten. Bei Portraets haeufig 30, damit der Kopf im Bild bleibt. Wertebereich: 0–100 |
Dazu kommen die gemeinsamen Einstellungen _style.
Kennzahlen stats-bar
Waagerechte Leiste mit wenigen Kennzahlen; Preise gehören nicht hierher.
- Im Editor
- Basis
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 5
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
layout | Auswahl | optional | keine Vorgabe | Darstellung: band (zusammenhängend), cards (getrennte Karten) oder plain (schlicht). Mögliche Werte: band, cards, plain |
items | Einträge | Pflicht | leer | Die Kennzahlen in Anzeigereihenfolge. |
items[].value | Text | Pflicht | keine Vorgabe | Der Wert der Kennzahl. |
items[].suffix | Text | optional | keine Vorgabe | Zeichen nach dem Wert, zum Beispiel ein Prozentzeichen. |
items[].label | Text | Pflicht | keine Vorgabe | Beschriftung unter dem Wert. |
Dazu kommen die gemeinsamen Einstellungen _style.
Überschrift heading
Zwischenüberschrift, die einen neuen Abschnitt der Seite eröffnet.
- Im Editor
- Basis
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 4
Unsere Werkstatt
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
text | Text | Pflicht | keine Vorgabe | Der Text der Überschrift. |
eyebrow | Text | optional | leer (Darstellung) | Kleine Zeile über der Überschrift, ein bis drei Wörter, die das Thema des Abschnitts benennen. |
level | Auswahl | optional | 2 | Rangstufe der Überschrift; Stufe 2 erscheint im Inhaltsverzeichnis. Mögliche Werte: 2, 3, 4 |
id | Text | optional | keine Vorgabe | Anker der Überschrift; ohne Angabe wird er aus dem Text gebildet. |
Dazu kommen die gemeinsamen Einstellungen _style.
Text paragraph
Fließtext für den Hauptteil einer Seite.
- Im Editor
- Basis
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 1
Fließtext für den Hauptteil einer Seite. Eine Leerzeile im Feld beginnt einen neuen Absatz, fett und kursiv funktionieren ebenso wie ein Link.
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
text | Text | Pflicht | keine Vorgabe | Der Fließtext; Markdown ist erlaubt. |
Dazu kommen die gemeinsamen Einstellungen _style.
Feature-Grid feature-grid
Raster aus Leistungen oder Vorteilen, je mit Symbol, Titel und Text.
Ab zwei ausgefüllten Karten entsteht daraus zusätzlich eine maschinenlesbare Liste für Suchmaschinen.
- Im Editor
- Basis
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 12
Reparatur
Ein bis zwei Sätze zur Leistung.
Wartung
Ähnliche Länge wirkt am ruhigsten.
Notdienst
Drei Karten füllen die Reihe aus.
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
columns | Auswahl | optional | 3 | Anzahl der Spalten; die Anzahl der Einträge sollte dazu passen. Mögliche Werte: 2, 3, 4 |
layout | Auswahl | optional | keine Vorgabe | Darstellung: cards (Karten), minimal (ohne Rahmen) oder centered (zentriert). Mögliche Werte: cards, minimal, centered |
items | Einträge | Pflicht | leer | Die Einträge des Rasters in Anzeigereihenfolge. |
items[].icon | Text | optional | keine Vorgabe | Name des Icons; unbekannte Namen fallen auf ein Standard-Icon zurück. |
items[].title | Text | Pflicht | keine Vorgabe | Titel des Eintrags. |
items[].text | Text | Pflicht | keine Vorgabe | Beschreibungstext des Eintrags. |
items[].image | Text | optional | keine Vorgabe | Bild des Eintrags als Adresse; es verdrängt das Symbol. Entweder alle Einträge oder keiner. |
items[].imageAlt | Text | optional | keine Vorgabe | Alternativtext des Eintragsbildes. |
items[].url | Text | optional | keine Vorgabe | Ziel des Eintrags als interner Pfad; nur setzen, wenn die Seite auch entsteht. |
items[].specs | Einträge | optional | keine Vorgabe | Zwei bis vier harte Angaben am Kartenfuß, etwa Garantie und Dauer. Nur belegte Werte. |
items[].specs[].label | Text | optional | keine Vorgabe | Bezeichnung der Angabe, etwa „Garantie“. |
items[].specs[].value | Text | Pflicht | keine Vorgabe | Wert der Angabe, etwa „12 Jahre“. |
Dazu kommen die gemeinsamen Einstellungen _style und columnsByBp.
Preis-Anker price-band
Ein einzelner, prominenter Preis mit Nutzenpunkten und Button.
Steht im Feld „price" ein Betrag, wird daraus zusätzlich eine Preisangabe für Suchmaschinen erzeugt. Tragen Sie dort deshalb nur Preise ein, die auf der Seite auch wirklich gelten.
- Im Editor
- Basis
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 11
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
price | Text | Pflicht | keine Vorgabe | Der Preis, groß gesetzt. |
eyebrow | Text | optional | keine Vorgabe | Kurze Zeile über dem Preis. |
unit | Text | optional | keine Vorgabe | Zusatz hinter dem Preis, zum Beispiel je Monat. |
note | Text | optional | keine Vorgabe | Fußnote unter dem Preis, etwa zur Mehrwertsteuer. |
bullets | Textliste | optional | leer | Nutzenpunkte unter dem Preis. |
button | Gruppe | optional | keine Vorgabe | Hauptbutton am Preis. |
button.text | Text | Pflicht | keine Vorgabe | Beschriftung des Buttons. |
button.url | Text | Pflicht | keine Vorgabe | Ziel des Buttons als Pfad oder vollständige Adresse. |
secondary | Gruppe | optional | keine Vorgabe | Zweiter, weniger betonter Button. |
secondary.text | Text | Pflicht | keine Vorgabe | Beschriftung des Buttons. |
secondary.url | Text | Pflicht | keine Vorgabe | Ziel des Buttons als Pfad oder vollständige Adresse. |
Dazu kommen die gemeinsamen Einstellungen _style.
Leistungsliste price-list
Liste einzelner Leistungen mit Preis, nach Art einer Speise- oder Behandlungskarte.
- Im Editor
- Basis
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 14
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | Unsere Leistungen | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
layout | Auswahl | optional | lines | Darstellung der Zeilen: lines, dots (Führungspunkte) oder cards (Karten). Mögliche Werte: lines, dots, cards |
items | Einträge | Pflicht | leer | Die Zeilen in Anzeigereihenfolge. |
items[].group | Text | optional | keine Vorgabe | Abschnitt, unter dem die Zeile steht, zum Beispiel Vorspeisen. |
items[].title | Text | Pflicht | keine Vorgabe | Name der Leistung. |
items[].text | Text | optional | keine Vorgabe | Kurze Beschreibung der Leistung. |
items[].price | Text | optional | keine Vorgabe | Preis der Leistung. |
items[].note | Text | optional | keine Vorgabe | Zusatz an der Zeile, zum Beispiel eine Dauer. |
items[].marks | Text | optional | keine Vorgabe | Kennzeichen dieser Zeile, durch Komma getrennt, zum Beispiel 1,3,g. Jedes Zeichen erscheint hochgestellt am Namen und muss in der Legende erklärt sein. |
legendTitle | Text | optional | keine Vorgabe | Überschrift über der Legende, zum Beispiel Kennzeichnung. |
legend | Einträge | optional | leer (Darstellung) | Legende zu den Kennzeichen; steht einmal unter der ganzen Liste. Für Speisekarten in Deutschland Pflicht, sobald Zusatzstoffe oder Allergene gekennzeichnet werden. |
legend[].mark | Text | Pflicht | keine Vorgabe | Das Zeichen, genau wie in der Zeile geschrieben, zum Beispiel 1 oder g. |
legend[].text | Text | Pflicht | keine Vorgabe | Bedeutung des Zeichens, zum Beispiel mit Farbstoff. |
Dazu kommen die gemeinsamen Einstellungen _style.
FAQ faq
Häufige Fragen mit Antworten; der Baustein liefert zusätzlich das FAQPage-Schema der Seite.
Aus allen FAQ-Bausteinen einer Seite entsteht gemeinsam ein maschinenlesbarer Frage-Antwort-Block für Suchmaschinen.
- Im Editor
- Basis
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 3
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
items | Einträge | Pflicht | leer | Die Fragen und Antworten in Anzeigereihenfolge. |
items[].question | Text | Pflicht | keine Vorgabe | Die Frage. |
items[].answer | Text | Pflicht | keine Vorgabe | Die Antwort auf die Frage. |
Dazu kommen die gemeinsamen Einstellungen _style.
CTA promo
Abschließender Aufruf zur Handlung; er wird im Fußbereich der Seite ausgegeben.
Dieser Baustein erscheint nicht an der Stelle, an der er in der Liste steht: Er wird in den Fußbereich der Seite ausgespielt. Pro Seite ist deshalb einer sinnvoll.
- Im Editor
- Basis
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 5
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | Pflicht | keine Vorgabe | Überschrift des Aufrufs. |
text | Text | Pflicht | keine Vorgabe | Ein Satz, der den Aufruf begründet. |
button_text | Text | Pflicht | keine Vorgabe | Beschriftung des Buttons. |
button_url | Text | Pflicht | keine Vorgabe | Ziel des Buttons. |
badge | Text | optional | keine Vorgabe | Kurzes Kennwort als Chip über der Überschrift. |
Dazu kommen die gemeinsamen Einstellungen _style.