Sie haben eine Seite, die in reinem HTML, CSS und JavaScript erstellt wurde, und Sie möchten sie weiterhin in Elementor bearbeiten – nicht von Grund auf neu aufbauen und nicht in einem Code-Widget eingesperrt lassen. Genau dafür ist ein Konverter da, aber die drei Teile (HTML, CSS, JS) verhalten sich jeweils unterschiedlich, daher ist es hilfreich, sie nacheinander zu betrachten.
Das Ziel: bearbeitbar, nicht eingebettet
Es gibt zwei Wege, vorhandenes HTML in Elementor zu bekommen, die nicht wirklich zählen. Das Einfügen in ein HTML-Widget bettet es als einen Block ein, den Sie nicht visuell bearbeiten können. Ein manueller Neuaufbau funktioniert, verwirft aber das Markup, das Sie bereits haben. Was Sie eigentlich möchten, ist, dass Ihre Überschriften zu Heading-Widgets werden, Ihre Texte zu Text-Editor-Widgets, Ihre Buttons zu Button-Widgets und Ihr Layout zu echten Containern – damit Sie anschließend jeden Teil im Elementor-Panel bearbeiten können.
Das HTML wird zu nativen Widgets
Fügen Sie Ihr HTML in den Konverter ein und wählen Sie den Native-Komponenten-Modus. Jedes Element wird dem passenden Elementor-Widget zugeordnet: Überschriften zu Heading, Absätze und Listen zu Text Editor, Bilder zu Image, als Buttons gestaltete Links zu Button und umschließende Elemente zu Containern. Nachdem Sie das Ergebnis in Elementor eingefügt haben, steht kein Code-Widget mehr im Weg – es ist eine ganz normale Seite.
Ihr CSS wird gelesen, nicht verworfen
Das ist der Teil, über den sich die Leute Sorgen machen, und es ist der Teil, der am besten funktioniert. Der Konverter verwirft Ihr Styling nicht – er liest die Styles, die Ihr Browser tatsächlich berechnet hat, und überträgt sie auf die passenden Widget-Steuerelemente. Abstände, Ränder, Farben, Rahmen, Radius, Schatten, Hintergrund, Schriftfamilie, Größe, Stärke, Zeilenhöhe und Buchstabenabstand werden alle in native Elementor-Felder übernommen, sodass sie bearbeitbar bleiben, statt in einem Stylesheet zu liegen.
Damit das funktioniert, muss das CSS beim Konvertieren vorhanden sein. Inline-Styles oder ein einzelner <style>-Block werden einwandfrei gelesen. Ein externes Stylesheet, das nicht in der eingefügten Datei enthalten ist, wird es nicht – die Seite würde ohne Styling gerendert, und ohne Styling wird konvertiert. Fügen Sie das CSS also als Inline-Styles ein oder fügen Sie das Stylesheet zuerst in einen <style>-Block ein. Es gibt außerdem einen visuellen Picker, der, wenn Sie einen einzelnen Block auswählen, das Stylesheet der Seite mitnimmt, sodass klassenbasiertes Styling weiterhin korrekt konvertiert wird.
Das JavaScript ist die ehrliche Ausnahme
JavaScript wird nicht konvertiert, und das ist beabsichtigt. Skripte werden aus Sicherheitsgründen entfernt – beliebiges JS über einen Einfügevorgang zu importieren, wäre gefährlich, und es würde im Editor ohnehin nicht zuverlässig ausgeführt. Alles, was Ihr JS erzeugt hat (ein Slider, Tabs, ein Akkordeon, ein Zähler, eine Scroll-Animation), kommt daher als statisches Markup an.
Der richtige Schritt ist nicht, das Skript wieder einzufügen, sondern diese eine Interaktion mit dem passenden Elementor-Widget neu zu erstellen. Elementor verfügt über native Widgets für Tabs, Akkordeon, Karussell, Zähler und Fortschritt sowie über eigene Motion Effects für Animationen. Sie sind wartbarer als ein importiertes Skript und bereits Teil des Pakets, das Ihre Website lädt. In der Praxis konvertieren Sie die gesamte Seite in Sekunden und verbringen dann ein paar Minuten damit, die wenigen interaktiven Teile nativ neu zu erstellen.
Eine realistische Schritt-für-Schritt-Anleitung
- Kombinieren Sie Ihr HTML und CSS in einer Datei – Markup plus einen einzelnen Style-Block. Wenn Bilder über lokale Pfade referenziert werden, laden Sie sie entweder in die Medienbibliothek hoch und verwenden diese URLs oder akzeptieren Platzhalter.
- Fügen Sie den Code in den Konverter ein, wählen Sie den Native-Komponenten-Modus und legen Sie fest, ob Symbole zur Elementor-Bibliothek passen und ob Farben und Schriftarten die Website- oder die Originalwerte verwenden.
- Überprüfen Sie die Strukturübersicht: Komponentenanzahl, Verschachtelungstiefe und welche Zeilen als HTML bestehen blieben.
- Kopieren Sie die Elementor-Daten und fügen Sie sie in Ihre Seite ein, oder laden Sie eine JSON-Vorlage herunter und importieren Sie sie.
- Erstellen Sie jede JS-gesteuerte Interaktion mit dem passenden nativen Widget neu, legen Sie die Hover-Zustände für Buttons fest und gehen Sie die drei Geräteansichten durch.
Was Sie am Ende erhalten
Eine normale Elementor-Seite. Ihre ursprüngliche HTML-Struktur ist als Widgets und Container intakt, Ihr CSS lebt in bearbeitbaren Steuerelementen, und das Einzige, was Sie manuell neu erstellt haben, ist das interaktive Verhalten, das ohnehin nie ins Markup gehörte. Von diesem Zeitpunkt an bearbeiten Sie und Ihr Kunde die Seite wie alles andere in Elementor – kein Code-Widget, kein separates Stylesheet, kein Build-Schritt.