# Website: Block reference

{/* 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>
Every page of your website is made of **blocks**. The picker in the [editor](/tools/website/editor) groups them into three categories: **Inhalt & Überzeugung** (content and persuasion), **Makler-Kern** (agent essentials) and **Embeds & Integrationen** (embeds and integrations). This page is the complete reference: purpose, key fields, variants and special rules per block.
</Lead>

<Info title="Shared fields and rules">
Almost every block has the optional header fields **Überzeile** (eyebrow), **Überschrift** (heading) and **Einleitung** (intro). Image fields are called **Bild** plus **Bild-Beschreibung (Alt-Text)**. Some blocks are limited to **once per page**: hero, contact, closing banner, booking and map. Duplicating one of them shows "Dieser Block ist nur einmal pro Seite möglich." (this block is only possible once per page). Navigation and footer are not picker blocks but the website's fixed frame (see [Design and branding](/tools/website/design)).
</Info>

## Content and persuasion (Inhalt & Überzeugung)

<Accordion>
  <AccordionItem title="Hero">
    The page's large opening section with headline, image and call to action. Fields: **Headline**, **Akzent-Wort** (accent word, typographically highlighted), **Subline**, **Bild** (image), **Haupt-Aktion** (primary action) and **Zweite Aktion** (secondary action), each with label and link target. Variants: **Text und Bild** (text and image), **Vollflächiges Bild** (full-bleed image), **Reduziert** (minimal). Once per page. Supports [AI copy generation](/tools/website/editor#ai-generating-copy).
  </AccordionItem>
  <AccordionItem title="Text und Bild (text with image)">
    Body copy with an optional image, the basic block for content pages. Fields: eyebrow, heading, **Text** (rich text), image, alt text. Variants: **Bild rechts** (image right), **Bild links** (image left), **Nur Text** (text only). Supports AI copy generation.
  </AccordionItem>
  <AccordionItem title="Leistungen (services)">
    2 to 6 service cards with icon, title and short text. Fields: header fields plus **Leistungen** as a list; per entry an **Icon** (e.g. house, key, chart, handshake, camera, document, magnifier, shield), **Titel**, **Text** and an optional link ("Mehr erfahren", learn more). Variants: **Karten** (cards), **Liste** (list). Supports AI copy generation.
  </AccordionItem>
  <AccordionItem title="Ablauf in Schritten (process)">
    Your process in 3 to 6 numbered steps, e.g. how a sale works. Fields: header fields plus **Schritte** (steps, each with title and text). Variants: **Nebeneinander** (side by side), **Untereinander** (stacked). Supports AI copy generation.
  </AccordionItem>
  <AccordionItem title="Warum wir (why us)">
    3 to 4 benefit tiles, optionally with certificate badges (up to 6 badge images). Fields: header fields plus **Einträge** (entries with title and text) and optional **Badges**. Variants: **Kacheln** (tiles), **Kacheln mit Siegeln** (tiles with badges). Supports AI copy generation.
  </AccordionItem>
  <AccordionItem title="Kundenstimmen (testimonials)">
    Quotes from happy clients, optionally with photo. Fields: header fields plus **Kundenstimmen** (1 to 6 entries; each with **Zitat** (quote), **Name**, **Zusatz (z.B. Ort)** (context, e.g. town) and optional photo) and an optional transparency note (e.g. "Alle Stimmen stammen aus echten, abgeschlossenen Aufträgen.", all quotes come from real, completed mandates). Variants: **Mehrere Stimmen** (several voices), **Eine große Stimme** (one large voice).
  </AccordionItem>
  <AccordionItem title="Fragen und Antworten (FAQ)">
    Frequent questions as an expandable list, good for Google (FAQ markup in the structured data). Fields: header fields plus **Fragen** (1 to 20 entries; each with **Frage** and **Antwort**). Variant: **Akkordeon** (accordion). Supports AI copy generation.
  </AccordionItem>
  <AccordionItem title="Handlungs-Banner (closing banner)">
    Closing banner with one clear action, e.g. booking a free consultation. Fields: **Headline**, **Text**, **Haupt-Aktion**. Variants: **Mit Farbverlauf** (with gradient), **Schlicht** (plain). Once per page. Supports AI copy generation.
  </AccordionItem>
</Accordion>

## Agent essentials (Makler-Kern)

<Accordion>
  <AccordionItem title="Immobilien-Angebote (property grid)">
    Current listings pulled automatically from your inventory, with status and key facts. Fields: header fields plus **Anzahl** (count, 3 to 12), **Filter** by **Objektart** (property type: apartment, house, commercial, plot, other) and **Vermarktung** (marketing type: sale, rent, lease), plus the switches **Verkaufte als Referenz zeigen** (show sold as references) and **Link zu allen Angeboten** (link to all offers, pointing to /immobilien). Variants: **Karten-Raster** (card grid), **Große Reihe** (featured row). The data comes live from the inventory; details under [Listings and exposés](/tools/website/immobilien).
  </AccordionItem>
  <AccordionItem title="Team">
    Your team with photo, role and contact details. The people are maintained centrally in the [Team](/tools/website/team) area; the block only controls presentation and header fields, plus the switches **Telefonnummer zeigen** (show phone) and **E-Mail zeigen** (show email). Variants: **Kacheln** (tiles), **Liste mit Kurzprofil** (list with short profile).
  </AccordionItem>
  <AccordionItem title="Einzugsgebiet (service area)">
    The towns and districts you are active in. Great for local search queries. Fields: header fields plus **Orte** (places, 1 to 40 names as a list). Variants: **Orts-Chips** (place chips), **Liste** (list).
  </AccordionItem>
  <AccordionItem title="Kontakt (contact)">
    Contact form with your contact details; submissions arrive as leads in the workspace (see [Enquiries](/tools/website/anfragen)). Fields: header fields plus the switches **Telefonnummer zeigen**, **E-Mail zeigen** and **Betreff-Feld zeigen** (show subject field). Variants: **Formular und Kontaktdaten** (form and contact details), **Nur Formular** (form only). Once per page.
  </AccordionItem>
</Accordion>

## Embeds and integrations (Embeds & Integrationen)

<Accordion>
  <AccordionItem title="Termin-Buchung (booking)">
    Online appointment booking through your booking tool, right on the website and without third parties. Fields: eyebrow, heading, intro, **Button-Text**. Variants: **Eingebetteter Kalender** (inline calendar), **Buchungs-Karte** (booking card). Once per page. Special rule: if the booking tool is not installed in the workspace, the block automatically shows a **Kontakt aufnehmen** (get in touch) button pointing to the contact page instead of a calendar. There is never a broken area.
  </AccordionItem>
  <AccordionItem title="Karte (map)">
    A Google Maps map of your location. Fields: **Adresse** (address), **Zoom-Stufe** (zoom level). Variant: **Google Maps**. Once per page. Special rule: the map only loads after consent via the two-click gate ("Karte laden. Dabei werden Daten an Google übertragen. Details finden Sie in unserer Datenschutzerklärung.", load map; data is transferred to Google, details in our privacy policy). The privacy generator detects the block automatically as a service.
  </AccordionItem>
  <AccordionItem title="Video">
    A YouTube video, e.g. your image film or a property tour. Field: **YouTube-Video-ID**. Variant: **YouTube**. Special rule: the video also only loads after consent via the two-click gate ("Video laden. Dabei werden Daten an Google (YouTube) übertragen. Details finden Sie in unserer Datenschutzerklärung.").
  </AccordionItem>
</Accordion>

<Tip title="Which blocks for which page?">
A convincing service page is usually: hero, text with image, process, FAQ, closing banner (exactly the "Leistungsseite" template under [Managing pages](/tools/website/seiten)). The home page adds the property grid, why us and testimonials.
</Tip>

## Further reading

How to insert, sort and AI-fill blocks: [The editor](/tools/website/editor). Design tips on variants and the accent word: [Design and branding](/tools/website/design). Back to the [Website overview](/tools/website).