Zum Inhalt springen
PageSpeed 100 als Auslieferungs-Standard
Auf dieser Seite

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
12
Alle Einstellungen des Bausteins Hero
EinstellungArtPflichtVorgabeBedeutung
headlineTextPflicht keine VorgabeDie H1 der Seite; ==Text== setzt einen farbigen Akzent.
sublineTextoptional keine VorgabeEin Satz unter der Überschrift.
badgesTextlisteoptionalleer Kurze Schlagworte, die als Chips im Hero stehen.
ctaGruppeoptional keine VorgabeHauptbutton des Hero.
cta.textTextPflicht keine VorgabeBeschriftung des Buttons.
cta.urlTextPflicht keine VorgabeZiel des Buttons als Pfad oder vollständige Adresse.
secondaryCtaGruppeoptional keine VorgabeZweiter, weniger betonter Button.
secondaryCta.textTextPflicht keine VorgabeBeschriftung des Buttons.
secondaryCta.urlTextPflicht keine VorgabeZiel des Buttons als Pfad oder vollständige Adresse.
layoutAuswahloptionalclassic (Darstellung)Anordnung des Hero: classic, centered (zentriert) oder compact (flacher). Mögliche Werte: classic, centered, compact
imageTextoptional keine VorgabeHintergrundbild; ohne Bild rendert der Hero die Animation des Themes.
imageAltTextoptional keine VorgabeAlternativtext, nur nötig wenn das Bild eine eigene Aussage trägt.

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

12

Jahre am Markt

480+

abgeschlossene Aufträge

24 h

Antwortzeit

Drei Kennzahlen als Beispielinhalt in der Darstellung „band". Der Wert steht groß, das Kürzel dahinter kommt aus „suffix".
Alle Einstellungen des Bausteins Kennzahlen
EinstellungArtPflichtVorgabeBedeutung
layoutAuswahloptionalband (Darstellung)Darstellung: band (zusammenhängend), cards (getrennte Karten) oder plain (schlicht). Mögliche Werte: band, cards, plain
itemsEinträgePflichtleer Die Kennzahlen in Anzeigereihenfolge.
items[].valueTextPflicht keine VorgabeDer Wert der Kennzahl.
items[].suffixTextoptional keine VorgabeZeichen nach dem Wert, zum Beispiel ein Prozentzeichen.
items[].labelTextPflicht keine VorgabeBeschriftung 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
3

Unsere Werkstatt

Eine Überschrift der Stufe 3 mit farbigem Akzent durch ==Text==.
Alle Einstellungen des Bausteins Überschrift
EinstellungArtPflichtVorgabeBedeutung
textTextPflicht keine VorgabeDer Text der Überschrift.
levelAuswahloptional2 Rangstufe der Überschrift; Stufe 2 erscheint im Inhaltsverzeichnis. Mögliche Werte: 2, 3, 4
idTextoptional keine VorgabeAnker 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.

Ein Textbaustein mit Auszeichnungen im Feld „text".
Alle Einstellungen des Bausteins Text
EinstellungArtPflichtVorgabeBedeutung
textTextPflicht keine VorgabeDer 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
6

Reparatur

Ein bis zwei Sätze zur Leistung.

Wartung

Ähnliche Länge wirkt am ruhigsten.

Notdienst

Drei Karten füllen die Reihe aus.

Drei Leistungen als Karten. Über „layout" wechseln Sie zwischen Karten, schlicht und zentriert.
Alle Einstellungen des Bausteins Feature-Grid
EinstellungArtPflichtVorgabeBedeutung
columnsAuswahloptional3 Anzahl der Spalten; die Anzahl der Einträge sollte dazu passen. Mögliche Werte: 2, 3, 4
layoutAuswahloptionalcards (Darstellung)Darstellung: cards (Karten), minimal (ohne Rahmen) oder centered (zentriert). Mögliche Werte: cards, minimal, centered
itemsEinträgePflichtleer Die Einträge des Rasters in Anzeigereihenfolge.
items[].iconTextoptional keine VorgabeName des Icons; unbekannte Namen fallen auf ein Standard-Icon zurück.
items[].titleTextPflicht keine VorgabeTitel des Eintrags.
items[].textTextPflicht keine VorgabeBeschreibungstext des Eintrags.

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

Festpreis

auf Anfrage je Auftrag
  • Kostenlose Erstberatung
  • Termin innerhalb einer Woche
  • Zwei Jahre Gewährleistung
Angebot anfordern

Alle Preise verstehen sich inklusive Anfahrt.

Der Preis-Anker bündelt Preis, Argumente und Button. Hier steht bewusst „auf Anfrage" statt eines Betrags.
Alle Einstellungen des Bausteins Preis-Anker
EinstellungArtPflichtVorgabeBedeutung
priceTextPflicht keine VorgabeDer Preis, groß gesetzt.
eyebrowTextoptional keine VorgabeKurze Zeile über dem Preis.
unitTextoptional keine VorgabeZusatz hinter dem Preis, zum Beispiel je Monat.
noteTextoptional keine VorgabeFußnote unter dem Preis, etwa zur Mehrwertsteuer.
bulletsTextlisteoptionalleer Nutzenpunkte unter dem Preis.
buttonGruppeoptional keine VorgabeHauptbutton am Preis.
button.textTextPflicht keine VorgabeBeschriftung des Buttons.
button.urlTextPflicht keine VorgabeZiel des Buttons als Pfad oder vollständige Adresse.
secondaryGruppeoptional keine VorgabeZweiter, weniger betonter Button.
secondary.textTextPflicht keine VorgabeBeschriftung des Buttons.
secondary.urlTextPflicht keine VorgabeZiel 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
9

Wartung

  • Jahresprüfung ab 120 €

    Sichtprüfung und Messprotokoll

  • Kleinreparatur ab 60 €

    Bis 30 Minuten vor Ort

Beratung

  • Bestandsaufnahme ab 180 €

    Vor-Ort-Termin mit Bericht

    wird bei Auftrag verrechnet

Eine Leistungsliste mit Beispielinhalten in der Darstellung „lines". Gleiche Einträge in „group" werden zu einer Gruppe zusammengefasst.
Alle Einstellungen des Bausteins Leistungsliste
EinstellungArtPflichtVorgabeBedeutung
titleTextoptionalUnsere Leistungen Überschrift über dem Baustein.
subtitleTextoptional keine VorgabeKurzer Text unter der Überschrift.
layoutAuswahloptionallines Darstellung der Zeilen: lines, dots (Führungspunkte) oder cards (Karten). Mögliche Werte: lines, dots, cards
itemsEinträgePflichtleer Die Zeilen in Anzeigereihenfolge.
items[].groupTextoptional keine VorgabeAbschnitt, unter dem die Zeile steht, zum Beispiel Vorspeisen.
items[].titleTextPflicht keine VorgabeName der Leistung.
items[].textTextoptional keine VorgabeKurze Beschreibung der Leistung.
items[].priceTextoptional keine VorgabePreis der Leistung.
items[].noteTextoptional keine VorgabeZusatz an der Zeile, zum Beispiel eine Dauer.

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
Alle Einstellungen des Bausteins FAQ
EinstellungArtPflichtVorgabeBedeutung
itemsEinträgePflichtleer Die Fragen und Antworten in Anzeigereihenfolge.
items[].questionTextPflicht keine VorgabeDie Frage.
items[].answerTextPflicht keine VorgabeDie 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
Alle Einstellungen des Bausteins CTA
EinstellungArtPflichtVorgabeBedeutung
titleTextPflicht keine VorgabeÜberschrift des Aufrufs.
textTextPflicht keine VorgabeEin Satz, der den Aufruf begründet.
button_textTextPflicht keine VorgabeBeschriftung des Buttons.
button_urlTextPflicht keine VorgabeZiel des Buttons.
badgeTextoptional keine VorgabeKurzes Kennwort als Chip über der Überschrift.

Dazu kommen die gemeinsamen Einstellungen _style.