# Website: The editor
{/* 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. */}
The **editor** is where you work on page content: the section list with its input forms on the left, a live preview of your page inside a browser frame on the right. Every input shows up in the preview immediately, saving happens automatically, and nothing goes live without your deliberate publish.
## Layout
- **Left: sections.** Each section is one building block of the page (hero, services, contact and more, see the [block reference](/tools/website/bloecke)). Expanding a section reveals the form with all of the block's fields.
- **Right: live preview.** Your page in a browser frame, with real branding and real content. The **device toggle** switches between **Desktop-Vorschau** (desktop preview) and **Mobil-Vorschau** (mobile preview) so you check both renderings.
## Autosave and the save badge
The editor saves your changes automatically shortly after you stop typing (after roughly 2 seconds). The save badge at the top always shows the current state:
The change is being saved right now.
Everything is stored in the draft. You can safely leave the editor.
There are changes not yet stored. The browser warns you when leaving the page.
Someone else saved the page in parallel (see below).
Saving failed, e.g. due to the network connection or an invalid section ("Eine Sektion ist ungültig und wurde nicht gespeichert.", one section is invalid and was not saved).
Autosave only ever stores the draft. Visitors keep seeing the last published state until you actively [publish](/tools/website/veroeffentlichen).
## Conflict banner
If two people work on the same page at the same time, the editor detects it and shows a banner: "Jemand hat diese Seite inzwischen ebenfalls gespeichert. Neu laden verwirft deine Änderungen; Überschreiben ersetzt den anderen Stand." (someone else has saved this page in the meantime; reloading discards your changes, overwriting replaces the other state).
- **Neu laden** (reload) fetches the other person's state and discards your unsaved changes.
- **Überschreiben** (overwrite) pushes your state through and replaces the other changes.
Nothing is ever lost silently; the decision is yours. Tip: agree in the team who works on which page when.
## Section actions
Every section has an action bar:
Hides the section on the website without deleting its content. Handy for seasonal segments.
Moves the section within the page order.
Creates a copy including content. For blocks limited to one per page (e.g. hero or contact) you get: "Dieser Block ist nur einmal pro Seite möglich." (this block is only possible once per page).
Deletes the section after a confirmation ("Sektion entfernen").
New sections are added via **Block hinzufügen** (add block): "Kuratierte Bausteine. Jeder Block startet mit Beispiel-Inhalten und ist sofort anpassbar." (curated blocks; every block starts with sample content and is immediately editable). The picker groups the choice into **Inhalt & Überzeugung** (content and persuasion), **Makler-Kern** (agent essentials) and **Embeds & Integrationen** (embeds and integrations); details in the [block reference](/tools/website/bloecke).
## Variant picker
Many blocks ship in several design variants (e.g. the hero as "Text und Bild", "Vollflächiges Bild" or "Reduziert"). The variant picker shows real mini previews; one click switches the layout. **Switching variants never loses content**: all texts and images are kept, even if the new variant does not currently display a field.
## Uploading images
Image fields offer **Bild hochladen** (upload image) or **Bild ändern** (change image):
- Allowed formats: PNG, JPEG, WebP and AVIF.
- Uploads count against your plan's storage quota. Once it is full you will see "Der Speicher Ihres Plans ist voll." (your plan's storage is full); see [Add-on and billing](/tools/website/abo-und-abrechnung).
- Uploaded images also land in your workspace's central file storage under Tools/Website, so you can find them outside the editor too.
- Always maintain the **Bild-Beschreibung (Alt-Text)** field: good for accessibility and Google.
## Rich text and character counters
Long-text fields understand a deliberately lean syntax: blank line = new paragraph, "- " at the start of a line = bullet list, **bold**, *italic*, [text](/path). An agency website does not need more; this keeps every layout clean.
Fields with a length limit have a **character counter** that warns once you pass 90 percent of the limit. Shorter copy almost always reads better on the website.
## AI: generating copy
Text-heavy blocks offer the action **Texte generieren** (generate copy): hero, text with image, services, step-by-step process, why us, FAQ and the closing banner.
The input ("Optional: Wunsch, z.B. Fokus auf Verkauf", optional wish, e.g. focus on selling) steers the direction of the suggestions. Leaving it empty is perfectly fine.
Click **Texte generieren**. "Die Vorschläge nutzen Ihre Büro-Daten und vorhandene Texte. Sie landen nur im Entwurf." (the suggestions use your office data and existing texts; they only land in the draft).
After inserting, the tool confirms: "Texte eingesetzt. Prüfen und bei Bedarf anpassen." (copy inserted, review and adjust as needed). The texts are ordinary field content; change every word if you like. As always, nothing goes live without publishing.
Good to know:
- **Cost:** one run costs 2 credits, billed silently; the button deliberately shows no price. If your balance is too low you will see "Das Credit-Guthaben reicht dafür nicht aus." (the credit balance is not sufficient for this).
- **Without an AI provider:** if no AI provider is available in the workspace, the action falls back to solid pre-written copy from a built-in fallback. The feature is never broken, just less individual.
- **If nothing comes back** ("Es kamen keine Texte zurück. Bitte erneut versuchen.", no copy was returned, please retry), simply try again.
## Further reading
Every block with its fields and variants: [block reference](/tools/website/bloecke). How a draft goes live: [Publishing and versions](/tools/website/veroeffentlichen). Back to the [Website overview](/tools/website).