HTML to Elementor
Zurück zu den Tutorials

Kopieren und Einfügen vs. JSON-Import: zwei Wege, HTML in Elementor zu bringen

Der Konverter bietet Ihnen zwei Exportwege. Beide erzeugen exakt dieselben Komponenten – der Unterschied liegt allein im Arbeitsablauf, in der Übertragbarkeit und darin, was Sie anschließend mit dem Ergebnis vorhaben.

Ein konvertierter Elementbaum, der zu zwei Exportwegen führt: Kopieren der Elementor-Einfügedaten in die Zwischenablage oder Herunterladen einer portablen JSON-Vorlagendatei.
Identische Komponenten in beiden Fällen. Die Zwischenablage ist am schnellsten bei einer bereits geöffneten Seite; die JSON-Datei ist diejenige, die Sie wiederverwenden, teilen und in der Versionskontrolle behalten können.

Option A – Elementor-Daten einfügen

Klicken Sie auf Elementor-Daten kopieren, öffnen Sie die Zielseite in Elementor, klicken Sie mit der rechten Maustaste auf eine leere Stelle der Arbeitsfläche und wählen Sie „Von anderer Website einfügen“. Die Komponenten landen direkt an der angeklickten Stelle in Ihrem Layout.

Im Hintergrund legt dieser Schritt eine JSON-Nutzlast in Ihre Zwischenablage, und zwar in dem Format, das Elementor auch für sein eigenes Kopieren und Einfügen verwendet. Deshalb brauchen Sie die Variante „von anderer Website“: Das normale Einfügen erwartet Inhalte, die innerhalb derselben Installation kopiert wurden, während diese Variante auch Daten annimmt, die von anderswo stammen.

  • Ideal für: schnelles Einfügen an Ort und Stelle – etwa einen konvertierten Abschnitt in eine Seite, die Sie gerade bearbeiten.
  • Voraussetzung: der geöffnete Elementor-Editor auf der Zielwebsite und Zugriff auf die Zwischenablage in Ihrem Browser.
  • Achtung bei: Berechtigungen für die Zwischenablage. Manche Browser und Datenschutz-Erweiterungen blockieren programmgesteuerte Schreibzugriffe auf die Zwischenablage; schlägt das Kopieren stillschweigend fehl, nehmen Sie stattdessen den JSON-Weg.

Option B – JSON-Vorlage herunterladen

Klicken Sie auf .json-Vorlage herunterladen, öffnen Sie dann in Elementor Vorlagen → Gespeicherte Vorlagen und wählen Sie Vorlagen importieren. Das Ergebnis steht als Vorlage bereit, die Sie auf jeder Seite einfügen können – auf jeder Website, auf der Sie die Datei importieren.

  • Ideal für: komplette Seiten, die Wiederverwendung auf mehreren Websites, die Übergabe an Kollegen oder das Aufbewahren von Versionen in Ihrem eigenen Dateispeicher.
  • Voraussetzung: Zugriff auf die Vorlagenbibliothek der Zielwebsite.
  • Bonus: Die Datei ist reines JSON. Sie können sie in einer Versionsverwaltung ablegen, zwei Exporte per Diff vergleichen oder ein Design so archivieren, wie es an einem bestimmten Tag aussah.

Welchen Weg sollten Sie wählen?

Eine einfache Regel: Einfügen für einmalige Einsätze, Herunterladen für alles, was Sie mehr als einmal verwenden.

Sie brauchen eine einzelne Karte, einen Hero-Bereich oder eine Preiszeile für die Seite, die Sie gerade bauen? Einfügen – zwei Klicks, und Sie sind fertig. Sie migrieren eine komplette Landingpage oder beginnen, eine Bibliothek wiederverwendbarer Blöcke für künftige Projekte aufzubauen? Laden Sie das JSON herunter, benennen Sie die Datei sinnvoll und legen Sie sie dort ab, wo Sie sie wiederfinden.

Wenn Sie mit Kunden oder im Team arbeiten, kommt ein dritter Punkt hinzu: Eine JSON-Datei können Sie verschicken. Den Inhalt einer Zwischenablage nicht.

Legen Sie zuerst den Exportumfang fest

Ganz gleich, welchen Weg Sie nehmen: Legen Sie den Umfang vor dem Export fest. In der Strukturübersicht macht das Zielsymbol eine Zeile zur Kopierwurzel, sodass nur dieser Teilbaum exportiert wird – so vermeiden Sie, dass die äußeren Wrapper der Seite, Header und Footer mit dem eigentlich gewünschten Abschnitt mitkommen. Mit dem Kreuzsymbol schließen Sie einzelne Zeilen aus.

Beim Einfügen ist das besonders wichtig, denn eingefügte Daten landen dort, wo Sie mit der rechten Maustaste geklickt haben, und eine zu breite Auswahl lässt sich hinterher nur mühsam wieder auseinandernehmen.

Wenn das Einfügen nicht funktioniert

Wenn nach dem Einfügen nichts passiert, gibt es nur wenige Ursachen – grob nach Wahrscheinlichkeit geordnet:

  • Falscher Menüpunkt. Das normale Einfügen erwartet Inhalte, die innerhalb derselben Installation kopiert wurden. Konvertierte Daten brauchen Von anderer Website einfügen – im selben Rechtsklick-Menü, einen Eintrag weiter unten. Das ist häufiger die Ursache als alles andere zusammen.
  • Der Schreibzugriff auf die Zwischenablage wurde blockiert. Manche Browser und Datenschutz-Erweiterungen verweigern programmgesteuerten Zugriff auf die Zwischenablage. Der Konverter sagt Ihnen, wenn das passiert, statt stillschweigend zu scheitern – und der JSON-Download kommt ganz ohne Zwischenablage aus, ist also die verlässliche Ausweichlösung.
  • Die Zwischenablage wurde zwischendurch überschrieben. Wenn Sie zwischen dem Klick auf „Kopieren“ und dem Einfügen etwas anderes kopieren – eine URL, einen Screenshot –, werden die Daten ersetzt. Kopieren Sie erneut und fügen Sie sofort ein.
  • In der Zwischenablage liegt Quellcode, keine Seite. Das trifft vor allem Nutzer von KI-App-Buildern wie Lovable, v0 oder Bolt: Diese Tools erzeugen React- und JSX-Projekte, und der Quellcode von JSX-Komponenten ist kein HTML – fügt man ihn hier ein, entsteht nichts Brauchbares. Der Konverter liest die gerenderte Seite. Öffnen Sie die Vorschau des Tools im Browser und nehmen Sie das HTML der Seite von dort – dann lässt es sich wie jede andere Seite konvertieren.

Nach dem Import

Beide Wege brauchen denselben kurzen Feinschliff:

  • Buttons neu verlinken. Wenn Sie einen inneren Block exportiert haben, ist ein umschließender Link womöglich zurückgeblieben, sodass ein Button ohne Link ankommen kann.
  • Hover-Zustände festlegen für Buttons und Links – sie lassen sich aus einer statischen Seite nicht auslesen und sind das auffälligste Zeichen eines unfertigen Imports.
  • Nav-Menü- und Formular-Widgets mit echten WordPress-Quellen verbinden. Ein Menü braucht eines Ihrer Menüs; bei einem Formular müssen die Aktionen auf Ihrer Website eingerichtet werden. Beides lässt sich nicht mitübertragen.
  • Platzhalterbilder füllen – die Beschriftung auf jedem Platzhalter zeigt, welches Bild wohin gehört.
  • Alle drei Geräteansichten prüfen, bevor Sie die Seite als fertig betrachten.

Ein Hinweis zu Elementor-Versionen

Eingefügte und importierte Inhalte werden von der Elementor-Version auf der Zielwebsite interpretiert. Wenn Sie von einer Website exportieren und in eine andere mit älterer Version importieren, werden manche neueren Container- oder Grid-Einstellungen womöglich nicht verstanden. Wer Elementor auf der Zielwebsite aktuell hält, vermeidet eine ganze Klasse verwirrender Probleme nach dem Motto „Beim Export sah es noch richtig aus“.

Geschrieben von Leo

Neun Jahre WordPress und Elementor; 189 migrierte Websites. Jede Regel in diesem Konverter stammt aus einem echten Projekt. Über dieses Tool