# Website: Der 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. */}
Der **Editor** ist dein Arbeitsplatz für Seiteninhalte: links die Sektions-Liste mit den Eingabe-Formularen, rechts die Live-Vorschau deiner Seite in einem Browser-Rahmen. Jede Eingabe erscheint sofort in der Vorschau, gespeichert wird automatisch, und live geht nichts ohne dein bewusstes Veröffentlichen.
## Aufbau
- **Links: Sektionen.** Jede Sektion ist ein Baustein der Seite (Hero, Leistungen, Kontakt und mehr, siehe [Block-Referenz](/tools/website/bloecke)). Aufklappen zeigt das Formular mit allen Feldern des Blocks.
- **Rechts: Live-Vorschau.** Deine Seite im Browser-Rahmen, mit echtem Branding und echten Inhalten. Der **Geräte-Umschalter** wechselt zwischen **Desktop-Vorschau** und **Mobil-Vorschau**, damit du beide Darstellungen prüfst.
## Autosave und Save-Badge
Der Editor speichert deine Änderungen automatisch kurz nachdem du aufhörst zu tippen (nach rund 2 Sekunden). Das Save-Badge oben zeigt jederzeit den Zustand:
Die Änderung wird gerade gesichert.
Alles ist im Entwurf gesichert. Du kannst den Editor gefahrlos verlassen.
Es gibt Änderungen, die noch nicht gesichert sind. Beim Verlassen der Seite warnt dich der Browser.
Jemand anderes hat die Seite parallel gespeichert (siehe unten).
Das Speichern ist fehlgeschlagen, z.B. wegen der Netzwerkverbindung oder einer ungültigen Sektion ("Eine Sektion ist ungültig und wurde nicht gespeichert.").
Autosave sichert immer nur den Entwurf. Besucher sehen weiterhin den letzten veröffentlichten Stand, bis du aktiv [veröffentlichst](/tools/website/veroeffentlichen).
## Konflikt-Banner
Arbeiten zwei Personen gleichzeitig an derselben Seite, erkennt der Editor das und zeigt ein Banner: "Jemand hat diese Seite inzwischen ebenfalls gespeichert. Neu laden verwirft deine Änderungen; Überschreiben ersetzt den anderen Stand."
- **Neu laden** holt den fremden Stand und verwirft deine ungespeicherten Änderungen.
- **Überschreiben** setzt deinen Stand durch und ersetzt die fremden Änderungen.
So geht nie still etwas verloren; die Entscheidung triffst du. Tipp: Sprecht euch ab, wer wann an welcher Seite arbeitet.
## Sektions-Aktionen
Jede Sektion hat eine Aktions-Leiste:
Blendet die Sektion auf der Website aus, ohne ihre Inhalte zu löschen. Praktisch für saisonale Abschnitte.
Verschiebt die Sektion in der Seiten-Reihenfolge.
Erstellt eine Kopie samt Inhalten. Bei Blöcken, die nur einmal pro Seite erlaubt sind (z.B. Hero oder Kontakt), erscheint stattdessen: "Dieser Block ist nur einmal pro Seite möglich."
Löscht die Sektion nach einer Bestätigung ("Sektion entfernen").
Neue Sektionen fügst du über **Block hinzufügen** ein: "Kuratierte Bausteine. Jeder Block startet mit Beispiel-Inhalten und ist sofort anpassbar." Der Picker gliedert die Auswahl in die Kategorien **Inhalt & Überzeugung**, **Makler-Kern** und **Embeds & Integrationen** (Details in der [Block-Referenz](/tools/website/bloecke)).
## Varianten-Wähler
Viele Blöcke haben mehrere Design-Varianten (z.B. Hero als "Text und Bild", "Vollflächiges Bild" oder "Reduziert"). Der Varianten-Wähler zeigt echte Mini-Vorschauen; ein Klick wechselt das Layout. **Ein Varianten-Wechsel verliert nie Inhalte**: Alle Texte und Bilder bleiben erhalten, auch wenn die neue Variante ein Feld gerade nicht anzeigt.
## Bilder hochladen
Bild-Felder bieten **Bild hochladen** beziehungsweise **Bild ändern**:
- Erlaubte Formate: PNG, JPEG, WebP und AVIF.
- Uploads zählen auf die Speicher-Quota deines Plans. Ist sie erschöpft, erscheint "Der Speicher Ihres Plans ist voll." (siehe [Add-on und Abrechnung](/tools/website/abo-und-abrechnung)).
- Hochgeladene Bilder landen zusätzlich im zentralen Dateispeicher deines Workspace unter Tools/Website, du findest sie also auch außerhalb des Editors wieder.
- Pflege bei Bildern immer die **Bild-Beschreibung (Alt-Text)**: gut für Barrierefreiheit und Google.
## Rich-Text und Zeichen-Zähler
Text-Felder mit Fließtext verstehen eine bewusst schlanke Syntax: "Leerzeile = neuer Absatz · \"- \" am Zeilenanfang = Aufzählung · **fett** · *kursiv* · [Text](/pfad)". Mehr braucht eine Makler-Website nicht; so bleibt jedes Layout sauber.
Felder mit Längen-Limit haben einen **Zeichen-Zähler**, der ab 90 Prozent des Limits warnt. Kürzere Texte wirken auf der Website fast immer besser.
## KI: Texte generieren
Textlastige Blöcke haben die Aktion **Texte generieren**: Hero, Text und Bild, Leistungen, Ablauf in Schritten, Warum wir, Fragen und Antworten sowie Handlungs-Banner.
Das Eingabefeld ("Optional: Wunsch, z.B. Fokus auf Verkauf") steuert die Richtung der Vorschläge. Leer lassen ist völlig in Ordnung.
Klick auf **Texte generieren**. "Die Vorschläge nutzen Ihre Büro-Daten und vorhandene Texte. Sie landen nur im Entwurf."
Nach dem Einsetzen bestätigt das Tool: "Texte eingesetzt. Prüfen und bei Bedarf anpassen." Die Texte sind normale Feld-Inhalte; du kannst jedes Wort ändern. Live geht wie immer nichts ohne Veröffentlichen.
Gut zu wissen:
- **Kosten:** Ein Lauf kostet 2 Credits und wird still abgebucht; auf dem Button steht bewusst kein Preis. Reicht das Guthaben nicht, erscheint "Das Credit-Guthaben reicht dafür nicht aus."
- **Ohne KI-Anbindung:** Ist im Workspace kein KI-Provider verfügbar, liefert die Aktion solide vorformulierte Texte aus einem eingebauten Fallback. Die Funktion ist also nie kaputt, nur weniger individuell.
- **Kommt nichts zurück** ("Es kamen keine Texte zurück. Bitte erneut versuchen."), einfach wiederholen.
## Weiterführend
Alle Bausteine mit Feldern und Varianten: [Block-Referenz](/tools/website/bloecke). Wie der Entwurf live geht: [Veröffentlichen und Versionen](/tools/website/veroeffentlichen). Zurück zur [Website-Übersicht](/tools/website).