Website bearbeiten

Draftly bietet Ihnen drei verschiedene Bearbeitungsmodi:

Für Designänderungen Chat-Bearbeitungen verwenden. Für Textanpassungen Inline-Bearbeitung verwenden. Für strukturelle Änderungen, die der Chat nicht handhaben kann, den Code-Editor verwenden.

Chat-Bearbeitungen sind das primäre Iterationswerkzeug. Wenn Sie nach der Generierung im Chat tippen, analysiert die KI: 1. Ihre Anfrage 2. Generiert einen minimalen Satz von HTML/CSS-Patches (0–8 Operationen) 3. Wendet sie live auf die Vorschau an 4. Zieht 0,5 Credits ab

Was Chat-Bearbeitungen können: - Beliebige CSS-Farbe, Verlauf oder Variable ändern - Beliebigen Text umschreiben — Überschriften, Fließtext, Schaltflächenbeschriftungen - Abschnitte umstrukturieren — Rasterspalten, Liste vs. Karten - Elemente innerhalb von Abschnitten hinzufügen oder entfernen - Schriftarten, Abstände, Padding, Rahmenformen ändern - Einen neuen Abschnitt am Ende der Seite einfügen

Was eine vollständige Neugenerierung auslöst: - Vollständiges strukturelles Redesign (ändert die Layoutarchitektur) - Anfragen, die das Neuausführen der Bild- oder Video-Pipeline erfordern - Zu diffuse Änderungen, um sie als gezielte Patches auszudrücken

Eine deutliche Warnung erscheint vor jeder vollständigen Neugenerierung. Sie sehen die Credit-Kosten und können abbrechen.

Klicken Sie auf einen beliebigen sichtbaren Text in der Website-Vorschau, um ihn zu bearbeiten. Eine bearbeitbare Überlagerung erscheint — geben Sie Ihren neuen Text ein und drücken Sie Enter oder klicken Sie woanders, um zu bestätigen.

Was Sie inline bearbeiten können: - Hero-Überschrift und Unterzeile - Navigationslinkbeschriftungen - Abschnittsüberschriften und Fließtext - Schaltflächenbeschriftungen - Footer-Tagline und Kontaktinformationen

Inline-Bearbeitungen werden automatisch in Ihrem Projekt gespeichert. Erneutes Veröffentlichen wendet sie auf die Live-Website an.

Inline-Bearbeitung ist völlig kostenlos — null Credits.

Design-Vorlagen sind Ein-Klick-Stilumwandlungen, die den gesamten visuellen Charakter Ihrer Website ändern, ohne den Inhalt zu berühren.

Öffnen Sie das Vorlagen-Panel über das Pinselsymbol im linken Builder-Panel.

Vorlagenkategorien: - Branche — Restaurant, SaaS, Portfolio, Agentur, Gesundheitswesen, Fitness, Immobilien, Schönheit - Farbpaletten — Dunkel, Hell, Stimmungsvoll, Lebendig, Minimal, Luxus, Ember, Ozean, Wald - Typografie-Sets — Modernes Sans, Klassische Serifen, Geometrisch, Monospace, Editorial - Layout-Dichte — Luftig (großzügiger Weißraum), Standard, Kompakt

Eine Vorlage anwenden: Auf eine beliebige Vorlage klicken — die Vorschau aktualisiert sich live. Auf eine andere klicken, um zu vergleichen. Anwenden, um zu bestätigen.

Vorlagen modifizieren CSS-Variablen und Schriftartenauswahl — nicht die HTML-Struktur. Sie sind völlig kostenlos, keine Credits verbraucht.

Farben in Ihrer Website werden als CSS-Variablen im <style>-Block gespeichert:

Drei Möglichkeiten, Farben zu ändern: - Chat: "Primären Akzent auf #FF6B35 ändern" oder "Hintergrund in ein tiefes Marine machen" - Design-Vorlagen: Eine koordinierte Farbpalette wählen — ändert alle Variablen auf einmal - Code-Editor: :root-CSS-Variablen direkt im Code-Tab bearbeiten

Chat-Farbänderungen kosten 0,5 Credits. Vorlagen- und Code-Änderungen sind kostenlos.

Jede vollständige Neugenerierung und größere Bearbeitung erstellt einen Versionspunkt, der in Ihrem Verlauf-Tab gespeichert wird.

Zurücksetzen: 1. Verlauf-Tab im Builder öffnen 2. Auf eine beliebige frühere Version klicken, um sie im rechten Bereich anzuzeigen 3. Wiederherstellen klicken, um sie zur aktuellen Version zu machen

Zurücksetzen ist kostenlos — stellt das gespeicherte HTML wieder her, ohne Credits zu verbrauchen.

Verlaufspunkte werden in Firestore gespeichert und überleben Browser-Aktualisierungen, Gerätewechsel und Sitzungsabmeldungen.