DokumentationBearbeiten & VeröffentlichenAnpassungsleitfaden

Anpassungsleitfaden

Erfahren Sie, wie Sie Ihre Draftly-Website bearbeiten, gestalten und erweitern, ohne Code zu berühren.

Wie die Anpassung funktioniert

Draftly bietet Ihnen drei Möglichkeiten, Ihre Website nach der Generierung anzupassen:

1. Klicken zum Bearbeiten (Inline-Bearbeitung) — Schalten Sie Bearbeiten in der Vorschau-Symbolleiste um und klicken Sie dann auf einen beliebigen Text oder ein Element. Der Inspektor zeigt Typografie, Abstände, Farben und Animationssteuerungen an. Änderungen werden live angewendet.

2. Chat zum Ändern — Geben Sie eine fokussierte Anweisung pro Nachricht ein (z.B. „Hintergrund des Hero-Bereichs in Dunkelblau ändern“, „einen Preisbereich hinzufügen“). Draftly patcht nur die relevanten Teile — typischerweise 0,5 Credits pro Bearbeitung.

3. Website-UI neu generieren — Klicken Sie auf ↺ Website neu generieren, um einen neuen KI-Design-Durchlauf durchzuführen, während Ihre Videos, Bilder und Scroll-Frames beibehalten werden.

Optional: Wechseln Sie zu einer vordefinierten Vorlage aus der Vorlagen-Auswahl für einen schnelleren Layout-Tausch.

Empfohlener Anpassungs-Workflow

Für die reibungsloseste Erfahrung folgen Sie dieser Reihenfolge:

1.Vorschau in neuem Tab — Überprüfen Sie Scroll-Bewegung und Layout ohne Builder-Oberfläche
2.Inline-Bearbeitung — Korrigieren Sie genauen Text, Schaltflächenbeschriftungen und Farben durch Klicken auf Elemente
3.Chat — eine Änderung pro Nachricht für Abschnitte, Themenwechsel oder Umschreibungen
4.Integrationen (Tab „Versand“) — GA4, Kontaktformular, benutzerdefinierte Head-Skripte
5.Erneut veröffentlichen nach Bearbeitungen, damit die Live-URL der Vorschau entspricht

Vermeiden Sie: vage Anfragen wie „mach es besser“ — geben Sie an, was geändert werden soll. Verwenden Sie Anleitung (Header) oder fragen Sie im Chat: „Wie passe ich Text an?“

Text & Farben bearbeiten

Um ein Element inline zu bearbeiten:

1.Stellen Sie sicher, dass Sie sich im Builder auf dem Tab Vorschau befinden.
2.Klicken Sie in der Vorschau auf einen beliebigen Text, eine Überschrift oder einen farbigen Block.
3.Das Overlay Inline-Bearbeitung öffnet sich rechts mit:
• - Text — Inhalt direkt bearbeiten
• - Farbe — Hex-Eingabe oder Farbwähler
• - Schriftfamilie — Dropdown mit 26 Schriftarten
• - Schriftgröße — Bereichsregler
• - Schriftstärke — 8 Optionen von Dünn bis Schwarz
4.Klicken Sie auf Speichern, um die Änderungen zu übernehmen, oder auf Abbrechen, um sie rückgängig zu machen.

Sie können auch auf KI umschreiben klicken, damit Draftly den ausgewählten Text in einem besseren Ton umschreibt, oder auf Bild ersetzen, um ein Hintergrund- oder Produktbild auszutauschen.

Design-Presets verwenden

Design-Presets ermöglichen es Ihnen, den gesamten visuellen Stil Ihrer Website mit einem Klick zu ändern.

1.Klicken Sie in der Builder-Symbolleiste auf die Schaltfläche Stile.
2.Das Presets-Panel öffnet sich mit drei Tabs:
• - Vertikal — 25 Branchen-Presets (Restaurant, SaaS, Immobilien, Mode usw.) — jedes wendet eine kuratierte Farbpalette, Schriftartenkombination und einen Layout-Stil an.
• - Farben — 12 Akzentfarbfelder + benutzerdefinierte Hex-Eingabe, um die primäre Akzentfarbe zu ändern.
• - Stil — 5 Navigationsstile, 5 Hero-Layouts und 5 Animations-Presets.
3.Klicken Sie auf ein beliebiges Preset, um es in der Vorschau anzuzeigen, und klicken Sie dann auf Anwenden, um Ihre Website mit dem neuen Stil neu zu generieren.

Presets werden mit Ihrem Inhalt kombiniert — Ihr Text, Ihre Abschnitte und Ihr Markenname bleiben gleich; nur das visuelle System ändert sich.

Chat zum Ändern

Chat-to-modify ist der schnellste Weg, strukturelle Änderungen ohne vollständige Neugenerierung vorzunehmen.

So funktioniert's: Geben Sie eine beliebige Anweisung in die Chatleiste ein, während Ihre Website geladen ist. Beispiele: - *"Ändern Sie die Hero-Überschrift in etwas Spannenderes"* - *"Fügen Sie einen FAQ-Bereich zwischen Preisgestaltung und Kontakt hinzu"* - *"Machen Sie das Farbschema dunkler und professioneller"* - *"Schreiben Sie den Über-uns-Bereich persönlicher"* - *"Ersetzen Sie den Text des Hero-CTA-Buttons durch 'Kostenloses Angebot einholen'"*

Draftly sendet nur den relevanten Abschnitt des HTML Ihrer Website an die KI – nicht die ganze Seite – sodass Bearbeitungen schnell sind und 0,5 Credits statt der vollen Neugenerierungskosten kosten.

Tipps: - Seien Sie spezifisch: "Navigationshintergrund auf Schwarz ändern" funktioniert besser als "dunkler machen" - Verweisen Sie auf Abschnitte namentlich: "der Dienstleistungsbereich", "der Footer" - Sie können Bearbeitungen verketten – jede Chat-Nachricht ist ein neuer gezielter Patch

Analytics & Tracking hinzufügen

Verbinden Sie Google Analytics, Google Tag Manager, Facebook Pixel oder jedes benutzerdefinierte Tracking-Skript mit Ihrer Website – kein Code erforderlich.

1.Klicken Sie in der Builder-Symbolleiste auf die Schaltfläche Integrationen (Steckersymbol).
2.Das Integrationspanel öffnet sich mit Feldern für:
• - Google Analytics 4 — Fügen Sie Ihre Measurement ID ein (Format: G-XXXXXXXXXX). Sie finden diese in GA4 → Verwaltung → Datenstreams.
• - Google Tag Manager — Fügen Sie Ihre Container ID ein (Format: GTM-XXXXXXX). Sie finden diese in GTM → Verwaltung → Container ID.
• - Facebook Pixel — Fügen Sie Ihre 15-stellige Pixel ID ein. Sie finden diese im Meta Events Manager.
• - Benutzerdefiniertes Head-Skript — Fügen Sie einen beliebigen <script>-Block ein, der in den <head>-Bereich eingefügt werden soll (nur HTTPS-Quellen).
3.Klicken Sie auf Integrationen speichern.
4.Wenn Sie Ihre Website das nächste Mal generieren oder neu generieren, werden die Tracking-Skripte automatisch eingefügt.

Alle Skripte werden in den <head>-Bereich des HTML Ihrer veröffentlichten Website eingefügt. GTM erhält auch den erforderlichen <noscript>-iFrame, der nach <body> eingefügt wird.

Kontaktformular hinzufügen

Jede Draftly-Website kann ein funktionierendes Kontaktformular enthalten, das Einsendungen direkt in Ihren Draftly-Posteingang sendet und Ihnen eine Benachrichtigung per E-Mail schickt.

1.Klicken Sie in der Builder-Symbolleiste auf die Schaltfläche Integrationen.
2.Schalten Sie Kontaktformular aktivieren auf Ein (standardmäßig für neue Websites aktiviert).
3.Klicken Sie auf Integrationen speichern.
4.Generieren oder regenerieren Sie Ihre Website – ein Kontaktformular wird automatisch zur Website hinzugefügt.

So funktioniert's: - Wenn Ihre generierte Website bereits ein <form>-Element enthält (üblich bei Websites mit einem Kontaktbereich), passt Draftly es an, um es an das Draftly-Backend zu senden. - Wenn kein Formular existiert, fügt Draftly einen gestylten Formularbereich vor dem Footer ein. - Einsendungen werden in Ihrem Draftly-Konto unter dem Tab Einsendungen der Website gespeichert. - Sie erhalten eine E-Mail-Benachrichtigung für jede neue Einsendung mit dem Namen, der E-Mail-Adresse und der Nachricht des Besuchers.

Alle Daten bleiben innerhalb von Draftly – keine Drittanbieter-Formulardienste erforderlich.

ZurückIhre Website bearbeitenWeiterSEO Best Practices