# Website: Block-Referenz

{/* AUTO-SYNCED SOURCE: this page lives in apps/app/src/modules/website/docs/ and is mirrored into the docs app by `bun sync:module-docs`. Edit it in the module, not in apps/docs. */}

<Lead>
Jede Seite deiner Website besteht aus **Blöcken**. Der Picker im [Editor](/tools/website/editor) gliedert sie in drei Kategorien: **Inhalt & Überzeugung**, **Makler-Kern** und **Embeds & Integrationen**. Diese Seite ist die vollständige Referenz: Zweck, wichtigste Felder, Varianten und Besonderheiten pro Block.
</Lead>

<Info title="Gemeinsame Felder und Regeln">
Fast alle Blöcke haben die optionalen Kopf-Felder **Überzeile**, **Überschrift** und **Einleitung**. Bild-Felder heißen **Bild** plus **Bild-Beschreibung (Alt-Text)**. Einige Blöcke sind auf **einmal pro Seite** begrenzt: Hero, Kontakt, Handlungs-Banner, Termin-Buchung und Karte. Beim Duplizieren erscheint dann "Dieser Block ist nur einmal pro Seite möglich." Navigation und Fußbereich sind kein Picker-Block, sondern der feste Rahmen der Website (siehe [Design und Branding](/tools/website/design)).
</Info>

## Inhalt & Überzeugung

<Accordion>
  <AccordionItem title="Hero">
    Der große Einstiegsbereich der Seite mit Headline, Bild und Handlungsaufruf. Felder: **Headline**, **Akzent-Wort** (wird typografisch hervorgehoben), **Subline**, **Bild**, **Haupt-Aktion** und **Zweite Aktion** (je Beschriftung plus Link-Ziel). Varianten: **Text und Bild**, **Vollflächiges Bild**, **Reduziert**. Nur einmal pro Seite. Unterstützt [Texte generieren](/tools/website/editor#ki-texte-generieren).
  </AccordionItem>
  <AccordionItem title="Text und Bild">
    Fließtext mit optionalem Bild, der Grundbaustein für Inhaltsseiten. Felder: **Überzeile**, **Überschrift**, **Text** (Rich-Text), **Bild**, **Bild-Beschreibung (Alt-Text)**. Varianten: **Bild rechts**, **Bild links**, **Nur Text**. Unterstützt Texte generieren.
  </AccordionItem>
  <AccordionItem title="Leistungen">
    2 bis 6 Leistungs-Karten mit Icon, Titel und Kurztext. Felder: Kopf-Felder plus **Leistungen** als Liste; pro Eintrag **Icon** (z.B. Haus, Schlüssel, Diagramm, Handschlag, Kamera, Dokument, Lupe, Schild), **Titel**, **Text** und optional ein Link ("Mehr erfahren"). Varianten: **Karten**, **Liste**. Unterstützt Texte generieren.
  </AccordionItem>
  <AccordionItem title="Ablauf in Schritten">
    Dein Prozess in 3 bis 6 nummerierten Schritten, z.B. der Verkaufsablauf. Felder: Kopf-Felder plus **Schritte** (je Titel und Text). Varianten: **Nebeneinander**, **Untereinander**. Unterstützt Texte generieren.
  </AccordionItem>
  <AccordionItem title="Warum wir">
    3 bis 4 Vorteils-Kacheln, optional mit Zertifikats-Badges (bis zu 6 Badge-Bilder). Felder: Kopf-Felder plus **Einträge** (je Titel und Text) und optional **Badges**. Varianten: **Kacheln**, **Kacheln mit Siegeln**. Unterstützt Texte generieren.
  </AccordionItem>
  <AccordionItem title="Kundenstimmen">
    Zitate zufriedener Kundinnen und Kunden, optional mit Foto. Felder: Kopf-Felder plus **Kundenstimmen** (1 bis 6 Einträge; je **Zitat**, **Name**, **Zusatz (z.B. Ort)**, optional **Foto**) und ein optionaler Transparenz-Hinweis (z.B. "Alle Stimmen stammen aus echten, abgeschlossenen Aufträgen."). Varianten: **Mehrere Stimmen**, **Eine große Stimme**.
  </AccordionItem>
  <AccordionItem title="Fragen und Antworten">
    Häufige Fragen als aufklappbare Liste, gut für Google (FAQ-Auszeichnung in den strukturierten Daten). Felder: Kopf-Felder plus **Fragen** (1 bis 20 Einträge; je **Frage** und **Antwort**). Variante: **Akkordeon**. Unterstützt Texte generieren.
  </AccordionItem>
  <AccordionItem title="Handlungs-Banner">
    Abschluss-Banner mit einer klaren Handlung, z.B. Erstberatung vereinbaren. Felder: **Headline**, **Text**, **Haupt-Aktion**. Varianten: **Mit Farbverlauf**, **Schlicht**. Nur einmal pro Seite. Unterstützt Texte generieren.
  </AccordionItem>
</Accordion>

## Makler-Kern

<Accordion>
  <AccordionItem title="Immobilien-Angebote">
    Aktuelle Objekte automatisch aus deinem Bestand, mit Status und Eckdaten. Felder: Kopf-Felder plus **Anzahl** (3 bis 12), **Filter** nach **Objektart** (Wohnung, Haus, Gewerbe, Grundstück, Sonstiges) und **Vermarktung** (Kauf, Miete, Pacht), Schalter **Verkaufte als Referenz zeigen** und **Link zu allen Angeboten** (führt auf /immobilien). Varianten: **Karten-Raster**, **Große Reihe**. Die Daten kommen live aus dem Objektbestand; Details unter [Immobilien und Exposés](/tools/website/immobilien).
  </AccordionItem>
  <AccordionItem title="Team">
    Dein Team mit Foto, Funktion und Kontakt. Die Personen pflegst du zentral im Bereich [Team](/tools/website/team); der Block steuert nur Darstellung und Kopf-Felder plus die Schalter **Telefonnummer zeigen** und **E-Mail zeigen**. Varianten: **Kacheln**, **Liste mit Kurzprofil**.
  </AccordionItem>
  <AccordionItem title="Einzugsgebiet">
    Die Orte und Stadtteile, in denen du aktiv bist. Gut für lokale Suchanfragen. Felder: Kopf-Felder plus **Orte** (1 bis 40 Ortsnamen als Liste). Varianten: **Orts-Chips**, **Liste**.
  </AccordionItem>
  <AccordionItem title="Kontakt">
    Kontaktformular mit deinen Kontaktdaten; Anfragen landen als Leads im Workspace (siehe [Anfragen](/tools/website/anfragen)). Felder: Kopf-Felder plus Schalter **Telefonnummer zeigen**, **E-Mail zeigen**, **Betreff-Feld zeigen**. Varianten: **Formular und Kontaktdaten**, **Nur Formular**. Nur einmal pro Seite.
  </AccordionItem>
</Accordion>

## Embeds & Integrationen

<Accordion>
  <AccordionItem title="Termin-Buchung">
    Online-Terminbuchung über dein Termin-Tool, direkt auf der Website und ohne Drittanbieter. Felder: **Überzeile**, **Überschrift**, **Einleitung**, **Button-Text**. Varianten: **Eingebetteter Kalender**, **Buchungs-Karte**. Nur einmal pro Seite. Besonderheit: Ist das Termin-Tool im Workspace nicht installiert, zeigt der Block statt des Kalenders automatisch einen **Kontakt aufnehmen**-Button zur Kontaktseite. Es entsteht nie ein kaputter Bereich.
  </AccordionItem>
  <AccordionItem title="Karte">
    Google-Maps-Karte deines Standorts. Felder: **Adresse**, **Zoom-Stufe**. Variante: **Google Maps**. Nur einmal pro Seite. Besonderheit: Die Karte lädt erst nach Einwilligung über den Zwei-Klick-Schutz ("Karte laden. Dabei werden Daten an Google übertragen. Details finden Sie in unserer Datenschutzerklärung."). Der Datenschutz-Generator erkennt den Block automatisch als Dienst.
  </AccordionItem>
  <AccordionItem title="Video">
    Ein YouTube-Video, z.B. dein Imagefilm oder eine Objekt-Tour. Feld: **YouTube-Video-ID**. Variante: **YouTube**. Besonderheit: Auch das Video lädt erst nach Einwilligung über den Zwei-Klick-Schutz ("Video laden. Dabei werden Daten an Google (YouTube) übertragen. Details finden Sie in unserer Datenschutzerklärung.").
  </AccordionItem>
</Accordion>

<Tip title="Welche Blöcke für welche Seite?">
Eine überzeugende Leistungsseite ist meist: Hero, Text und Bild, Ablauf in Schritten, Fragen und Antworten, Handlungs-Banner (genau die Vorlage "Leistungsseite" unter [Seiten verwalten](/tools/website/seiten)). Die Startseite ergänzt Immobilien-Angebote, Warum wir und Kundenstimmen.
</Tip>

## Weiterführend

Wie du Blöcke einfügst, sortierst und mit KI füllst, steht unter [Der Editor](/tools/website/editor). Gestaltungs-Tipps zu Varianten und Akzent-Wort: [Design und Branding](/tools/website/design). Zurück zur [Website-Übersicht](/tools/website).