HtmlDrag Benutzerhandbuch

Willkommen bei HtmlDrag. Dieser Leitfaden hilft Ihnen beim Einstieg von Grund auf und deckt Kontoverwaltung, Inhaltsimport, visuelle Bearbeitung und Projektexport ab.

1. Konto & Anmeldung

Bevor Sie HtmlDrag nutzen können, müssen Sie ein Konto erstellen. Wir bieten mehrere Registrierungs- und Anmeldemethoden, damit Sie schnell loslegen können.

1.1 Registrieren

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

E-Mail-Registrierung

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

1. E-Mail eingeben: Geben Sie Ihre häufig verwendete E-Mail-Adresse an. Diese dient als Anmeldeinformation und Benachrichtigungskanal. Stellen Sie sicher, dass das Format korrekt ist, z. B. [email protected].
2. Passwort festlegen: Das Passwort muss Buchstaben und Zahlen enthalten und eine Länge von 8-32 Zeichen haben. Wir empfehlen ein starkes Passwort für die Sicherheit Ihres Kontos.
3. Passwort bestätigen: Geben Sie das Passwort erneut ein, um sicherzustellen, dass beide Eingaben übereinstimmen.
4. Spitznamen festlegen (optional): Sie können Ihren Spitznamen anpassen. Wenn Sie dieses Feld leer lassen, generiert das System automatisch einen Standard-Spitznamen für Sie.
5. Bedingungen zustimmen: Aktivieren Sie „Ich habe die Nutzungsbedingungen und Datenschutzrichtlinie gelesen und stimme zu“ und klicken Sie dann auf die Schaltfläche „Registrieren“, um die Registrierung abzuschließen.

Registrierungsseite: E-Mail und grundlegende Informationen eingeben

E-Mail-Verifizierung & Credit-Belohnung

Nach erfolgreicher Registrierung sendet das System eine Verifizierungs-E-Mail an Ihren Posteingang. Nach Abschluss der E-Mail-Verifizierung erhalten Sie Bonus-Credits, die für den AI-Generator und URL-Import-Funktionen verwendet werden können. Wenn Sie die E-Mail nicht erhalten, überprüfen Sie Ihren Spam-Ordner; Sie können nach 3 Minuten auf „Reenviar“ (Erneut senden) klicken.

Tipp: Der Abschluss der E-Mail-Verifizierung bringt Ihnen nicht nur Bonus-Credits, sondern schaltet auch das volle Erlebnis frei und erhöht Ihre Kontosicherheit.

1.2 Anmelden

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

Anmeldung mit E-Mail & Passwort

Melden Sie sich mit der E-Mail und dem Passwort an, mit denen Sie sich registriert haben:

1. Geben Sie Ihre E-Mail-Adresse auf der Anmeldeseite ein
2. Geben Sie Ihr Passwort ein (klicken Sie auf das Augensymbol, um das Passwort sichtbar zu machen)
3. Klicken Sie auf die Schaltfläche „Weiter“, um die Anmeldung abzuschließen

Nach erfolgreicher Anmeldung werden Sie automatisch zur Startseite weitergeleitet, wo Sie mit dem Erstellen beginnen können.

Drittanbieter-Anmeldung (Google / GitHub)

Für 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-Autorisierungs-Popup 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 GitHub-Autorisierungsseite weitergeleitet. Nach Bestätigung kehren Sie automatisch zu HtmlDrag zurück.

Anmeldeseite: Unterstützt E-Mail/Passwort und Drittanbieter-Konten

Tipp: Die Verwendung der Google- oder GitHub-Anmeldung erstellt automatisch ein Konto – keine separate Registrierung erforderlich. Bei Ihrer ersten Drittanbieter-Anmeldung erstellt das System automatisch ein verknüpftes Konto für Sie.

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).

1.3 Passwort vergessen

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

Prozess zum Zurücksetzen des Passworts

Befolgen Sie diese Schritte, um Ihr Passwort zurückzusetzen:

1. E-Mail eingeben: Geben Sie die E-Mail-Adresse an, die Sie bei der Registrierung verwendet haben
2. Verifizierungscode erhalten: Klicken Sie auf die Schaltfläche „Code senden“. Das System sendet eine E-Mail mit einem 6-stelligen Verifizierungscode
3. Verifizierungscode eingeben: Geben Sie den erhaltenen 6-stelligen Code in das Verifizierungscode-Feld ein
4. Neues Passwort festlegen: Geben Sie Ihr neues Passwort ein (muss Buchstaben und Zahlen enthalten, 8-32 Zeichen lang)
5. Neues Passwort bestätigen: Geben Sie das neue Passwort erneut ein, um sicherzustellen, dass sie übereinstimmen
6. Auf „Passwort zurücksetzen“ klicken: Schließen Sie das Zurücksetzen des Passworts ab. Nach der Erfolgsmeldung werden Sie automatisch zur Anmeldeseite weitergeleitet

Passwort vergessen: Zurücksetzen per E-Mail-Verifizierungscode

Gültigkeit des Verifizierungscodes

Der Verifizierungscode hat eine begrenzte Gültigkeitsdauer – bitte verwenden Sie ihn umgehend nach Erhalt der E-Mail. Wenn der Code abgelaufen ist, können Sie auf die Schaltfläche „Erneut senden“ klicken, um einen neuen Code anzufordern (Sie müssen warten, bis der Countdown abgelaufen ist, bevor Sie erneut senden können).

Hinweis: Wenn Ihre E-Mail nicht im System registriert ist, kann der Verifizierungscode nicht gesendet werden. Bitte stellen Sie sicher, dass Sie die E-Mail-Adresse eingeben, die Sie bei der Registrierung verwendet haben.

2. Profil

Das Profil ist der zentrale Ort für die Verwaltung Ihrer Kontoinformationen, Arbeiten und Bestellungen. Klicken Sie oben rechts auf den Avatar, um darauf zuzugreifen.

Profil: Verwalten Sie Konto, Arbeiten und Bestellungen an einem Ort

2.1 Profileinstellungen

Im Modul Profileinstellungen können Sie Ihre grundlegenden Kontoinformationen verwalten, einschließlich Avatar, Spitzname, E-Mail, Biografie und Passworteinstellungen.

Avatar ändern

Klicken Sie im Avatar-Bereich auf die Schaltfläche „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 auf die Bearbeiten-Schaltfläche neben Ihrem Spitznamen, geben Sie einen neuen Namen ein und klicken Sie auf „Speichern“. Ihr Spitzname wird bei all Ihren Arbeiten und Kommentaren angezeigt.

E-Mail-Verwaltung

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

1. Verifiziert: Ihre E-Mail 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 ändern: Sie müssen zuerst Ihre aktuelle E-Mail verifizieren und dann eine neue E-Mail-Adresse eingeben, um die Änderung abzuschließen

Biografie

Geben Sie Ihre Selbstvorstellung im Biografiebereich ein (empfohlen: nicht mehr als 200 Zeichen) und klicken Sie dann auf „Speichern“, um zu aktualisieren.

Passwort ändern / Passwort festlegen

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

1. Benutzer mit bestehendem Passwort: Geben Sie Ihr aktuelles Passwort ein und legen Sie dann ein neues Passwort fest (8-32 Zeichen, einschließlich Buchstaben und Zahlen)
2. Benutzer ohne Passwort: Legen Sie direkt ein neues Passwort fest. Nach dem Festlegen können Sie sich mit E-Mail und Passwort anmelden

Konto löschen

Um Ihr Konto zu löschen, klicken Sie unten auf der Seite auf die Schaltfläche „Konto löschen“. Aus Sicherheitsgründen müssen Sie Ihre Identität per E-Mail-Verifizierungscode bestätigen.

Hinweis: Nach dem Absenden der Löschanfrage tritt Ihr Konto in eine Aufbewahrungsfrist ein (in der Regel 30 Tage), während der Sie sich nicht anmelden können. Nach diesem Zeitraum löscht das System Ihre Arbeiten, Credits und Ihren Verlauf dauerhaft.

Profil: Avatar, Spitznamen, E-Mail und Passwort verwalten

2.2 Speichernutzung

Das Modul Speichernutzung zeigt den Speicherverbrauch Ihres Kontos an und hilft Ihnen, den verbleibenden Platz zu verstehen und Ihre Kreationen entsprechend zu planen.

Speicherübersicht

Der obere Bereich zeigt Ihre Gesamtnutzung, einschließlich:

1. Belegt: Der derzeit genutzte Speicherplatz
2. Gesamt: Das Speicherlimit Ihres Kontos (Pro-Benutzer genießen eine größere Kapazität)
3. Verbleibend: Verfügbarer Platz zum Erstellen neuer Arbeiten
4. Gespeicherte Arbeiten: Aktuelle Anzahl der gespeicherten Arbeiten und das Limit

Speicheraufschlüsselung

Das System kategorisiert den Speicher in drei Typen:

1. HTML-Inhalt: Platz, der vom Webseiten-Code Ihrer Arbeiten verwendet wird
2. Bildressourcen: Platz, der von hochgeladenen Bilddateien verwendet wird
3. Andere Ressourcen: Platz, der von anderen Anhängen verwendet wird

Limit für die Anzahl der Arbeiten

Benutzer des kostenlosen Plans und des Pros haben unterschiedliche Limits für die Anzahl der Arbeiten. Wenn Sie das Limit erreichen, müssen Sie einige Arbeiten löschen oder Ihren Plan upgraden, bevor Sie neue erstellen können.

Speicher aktualisieren & Upgrade

Klicken Sie auf die Aktualisieren-Schaltfläche, um die Speicherinformationen zu aktualisieren. Für mehr Speicherplatz klicken Sie auf „Speicher erweitern“ (Upgrade storage), um die Preisseite zu besuchen und einen geeigneten Plan auszuwählen.

Tipp: Wenn Ihr Kontospeicher voll ist oder die Anzahl der Arbeiten das Limit erreicht, friert das System die Erstellung neuer Arbeiten ein. Bitte löschen Sie einige Arbeiten oder führen Sie ein Upgrade durch, um die Upload-Berechtigungen wiederherzustellen.

2.3 Dateien

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

Arbeitsliste & Filter

Arbeiten werden als Karten oder in einer Liste angezeigt. Sie können sie filtern nach:

1. Suche: Geben Sie Arbeitscode oder Titel ein, um zu suchen
2. Typfilter: Filtern nach AI-Generator, Datei-Upload, URL-Snapshot, Code einfügen usw.
3. Datumsbereich: Wählen Sie Start- und Enddaten aus, um Arbeiten aus einem bestimmten Zeitraum zu filtern
4. Sortieren nach: Sortieren nach Neueste zuerst, Älteste zuerst, Anzahl der Likes oder Anzahl der Ansichten

Dateiverwaltung: Alle Arbeiten anzeigen, filtern und verwalten

Arbeiten anzeigen & bearbeiten

Klicken Sie auf die Schaltfläche „Ansehen“ auf einer Arbeitskarte, um eine Vorschau anzuzeigen. In der Vorschau-Oberfläche können Sie:

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

Verwaltung des Teilungsstatus

Pro-Benutzer können Arbeiten teilen, sodass andere sie per Link ansehen können:

1. Teilen aktivieren: Klicken Sie auf die Schaltfläche „Teilen“, um einen 7 Tage lang gültigen Freigabelink zu generieren
2. Freigabe aktualisieren: Bereits geteilte Arbeiten können ihre Links aktualisieren lassen, wodurch die Gültigkeitsdauer zurückgesetzt wird
3. Teilen beenden: Klicken Sie auf „Teilen beenden“, um den Link sofort ungültig zu machen

Arbeiten löschen

Klicken Sie auf die Schaltfläche „Löschen“ auf einer Arbeitskarte, um sie 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 Sie daran, dass das Löschen unwiderruflich ist

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

2.4 Credits

Das Modul Credit-Verlauf zeigt den Verlauf der Credit-Transaktionen Ihres Kontos an, einschließlich Verbrauchs- und Einnahmeaufzeichnungen.

Credit-Transaktionsverlauf

Credit-Datensätze werden in einer Tabelle angezeigt, die folgende Informationen enthält:

1. Datum: Wann die Credit-Änderung stattfand
2. Typ: Der Operationstyp der Credit-Änderung
3. Punkteänderung: Hinzugefügte (positiv) oder abgezogene (negativ) Credits
4. Beschreibung: Detaillierte Erklärung der Änderung

Sie können Datumsbereichsfilter verwenden, um Datensätze aus einem bestimmten Zeitraum anzuzeigen.

Credit-Typen

1. AI-Generator: Verbrauchte Credits bei Verwendung der AI-Generator-Funktion
2. URL-Import: Verbrauchte Credits bei Verwendung der URL-Import-Funktion
3. Registrierungsbelohnung: Credits, die neuen Benutzern nach Registrierung und E-Mail-Verifizierung gewährt werden
4. Plattform-Bonus: Von der Plattform geschenkte Credits
5. Monatliches Geschenk: Monatliches Credit-Guthaben für Pro-Benutzer
6. Credit-Aufladung: Durch Credit-Käufe erhaltene Credits
7. Admin-Anpassung: Manuell von Administratoren angepasste Credits

Credit-Verlauf: Details zu Credit-Transaktionen anzeigen

Tipp: Pro-Benutzer erhalten jeden Monat zusätzliche Credits. Credits können für kostenpflichtige Funktionen wie AI-Generator und URL-Import verwendet werden.

2.5 Bestellungen

Das Modul Bestellverlauf zeigt Ihre Kaufhistorie und Zahlungsaufzeichnungen an, was das Abfragen und Verwalten von Bestellungen erleichtert.

Bestellverwaltung

Die Bestellliste zeigt Ihre Kaufaufzeichnungen. Sie können:

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

Tipp: Wenn Sie Zahlungsprobleme haben, können Sie die aktuelle Bestellung schließen und eine neue aufgeben.

2.6 Portfolio

Die Portfolio-Seite ist Ihr dedizierter Bereich zum Anzeigen und Verwalten all Ihrer Kreationen. Greifen Sie schnell über die Seitenleiste oder das Benutzermenü darauf zu.

Arbeitsanzeige

Die Seite zeigt alle Ihre Arbeiten als Karten an, die jeweils enthalten:

1. Vorschaubild: Visuelle Vorschau der Arbeit zur schnellen Identifizierung
2. Arbeitstitel: Zeigt den Arbeitsnamen, zum Bearbeiten klicken
3. Erstellungszeit: Zeichnet auf, wann die Arbeit erstellt wurde
4. Teilungsstatus: Zeigt an, ob die Arbeit derzeit geteilt wird

Portfolio: Alle Ihre Kreationen an einem Ort anzeigen und verwalten

Schnellaktionen

Jede Arbeitskarte bietet bequeme Aktionsschaltflächen:

1. Bearbeiten: Den visuellen Editor öffnen, um weiter zu erstellen
2. Teilen: Freigabelinks generieren oder verwalten (nur Pro)

3. Seitenleistennavigation

HtmlDrag bietet mehrere Möglichkeiten, Inhalte in den Editor zu importieren, und deckt alle Szenarien von der Neuerstellung bis zur Weiterverarbeitung ab. Verwenden Sie die linke Seitenleiste, um schnell zwischen den Einstiegspunkten zu wechseln.

Seitenleistennavigation: Schneller Zugriff auf verschiedene Erstellungseinstiegspunkte

3.1 Startseite

Die Startseite ist der Standard-Einstiegspunkt von HtmlDrag und bietet den AI-Generator. Geben Sie hier Ihren Inhalt ein, um schnell professionelle Webdesigns zu erstellen.

3.2 URL-Import

Der URL-Import ermöglicht es Ihnen, einen beliebigen öffentlichen Webseiten-Link einzugeben, und das System erfasst automatisch den Seiteninhalt und generiert eine bearbeitbare Arbeit. Dies ist der ideale Weg, um bestehende Webdesigns schnell für die weitere Bearbeitung zu erhalten.

URL eingeben

Fügen Sie die Webseitenadresse, die Sie erfassen möchten, in das Eingabefeld ein. Es werden nur öffentliche http/https-Links unterstützt; private oder lokale Adressen sind nicht zulässig.

URL-Import: URL eingeben, Webseite sofort erfassen

Bestätigung des Credit-Abzugs

Nach dem Klicken auf „Erfassung starten“ erscheint ein Bestätigungsdialog für den Credit-Abzug, der die für diese Aktion erforderlichen Credits, Ihr aktuelles Credit-Guthaben und die monatlichen Bonus-Credits anzeigt. Monatliche Bonus-Credits werden zuerst abgezogen, verbleibende Kosten werden von Ihren aktuellen Credits abgezogen.

Erfassungsfortschritt & Status

Nach der Bestätigung beginnt das System mit der Erfassung des Seiteninhalts. Bitte verlassen Sie die Seite während der Erfassung nicht, um Unterbrechungen zu vermeiden. Nach erfolgreicher Erfassung werden Sie automatisch zum Editor weitergeleitet.

Tipps:

Einige Websites können nicht erfasst werden: Websites, die eine Anmeldung erfordern oder komplexe Frontend-Frameworks (wie einige SPA-Anwendungen) verwenden, können möglicherweise nicht oder nur unvollständig erfasst werden.

Audio-/Video-Websites: Dynamische Inhalte von Audio- und Video-Websites werden möglicherweise nicht korrekt erfasst.

Seite zu groß: Wenn der Seiteninhalt die vom Server zulässige Größe überschreitet, kann die Erfassung fehlschlagen. Versuchen Sie es stattdessen mit einer einfacheren Seite.

3.3 HTML hochladen

Die Funktion HTML hochladen ermöglicht es Ihnen, lokale HTML-Dateien in HtmlDrag zu importieren. Das System führt einen Sicherheitsscan durch und generiert eine bearbeitbare Arbeit. Dies ist ideal für bestehende HTML-Vorlagen oder E-Mail-Designs, die weiter bearbeitet werden müssen.

Dateiformat & Größenlimits

Unterstützt .html und .htm Dateiformate. Die Größe einer einzelnen Datei sollte das Systemlimit nicht überschreiten (siehe Upload-Oberfläche für spezifische Limits). Hochgeladene Dateien durchlaufen eine erweiterte Verarbeitung, was die tatsächliche Speichergröße im Vergleich zur Originaldatei erheblich erhöhen kann. Bitte stellen Sie sicher, dass genügend Restkapazität vorhanden ist.

HTML hochladen: Drag & Drop oder klicken zum Hochladen von HTML-Dateien

Sicherheitsscan

Das System scannt hochgeladene Dateien auf Sicherheit, erkennt und entfernt potenzielle bösartige Skripte, gefährliche Tags und verdächtige externe Ressourcen. Basierend auf der Risikostufe (niedrig, mittel, hoch, kritisch) gibt das System entsprechende Warnungen aus oder blockiert das Speichern.

Hinweis: Laden Sie keine Dateien hoch, die bösartigen Code enthalten. Bösartige Uploads können zur Kontosperrung führen.

Vorschau & Speichern

Nachdem die Datei geparst wurde, können Sie das Ergebnis im Vorschaubereich ansehen. Nach Bestätigung klicken Sie auf „Projekt speichern“, um die Arbeit in Ihrem Konto zu speichern, und Sie können jederzeit den visuellen Editor zur Bearbeitung öffnen.

3.4 Code einfügen

Die Funktion Code einfügen ermöglicht es Ihnen, HTML-Code direkt einzufügen, und das System führt einen Sicherheitsscan durch und konvertiert ihn in ein visuelles Design. Dies ist die flexibelste Importmethode, geeignet für Entwickler oder Benutzer, die eine präzise Kontrolle über den Code benötigen.

HTML-Code einfügen

Fügen Sie Ihren HTML-Code in den Code-Eingabebereich ein. Sie können optional einen Arbeitstitel eingeben (wenn leer gelassen, verwendet das System den Standardnamen „Unbenanntes Projekt“).

Code einfügen: HTML-Code direkt einfügen, um mit der Bearbeitung zu beginnen

Sicherheitsscan

Ähnlich wie beim Datei-Upload führt das System eine Sicherheitsprüfung des eingefügten Codes durch. Wenn die Risikostufe des Codes zu hoch ist, lehnt die Systemsicherheitsrichtlinie die Verarbeitung dieses Inhalts ab. Bitte überprüfen Sie den Code und versuchen Sie es erneut.

Hinweis: Fügen Sie keinen bösartigen Code oder Skripte ein. Bösartige Nutzung kann zur Kontosperrung führen.

Vorschau generieren & Speichern

Klicken Sie nach Eingabe des Codes auf die Schaltfläche „Vorschau generieren“. Sobald der Code die Sicherheitsprüfung besteht, wird die Vorschau automatisch generiert. Nach Bestätigung des Ergebnisses klicken Sie auf „Projekt speichern“, um die Arbeit in Ihrem Konto zu speichern.

3.5 KI-Erstellung

KI-Erstellung funktioniert am besten mit echtem Material: PDF, PPT/PPTX, Excel/XLSX, CSV, Word, Markdown, TXT, JPG/PNG oder Briefing. Beschreiben Sie Ziel, Zielgruppe und Stil.

1. Material hochladen oder Briefing schreiben.
2. KI strukturiert Überschriften, Absätze, Listen, Karten und Abschnitte.
3. Vollständigkeit, Hierarchie, Bilder, Tabellen und Text prüfen.
4. Im HtmlDrag-Canvas Texte, Bilder, Blöcke, Farben und Layout verfeinern.
5. Speichern, teilen oder HTML herunterladen.

Jedes Material braucht eine passende Struktur.

3.6 Preise

Auf der Preise-Seite verwalten Sie Ihr Abonnement und Credit-Aufladungen. Wählen Sie den Plan, der am besten zu Ihnen passt, und schalten Sie mehr kreative Möglichkeiten frei.

Abonnements

HtmlDrag bietet Pro- und Pro Max-Abonnements. Nach dem Abonnieren können Sie die enthaltenen Vorteile während des aktiven Abonnementzeitraums nutzen:

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

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

Abonnements verlängern sich gemäß dem beim Checkout angezeigten Abrechnungszyklus. Sie können die Verlängerung in Ihrem Konto oder beim Zahlungsanbieter verwalten oder kündigen.

Preise: Wählen Sie den Plan, der am besten zu Ihnen passt

Credits aufladen

Wenn Sie nur vorübergehend KI-Generierung oder URL-Import-Funktionen nutzen müssen, können Sie Credits aufladen. Gekaufte Credits verfallen nie, und Sie können jederzeit aufladen, wenn sie knapp werden – keine Wartezeit erforderlich.

Funktionsvergleich

Die Hauptunterschiede zwischen dem kostenlosen Plan und dem Pro sind wie folgt:

Leitfaden zur Credit-Nutzung

Jede KI-Generierung verbraucht eine feste Menge an Credits. Benutzer des kostenlosen Plans erhalten grundlegende monatliche Bonus-Credits, während Pro-Benutzer mehr erhalten. Gekaufte Credits verfallen nie, und Sie können jederzeit aufladen, wenn sie knapp werden – kein Warten auf Kontingentwiederherstellung.

3.7 Verlauf

In der linken Seitenleiste bietet „Meine Arbeiten“ (Verlauf) schnellen Zugriff auf Ihre vergangenen Kreationen. Es listet alle Ihre Bearbeitungsdatensätze in chronologischer Reihenfolge auf.

Schnell auswählen & bearbeiten

Klicken Sie auf einen Datensatz in der Liste, um ihn schnell in den Editor zu laden und dort weiterzumachen, wo Sie aufgehört haben, ohne erneut importieren zu müssen.

Vorschaufenster-Details

Fahren Sie mit der Maus über einen Verlaufsdatensatz, um dessen Vorschaufenster anzuzeigen. Im Vorschaufenster können Sie:

1. Titel direkt bearbeiten: Klicken Sie auf den Titeltext, um den Arbeitsnamen sofort zu ändern.
2. Teilungsstatus anzeigen: Symbole zeigen an, ob die Arbeit derzeit geteilt wird.
3. Schnellaktionen: Zugriff auf Bearbeiten, Löschen und andere Verknüpfungen.

Verlauf: Schnelle Vorschau und Verwaltung vergangener Arbeiten

4. Visueller Editor

Das Herzstück von HtmlDrag ist ein leistungsstarker WYSIWYG-Editor, mit dem Sie direkt in einer echten HTML-Umgebung arbeiten können, ohne Code bearbeiten zu müssen.

4.1 Überblick über die Editor-Oberfläche

Der Editor verwendet ein klassisches dreispaltiges Layout: linke Navigation mit Arbeitsverlauf, mittlerer Leinwand-Vorschaubereich und rechtes Funktionspanel. Obere und untere Leisten bieten Arbeitsaktionen und Bearbeitungssteuerungen.

Editor-Oberfläche: Linke Navigation, mittlere Leinwand, rechtes Panel

Linke Navigation & Verlauf

Die linke Navigation bietet schnelle Zugriffspunkte. Klicken Sie auf „Meine Arbeiten“, um Ihre Arbeitsverlaufsliste für schnelle Navigation und Umschaltung zu erweitern. Geteilte Arbeiten zeigen ein „Geteilt“-Abzeichen an, um Ihnen bei der Verwaltung des Teilungsstatus zu helfen.

Mittlerer Leinwandbereich

Die Leinwand ist das Live-Vorschaufenster, in dem Sie Seitenelemente direkt auswählen, ziehen und bearbeiten können. Sie unterstützt Zoom- und Schwenkoperationen über den Zoom-Controller unten. Alle Bearbeitungen werden in Echtzeit angezeigt.

Rechtes Panel (Bearbeiten / Komponenten / Ebenen / Bibliothek)

Das rechte Panel enthält vier Tabs: Bearbeiten (Stilanpassungen und Modusumschaltung), Komponenten (neue Elemente einfügen), Ebenen (Ebenenliste und Batch-Operationen) und Bibliothek (persönliche Komponentenbibliothek). Klicken Sie auf einen Tab, um zwischen den Funktionen zu wechseln.

Obere Titelleiste & Aktionen

Die obere Leiste zeigt den Arbeitstitel an (doppelklicken Sie zum Bearbeiten), mit Aktionsschaltflächen auf der rechten Seite zum Teilen, Herunterladen als Bild und Herunterladen als HTML. Einige Funktionen erfordern Pro-Berechtigungen.

Untere Symbolleiste

Die untere Symbolleiste bietet Vorschau (öffnet in neuem Fenster), Rückgängig, Wiederholen, Vorschau aktualisieren, Letzten gespeicherten Zustand wiederherstellen, Ursprüngliches HTML wiederherstellen und Speichern-Schaltflächen für Kernbearbeitungssteuerungen.

4.2 Grundlegende Operationen

HtmlDrag bietet intuitive visuelle Operationen – Schweben, Einzelklick, Doppelklick und Rechtsklick decken die meisten Bearbeitungsaufgaben ab.

Elementerkennung

Fahren Sie mit der Maus über ein beliebiges Element auf der Leinwand, und das System erkennt es automatisch und zeigt einen gestrichelten Rahmen an, damit Sie aktionsfähige Elemente schnell identifizieren können. Die Erkennung umfasst Text, Bilder, Buttons, Container und andere HTML-Elemente.

Elementerkennung: Gestrichelter Rahmen erscheint beim Darüberfahren

Drag-Modus

Klicken Sie einmal auf ein beliebiges Element, um in den Drag-Modus zu wechseln, der einen Auswahlrahmen mit acht Größenänderungspunkten anzeigt. Sie können: das Element ziehen, um es neu zu positionieren; Eckpunkte ziehen, um proportional zu skalieren; Randpunkte ziehen, um die Größe in eine Richtung zu ändern. Während der Auswahl zeigt das rechte „Bearbeiten“-Panel die Stileigenschaften des Elements zur Anpassung an.

Drag-Modus: Klicken zum Auswählen, frei bewegen und Größe ändern

Bearbeitungsmodus

Doppelklicken Sie auf ein Textelement, um in den Bearbeitungsmodus zu wechseln – der Cursor positioniert sich im Text für die direkte Bearbeitung. Im Bearbeitungsmodus zeigt das rechte Panel Textstil-Werkzeuge für Schriftart, Größe, Farbe, Fett, Kursiv und mehr an. Klicken Sie außerhalb des Elements oder drücken Sie Esc, um den Bearbeitungsmodus zu verlassen.

Bearbeitungsmodus: Doppelklicken zum Eintreten, Text direkt bearbeiten

Kontextmenü

Rechtsklicken Sie auf ein ausgewähltes Element, um das Kontextmenü zu öffnen, das schnellen Zugriff auf Kopieren, Einfügen, Zur Bibliothek hinzufügen, Link-Bearbeitung, Ebenenoperationen, Sperren, Ausblenden, Löschen und mehr bietet. Siehe 4.9 Kontextmenü für Details.

Mehrfachauswahl

Halten Sie Umschalt gedrückt und klicken Sie auf mehrere Elemente, um sie gemeinsam für Batch-Operationen auszuwählen. Im Mehrfachauswahlmodus zeigt das rechte Panel Ausrichtungswerkzeuge (Linke/Rechte/Obere/Untere Kanten ausrichten, Horizontal/Vertikal zentrieren, Horizontal/Vertikal verteilen) für eine schnelle Layout-Anordnung an.

Mehrfachauswahl: Umschalt gedrückt halten und klicken, um mehrere Elemente auszuwählen

4.3 Meine Arbeiten-Shortcut-Leiste

Die „Meine Arbeiten“-Shortcut-Leiste auf der linken Seite ermöglicht es Ihnen, die Arbeitsliste zu erweitern/einzuklappen und schnell zwischen Arbeiten zu wechseln, was reibungslose Übergänge zwischen mehreren Kreationen erleichtert.

Erweitern & Einklappen

Klicken Sie oben links auf die Schaltfläche „Meine Arbeiten“, um die Seitenleisten-Arbeitsliste zu erweitern. Klicken Sie erneut oder außerhalb der Seitenleiste, um sie einzuklappen. Wenn erweitert, können Sie visuell durch Thumbnails und Titel Ihrer Verlaufsarbeiten blättern.

Arbeiten wechseln

Klicken Sie auf eine beliebige Arbeitskarte in der Liste, um deren Inhalt sofort in den Editor zu laden. Dies ermöglicht es Ihnen, verschiedene Designentwürfe schnell zu vergleichen und zu ändern, ohne zur Startseite oder zum Profil zurückzukehren.

4.4 Leinwand-Tastenkombinationen

Die Beherrschung von Tastenkombinationen kann Ihre Bearbeitungseffizienz erheblich steigern. Hier sind die wichtigsten Tastenkombinationen im Leinwandbereich:

4.5 Rechtes Panel - Bearbeiten-Tab

Der „Bearbeiten“-Tab ist der am häufigsten verwendete Bereich, der Modusumschaltungen und umfangreiche Stilanpassungswerkzeuge bietet. Nach Auswahl eines Elements zeigt das Panel intelligent Bearbeitungsoptionen basierend auf dem Elementtyp an.

Bearbeiten-Tab: Modusumschaltungen und Stilwerkzeuge

Modusumschaltungen

Oben im Panel befinden sich vier Modusschalter, um das Interaktionsverhalten des Editors zu steuern. Jeder Schalter kann unabhängig ein- oder ausgeschaltet werden, mit einer Nachrichtenbenachrichtigung, die den aktuellen Status anzeigt.

Tipp: Die Link-Navigation ist während der Bearbeitung standardmäßig deaktiviert, um die Komponentenbearbeitung zu ermöglichen. Um Links zu folgen, schalten Sie den Schalter „Link-Navigation“ im Bearbeiten-Panel ein. Das Absenden von Formularen ist im Bearbeitungsmodus ebenfalls blockiert, um Ihren Inhalt zu schützen.

Textstil

Nach Auswahl eines Textelements oder Eintreten in den Bearbeitungsmodus zeigt das Panel umfassende Textstil-Werkzeuge mit den folgenden Formatierungsoptionen an:

Textstil: Schriftart, Größe, Farbeinstellungen

Elementstil

Verwenden Sie nach Auswahl eines beliebigen Elements die Elementstil-Werkzeuge, um dessen Erscheinungsbild anzupassen:

Bildstil

Passen Sie nach Auswahl eines Bildelements Anzeigeoptionen an und ersetzen Sie das Bild:

Tabellenstil

Wenn eine Tabelle oder Tabellenzelle ausgewählt ist, werden dedizierte Tabellenbearbeitungswerkzeuge verfügbar. Detaillierte Anweisungen finden Sie unter 4.10 Tabellenbearbeitung.

Tabellenstil: Zeilen-/Spaltenoperationen, Rahmen und Zelleneinstellungen

Link-Bearbeitung

Fügen Sie Klick-Links zu jedem Element hinzu oder bearbeiten Sie bestehende Links:

Ausrichtungswerkzeuge (Mehrfachauswahl)

Wenn mehrere Elemente ausgewählt sind, zeigt das Panel Ausrichtungs- und Verteilungswerkzeuge an, um Ihnen zu helfen, Elementlayouts schnell zu organisieren:

4.6 Rechtes Panel - Komponenten-Tab

Der „Komponenten“-Tab bietet Schnelloptionen zum Einfügen verschiedener Elementtypen, mit denen Sie der Leinwand schnell neue Inhalte hinzufügen können. Klicken Sie auf eine Schaltfläche, um die entsprechende Komponente einzufügen.

Komponenten-Tab: Verschiedene Elemente mit einem Klick einfügen

4.7 Rechtes Panel - Ebenen-Tab

Der „Ebenen“-Tab bietet eine Listenansicht aller bearbeitbaren Elemente auf der Leinwand und unterstützt Filterung, Batch-Operationen und präzise Positionierung – ein leistungsstarkes Werkzeug zur Verwaltung komplexer Seitenelemente.

Ebenen-Tab: Ebenenverwaltung und Batch-Operationen

Elementkartenliste

Das Panel zeigt alle verwaltbaren Elemente als Karten an. Jede Karte zeigt den Tag-Typ des Elements (z. B. DIV, IMG, SPAN) und die Ebenenstufe an, wobei Textelemente eine Inhaltsvorschau zeigen. Dekorative Ebenenelemente sind mit einem „Dekorativ“-Abzeichen gekennzeichnet. Symbole zum schnellen Sperren/Entsperren und Ein-/Ausblenden erscheinen auf der rechten Seite jeder Karte.

Filteroptionen

Klicken Sie auf die Filter-Schaltfläche, um die Liste nach Elementstatus zu filtern, mit folgenden Optionen:

Batch-Operationen

Nach Auswahl mehrerer Elemente in der Kartenliste verwenden Sie die Batch-Operations-Schaltflächen für die einheitliche Verarbeitung:

Präzisionsumschalter

Der Ebenen-Tab bietet einen Präzisionsumschalter zur Steuerung der Elementerkennungsgenauigkeit:

Klicken Sie auf Karte zum Lokalisieren

Klicken Sie auf eine beliebige Elementkarte, um die Leinwand automatisch zu scrollen und das entsprechende Element hervorzuheben, was es einfach macht, bestimmte Komponenten auf der Seite schnell zu finden. Dies ist besonders nützlich bei der Arbeit mit komplexen oder geschichteten Seitenlayouts.

4.8 Rechtes Panel - Bibliothek-Tab

Der „Bibliothek“-Tab ist Ihre persönliche Komponentenbibliothek, in der Sie häufig verwendete Elemente oder Komponenten zur Wiederverwendung in verschiedenen Arbeiten speichern können, was Ihre kreative Effizienz steigert.

Bibliothek-Tab: Persönliche Komponentenbibliothek

Favoriten-Komponentenliste

Das Panel zeigt alle Ihre gespeicherten Komponenten als Karten an, die jeweils ein Thumbnail und einen Namen zeigen. Thumbnails werden beim Speichern automatisch generiert; unbenannte Komponenten werden als „Unbenannt“ angezeigt.

Favoriten suchen

Verwenden Sie das Suchfeld, um gespeicherte Komponenten schnell nach Namen zu finden. Die Liste filtert in Echtzeit, während Sie tippen.

Favoriten-Komponente einfügen

Klicken Sie auf die Schaltfläche „Einfügen“ auf einer Bibliothekskarte, um diese Komponente zur aktuellen Leinwand hinzuzufügen. Eingefügte Komponenten können normal bearbeitet und angepasst werden.

Favoriten umbenennen / löschen

Jede Bibliothekskarte bietet Optionen zum „Umbenennen“ und „Löschen“. Das Umbenennen macht Komponenten später leichter auffindbar; das Löschen entfernt die gespeicherte Komponente dauerhaft – verwenden Sie es mit Vorsicht.

Wie man zur Bibliothek hinzufügt

Wählen Sie ein beliebiges Element auf der Leinwand aus und wählen Sie dann „Zur Bibliothek hinzufügen“ aus dem Kontextmenü, um dieses Element und seine untergeordneten Elemente als Komponente zu speichern. Eine Bestätigung „Zur Bibliothek hinzugefügt“ erscheint bei Erfolg.

4.9 Kontextmenü

Ein Rechtsklick auf ein ausgewähltes Element öffnet das Kontextmenü und bietet schnellen Zugriff auf häufige Aktionen. Der Menüinhalt passt sich dynamisch an den ausgewählten Elementtyp an.

Kontextmenü: Schneller Zugriff auf häufige Aktionen

Tabellenspezifisches Menü

Beim Rechtsklick auf eine Tabellenzelle zeigt das Menü zusätzliche tabellenspezifische Operationen an:

4.10 Tabellenbearbeitung

Wenn eine Tabelle oder Tabellenzelle ausgewählt ist, zeigt das rechte Panel dedizierte Tabellenbearbeitungswerkzeuge mit umfassenden Funktionen zur Tabellenstil- und Strukturanpassung an.

Tabellenbearbeitung: Zeilen-/Spaltenoperationen und Stileinstellungen

Zeilen- & Spaltenoperationen

Der Abschnitt „Zeilen & Spalten“ des Tabellen-Editor-Panels bietet:

Zellen verbinden / teilen

Nach Auswahl mehrerer benachbarter Zellen verwenden Sie „Zellen verbinden“, um sie zu einer zu kombinieren. Für verbundene Zellen verwenden Sie „Zelle teilen“, um sie wieder in die ursprünglichen mehreren Zellen aufzuteilen.

Zellenausrichtung

Legen Sie die Ausrichtung des Zelleninhalts in zwei Dimensionen fest:

Rahmenstil

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

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

Zellenhintergrund

Legen Sie die Zellenhintergrundfarbe mit dem Farbwähler fest – ideal zum Hervorheben von Kopfzeilen oder wichtigen Datenzeilen.

4.11 Zoom-Steuerung & Ansichtsfenster

Der Zoom-Controller am unteren Rand der Leinwand bietet Zoom- und Ansichtsfenstergrößenanpassung, um Ihnen zu helfen, Ihre Arbeit auf verschiedenen Gerätegrößen zu überprüfen.

Zoom-Steuerung: Leinwand-Zoom und Ansichtsfenstergröße anpassen

Vergrößern / Verkleinern / Zurücksetzen

Verwenden Sie die „+“- und „−“-Schaltflächen, um die Leinwandansicht zu vergrößern oder zu verkleinern, oder halten Sie Strg/Cmd + Mausrad gedrückt, um schnell zu zoomen. Klicken Sie auf die Prozentzahl, um auf den Standardzoom zurückzusetzen. Halten Sie Leertaste + Ziehen gedrückt, um die Leinwand zu schwenken.

Ansichtsfenstergrößen-Voreinstellungen

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

Vorschau-Patches

Für HTML-Seiten mit speziellen Strukturen stehen drei Vorschau-Patches zur Optimierung der Anzeige zur Verfügung. Das Aktivieren oder Deaktivieren von Patches speichert automatisch und aktualisiert die Vorschau:

Tipp: Wenn Patches keinen spürbaren Effekt zeigen, versuchen Sie zuerst „Ursprüngliches HTML wiederherstellen“ und aktivieren Sie dann den Patch erneut.

4.12 HTML-Editor

Der HTML-Editor ermöglicht es Ihnen, den vollständigen HTML-Quellcode Ihrer Arbeit direkt anzuzeigen und zu bearbeiten – ideal für fortgeschrittene Benutzer, die Feinabstimmungen oder benutzerdefinierte Code-Ergänzungen benötigen. Diese Funktion ist nur im Pro verfügbar.

HTML-Editor: Quellcode direkt bearbeiten (Pro)

Vollständiges HTML anzeigen / bearbeiten

Wenn Sie den HTML-Editor öffnen, wird der vollständige HTML-Quellcode (einschließlich <!DOCTYPE html>) angezeigt. Sie können den Code direkt bearbeiten; das Speichern wendet Ihre Änderungen an.

Suchen & Ersetzen

Verwenden Sie Strg+F, um die Suche zu öffnen und Schlüsselwörter einzugeben, um Code schnell zu finden. Verwenden Sie Strg+H, um Ersetzen für Batch-Textersetzung zu öffnen. Die Symbolleiste zeigt die Trefferanzahl (z. B. „3 / 15“) mit Optionen für einzeln oder alle ersetzen.

Gehe zu Zeile

Verwenden Sie Strg+G oder die Sprungfunktion in der Symbolleiste, um eine Zeilennummer einzugeben und schnell zu dieser Zeile zu navigieren – nützlich für große HTML-Dateien.

Groß-/Kleinschreibung beachten

Aktivieren Sie die Option „Groß-/Kleinschreibung beachten“ während der Suche, um inhaltssensitiven Inhalt präzise abzugleichen.

Zeilenumbruch

Wenn der Zeilenumbruch aktiviert ist, werden lange Codezeilen automatisch umgebrochen, um sie ohne horizontales Scrollen anzuzeigen.

Kopieren / Speichern

Klicken Sie auf „HTML kopieren“, um den vollständigen Quellcode in die Zwischenablage zu kopieren. Klicken Sie nach der Bearbeitung auf Speichern, um Änderungen anzuwenden. Wenn der Inhalt leer ist oder Syntaxfehler enthält, werden entsprechende Meldungen angezeigt.

Hinweis: Wenn der HTML-Inhalt die Speicherlimits überschreitet, wird beim Speichern „Nicht genügend Speicherplatz, kann diese Bearbeitung nicht speichern“ angezeigt. Löschen Sie unnötigen Inhalt oder aktualisieren Sie Ihren Plan, um die Kapazität zu erhöhen.

4.13 Untere Symbolleiste

Die untere Symbolleiste bietet die Kernaktionsschaltflächen des Editors, einschließlich Vorschau, Rückgängig/Wiederholen, Wiederherstellen und Speicherfunktionen.

Untere Symbolleiste: Vorschau, Speichern und Wiederherstellen

Vorschau (Öffnet in neuem Fenster)

Klicken Sie auf die Vorschau-Schaltfläche, um eine vollständige Vorschau Ihrer Arbeit in einem neuen Fenster zu öffnen, die das tatsächliche Anzeigeergebnis zeigt. Die Vorschauseite zeigt einen temporären Vorschauhinweis, der Benutzer daran erinnert, dass dies eine Vorschau in der Bearbeitungsphase mit einem nicht wiederverwendbaren Link ist.

Rückgängig / Wiederholen

Rückgängig macht die letzte Operation rückgängig; Wiederholen stellt eine rückgängig gemachte Operation wieder her. Unterstützt mehrere Rückgängig-/Wiederholen-Schritte. Auch verfügbar über Strg+Z (Rückgängig) und Strg+Y (Wiederholen).

Vorschau aktualisieren

Klicken auf Aktualisieren lädt den Vorschaubereich neu. Das System speichert zuerst den aktuellen Inhalt und aktualisiert dann die Leinwand, um den neuesten Zustand anzuzeigen. Nützlich nach umfangreichen Bearbeitungen, um die Anzeige zu synchronisieren.

Letzten gespeicherten Zustand wiederherstellen

Stellt die Arbeit auf den letzten manuell gespeicherten Zustand wieder her. Alle ungespeicherten Bearbeitungen gehen verloren – mit Vorsicht verwenden. Das System fordert vor der Ausführung zur Bestätigung auf.

Ursprüngliches HTML wiederherstellen

Stellt das HTML der Arbeit auf den ursprünglichen Zustand zurück, als die Arbeit erstmals erstellt wurde. Der gesamte Bearbeitungsverlauf wird gelöscht. Diese Aktion ist unwiderruflich – stellen Sie sicher, dass Sie wichtige Inhalte gesichert haben.

Speichern

Speichert manuell alle aktuellen Änderungen. Das System unterstützt auch das automatische Speichern, aber das manuelle Speichern nach wichtigen Bearbeitungen wird empfohlen, um die Datensicherheit zu gewährleisten. „Erfolgreich gespeichert“ erscheint nach Abschluss.

4.14 Obere Symbolleiste

Die obere Symbolleiste zeigt Arbeitsinformationen und Schnellaktionsschaltflächen an und bietet schnellen Zugriff auf Teil- und Download-Funktionen.

Obere Symbolleiste: Titel, Teilen und Download

Arbeitstitel (Doppelklick zum Bearbeiten)

Oben wird der aktuelle Arbeitstitel angezeigt; doppelklicken Sie auf den Titelbereich, um in den Bearbeitungsmodus zu wechseln und den Namen zu ändern. Der Titel darf nicht leer sein; „Titel erfolgreich aktualisiert“ erscheint bei Erfolg. Unbenannte Arbeiten werden als „Unbenanntes Projekt“ angezeigt.

Teilen-Schaltfläche

Klicken Sie auf die Teilen-Schaltfläche, um das Teilen der Arbeit zu aktivieren und einen zugänglichen Link zu generieren. Siehe 4.16 Teilen-Funktion für Details. Diese Funktion ist nur im Pro verfügbar.

Download-Schaltflächen

Die rechte Seite bietet Schaltflächen für „Als Bild herunterladen“ und „Als HTML herunterladen“. Siehe 4.15 Arbeit herunterladen für Details.

4.15 Arbeit herunterladen

HtmlDrag bietet flexible Exportoptionen, mit denen Sie Ihre Arbeit als Bild oder Standard-HTML-Datei zum Teilen, Archivieren oder zur Weiterentwicklung herunterladen können.

Klicken Sie in der oberen Leiste auf die Schaltfläche „Als Bild herunterladen“, um ein hochwertiges PNG-Bild des gesamten Leinwandinhalts zu generieren und herunterzuladen. Dies ist perfekt für Design-Präsentationen, Social-Media-Sharing oder Vorschauen.

Als HTML herunterladen

Pro-Benutzer können Arbeiten als Standard-HTML-Quelldateien exportieren. Das Klicken auf die Schaltfläche „Als HTML herunterladen“ bietet zwei Optionen:

1. Aktuelles HTML herunterladen: Beinhaltet alle Modifikationen und Anpassungen, die Sie im Editor vorgenommen haben – was Sie sehen, ist was Sie bekommen.
2. Ursprüngliches HTML herunterladen: Exportiert den ursprünglichen Code von der ersten Erstellung der Arbeit, ohne nachfolgende Bearbeitungen.

Download-Optionen: Wählen Sie zwischen aktueller bearbeiteter Version oder Originalversion

4.16 Teilen-Funktion

Die Teilen-Funktion ermöglicht es Ihnen, einen öffentlich zugänglichen Link für Ihre Arbeit zu generieren, was das Teilen von Kreationen erleichtert. Die Freigabeseite bietet auch Zugriffsstatistiken. Diese Funktion ist nur im Pro verfügbar.

Teilen-Einstellungen: Link und Status verwalten

Einstellungen & Verwaltung

1. Teilen aktivieren: Klicken Sie auf die Teilen-Schaltfläche, um einen einzigartigen Freigabelink zu generieren. Beim ersten Aktivieren erscheint „Teilen aktiviert, Link in die Zwischenablage kopiert“.
2. Gültigkeit: Freigabelinks sind standardmäßig 7 Tage gültig. Sie können die genaue Ablaufzeit im Teilen-Dialog einsehen.
3. Zeit aktualisieren: Wenn der Link bald abläuft oder Sie ihn verlängern möchten, klicken Sie auf „Link aktualisieren“, um die Gültigkeitsdauer zurückzusetzen.
4. Teilen beenden: Klicken Sie auf „Teilen beenden“, um den aktuellen Link sofort ungültig zu machen und weiteren Zugriff zu verhindern.
5. Link kopieren: Klicken Sie auf die Kopieren-Schaltfläche, um den Freigabelink in Ihre Zwischenablage zu kopieren.

Teilungsseite & Statistiken

Besucher, die den Freigabelink öffnen, sehen eine eigenständige Präsentationsseite. Die rechte Seitenleiste zeigt Arbeitsinformationen an, einschließlich:

1. Titel & Autor: Zeigt Ihren Spitznamen und den Arbeitstitel an.
2. Statistiken: Sehen Sie die Ansichten und Likes, um die Popularität zu verfolgen.
3. Ablauf: Zeigt an, wann der Freigabelink abläuft.

Teilungsseite: Besucheransicht und Statistiken

Hinweis: Wenn eine Arbeit wegen Richtlinienverstößen gemeldet und verifiziert wurde, kann das System das Teilen für diese Arbeit deaktivieren, mit der Meldung „Diese Arbeit wurde gemeldet und verifiziert, das Teilen wurde vom System deaktiviert.“

5. Andere Funktionen

Zusätzlich zu den Kernbearbeitungsfunktionen bietet HtmlDrag auch Nachrichten- und Feedback-Funktionen, um Sie auf dem Laufenden zu halten und mit uns zu kommunizieren.

5.1 Nachrichten

Das Nachrichten-Modul empfängt wichtige Systembenachrichtigungen, einschließlich Kontostatus, Zahlungserinnerungen, Warnungen zum Ablauf der Mitgliedschaft und Funktionsupdates.

Nachrichten: Systembenachrichtigungen und Warnungen empfangen

Systemnachrichtenliste

Die Nachrichtenliste ist chronologisch sortiert und zeigt Titel, Zusammenfassung, Erstellungszeit und Ablaufzeit an. Klicken Sie auf eine Nachricht, um Details anzuzeigen oder Aktionen durchzuführen (z. B. „Zahlung fortsetzen“, „Jetzt verlängern“).

Ungelesen-Filter

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

Alle als gelesen markieren

Klicken Sie auf die Schaltfläche „Alle als gelesen markieren“, um alle Nachrichten in der aktuellen Liste sofort als gelesen zu markieren und rote Punktindikatoren zu löschen.

Nachrichtendetails

Klicken Sie auf eine Nachrichtenkarte, um den vollständigen Benachrichtigungsinhalt anzuzeigen. Bei Bestell- oder Mitgliedschaftsnachrichten enthalten die Details oft Schnellaktionsschaltflächen zu Ihrer Bequemlichkeit.

5.2 Feedback

Wenn Sie auf Probleme stoßen oder Vorschläge haben, reichen Sie diese über das Feedback-Modul ein. Sie können Bilder hochladen, um Ihr Problem besser zu beschreiben.

Feedback: Probleme oder Vorschläge einreichen

Feedback-Liste & Status

Die Liste zeigt Ihren Einreichungsverlauf und den aktuellen Status:

1. In Bearbeitung: Feedback eingereicht, wartet auf Admin-Überprüfung.
2. Beantwortet: Admin hat geantwortet; klicken zum Anzeigen.
3. Geschlossen: Feedback archiviert oder gelöst; keine weiteren Antworten erlaubt.

Neues Feedback einreichen

Klicken Sie auf „Neues Feedback“, geben Sie Ihren Inhalt ein (erforderlich, mind. 10 Zeichen). Sie können „Bilder hochladen“ (max. 2MB pro Bild), um Screenshots bereitzustellen. Klicken Sie auf „Feedback absenden“, wenn Sie fertig sind.

Feedback-Details & Gespräch

Klicken Sie auf ein Listenelement, um den vollständigen Gesprächsverlauf anzuzeigen, einschließlich Ihrer Nachrichten und Admin-Antworten. Oben werden Feedback-ID und Anhänge angezeigt.

Antwort fortsetzen

Für Feedback „In Bearbeitung“ oder „Beantwortet“ verwenden Sie das Eingabefeld unten, um weitere Informationen bereitzustellen oder dem Admin zu antworten, bis das Problem gelöst ist.

6. Systemhinweise

Während der Nutzung können Sie auf Systemwarnungen oder Limits stoßen. Hier sind Erklärungen und Vorschläge für häufige Systemhinweise.

6.1 HTML-Erkennungswarnungen

Um Importqualität und Editorstabilität zu gewährleisten, scannt das System automatisch URLs und Dateien und warnt Sie vor potenziellen Problemen.

Erkennung lokaler Ressourcen

Wenn eine Seite lokale Pfade enthält (z. B. file:// oder C:/), werden Ressourcen nicht geladen. Vorschlag: Stellen Sie sicher, dass alle Ressourcen öffentliche HTTP/HTTPS-Links verwenden.

Bild-Hotlink-Schutz

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

Dynamische Rendering-Seiten (SPA)

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

Externe Schriftarten / Icon-Bibliotheken

Schriftarten oder Icons mit fehlenden CORS-Headern werden möglicherweise falsch angezeigt. Vorschlag: Ersetzen Sie sie im Editor durch Systemschriftarten oder Bibliotheks-Icons.

Eingebetteter Inhalt (iframe)

Aus Sicherheitsgründen können einige iframe-Inhalte blockiert oder nicht interaktiv sein. Das System bewahrt Platzhalter wo möglich.

6.2 Speicher & Limits

HtmlDrag wendet Ressourcenquoten basierend auf Ihrem Plan an. Sie sehen möglicherweise Warnungen wie „Speicherlimit erreicht“ oder „Arbeitslimit erreicht“.

Speicherlimit erreicht

Sie können keine Bearbeitungen speichern oder Dateien hochladen, wenn kein Platz mehr vorhanden ist. Lösung:

1. Löschen Sie alte Elemente im „Portfolio“, um Platz freizugeben.
2. Klicken Sie im Dialog auf „Jetzt upgraden“, um mit einem Pro mehr Kapazität zu erhalten.

Limit für die Anzahl der Arbeiten

Benutzer des kostenlosen Plans haben ein Limit für die Anzahl der gespeicherten Arbeiten. Löschen Sie alte Arbeiten oder führen Sie ein Upgrade durch, um dieses Limit zu erhöhen.

Bild-Upload-Limits

Das System prüft Einzeldatei-Größe und Batch-Limits. Wenn Sie „Dateigröße überschreitet das Limit“ oder „Batch-Größe überschritten“ sehen, komprimieren Sie Bilder oder laden Sie sie in kleineren Batches hoch. Pro-Benutzer genießen höhere Limits.

6.3 Sicherheitsscan

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

Risikostufe

Basierend auf Bedrohungen wie XSS, bösartigen Skripten oder gefährlichen Tags werden Risiken klassifiziert als:

1. Niedriges Risiko: Kleinere Warnungen; in der Regel sicher fortzufahren.
2. Mittleres Risiko: Potenzielle Probleme; mit Vorsicht fortfahren.
3. Hohes Risiko: Schwere Risiken; nur fortfahren, wenn die Quelle vertrauenswürdig ist.
4. Kritisches Risiko: Enthält Malware oder Phishing-Inhalte; sofort blockiert.

Abgesicherter Modus

Für Dateien mit gewissem Risiko bietet das System „Sicherheitsmaßnahmen“ wie Auto-Bereinigung. Sie können wählen, „Im abgesicherten Modus fortfahren“, wobei das System gefährlichen Code entfernt, während Layout und Bearbeitbarkeit erhalten bleiben.

Starten Sie mit HtmlDrag

HtmlDrag bietet einen großzügigen kostenlosen Plan. Neue Benutzer erhalten bei der Registrierung Bonus-Credits

um den AI-Generator und URL-Import auszuprobieren. Die visuelle Bearbeitung ist völlig kostenlos und unbegrenzt.

Jetzt erstellen

Das HtmlDrag-Benutzerhandbuch deckt Kontoregistrierung und Anmeldung, Profilverwaltung, AI-Generator, URL-Import, HTML-Upload, Code-Einfügen, Mitgliedschaft und vollständige visuelle Editor-Operationen ab, einschließlich Elementerkennung, Ziehen und Ändern der Größe, Textbearbeitung, Bildaustausch, Stilanpassungen, Ebenenverwaltung, Tabellenbearbeitung, HTML-Quellcode-Bearbeitung und Teilen/Exportieren. Perfekt für Indie-Entwickler, Marketer und Designer für einen schnellen Einstieg.