Eine bestehende HTML-Seite in Elementor zu überführen, bedeutet meist eine von zwei schlechten Optionen: Sie fügen sie in ein einzelnes HTML-Widget ein, das Sie kaum bearbeiten können, oder Sie bauen jeden Abschnitt manuell nach. Diese Anleitung zeigt den dritten Weg – das Konvertieren von HTML in native, bearbeitbare Elementor-Komponenten.
1. Fügen Sie Ihr HTML ein oder ziehen Sie es hierher
Öffnen Sie den Konverter und ziehen Sie eine .html-Datei auf die Ablagefläche oder fügen Sie Ihren Quellcode in das Code-Feld ein. Inline-CSS und Base64-Bilder werden unterstützt. Alles läuft in Ihrem Browser – nichts wird hochgeladen.
2. Wählen Sie den Modus „Native Komponenten“
Wählen Sie im Optionen-Panel den Modus „Native Komponenten“. Dieser ordnet Überschriften den Überschriften-Widgets zu, Absätze dem Text-Editor, als Schaltflächen gestaltete Links den Button-Widgets und umschließende <div>-Elemente den Containern – wobei Abstände, Farben, Schriftarten und responsives Verhalten automatisch berechnet werden.
3. Prüfen Sie die Strukturübersicht
Öffnen Sie vor dem Export den Tab Strukturübersicht. Fahren Sie mit der Maus über eine beliebige Zeile, um sie in der Vorschau hervorzuheben, achten Sie auf die Vertrauenspunkte (grün = direkt konvertiert, rot = als HTML beibehalten) und nutzen Sie das Zielsymbol, um nur den gewünschten Block zu kopieren. Hier erkennen Sie alles, was nicht sauber zugeordnet wurde.
4. Kopieren oder herunterladen
Nutzen Sie Elementor-Daten kopieren und im Editor Rechtsklick → „Von anderer Website einfügen“, oder laden Sie eine JSON-Vorlage herunter und importieren Sie sie über die Elementor-Vorlagenbibliothek. HTML und Elementor rendern nie vollkommen identisch – geben Sie dem Ergebnis im Editor daher einen kurzen Feinschliff.
Tipps für sauberere Ergebnisse
- Verwenden Sie semantische Tags (
<h2>,<p>,<button>), damit der Konverter sie nativ zuordnen kann. - Vermeiden Sie tief verschachtelte Wrapper-
<div>s ohne Styling – sie erzeugen zusätzliche Container. - Deaktivieren Sie „Inline-Styles beibehalten“, wenn Ihr HTML keine
<style>-Blöcke enthält.