So verwenden Sie HtmlDrag: HTML importieren, bearbeiten, verfeinern und exportieren

Dieses Handbuch folgt dem realen Arbeitsablauf vom Ausgangsmaterial bis zum fertigen HTML-Ergebnis. Erfahren Sie, wie Sie eine vorhandene Seite importieren, eine öffentliche URL erfassen, den KI-Feinschliff verwenden, unterstützte Dateien in bearbeitbares HTML umwandeln, visuelle Änderungen vornehmen und Ihre Arbeit speichern, teilen oder exportieren.

1. Inhalte in HtmlDrag übernehmen

Wählen Sie den Einstieg, der zu Ihrem vorhandenen Ausgangsmaterial passt. HTML hochladen und Code einfügen öffnen eine bestehende Seite zur visuellen Bearbeitung; Webseite duplizieren erfasst eine öffentliche Webseite; KI-Feinschliff nimmt gezielte Änderungen an einer importierten Seite vor; Datei zu Html wandelt unterstützte Dokumente und Bilder in einen bearbeitbaren HTML-Entwurf um.

1.1 Arbeitsbereich der Startseite

Der Arbeitsbereich der Startseite bündelt die wichtigsten Einstiege: HTML bearbeiten für vorhandenes HTML, KI-Feinschliff für gezielte Änderungen an einer importierten Seite und Datei zu Html zum Erzeugen einer bearbeitbaren Seite aus Ausgangsmaterial. Wählen Sie den Einstieg, der zu Ihrem Ausgangspunkt passt, und arbeiten Sie anschließend im Editor oder in der Vorschau weiter.

1.2 Webseite duplizieren

Webseite duplizieren erfasst eine öffentliche Webseite und macht daraus ein bearbeitbares Projekt. Das ist hilfreich, wenn Sie eine live erreichbare Referenzseite haben, aber nicht über deren ursprüngliche HTML-Datei verfügen.

Öffentliche URL eingeben

Öffnen Sie Webseite duplizieren, fügen Sie eine öffentliche http://- oder https://-Adresse ein und klicken Sie auf Kopieren. Private Netzwerkadressen, lokale Dateipfade und Seiten, die eine private Anmeldung erfordern, werden nicht unterstützt.

Webseite duplizieren: öffentliche Webseitenadresse einfügen und eine Kopie starten

Erfasste Seite prüfen

Prüfen Sie die Seite nach Abschluss der Erfassung in der Vorschau oder im Editor. Externe Ressourcen, geschützte Bilder oder Inhalte, die ausschließlich per JavaScript erzeugt werden, werden möglicherweise nicht vollständig reproduziert. Wenn das Ergebnis unvollständig ist, fügen Sie das gerenderte HTML ein oder laden Sie stattdessen das ursprüngliche HTML hoch.

1.3 HTML hochladen

Verwenden Sie HTML hochladen, wenn Sie bereits eine .html- oder .htm-Datei besitzen und visuelle Änderungen vornehmen möchten, ohne die Seite von Grund auf neu zu erstellen.

Vorhandene HTML-Datei auswählen

Wählen Sie HTML hochladen und klicken oder ziehen Sie anschließend eine HTML-Datei in den Upload-Bereich. Die Ausgangsseite bleibt die Grundlage des Editors; HtmlDrag wandelt sie nicht in einen statischen Screenshot um.

HTML hochladen: vorhandene .html- oder .htm-Datei auswählen oder hierher ziehen

Importiertes Ergebnis prüfen

Öffnen Sie nach der Sicherheitsprüfung und dem Parsen die Vorschau oder den Editor. Prüfen Sie Layout, Text, Bilder, Links und externe Ressourcen, bevor Sie mit der Bearbeitung beginnen.

1.4 Code einfügen

Verwenden Sie Code einfügen, wenn sich das HTML in einem Code-Assistenten, einem lokalen Editor, einer E-Mail oder einem anderen Browser-Tab befindet.

Gerendertes HTML einfügen

Fügen Sie das vollständige HTML einschließlich der für die Seite erforderlichen Struktur und Stile in den Codebereich ein und klicken Sie anschließend auf Editor öffnen. Wurde die Seite mit einem KI-Tool erzeugt, fügen Sie die Version ein, die Sie visuell verfeinern möchten – nicht nur eine Beschreibung der Seite.

Code einfügen: HTML-Quellcode einsetzen und im Editor öffnen

Ressourcen und Sicherheitshinweise prüfen

HtmlDrag prüft importierte Inhalte, bevor sie geöffnet werden. Lesen Sie Warnungen zu Skripten, lokalen Ressourcen, externen Schriftarten oder blockierten Einbettungen und vergewissern Sie sich, dass die Seite im Editor weiterhin korrekt aussieht.

1.5 Gezielter KI-Feinschliff

KI-Feinschliff dient dazu, eine bestehende Seite mit einer fokussierten Anweisung zu ändern. Beginnen Sie mit einer hochgeladenen HTML-Seite, eingefügtem Code oder einer erfassten URL und beschreiben Sie der KI die gewünschte Änderung, ohne sie aufzufordern, nicht betroffene Teile der Seite neu zu erstellen.

KI-Feinschliff: vorhandene Seite als Ausgangspunkt für eine gezielte Änderung auswählen

Arbeitsbereich für den Feinschliff öffnen

Wählen Sie den Einstieg „KI-Feinschliff“ und warten Sie, bis die Seitenvorschau geladen ist. Der Arbeitsbereich platziert den Anweisungsbereich neben der Seite, damit Sie genau die Inhalte auswählen können, die Aufmerksamkeit benötigen.

KI-Feinschliff: Die ausgewählte Seite wird verarbeitet

Änderungsbereich auswählen

Verwenden Sie Klicken zum Auswählen für einzelne Elemente oder Rahmenauswahl für einen Bereich. Wenn Sie mehr Platz für die Auswahl benötigen, können Sie außerdem den Vollbildmodus öffnen. Beschreiben Sie anschließend im Prompt-Feld die gewünschte Änderung, etwa eine Anpassung des ausgewählten Textes, den Austausch eines Bildes oder die Überarbeitung eines klar abgegrenzten visuellen Bereichs.

KI-Feinschliff: Elemente markieren, auf die sich die Anweisung auswirken soll

Ergebnis prüfen und weiterbearbeiten

Vergleichen Sie die aktualisierte Vorschau nach Abschluss mit der ursprünglichen Seite. Ist die Änderung korrekt, öffnen Sie sie für weitere visuelle Anpassungen im Editor. Ist sie nicht präzise genug, grenzen Sie die Auswahl weiter ein oder formulieren Sie die Anweisung neu, statt nicht betroffene Elemente zu verändern.

KI-Feinschliff: Ergebnis prüfen und anschließend im Editor oder in der Vorschau öffnen

1.6 Datei zu Html: in bearbeitbares HTML umwandeln

Datei zu Html erstellt aus Ausgangsmaterial eine bearbeitbare HTML-Seite. Das ist nützlich, wenn Sie statt bestehendem HTML mit einer PDF-, Word-, PPT/PPTX-, Excel/XLSX-, CSV-, Markdown- oder Textdatei oder mit einem Bild beginnen.

Datei zu Html: mit einem Dokument, einer Tabelle, einer Präsentation oder einem Bild beginnen

Quelldatei hochladen

Öffnen Sie Datei zu Html, fügen Sie die Quelldatei hinzu und geben Sie eine kurze Anweisung dazu ein, was erstellt werden soll. Im Prompt können Sie Zweck, Zielgruppe, Tonalität, Struktur oder visuelle Ausrichtung der Seite festlegen.

Datei zu Html: Quelldatei anhängen und gewünschte Seite beschreiben

Während der Inhaltsaufbereitung warten

HtmlDrag liest zunächst das Ausgangsmaterial, ermittelt seine inhaltliche Hierarchie und plant das Seitenlayout. Die Verarbeitung kann bei langen Dokumenten, Tabellen, Folien und Bildern unterschiedlich lange dauern.

Datei zu Html: Das Ausgangsmaterial wird zu einer HTML-Seite zusammengestellt

Datei zu Html: Hierarchie, Layout und Komponenten werden organisiert

Bearbeitbares Ergebnis prüfen

Prüfen Sie die Vorschau, sobald die Seite bereit ist, und wählen Sie je nach Bedarf KI-Feinschliff, Editor öffnen, Teilen oder HTML herunterladen. Das Ergebnis ist eine bearbeitbare HTML-Seite, die denselben visuellen Bearbeitungsablauf durchlaufen kann.

Datei zu Html: Die generierte HTML-Seite ist zur Prüfung und Bearbeitung bereit

2. Kernfunktionen des visuellen Editors

Das Herzstück von HtmlDrag ist ein leistungsfähiger WYSIWYG-Editor, mit dem Sie direkt in einer echten HTML-Umgebung arbeiten und den Code nicht manuell bearbeiten müssen.

2.1 Überblick über die Editor-Oberfläche

Der visuelle Editor verbindet eine Arbeitsfläche, die Navigation, ein Bedienfeld auf der rechten Seite sowie Aktionen zum Speichern und Exportieren. Das ausgewählte Element wird auf der Arbeitsfläche umrandet, während das rechte Bedienfeld die für die aktuelle Auswahl verfügbaren Einstellungen anzeigt.

Arbeitsbereich des visuellen Editors: Element auswählen, anpassen und Projekt speichern oder exportieren

Linke Navigation und Verlauf

Über die linke Navigation wechseln Sie zwischen dem Hauptarbeitsbereich und gespeicherten Arbeitsbereichen. Kehren Sie damit zu den Startoptionen zurück oder öffnen Sie ein vorhandenes Projekt.

Mittlere Arbeitsfläche

Auf der Arbeitsfläche wird die importierte oder generierte HTML-Seite angezeigt. Wählen Sie Elemente direkt aus, verwenden Sie bei komplexen Seiten die Auswahlwerkzeuge und nutzen Sie die Zoom- oder Vollbildsteuerung, wenn Sie mehr Platz benötigen.

Rechtes Bedienfeld (Bearbeiten / Komponenten / Ebenen / Bibliothek)

Das rechte Bedienfeld enthält Werkzeuge zum Bearbeiten des ausgewählten Elements, zum Einfügen von Komponenten, zum Auffinden von Elementen in der Ebenenliste und zum Wiederverwenden gespeicherter Komponenten aus der Bibliothek.

Aktionen oben und unten

Der obere Bereich bietet den Projekttitel sowie Aktionen zum Teilen, zum Exportieren als Bild und zum Exportieren als HTML. Die unteren Steuerelemente ermöglichen Vorschau, Wiederherstellung, Aktualisierung und das Speichern einer Version.

2.2 Grundlegende Bedienung und Auswahl

Der Editor unterstützt die direkte Auswahl, die Bereichsauswahl, die Prüfung im Vollbildmodus und die fokussierte Bearbeitung. Beginnen Sie mit der kleinsten Auswahl, die die gewünschte Änderung abdeckt.

Auswahlansicht: ausgewählte Elemente vor einer fokussierten Änderung prüfen

Elemente erkennen

Verwenden Sie Element auswählen, um ein einzelnes Element auf der Seite auszuwählen. Der Editor umrandet das Element und zeigt im Auswahlstatus sein Tag oder seinen Inhalt an.

Rahmenauswahl und Vollbildmodus

Verwenden Sie Rahmenauswahl, wenn mehrere benachbarte Elemente zu derselben visuellen Region gehören. Öffnen Sie Vollbild, wenn Sie für die Auswahl, Prüfung oder Verfeinerung eines komplexen Layouts mehr Platz benötigen.

Auswahl im Vollbildmodus: auf komplexen Seiten mit mehr Platz arbeiten

Ziehmodus und Bearbeitungsmodus

Verwenden Sie den Ziehmodus, um ein ausgewähltes Element neu zu positionieren, und den Bearbeitungsmodus, um Text oder unterstützte Elementinhalte zu ändern. Die Steuerelemente auf der rechten Seite werden entsprechend der aktuellen Auswahl aktualisiert.

Elemente sperren, ausblenden und löschen

Verwenden Sie die Elementsteuerung oder das Kontextmenü, um ein Element gegen versehentliche Bearbeitung zu sperren, es während der Layoutprüfung auszublenden oder aus dem aktuellen HTML zu löschen. Prüfen Sie die Auswahl vor dem Löschen; verwenden Sie Rückgängig oder Wiederherstellen, wenn Sie zu einem früheren Stand zurückkehren müssen.

Kontextmenü

Klicken Sie mit der rechten Maustaste auf ein ausgewähltes Element, um Schnellaktionen wie Kopieren, Einfügen, das Hinzufügen eines Elements zur Bibliothek, die Linkbearbeitung, Ebenenaktionen, Sperren, Ausblenden und Löschen aufzurufen.

Mehrfachauswahl

Verwenden Sie die Mehrfachauswahl, wenn mehrere Elemente gemeinsam geprüft oder angepasst werden sollen. Kontrollieren Sie die Liste der ausgewählten Elemente, bevor Sie eine Änderung anwenden, und entfernen Sie Elemente, die nicht betroffen sein sollen.

2.3 Tastenkürzel auf der Arbeitsfläche

Wer die Tastenkürzel beherrscht, kann die Bearbeitung deutlich effizienter durchführen. Die wichtigsten in der Arbeitsfläche unterstützten Tastenkürzel sind:

2.4 Rechtes Bedienfeld – Tab „Bearbeiten“

Der Tab „Bearbeiten“ wird am häufigsten verwendet. Er bietet Modusschalter und umfangreiche Werkzeuge zur Stil-Anpassung. Nach der Auswahl eines Elements zeigt das Bedienfeld abhängig vom Elementtyp automatisch die passenden Bearbeitungsoptionen an.

Tab „Bearbeiten“: Modusschalter und Stilwerkzeuge

Modusschalter

Oben im Bedienfeld befinden sich vier Schalter, die das Interaktionsverhalten des Editors steuern. Jeder Schalter kann unabhängig aktiviert oder deaktiviert werden; eine Benachrichtigung zeigt den aktuellen Status an.

Tipp: Die Seiteninteraktion ist während der Bearbeitung standardmäßig deaktiviert, damit Komponenten bearbeitet werden können. Um Links zu öffnen, aktivieren Sie im Bedienfeld „Bearbeiten“ den Schalter „Seiteninteraktion“. Das Absenden von Formularen ist im Bearbeitungsmodus ebenfalls blockiert, um Ihre Inhalte zu schützen.

Textstil

Nach der Auswahl eines Textelements oder dem Wechsel in den Bearbeitungsmodus zeigt das Bedienfeld umfassende Werkzeuge für folgende Textformatierungen an:

Textstil: Einstellungen für Schriftart, Größe und Farbe

Elementstil

Nach der Auswahl eines beliebigen Elements können Sie mit den Elementstil-Werkzeugen sein Erscheinungsbild anpassen:

Bildstil

Nach der Auswahl eines Bildelements können Sie die Anzeigeoptionen anpassen und das Bild ersetzen:

Tabellenstil

Wenn eine Tabelle oder Tabellenzelle ausgewählt ist, werden spezielle Werkzeuge zur Tabellenbearbeitung angezeigt. Eine ausführliche Anleitung finden Sie unter 4.10 Tabellen bearbeiten.

Tabellenstil: Zeilen-/Spaltenoperationen, Rahmen und Zelleneinstellungen

Links bearbeiten

Fügen Sie jedem Element einen Link zur Navigation per Klick hinzu oder bearbeiten Sie vorhandene Links:

Ausrichtungswerkzeuge (Mehrfachauswahl)

Wenn mehrere Elemente ausgewählt sind, zeigt das Bedienfeld Werkzeuge zum Ausrichten und Verteilen an, mit denen Sie Elementlayouts schnell ordnen können:

2.5 Rechtes Bedienfeld – Tab „Komponenten“

Der Tab „Komponenten“ bietet Optionen zum schnellen Einfügen verschiedener Elementtypen, damit Sie neue Inhalte zügig auf der Arbeitsfläche ergänzen können. Klicken Sie auf eine Schaltfläche, um die entsprechende Komponente einzufügen.

Tab „Komponenten“: verschiedene Elemente mit einem Klick einfügen

2.6 Rechtes Bedienfeld – Tab „Ebenen“ (DOM-Baum)

Der Tab „Ebenen“ zeigt alle bearbeitbaren Elemente der Arbeitsfläche als Liste an und unterstützt Filter, Batch-Operationen und die präzise Positionierung. Damit lassen sich komplexe Seitenelemente effektiv verwalten.

Tab „Ebenen“: Ebenenverwaltung und Batch-Operationen

Liste der Elementkarten

Das Bedienfeld zeigt alle verwaltbaren Elemente als Karten an. Jede Karte enthält den Tag-Typ des Elements, etwa DIV, IMG oder SPAN, sowie die Ebenenstufe; bei Textelementen wird außerdem eine Inhaltsvorschau angezeigt. Dekorative Ebenenelemente sind mit dem Badge „Dekorativ“ gekennzeichnet. Auf der rechten Seite jeder Karte stehen Symbole zum schnellen Sperren/Entsperren und Aus-/Einblenden bereit.

Filteroptionen

Klicken Sie auf die Filterschaltfläche, um die Liste nach dem Elementstatus zu filtern. Folgende Optionen stehen zur Verfügung:

Batch-Operationen

Nachdem Sie in der Kartenliste mehrere Elemente ausgewählt haben, können Sie die Schaltflächen für Batch-Operationen zur gemeinsamen Verarbeitung verwenden:

Präzisionsschalter

Der Tab „Ebenen“ bietet einen Präzisionsschalter, mit dem Sie die Genauigkeit der Elementerkennung steuern:

Karte anklicken, um Element zu finden

Klicken Sie auf eine beliebige Elementkarte, damit die Arbeitsfläche automatisch zum entsprechenden Element scrollt und es hervorhebt. So lassen sich bestimmte Komponenten auf der Seite schnell finden, besonders bei komplexen oder verschachtelten Layouts.

2.7 Rechtes Bedienfeld – Tab „Bibliothek“ (Favoriten)

Der Tab „Bibliothek“ ist Ihre persönliche Komponentenbibliothek. Speichern Sie dort häufig verwendete Elemente oder Komponenten, um sie projektübergreifend wiederzuverwenden und effizienter zu arbeiten.

Tab „Bibliothek“: persönliche Komponentenbibliothek

Liste der Favoritenkomponenten

Das Bedienfeld zeigt alle gespeicherten Komponenten als Karten mit Vorschaubild und Namen an. Vorschaubilder werden beim Speichern automatisch erstellt; Komponenten ohne Namen werden als „Unbenannt“ angezeigt.

Favoriten durchsuchen

Verwenden Sie das Suchfeld, um gespeicherte Komponenten schnell nach Namen zu finden. Die Liste wird während der Eingabe in Echtzeit gefiltert.

Favoritenkomponente einfügen

Klicken Sie auf der Bibliothekskarte auf „Einfügen“, um die Komponente in die aktuelle Arbeitsfläche einzufügen. Eingefügte Komponenten können anschließend wie gewohnt bearbeitet und angepasst werden.

Favoriten umbenennen oder löschen

Jede Bibliothekskarte bietet die Optionen „Umbenennen“ und „Löschen“. Durch Umbenennen lassen sich Komponenten später leichter finden; beim Löschen wird die gespeicherte Komponente dauerhaft entfernt – gehen Sie daher vorsichtig vor.

So fügen Sie Elemente zur Bibliothek hinzu

Wählen Sie ein beliebiges Element auf der Arbeitsfläche aus und wählen Sie im Kontextmenü „Zu Bibliothek hinzufügen“, um das Element einschließlich seiner untergeordneten Elemente als Komponente zu speichern. Nach erfolgreichem Speichern erscheint eine Bestätigung.

2.8 Kontextmenü

Wenn Sie mit der rechten Maustaste auf ein ausgewähltes Element klicken, wird das Kontextmenü mit Schnellzugriffen auf häufig verwendete Aktionen geöffnet. Der Menüinhalt passt sich dynamisch an den Typ des ausgewählten Elements an.

Kontextmenü: Schnellzugriff auf häufig verwendete Aktionen

Tabellenspezifisches Menü

Wenn Sie mit der rechten Maustaste auf eine Tabellenzelle klicken, enthält das Menü zusätzliche tabellenspezifische Operationen:

2.9 Tabellen bearbeiten

Wenn eine Tabelle oder Tabellenzelle ausgewählt ist, zeigt das rechte Bedienfeld spezielle Werkzeuge zur Tabellenbearbeitung mit umfassenden Funktionen für Stil und Struktur an.

Tabellenbearbeitung: Zeilen-/Spaltenoperationen und Stileinstellungen

Zeilen- und Spaltenoperationen

Der Bereich „Zeilen & Spalten“ im Bedienfeld für die Tabellenbearbeitung bietet folgende Funktionen:

Zellen verbinden oder teilen

Wählen Sie mehrere benachbarte Zellen aus und verwenden Sie „Zellen verbinden“, um sie zu einer Zelle zusammenzufassen. Bei verbundenen Zellen können Sie mit „Zelle teilen“ die ursprünglichen Einzelzellen wiederherstellen.

Zellenausrichtung

Legen Sie die Ausrichtung des Zellinhalts in zwei Dimensionen fest:

Rahmenstil

Passen Sie das Erscheinungsbild des Tabellenrahmens an, einschließlich:

Klicken Sie auf „Anwenden“, um die Änderungen zu speichern.

Zellenhintergrund

Legen Sie die Hintergrundfarbe der Zelle über den Farbwähler fest – ideal, um Kopfzeilen oder wichtige Datenzeilen hervorzuheben.

2.10 Zoomsteuerung und Viewport-Voreinstellungen

Die Zoomsteuerung am unteren Rand der Arbeitsfläche bietet Zoom- und Viewport-Einstellungen und hilft Ihnen, die Seite in verschiedenen Gerätegrößen zu prüfen.

Zoomsteuerung: Zoom und Viewport-Größe der Arbeitsfläche anpassen

Vergrößern, verkleinern und zurücksetzen

Verwenden Sie die Schaltflächen „+“ und „−“, um die Ansicht der Arbeitsfläche zu vergrößern oder zu verkleinern, oder halten Sie Strg/Cmd gedrückt und drehen Sie das Mausrad. Klicken Sie auf die Prozentanzeige, um den Standardzoom wiederherzustellen. Halten Sie die Leertaste gedrückt und ziehen Sie, um die Arbeitsfläche zu verschieben.

Viewport-Voreinstellungen

Klicken Sie auf den Viewport-Selektor, um zwischen Vorschaugrößen zu wechseln und die Darstellung auf verschiedenen Geräten zu simulieren:

Vorschau-Patches

Für HTML-Seiten mit speziellen Strukturen stehen drei Vorschau-Patches zur Optimierung der Darstellung bereit. Beim Aktivieren oder Deaktivieren eines Patches werden die Einstellung automatisch gespeichert und die Vorschau aktualisiert:

Tipp: Wenn die Patches keine erkennbare Wirkung zeigen, wählen Sie zunächst „Auf ursprünglichen Inhalt zurücksetzen“ und aktivieren Sie den Patch anschließend erneut.

2.11 HTML-Quellcode-Editor

Mit dem HTML-Editor können Sie den vollständigen HTML-Quellcode Ihrer Arbeit direkt anzeigen und bearbeiten – ideal für erfahrene Nutzer, die Feinanpassungen oder eigenen Code hinzufügen möchten. Diese Funktion ist nur im Pro-Tarif verfügbar.

HTML-Editor: Quellcode direkt bearbeiten (Pro)

Vollständiges HTML anzeigen und bearbeiten

Beim Öffnen des HTML-Editors wird der vollständige HTML-Quellcode einschließlich <!DOCTYPE html> angezeigt. Sie können den Code direkt bearbeiten; beim Speichern werden Ihre Änderungen übernommen.

Suchen und Ersetzen

Öffnen Sie mit Strg+F die Suche und geben Sie Suchbegriffe ein, um Code schnell zu finden. Mit Strg+H öffnen Sie die Ersetzen-Funktion für den stapelweisen Austausch von Text. Die Werkzeugleiste zeigt die Trefferzahl, etwa „3 / 15“, und bietet Optionen zum einzelnen Ersetzen oder zum Ersetzen aller Treffer.

Zu einer Zeile springen

Verwenden Sie Strg+G oder die Sprungfunktion der Werkzeugleiste, um eine Zeilennummer einzugeben und direkt zu dieser Zeile zu wechseln – besonders nützlich bei großen HTML-Dateien.

Groß-/Kleinschreibung beachten

Aktivieren Sie bei der Suche die Option „Groß-/Kleinschreibung beachten“, um Inhalte exakt unter Berücksichtigung der Groß- und Kleinschreibung zu finden.

Zeilenumbruch

Ist der Zeilenumbruch aktiviert, werden lange Codezeilen zur Anzeige automatisch umgebrochen, sodass kein horizontales Scrollen erforderlich ist.

Kopieren und speichern

Klicken Sie auf „HTML kopieren“, um den vollständigen Quellcode in die Zwischenablage zu kopieren. Klicken Sie nach der Bearbeitung auf „Speichern“, um die Änderungen zu übernehmen. Bei leerem Inhalt oder Syntaxfehlern werden entsprechende Meldungen angezeigt.

Hinweis: Wenn der HTML-Inhalt die Speichergrenzen überschreitet, erscheint beim Speichern die Meldung „Speicherplatz nicht ausreichend, diese Bearbeitung kann nicht gespeichert werden.“ Löschen Sie nicht benötigte Inhalte oder wechseln Sie zu einem höheren Tarif, um mehr Kapazität zu erhalten.

2.12 Untere Werkzeugleiste

Die untere Werkzeugleiste enthält die zentralen Aktionen des Editors, darunter Vorschau, Rückgängig/Wiederherstellen, Wiederherstellen eines früheren Stands und Speichern.

Arbeitsbereich des Editors: untere Steuerelemente für Vorschau, Wiederherstellung, Aktualisierung und das Speichern einer Version

Vorschau (wird in einem neuen Fenster geöffnet)

Klicken Sie auf die Vorschau-Schaltfläche, um eine vollständige Vorschau Ihrer Arbeit in einem neuen Fenster zu öffnen und das tatsächliche Darstellungsergebnis zu sehen. Die Vorschauseite zeigt einen vorübergehenden Hinweis, dass es sich um eine Vorschau während der Bearbeitung mit einem nicht wiederverwendbaren Link handelt.

Rückgängig und Wiederherstellen

Mit Rückgängig machen Sie den letzten Vorgang rückgängig; mit Wiederherstellen holen Sie einen rückgängig gemachten Vorgang zurück. Mehrere Rückgängig-/Wiederherstellen-Schritte werden unterstützt. Alternativ können Sie Strg+Z (Rückgängig) und Strg+Y (Wiederherstellen) verwenden.

Vorschau aktualisieren

Beim Aktualisieren wird der Vorschaubereich neu geladen. Das System speichert zuerst den aktuellen Inhalt und aktualisiert anschließend die Arbeitsfläche, um den neuesten Stand anzuzeigen. Das ist besonders nach umfangreichen Bearbeitungen hilfreich, um die Darstellung zu synchronisieren.

Zuletzt gespeicherten Stand wiederherstellen

Setzt die Arbeit auf den zuletzt manuell gespeicherten Stand zurück. Alle nicht gespeicherten Änderungen gehen verloren – verwenden Sie diese Funktion mit Vorsicht. Vor der Ausführung fordert das System eine Bestätigung an.

Ursprüngliches HTML wiederherstellen

Setzt das HTML der Arbeit auf den ursprünglichen Zustand bei ihrer Erstellung zurück. Der gesamte Bearbeitungsverlauf wird gelöscht. Diese Aktion kann nicht rückgängig gemacht werden; sichern Sie wichtige Inhalte vorher.

Speichern

Speichert alle aktuellen Änderungen manuell. Das System unterstützt auch das automatische Speichern; nach wichtigen Bearbeitungen empfiehlt sich dennoch ein manueller Speichervorgang, um die Datensicherheit zu gewährleisten. Nach erfolgreichem Abschluss erscheint „HTML gespeichert.“

2.13 Obere Werkzeugleiste

Die obere Werkzeugleiste zeigt Projektinformationen und Schnellaktionen an und bietet schnellen Zugriff auf Teilen und Download-Funktionen.

Arbeitsbereich des Editors: obere Steuerelemente für HTML-Download, Bildexport und Teilen

Projekttitel (Doppelklick zum Bearbeiten)

Oben wird der aktuelle Projekttitel angezeigt. Doppelklicken Sie auf den Titelbereich, um den Bearbeitungsmodus zu öffnen und den Namen zu ändern. Der Titel darf nicht leer sein; bei Erfolg erscheint „Titel erfolgreich aktualisiert“. Projekte ohne Namen werden als „Unbenanntes Projekt“ angezeigt.

Schaltfläche „Teilen“

Klicken Sie auf die Schaltfläche „Teilen“, um die Freigabe des Projekts zu aktivieren und einen zugänglichen Link zu erzeugen. Einzelheiten finden Sie unter 4.15 Teilen. Diese Funktion ist nur im Pro-Tarif verfügbar.

Download-Schaltflächen

Auf der rechten Seite stehen die Schaltflächen „Als Bild herunterladen“ und „Als HTML herunterladen“ bereit. Einzelheiten finden Sie unter 4.14 HTML exportieren und herunterladen.

3. Projekte verwalten, teilen und exportieren

Nach der Bearbeitung können Sie saubere HTML-Dateien exportieren, sichere Vorschaulinks mit Passwortschutz erstellen oder Projektversionen in Ihrem Projektbereich verwalten.

3.1 HTML exportieren und herunterladen

Verwenden Sie Als HTML herunterladen in der Werkzeugleiste oben rechts, um die im Editor geprüfte Version zu exportieren. Der Exportdialog trennt die bearbeitete Seite von der ursprünglichen Quelle und bietet außerdem Optionen zum Kopieren und zur Übergabe an eine KI.

HTML exportieren: bearbeitete oder ursprüngliche Quelle wählen, HTML kopieren oder an eine KI senden

Bearbeitetes HTML

Der Tab Bearbeitetes HTML exportiert die aktuelle Version einschließlich der auf der Arbeitsfläche vorgenommenen Änderungen.

Ursprüngliches HTML

Der Tab Ursprüngliches HTML hält die anfänglich importierte Quelle bereit, wenn Sie die Ausgangsversion vergleichen oder wiederherstellen möchten.

HTML kopieren und an eine KI exportieren

HTML kopieren kopiert die aktuelle Quelle in die Zwischenablage. An KI exportieren erstellt einen Übergabelink, über den ein anderer KI-Workflow das aktuelle HTML lesen und auf Basis des bearbeiteten Ergebnisses fortfahren kann.

3.2 Teilen und öffentliche Vorschauen

Die Funktion „Teilen“ erstellt einen öffentlichen Link für die aktuelle Arbeit, damit andere Personen sie ansehen können, ohne den Editor zu öffnen. Der folgende Screenshot zeigt die Freigabeeinstellungen vor der Veröffentlichung des Links. Diese Funktion steht Pro-Nutzern zur Verfügung.

Projekt teilen: Gültigkeitsdauer des Links wählen und Hinweise oder Seitenleisten ein- oder ausblenden

Freigabeeinstellungen wählen

Klicken Sie auf Teilen und wählen Sie eine verfügbare Dauer, etwa 7, 30 oder 90 Tage oder den verbleibenden Zeitraum Ihres Tarifs. Der Freigabelink kann nicht über das Ablaufdatum des Tarifs hinaus gültig bleiben.

Anzeigeoptionen

Sie können festlegen, ob der Sicherheitshinweis und die rechte Seitenleiste auf der geteilten Seite ausgeblendet werden sollen. Diese Optionen wirken sich auf die Besucheransicht aus, nicht auf die bearbeitbare Quelle in Ihrem Projekt.

Seite teilen und Zugriff verwalten

Kopieren Sie nach dem Teilen den erzeugten Link und senden Sie ihn an Prüfer oder Kunden. Über die Freigabesteuerung können Sie den Link später aktualisieren oder das Teilen beenden, wenn die Seite nicht mehr öffentlich zugänglich sein soll.

3.3 Schnellleiste „Meine Projekte“

Mit der Schnellleiste „Meine Projekte“ auf der linken Seite können Sie die Projektliste ein- und ausklappen und schnell zwischen Projekten wechseln. So wechseln Sie reibungslos zwischen mehreren Arbeiten.

Ein- und ausklappen

Klicken Sie oben links auf die Schaltfläche „Meine Projekte“, um die Arbeitsliste der Seitenleiste auszuklappen. Klicken Sie erneut oder außerhalb der Seitenleiste, um sie einzuklappen. Im ausgeklappten Zustand können Sie Vorschaubilder und Titel Ihrer bisherigen Projekte durchsuchen.

Zwischen Projekten wechseln

Klicken Sie in der Liste auf eine beliebige Projektkarte, um ihren Inhalt sofort im Editor zu laden. So können Sie verschiedene Entwürfe schnell vergleichen und ändern, ohne zur Startseite oder zum Profil zurückkehren zu müssen.

3.4 Versionsverlauf und Snapshots

In der linken Seitenleiste bietet „Meine Projekte“ (Verlauf) schnellen Zugriff auf Ihre bisherigen Arbeiten. Dort werden alle Bearbeitungsverläufe in chronologischer Reihenfolge aufgelistet.

Schnell auswählen und bearbeiten

Klicken Sie auf einen beliebigen Eintrag, um ihn schnell in den Editor zu laden und an der Stelle fortzufahren, an der Sie aufgehört haben, ohne ihn erneut zu importieren.

Details des Vorschaufensters

Bewegen Sie den Mauszeiger über einen Verlaufseintrag, um dessen Vorschaufenster anzuzeigen. Im Vorschaufenster können Sie:

1. Titel direkt bearbeiten: Klicken Sie auf den Titeltext, um den Projektnamen sofort zu ändern.
2. Freigabestatus anzeigen: Symbole zeigen an, ob die Arbeit derzeit geteilt wird.
3. Schnellaktionen: Bearbeiten, Löschen und weitere Schnellaktionen aufrufen.

Verlauf: bisherige Projekte schnell in der Vorschau prüfen und verwalten

3.5 Projekte verwalten und organisieren

Das Modul zur Projektverwaltung zeigt alle von Ihnen erstellten Projekte an und unterstützt das Anzeigen, Bearbeiten, Teilen und Löschen.

Arbeitsliste und Filter

Projekte werden als Karten oder in einer Liste angezeigt. Sie können sie mit folgenden Optionen filtern:

1. Suche: Arbeitscode oder Titel eingeben
2. Typfilter: Nach KI-Erstellung, Datei-Upload, Webseite duplizieren, Code einfügen usw. filtern
3. Datumsbereich: Start- und Enddatum wählen, um Projekte eines bestimmten Zeitraums zu filtern
4. Sortieren nach: Nach neuesten oder ältesten Projekten, Anzahl der Likes oder Anzahl der Aufrufe sortieren

Projektverwaltung: alle Projekte anzeigen, filtern und verwalten

Projekte anzeigen und bearbeiten

Klicken Sie auf der Projektkarte auf die Schaltfläche „Ansehen“, um eine Vorschau zu öffnen. In der Vorschau können Sie:

1. den Projekttitel bearbeiten (doppelklicken Sie zum Bearbeiten auf den Titel),
2. auf „Bearbeiten“ klicken, um den visuellen Editor zu öffnen und weiterzuarbeiten,
3. den Speicherverlauf der Arbeit anzeigen und eine bestimmte Version wiederherstellen.

Freigabestatus verwalten

Pro-Nutzer können Projekte teilen, damit andere sie über einen Link ansehen können:

1. Teilen aktivieren: Klicken Sie auf „Teilen“, um einen 7 Tage gültigen Freigabelink zu erstellen.
2. Freigabe aktualisieren: Bei bereits geteilten Projekten kann der Link aktualisiert und seine Gültigkeitsdauer erneuert werden.
3. Teilen beenden: Klicken Sie auf „Teilen beenden“, um den Link sofort ungültig zu machen.

Projekte löschen

Klicken Sie auf der Projektkarte auf „Löschen“, um das Projekt zu löschen. Das System zeigt zwei Bestätigungsdialoge an, um versehentliches Löschen zu verhindern:

1. Erste Bestätigung: Fragt, ob Sie diese Arbeit löschen möchten
2. Zweite Bestätigung: Erinnert daran, dass das Löschen nicht rückgängig gemacht werden kann

Tipp: Sie können bis zu drei Einträge gleichzeitig löschen. Nach dem Löschen einer Arbeit wird der von ihr belegte Speicherplatz freigegeben.

Die Projektseite ist Ihr eigener Bereich zum Anzeigen und Verwalten aller erstellten Inhalte. Sie erreichen sie schnell über die Seitenleiste oder das Benutzermenü.

Projektdarstellung

Auf der Seite werden alle Projekte als Karten angezeigt. Jede Karte enthält:

1. Vorschaubild: Visuelle Vorschau der Arbeit zur schnellen Identifizierung
2. Projekttitel: Zeigt den Projektnamen an; zum Bearbeiten anklicken
3. Erstellungszeit: Zeitpunkt der Erstellung
4. Freigabestatus: Zeigt an, ob die Arbeit derzeit geteilt wird

Projekte: alle erstellten Inhalte an einem Ort anzeigen und verwalten

Schnellaktionen

Jede Projektkarte bietet praktische Aktionsschaltflächen:

1. Bearbeiten: den visuellen Editor öffnen und weiterarbeiten
2. Teilen: Freigabelinks erstellen oder verwalten (nur Pro)

4. Systemhinweise und Fehlerbehebung

Während der Nutzung können Systemwarnungen oder Nutzungslimits auftreten. Im Folgenden finden Sie Erklärungen und Empfehlungen für häufige Systemhinweise.

4.1 HTML-Erkennung und Hotlink-Warnungen

Um eine zuverlässige Importqualität und einen stabilen Editor zu gewährleisten, prüft das System URLs und Dateien automatisch und weist auf mögliche Probleme hin.

Erkennung lokaler Ressourcen

Wenn eine Seite lokale Pfade wie file:// oder C:/ enthält, können die Ressourcen nicht geladen werden. Empfehlung: Stellen Sie sicher, dass alle Ressourcen öffentliche HTTP-/HTTPS-Links verwenden.

Schutz vor Bild-Hotlinks

Einige Websites blockieren den externen Zugriff auf Bilder. Empfehlung: Verwenden Sie „Bild ersetzen“, um lokale Dateien hochzuladen, oder hosten Sie die Bilder bei einem öffentlichen Dienst.

Dynamisch gerenderte Seiten (SPA)

Seiten, die vollständig auf JavaScript angewiesen sind (SPA), werden möglicherweise leer oder unvollständig importiert, weil der dynamische DOM nicht direkt erfasst wird. Empfehlung: Verwenden Sie „Code einfügen“, indem Sie das gerenderte HTML aus Ihrem Browser kopieren.

Externe Schriftarten und Icon-Bibliotheken

Schriftarten oder Symbole ohne passende CORS-Header werden möglicherweise fehlerhaft angezeigt. Empfehlung: Ersetzen Sie sie im Editor durch Systemschriften oder Symbole aus einer Bibliothek.

Eingebettete Inhalte (iframe)

Aus Sicherheitsgründen können einige iframe-Inhalte blockiert oder nicht interaktiv sein. Das System erhält nach Möglichkeit Platzhalter.

4.2 Speicher- und Nutzungslimits

HtmlDrag legt abhängig von Ihrem Tarif Ressourcenlimits fest. Möglicherweise werden die Hinweise „Speicherlimit erreicht“ oder „Projektlimit erreicht“ angezeigt.

Speicherlimit erreicht

Wenn kein Speicherplatz mehr verfügbar ist, können Sie keine Änderungen speichern und keine Dateien hochladen. Lösung:

1. Löschen Sie alte Einträge unter „Projekte“, um Speicherplatz freizugeben.
2. Klicken Sie im Dialog auf „Jetzt upgraden“, um mit Pro mehr Kapazität zu erhalten.

Limit für die Projektanzahl

Für kostenlose Konten ist die Anzahl gespeicherter Projekte begrenzt. Löschen Sie alte Projekte oder führen Sie ein Upgrade durch, um das Limit zu erhöhen.

Limits für Bild-Uploads

Das System prüft die Größe einzelner Dateien und die Batch-Limits. Wenn „Dateigröße überschreitet das Limit“ oder „Batch-Größe überschritten“ angezeigt wird, komprimieren Sie die Bilder oder laden Sie sie in kleineren Gruppen hoch. Pro-Nutzer profitieren von höheren Limits.

4.3 Sicherheitssandbox und Bereinigung

Der integrierte Sicherheitsscan bewertet beim Import von URLs, beim Hochladen von Dateien und beim Einfügen von Code automatisch das Inhaltsrisiko, um Ihr Konto zu schützen.

Risikostufe

Auf Grundlage von Bedrohungen wie XSS, schädlichen Skripten oder gefährlichen Tags werden Risiken wie folgt eingestuft:

1. Niedriges Risiko: Geringfügige Warnungen; normalerweise können Sie fortfahren.
2. Mittleres Risiko: Mögliche Probleme; fahren Sie mit Vorsicht fort.
3. Hohes Risiko: Erhebliche Risiken; fahren Sie nur fort, wenn Sie der Quelle vertrauen.
4. Kritisches Risiko: Enthält Malware oder Phishing-Inhalte und wird sofort blockiert.

Sicherheitsmodus

Für Dateien mit einem gewissen Risiko bietet das System unter „Sicherheitsmaßnahmen“ Optionen wie die automatische Bereinigung. Sie können „Im Sicherheitsmodus fortfahren“; dabei entfernt das System gefährlichen Code und erhält nach Möglichkeit Layout und Bearbeitbarkeit.

4.4 Systembenachrichtigungen und Nachrichten

Das Nachrichtenmodul empfängt wichtige Systembenachrichtigungen, darunter Kontostatus, Zahlungserinnerungen, Hinweise zum Ablauf eines Abonnements und Funktionsupdates.

Nachrichten: Systembenachrichtigungen und Warnungen empfangen

Liste der Systemnachrichten

Die Nachrichtenliste ist chronologisch sortiert und zeigt Titel, Zusammenfassung, Erstellungszeit und Ablaufzeit an. Klicken Sie auf eine Nachricht, um Details anzuzeigen oder eine Aktion auszuführen, etwa „Zahlung fortsetzen“ oder „Jetzt verlängern“.

Filter für ungelesene Nachrichten

Aktivieren Sie oben rechts das Kontrollkästchen „Nur ungelesene“, um schnell nach ungelesenen Nachrichten zu filtern und sich auf wichtige Benachrichtigungen zu konzentrieren.

Alle als gelesen markieren

Klicken Sie auf „Alle als gelesen markieren“, um alle Nachrichten der aktuellen Liste sofort als gelesen zu markieren und die roten Punktindikatoren zu entfernen.

Nachrichtendetails

Klicken Sie auf eine Nachrichtenkarte, um den vollständigen Benachrichtigungsinhalt anzuzeigen. Bei Bestell- oder Abonnementnachrichten enthalten die Details häufig praktische Schnellaktionsschaltflächen.

4.5 Feedback und Support

Wenn Probleme auftreten oder Sie Vorschläge haben, senden Sie diese über das Feedbackmodul. Sie können Bilder hochladen, um Ihr Anliegen anschaulicher zu beschreiben.

Feedback: Probleme oder Vorschläge einreichen

Feedbackliste und Status

Die Liste zeigt Ihren Einreichungsverlauf und den aktuellen Status:

1. In Bearbeitung: Feedback wurde eingereicht und wartet auf die Prüfung durch die Administration.
2. Beantwortet: Die Administration hat geantwortet; klicken Sie zum Anzeigen auf den Eintrag.
3. Geschlossen: Das Feedback wurde archiviert oder gelöst; weitere Antworten sind nicht möglich.

Neues Feedback einreichen

Klicken Sie auf „Neues Feedback“ und geben Sie Ihren Inhalt ein (Pflichtfeld, mindestens 10 Zeichen). Sie können „Bilder hochladen“ (maximal 2 MB pro Bild), um Screenshots bereitzustellen. Klicken Sie anschließend auf „Feedback absenden“.

Feedbackdetails und Unterhaltung

Klicken Sie auf einen Listeneintrag, um den vollständigen Gesprächsverlauf mit Ihren Nachrichten und den Antworten der Administration anzuzeigen. Oben sehen Sie die Feedback-ID und die Anhänge.

Antwort fortsetzen

Bei Feedback mit dem Status „In Bearbeitung“ oder „Beantwortet“ können Sie über das Eingabefeld unten weitere Informationen hinzufügen oder der Administration antworten, bis das Anliegen gelöst ist.

Beim Einreichen von Feedback können Sie relevante Screenshots oder Dateien hinzufügen, damit wir Ihr Anliegen besser verstehen. In den Feedback-Details können Sie außerdem die Antworten der Administration und den Gesprächsverlauf einsehen, um den Bearbeitungsfortschritt nachzuverfolgen.

Wir schätzen jedes Feedback und werden Ihr Anliegen so schnell wie möglich bearbeiten. Vielen Dank für Ihre Beteiligung und Unterstützung!

5. Konto, Credits und Abonnement (Anhang)

Verwalten Sie Ihre Kontoeinstellungen, Anmeldesicherheit, Credit-Guthaben und Abonnements.

5.1 Registrieren

HtmlDrag verwendet die Registrierung per E-Mail. Füllen Sie einfach einige grundlegende Angaben aus, um ein Konto zu erstellen. Nach erfolgreicher Registrierung werden Sie automatisch angemeldet und zur Startseite weitergeleitet.

Registrierung per E-Mail

Führen Sie auf der Registrierungsseite folgende Schritte aus, um Ihr Konto zu erstellen:

1. E-Mail eingeben: Geben Sie Ihre häufig verwendete E-Mail-Adresse an. Sie dient als Anmeldekennung und Benachrichtigungskanal. Achten Sie auf das korrekte Format, zum Beispiel [email protected].
2. Passwort festlegen: Das Passwort muss Buchstaben und Zahlen enthalten und 8 bis 32 Zeichen lang sein. Wir empfehlen ein starkes Passwort, um Ihr Konto zu schützen.
3. Passwort bestätigen: Geben Sie das Passwort erneut ein, um sicherzustellen, dass beide Eingaben übereinstimmen.
4. Spitznamen festlegen (optional): Sie können einen eigenen Spitznamen festlegen. Wenn Sie das Feld leer lassen, erzeugt das System automatisch einen Standard-Spitznamen.
5. Nutzungsbedingungen zustimmen: Aktivieren Sie „Ich habe die Nutzungsbedingungen und die Datenschutzrichtlinie gelesen und stimme ihnen zu“ und klicken Sie anschließend auf die Schaltfläche „Registrieren“, um die Registrierung abzuschließen.

Registrierungsseite: E-Mail-Adresse und grundlegende Angaben zum Erstellen eines Kontos eingeben

E-Mail-Verifizierung und Credit-Bonus

Nach erfolgreicher Registrierung sendet das System eine Verifizierungs-E-Mail an Ihren Posteingang. Nach der E-Mail-Verifizierung erhalten Sie Bonus-Credits, die Sie für die Funktionen KI-Erstellung und Webseite duplizieren verwenden können. Wenn Sie die E-Mail nicht erhalten, prüfen Sie Ihren Spam-Ordner. Nach drei Minuten können Sie auf „Erneut senden“ klicken, um eine weitere E-Mail anzufordern.

Tipp: Die E-Mail-Verifizierung bringt Ihnen nicht nur Bonus-Credits, sondern schaltet auch das vollständige Nutzungserlebnis frei und erhöht die Sicherheit Ihres Kontos.

5.2 Anmelden

HtmlDrag unterstützt mehrere Anmeldemethoden. Wählen Sie die für Sie bequemste Option.

Anmeldung mit E-Mail und Passwort

Melden Sie sich mit der bei der Registrierung verwendeten E-Mail-Adresse und Ihrem Passwort an:

1. Geben Sie auf der Anmeldeseite Ihre E-Mail-Adresse ein.
2. Geben Sie Ihr Passwort ein. Über das Augensymbol können Sie die Sichtbarkeit des Passworts umschalten.
3. Klicken Sie auf „Weiter“, um die Anmeldung abzuschließen.

Nach erfolgreicher Anmeldung werden Sie automatisch zur Startseite weitergeleitet und können mit der Erstellung beginnen.

Anmeldung über Drittanbieter (Google / GitHub)

Für einen schnelleren Zugriff können Sie sich mit Ihrem Google- oder GitHub-Konto anmelden:

1. Mit Google anmelden: Klicken Sie auf die Schaltfläche „Mit Google anmelden“. Wählen Sie im Google-Autorisierungsfenster Ihr Konto aus und bestätigen Sie die Autorisierung.
2. Mit GitHub anmelden: Klicken Sie auf die Schaltfläche „Mit GitHub anmelden“. Sie werden zur Autorisierungsseite von GitHub weitergeleitet. Nach der Bestätigung kehren Sie automatisch zu HtmlDrag zurück.

Anmeldeseite: Unterstützung für E-Mail-/Passwort-Anmeldung und Drittanbieter-Konten

Tipp: Bei der Anmeldung mit Google oder GitHub wird automatisch ein Konto erstellt; eine separate Registrierung ist nicht erforderlich. Bei der ersten Anmeldung über einen Drittanbieter legt das System automatisch ein verknüpftes Konto an.

Link „Passwort vergessen?“

Wenn Sie Ihr Passwort vergessen haben, klicken Sie unten rechts auf der Anmeldeseite auf den Link „Passwort vergessen?“, um den Prozess zum Zurücksetzen des Passworts zu starten (siehe Abschnitt 1.3).

5.3 Passwort vergessen und zurücksetzen

Wenn Sie Ihr Passwort vergessen haben, können Sie es mit einem E-Mail-Bestätigungscode zurücksetzen. Der gesamte Vorgang wird auf einer einzigen Seite ohne Weiterleitungen abgeschlossen.

Passwort zurücksetzen

Führen Sie folgende Schritte aus:

1. E-Mail eingeben: Geben Sie die bei der Registrierung verwendete E-Mail-Adresse ein.
2. Bestätigungscode anfordern: Klicken Sie auf „Code senden“. Das System sendet eine E-Mail mit einem sechsstelligen Bestätigungscode.
3. Bestätigungscode eingeben: Geben Sie den erhaltenen sechsstelligen Code in das Feld für den Bestätigungscode ein.
4. Neues Passwort festlegen: Geben Sie Ihr neues Passwort ein. Es muss Buchstaben und Zahlen enthalten und 8 bis 32 Zeichen lang sein.
5. Neues Passwort bestätigen: Geben Sie das neue Passwort erneut ein, um die Übereinstimmung zu bestätigen.
6. Auf „Passwort zurücksetzen“ klicken: Schließen Sie das Zurücksetzen ab. Nach der Erfolgsmeldung werden Sie automatisch zur Anmeldeseite weitergeleitet.

Passwort vergessen: per E-Mail-Bestätigungscode zurücksetzen

Gültigkeit des Bestätigungscodes

Der Bestätigungscode ist nur begrenzt gültig. Verwenden Sie ihn daher möglichst bald nach Erhalt der E-Mail. Wenn der Code abgelaufen ist, können Sie auf „Erneut senden“ klicken, um einen neuen Code anzufordern. Warten Sie vor dem erneuten Senden, bis der Countdown abgelaufen ist.

Hinweis: Wenn Ihre E-Mail-Adresse nicht im System registriert ist, kann kein Bestätigungscode gesendet werden. Vergewissern Sie sich, dass Sie die bei der Registrierung verwendete E-Mail-Adresse eingeben.

5.4 Profileinstellungen

Im Modul für Profileinstellungen verwalten Sie grundlegende Kontodaten wie Avatar, Spitzname, E-Mail-Adresse, Biografie und Passwort.

Avatar ändern

Klicken Sie im Avatarbereich auf „Avatar ändern“ und wählen Sie eine lokale Bilddatei zum Hochladen aus. Das System schneidet Ihren neuen Avatar automatisch zu und speichert ihn.

Spitznamen ändern

Klicken Sie neben Ihrem Spitznamen auf die Bearbeiten-Schaltfläche, geben Sie einen neuen Namen ein und klicken Sie auf „Speichern“. Ihr Spitzname wird in allen Projekten und Kommentaren angezeigt.

E-Mail verwalten

Der E-Mail-Bereich zeigt Ihre aktuelle E-Mail-Adresse und den Verifizierungsstatus:

1. Verifiziert: Ihre E-Mail-Adresse wurde verifiziert und alle Funktionen sind verfügbar.
2. Nicht verifiziert: Klicken Sie auf „Verifizierungs-E-Mail senden“, um die Verifizierung abzuschließen und Bonus-Credits zu erhalten.
3. E-Mail-Adresse ändern: Zuerst müssen Sie Ihre aktuelle E-Mail-Adresse verifizieren. Geben Sie anschließend eine neue Adresse ein, um die Änderung abzuschließen.

Biografie

Geben Sie im Biografiebereich eine kurze Selbstvorstellung ein (empfohlen: höchstens 200 Zeichen) und klicken Sie anschließend auf „Speichern“.

Passwort ändern oder festlegen

Klicken Sie auf „Passwort ändern“, um den Dialog für die Passworteinstellungen zu öffnen:

1. Nutzer mit bestehendem Passwort: Geben Sie Ihr aktuelles Passwort ein und legen Sie anschließend ein neues Passwort fest (8 bis 32 Zeichen mit Buchstaben und Zahlen).
2. Nutzer ohne Passwort: Legen Sie direkt ein neues Passwort fest. Danach können Sie sich mit E-Mail-Adresse und Passwort anmelden.

Konto löschen

Um Ihr Konto zu löschen, klicken Sie unten auf der Seite auf „Konto löschen“. Aus Sicherheitsgründen müssen Sie Ihre Identität mit einem E-Mail-Bestätigungscode verifizieren.

Hinweis: Nach dem Absenden des Löschantrags tritt Ihr Konto in eine Aufbewahrungsfrist ein (normalerweise 30 Tage), in der Sie sich nicht anmelden können. Nach Ablauf dieser Frist löscht das System Ihre Projekte, Credits und den Verlauf dauerhaft.

Profil: Avatar, Spitzname, E-Mail-Adresse und Passwort verwalten

5.5 Speichernutzung

Das Modul zur Speichernutzung zeigt den Speicherverbrauch Ihres Kontos an. So sehen Sie den verbleibenden Speicherplatz und können Ihre Projekte entsprechend planen.

Speicherübersicht

Im oberen Bereich wird die Gesamtnutzung angezeigt, darunter:

1. Verwendet: Der aktuell belegte Speicherplatz
2. Gesamt: Das Speicherlimit Ihres Kontos; Pro-Nutzer erhalten mehr Kapazität
3. Verbleibend: Verfügbarer Speicherplatz für neue Projekte
4. Gespeicherte Projekte: Aktuelle Anzahl gespeicherter Projekte und das Limit

Aufschlüsselung der Speichernutzung

Das System unterteilt den Speicher in drei Kategorien:

1. HTML-Inhalte: Speicherplatz für den Webseiten-Code Ihrer Projekte
2. Bildressourcen: Speicherplatz für hochgeladene Bilddateien
3. Andere Ressourcen: Speicherplatz für sonstige Anhänge

Limit für die Projektanzahl

Für kostenlose Konten und Pro-Konten gelten unterschiedliche Projektlimits. Wenn Sie das Limit erreichen, müssen Sie Projekte löschen oder Ihren Tarif upgraden, bevor Sie neue Projekte erstellen können.

Speicher aktualisieren und Tarif upgraden

Klicken Sie auf die Aktualisierungsschaltfläche, um die Speicherinformationen zu aktualisieren. Für zusätzlichen Speicherplatz klicken Sie auf „Speicher upgraden“, öffnen Sie die Seite „Preise“ und wählen Sie einen passenden Tarif.

Tipp: Wenn der Kontospeicher voll ist oder die maximale Projektanzahl erreicht wurde, sperrt das System die Erstellung neuer Arbeiten. Löschen Sie Projekte oder upgraden Sie Ihren Tarif, um die Upload-Berechtigung wiederherzustellen.

5.6 Credits und Nutzungsverlauf

Das Modul für den Credit-Verlauf zeigt die Transaktionshistorie Ihres Kontos einschließlich verbrauchter und erhaltener Credits an.

Credit-Transaktionsverlauf

Die Credit-Einträge werden in einer Tabelle mit folgenden Informationen angezeigt:

1. Datum: Zeitpunkt der Credit-Änderung
2. Typ: Art des Vorgangs, durch den sich die Credits geändert haben
3. Credit-Änderung: Hinzugefügte (positiv) oder abgezogene (negativ) Credits
4. Beschreibung: Detaillierte Erläuterung der Änderung

Mit Datumsbereichsfiltern können Sie Einträge eines bestimmten Zeitraums anzeigen.

Credit-Typen

1. KI-Erstellung: Credits, die bei der Nutzung der Funktion KI-Erstellung verbraucht werden
2. Webseite duplizieren: Credits, die bei der Nutzung der Funktion Webseite duplizieren verbraucht werden
3. Registrierungsbonus: Credits, die neue Nutzer nach Registrierung und E-Mail-Verifizierung erhalten
4. Plattformbonus: Von der Plattform gutgeschriebene Credits
5. Monatliches Geschenk: Monatliches Credit-Guthaben für Pro-Nutzer
6. Credit-Aufladung: Durch den Kauf von Credits erhaltene Credits
7. Administrative Anpassung: Manuell von Administratoren angepasste Credits

Credit-Verlauf: Details der Credit-Transaktionen anzeigen

Tipp: Pro-Nutzer erhalten jeden Monat zusätzliche Credits. Sie können damit kostenpflichtige Funktionen wie KI-Erstellung und Webseite duplizieren verwenden.

5.7 Bestellverlauf und Abrechnung

Das Modul für den Bestellverlauf zeigt Ihre Kaufhistorie und Zahlungsdaten an und erleichtert das Suchen und Verwalten von Bestellungen.

Bestellungen verwalten

Die Bestellliste zeigt Ihre Käufe. Sie können:

1. Bestellstatus und Details anzeigen
2. Filter verwenden, um bestimmte Bestellungen schnell zu finden
3. die Zahlung für ausstehende Bestellungen fortsetzen
4. Bestellungen schließen oder löschen, die Sie nicht mehr benötigen

Tipp: Bei Zahlungsproblemen können Sie die aktuelle Bestellung schließen und eine neue aufgeben.

5.8 Preise und Abonnementpläne

Auf der Seite „Preise“ verwalten Sie Ihr Abonnement und Credit-Aufladungen. Wählen Sie den für Sie passenden Tarif und schalten Sie weitere kreative Möglichkeiten frei.

Abonnementpläne

HtmlDrag bietet die Abonnementpläne Pro und Pro Max. Nach dem Abonnement können Sie die enthaltenen Vorteile während der aktiven Laufzeit nutzen:

Pro: Für regelmäßige Creator, die den vollständigen Workflow für HTML-Bearbeitung, KI-Generierung, Teilen und Export benötigen.

Pro Max: Für umfangreichere KI-Erstellung, größere Projekte und höhere Nutzungslimits.

Abonnements werden entsprechend dem beim Checkout angezeigten Abrechnungszeitraum verlängert. Sie können die Verlängerung in Ihrem Konto oder beim Zahlungsanbieter verwalten oder kündigen.

Preise: den passenden Tarif auswählen

Credits aufladen

Wenn Sie KI-Generierung oder Webseite duplizieren nur vorübergehend nutzen möchten, können Sie Credits aufladen. Gekaufte Credits verfallen nicht. Bei knappem Guthaben können Sie jederzeit aufladen, ohne auf eine Wiederherstellung des Kontingents zu warten.

Funktionsvergleich

Die wichtigsten Unterschiede zwischen Free und Pro sind:

Leitfaden zur Credit-Nutzung

Jede KI-Generierung verbraucht eine festgelegte Anzahl Credits. Kostenlose Nutzer erhalten monatlich ein grundlegendes Bonuskontingent, Pro-Nutzer erhalten mehr. Gekaufte Credits verfallen nicht; bei knappem Guthaben können Sie jederzeit aufladen, ohne auf die Wiederherstellung des Kontingents zu warten.

Mit HtmlDrag beginnen

Beginnen Sie mit einer vorhandenen HTML-Seite, einer öffentlichen URL, einem Prompt für die KI-Verfeinerung oder einer unterstützten Datei. HtmlDrag führt Sie vom Ausgangsmaterial über die visuelle Bearbeitung und eine teilbare Vorschau bis zum sauberen HTML-Export.

Jetzt mit der Erstellung beginnen

Dieser Leitfaden behandelt HTML-Upload, Code einfügen, Webseite duplizieren, KI-Feinschliff, Datei zu Html, die Bearbeitung von Texten und Bildern, Tabellen, Komponenten, Ebenen, Links, das Sperren und Löschen von Elementen, Speichern, Teilen und HTML-Export.