HTML to Elementor
Über uns

Über uns

Dieses Tool wird von Leo entwickelt und gepflegt, einem Full-Stack-Entwickler, der neun Jahre lang mit WordPress und Elementor gearbeitet hat – und dabei 189 Websites in Elementor übertragen hat.

Warum es dieses Tool gibt

Jede dieser Migrationen lief gegen dieselbe Wand. Ein Design, ein Export aus einem anderen Builder oder eine alte statische Website kommt als ein Haufen HTML und CSS an. Für den Weg in Elementor bleiben zwei schlechte Optionen: das Ganze in ein einziges HTML-Widget einzufügen und die Bearbeitung für immer aufzugeben, oder es Komponente für Komponente neu aufzubauen und pro Seite einen Tag zu verlieren. Nach den ersten Dutzend Websites hört man auf, diesen Kompromiss zu akzeptieren, und fängt an, zu automatisieren. Dieses Tool ist diese Automatisierung – aufgeräumt und öffentlich gemacht.

Was mich 189 Migrationen gelehrt haben

Fast jede Regel im Konverter ist eine direkte Antwort auf etwas, das bei einem echten Projekt schiefgelaufen ist:

  • Das Stylesheet lügt; der berechnete Stil nicht. Kaskadenreihenfolge, Media Queries, vererbte Werte und Utility-Klassen führen dazu, dass die Regel, die du in einer CSS-Datei liest, selten der Wert ist, den der Browser tatsächlich darstellt. Der Konverter rendert zuerst dein HTML und liest berechnete Stile, weshalb er mit Tailwind-artigem Markup und Framework-CSS zurechtkommt, statt daran zu ersticken – solange das kompilierte CSS innerhalb der Seite liegt. Aus Sicherheitsgründen werden von externen URLs geladene Stylesheets entfernt; platziere dein CSS daher zuerst inline.
  • Verschachtelung explodiert, wenn du eins zu eins überträgst. Eine normale Seite ist voller Wrapper-Divs, die keine visuelle Bedeutung haben. Kopierst du sie unverändert, erhältst du einen Elementor-Baum mit zehn Container-Ebenen, den niemand bearbeiten kann. Wrapper ohne Styling-Wirkung werden zusammengefasst; Wrapper, die tatsächlich Padding, einen Hintergrund oder einen Schatten tragen, bleiben erhalten – genau deren Zusammenführen zerstört das Layout.
  • Inline-SVG kann nicht zu einem bearbeitbaren Elementor-Symbol werden. Das ist eine Einschränkung von Elementor, kein Konvertierungsfehler: Die Symbol-Auswahl akzeptiert nur Einträge aus der Icon-Bibliothek oder Dateien aus der Medienbibliothek, sonst nichts. Font-Awesome-Klassen lassen sich sauber auf bearbeitbare Symbole abbilden; handgeschriebenes SVG muss als rohes HTML bleiben. Dies zu wissen, bevor du das HTML generierst, erspart einen kompletten Neuaufbau.
  • Base64-Bilder sehen gut aus, bis du sie importierst. Eine Seite mit einem Dutzend eingebetteter Bilder wächst auf über ein halbes Megabyte an und scheitert dann beim Import in die Medienbibliothek. Stattdessen werden sie zu beschrifteten leeren Platzhaltern, damit du die echten Dateien später einsetzen und zuordnen kannst.
  • Responsive ist keine einzelne Einstellung. Layout-Unterschiede werden bei mehreren Breiten gemessen und in Elementors eigene Responsive-Felder geschrieben, statt darauf zu hoffen, dass ein einziges Desktop-Layout auf dem Handy noch brauchbar ist.
  • Manche Dinge lassen sich wirklich nicht konvertieren. Animationen, skriptgesteuerte Interaktionen, Pseudoelemente und alles, was von den Daten deiner Website abhängt – Menüs, Produktschleifen, Abfragen – können nicht aus statischem HTML abgeleitet werden. Das Tool sagt dir, wenn es auf so etwas stößt, statt es stillschweigend zu verwerfen.

Was es nicht tun wird

Es verspricht keine pixelgenaue Ausgabe. HTML und Elementor rendern nicht identisch, und jeder Konverter, der das behauptet, hat nicht genug Seiten konvertiert. Es wird deine WordPress-Website nicht anfassen: Das Tool erzeugt nur Daten, und der Import erfolgt in deinem eigenen Elementor durch dich. Und es wird dich nicht bitten, dich zu registrieren.

Es trägt auch kein Risiko mit hinüber. Skripte, gefährliche Links, externe Stylesheets und Formularübermittlungen werden entfernt, bevor etwas deinen Editor erreicht, und die Stile, die übernommen werden, sind auf den importierten Inhalt beschränkt, sodass sie nicht in den Rest deines Themes durchsickern können.

Deine Dateien verlassen niemals deinen Browser

Parsen, Konvertierung und Vorschau laufen alle lokal in deinem Browser. Dein HTML, deine Bilder und die erzeugten Elementor-Daten werden niemals an diese Website oder irgendwohin sonst gesendet. Das ist eine Designentscheidung, die von Anfang an getroffen wurde – kein Feature, das später aufgegeben wird.

Für wen es gedacht ist

  • Freelancer und kleine Teams, die Kundenwebsites mit Elementor erstellen.
  • Menschen, die HTML mit KI generieren und bearbeitbare Seiten statt eines toten Codeblocks möchten.
  • Alle, die eine Reihe statischer Seiten in WordPress und Elementor übertragen.

Kontakt aufnehmen

Fragen, Fehlerberichte und schwierige Konvertierungsbeispiele sind jederzeit willkommen unter [email protected]. Wenn etwas schlecht konvertiert, ist das Zusenden des HTML-Snippets mit Abstand der schnellste Weg zu einer Lösung – mehrere der oben genannten Regeln existieren, weil genau das jemand getan hat.