Manchmal ist die Seite, die du aktualisieren musst, bereits online, aber die ursprüngliche HTML-Datei ist nicht verfügbar. Vielleicht prüfst du eine frühere Kampagnenseite, stellst eine statische Seite aus einem älteren Projekt wieder her oder bereitest neue Inhalte vor, während die verantwortliche Entwicklerin oder der verantwortliche Entwickler nicht erreichbar ist. Die sichtbare Seite ist noch brauchbar; nur für eine Überschrift, ein Bild oder einen Call-to-Action jeden Bereich neu zu bauen, ist jedoch unnötig.
Beginne in diesem Fall mit der URL, die du verwenden darfst. Ein URL-Import erfasst eine erreichbare Seite als bearbeitbare Arbeitskopie. So kannst du das reale Layout prüfen, gezielte visuelle Änderungen vornehmen, das Ergebnis ansehen und anschließend HTML übergeben oder exportieren. Die bereits unter dieser URL veröffentlichte Website wird dabei nicht geändert.
Dieser Leitfaden zeigt, wie du eine bestehende Webseite über eine URL bearbeitest, ohne den Code neu zu schreiben. Für die Demonstration wird die öffentliche Marketingseite von Firefox als Arbeitskopie in HtmlDrag importiert. Die Firefox-Seite dient nur als Quelle für den Ablauf; alle folgenden Änderungen bleiben im importierten Projekt und aktualisieren nicht die Originalseite.
Kann man eine Webseite bearbeiten, wenn man nur ihre URL hat?
Bei einer erreichbaren Seite: ja. Gib die vollständige öffentliche http- oder https-URL in einen visuellen HTML-Editor ein, lasse daraus ein bearbeitbares Projekt erstellen und arbeite anschließend mit der gerenderten Seite. Das ist besonders praktisch für die sichtbare Ebene – Überschriften, Beschreibungstexte, Bilder, Farben, Abstände oder CTA – ohne zuerst in einer Codebasis suchen zu müssen.
Wichtig ist die Unterscheidung zwischen einer Arbeitskopie und der Originalwebsite. Der URL-Import liefert eine Seite zum Prüfen und Verfeinern; er gibt keinen Zugriff auf den Produktionsserver, veröffentlicht Änderungen nicht automatisch und synchronisiert die Live-Seite nicht. Deployment, Formulare, Analytics und andere funktionale Aufgaben bleiben Teil deines normalen Release-Prozesses.
Wann ist URL-Import der richtige Einstieg?
Verwende URL-Import, wenn die Webadresse tatsächlich deine Ausgangsquelle ist. Wenn Hierarchie, Navigation, Bilder und Abschnitte bereits nützlich sind und nur der letzte visuelle Feinschliff fehlt, ist dieser Weg sinnvoller als eine leere Seite.
- URL Import passt, wenn du mit einer erreichbaren Webseite startest.
- HTML hochladen passt, wenn die lokale
.html- oder.htm-Datei vorhanden ist. - Code einfügen passt, wenn der Ausgangspunkt rohes HTML aus einem KI-Tool, von einem Teammitglied oder aus einem Projekt ist.
Wähle vor dem Import eine Seite, die du besitzt oder verwenden darfst, und beginne mit einer vollständigen öffentlichen URL. Bereiche hinter einem Login, Live-Dashboards mit persönlichen Daten und stark interaktive App-Oberflächen eignen sich schlecht für einen visuellen Feinschliff. Eine klare öffentliche Landingpage lässt sich deutlich leichter prüfen und validieren.
So importierst du eine Webseiten-URL in ein bearbeitbares HTML-Projekt
Der Ablauf ist einfach:
URL einfügen → erreichbare Seite erfassen → gesamtes Layout prüfen → gezielte visuelle Änderungen vornehmen → Vorschau → Arbeitskopie exportieren
1. Mit der URL starten, nicht mit einer neuen Vorlage
Öffne URL Import und füge die öffentliche Seitenadresse ein. In diesem Beispiel ist der Ausgangspunkt https://www.firefox.com/en-US/. Zu diesem Zeitpunkt wurde noch nichts verändert; die URL bestimmt lediglich, welche sichtbare Seite als Projekt erfasst wird.
2. Die Seite in eine Arbeitskopie umwandeln lassen
Starte den Import und warte, bis die Erfassung abgeschlossen ist. Die Erfassung erstellt aus der erreichbaren Seite das bearbeitbare Projekt. Sie verspricht nicht, jedes entfernte Skript, jeden Download oder jeden Live-Dienst zu reproduzieren, sondern bildet die Übergabe von einer öffentlichen Seite in einen visuellen HTML-Workflow.
3. Die importierte Seite vor dem Bearbeiten prüfen
Wenn die Seite auf der Arbeitsfläche geöffnet ist, betrachte sie zuerst als vollständige Komposition. Das importierte Firefox-Beispiel behält Kopfzeile, Hero, unterstützende Texte, CTA, Illustration und Feature-Karten. Diese erste Prüfung zeigt, was bereits funktioniert und wo eine lokale Änderung den größten Nutzen bringt.
Den letzten visuellen Schliff geben, statt die Seite neu zu bauen
Ein guter Feinschliff bedeutet nicht, alles zu ändern. Beginne mit der Botschaft, die Besucher zuerst sehen, bearbeite danach nur die unterstützenden Elemente und lasse funktionierende Bereiche unangetastet. So bleibt die importierte Seite verständlich und jede Entscheidung lässt sich leichter prüfen.
Mit Überschrift und visueller Hierarchie beginnen
Die Hero-Überschrift ist meist der beste erste Prüfpunkt, weil sie das zentrale Versprechen trägt. Wähle sie direkt auf der Arbeitsfläche aus, beurteile sie zusammen mit Text und Bild und teste mit den Textwerkzeugen eine gezielte Darstellung. Im Beispiel ist die Überschrift ausgewählt und eine Farbe wird direkt im Seitenkontext geprüft.
Farbe und Größe funktionieren nur, wenn die Lesereihenfolge erhalten bleibt. Die nächste Ansicht zeigt, warum der Kontext wichtig ist: Die Überschrift ist größer und teilweise rot, während das letzte Wort weiß bleibt. Eine starke Änderung kann Aufmerksamkeit erhöhen, muss aber weiterhin Kontrast, Abstand und das Gleichgewicht des gesamten Hero-Bereichs berücksichtigen.
Unterstützende Karten Element für Element prüfen
Nachdem der Hero klar ist, prüfe die Inhalte, die ihn unterstützen. Wähle nur die Kartenüberschrift, den Absatz oder das Icon aus, das Aufmerksamkeit braucht, statt die gesamte Gruppe pauschal zu verändern. Im importierten Projekt ist die Karte Privacy as a standard separat ausgewählt, während die übrigen Karten als Kontext sichtbar bleiben.
Ein veraltetes Bild ersetzen, ohne den Abschnitt neu zu bauen
Der visuelle Feinschliff betrifft nicht nur Text. Wenn ein Bild als unterstütztes Seitenelement vorliegt, wähle es aus und öffne das Kontextmenü, um die Bildersetzung aufzurufen. Die Struktur und der angrenzende Text des Abschnitts bleiben dabei erhalten, während du ein passenderes Asset testen kannst.
Hier wird die ursprüngliche Illustration in der Arbeitskopie durch ein Bergbild ersetzt. Entscheidend ist nicht, dass jedes Projekt ein Bergbild braucht, sondern dass du eine konkrete Ersetzung im echten Layout beurteilen kannst: Zuschnitt, visuelles Gewicht, Begleittext und die Beziehung zum Abschnitt sollten vor der Auslieferung geprüft werden.
Abschnittshierarchie und CTA-Darstellung prüfen
Die erste Hero-Anpassung sollte nicht die einzige Entscheidung sein. Eine weiter unten stehende Überschrift befindet sich an einer anderen Stelle der Lesereise und braucht möglicherweise eine andere Gewichtung. Wähle sie im Kontext aus und prüfe Schriftgröße, Farbe, Ausrichtung und Abstand, bevor du die Änderung übernimmst.
Auch der wichtigste CTA verdient eine gezielte Prüfung. Er sollte nach dem Verständnis der Seite leicht auffindbar bleiben, darf aber die Botschaft, zu der er führt, nicht überdecken. Der visuelle Editor hilft bei Text, Größe, Kontrast und Position; Ziel und Funktion von Download, Formular, Zahlung oder anderen Aktionen müssen anschließend in der endgültigen Umgebung getestet werden.
Die tatsächlich geprüfte Seite vor der Übergabe exportieren
Vor der Übergabe solltest du nicht nur das ausgewählte Element betrachten, sondern die Seite aus Sicht eines Besuchers prüfen: Überschrift, Erklärung, Feature-Bereiche, CTA und mobile Darstellung. Eine isoliert gute Änderung kann auf der vollständigen Seite einen ungünstigen Zeilenumbruch, zu wenig Kontrast oder einen losgelösten CTA erzeugen.
Wenn du das Ergebnis übergeben möchtest, wähle bewusst die gewünschte Version. Der Exportdialog dieses Workflows unterscheidet zwischen Edited HTML und Original HTML. So kannst du die aktuelle Arbeitsfläche oder den ursprünglichen Import gezielt auswählen.
Die vollständige Vorschau ist die letzte visuelle Kontrolle. In diesem Beispiel zeigt sie die angepasste Hero-Darstellung und das ersetzte Bild, während die übrige Seitenstruktur erhalten bleibt. Erst die Prüfung der gesamten Arbeitskopie zeigt, ob eine lokale Änderung noch zur ganzen Seite passt.
Was URL-Import nicht ersetzt
URL-Import eignet sich für den visuellen Feinschliff der sichtbaren HTML-Ebene, ersetzt aber nicht jede Produktionsaufgabe. Prüfe weiterhin in deinem normalen Workflow:
- Formularübermittlungen, Zahlungen, Logins und kontobezogene Inhalte;
- Analytics, Einwilligungswerkzeuge, Weiterleitungen, Downloads und Drittanbieter-Integrationen;
- skriptgesteuerte Interaktionen, Live-Daten, Cross-Origin-Einbettungen, Canvas-Inhalte und geschützte Ressourcen;
- Deployment, QA und Freigabe der Zielseite.
Wenn die Seite einen Login benötigt, die Erfassung blockiert oder zu dynamisch für eine zuverlässige Arbeitskopie ist, beginne stattdessen mit der tatsächlichen HTML-Datei oder dem Quellcode. Ziel ist nicht, jede Website durch denselben Eingang zu zwingen, sondern den schnellsten verlässlichen Startpunkt für die jeweilige Aufgabe zu wählen.
Häufige Fragen
Kann ich eine Live-Website durch Einfügen ihrer URL bearbeiten?
Du kannst eine erreichbare Seite als bearbeitbare Arbeitskopie erstellen. Änderungen im Projekt aktualisieren nicht die ursprüngliche Live-Website. Für die Veröffentlichung brauchst du deinen eigenen Deployment- oder Übergabeprozess.
Kann ich Webseitentext ändern, ohne den HTML-Quellcode zu öffnen?
Bei unterstütztem sichtbarem Text kannst du ihn auf der gerenderten Seite auswählen und direkt im Kontext bearbeiten. Prüfe danach die vollständige Seite, damit der neue Text weiterhin zu Layout, Bild und CTA passt.
Kann ich nach einem URL-Import ein Bild ersetzen?
Wenn das importierte Bild ein unterstütztes Element ist, wähle es aus und verwende die Bildersetzung. Prüfe vor dem Export Zuschnitt, Größe, Kontrast und die Beziehung zum angrenzenden Text.
Sieht jeder URL-Import exakt wie die Originalseite aus?
Nicht immer. Login-Schranken, Anti-Bot-Schutz, externe Fonts und Assets, Lazy Loading, dynamische Daten, Skripte, IFrames und anderes Cross-Origin-Verhalten können das Ergebnis beeinflussen. Beurteile das Projekt in der Vorschau und wechsle zu HTML-Datei oder Quellcode, wenn diese Quelle zuverlässiger ist.
Fazit
Wenn eine brauchbare Seite bereits online ist, kann die URL der praktischste Ausgangspunkt sein. Importiere die erreichbare Seite als Arbeitskopie, behalte funktionierende Strukturen, triff wenige bewusste visuelle Entscheidungen und prüfe das Ergebnis vor dem Export.
Mit HtmlDrag macht URL Import aus einer bestehenden Seite ein bearbeitbares HTML-Projekt für den letzten Feinschliff – für Text, Bilder, Hierarchie und CTA, ohne die Seite neu zu bauen oder jede Codezeile umzuschreiben.