HTML zu Elementor-JSON: Vorlagen exportieren und importieren

Elementor-Vorlagen werden als JSON gespeichert. Eine HTML-Seite lässt sich daher in eine JSON-Vorlagendatei konvertieren, die Sie wie jede andere Elementor-Vorlage importieren – übertragbar, wiederverwendbar und unabhängig von der Zwischenablage. So funktioniert der JSON-Weg, und so entscheiden Sie, wann er der richtige ist.

Zwei Exportformate, dieselben Komponenten

Nach der Konvertierung können Sie auf zwei Arten exportieren. Elementor-Daten kopieren legt eine JSON-Nutzlast in die Zwischenablage, die Sie sofort in einen geöffneten Editor einfügen können. JSON-Vorlage herunterladen speichert dieselbe Struktur als .json-Datei. Die Komponenten sind identisch; der Unterschied: Eine Datei lässt sich weitergeben, der Inhalt der Zwischenablage nicht.

Wann die JSON-Datei die richtige Wahl ist

• Wiederverwendung auf mehreren Websites. Importieren Sie dieselbe Datei in jede WordPress-Installation mit Elementor.
• Versionsverwaltung. Die Datei ist reines JSON – Sie können sie in einem Repository ablegen, zwei Exporte per Diff vergleichen oder ein Design so archivieren, wie es an einem bestimmten Tag aussah.
• Teilen. Einem Kollegen oder Kunden können Sie eine Datei schicken – Ihre Zwischenablage nicht.
• Eine Bibliothek aufbauen. Ein Ordner mit sinnvoll benannten JSON-Vorlagen wird zu einer Komponentenbibliothek, aus der Sie künftige Seiten zusammensetzen.

So importieren Sie eine JSON-Vorlage in Elementor

1. Konvertieren Sie Ihr HTML und klicken Sie auf JSON-Vorlage herunterladen.
2. Öffnen Sie in WordPress Vorlagen → Gespeicherte Vorlagen.
3. Klicken Sie auf Vorlagen importieren und wählen Sie die .json-Datei aus.
4. Die Vorlage erscheint in Ihrer Bibliothek; über den Bibliotheks-Button in Elementor fügen Sie sie auf jeder beliebigen Seite ein.

Was in der JSON-Datei steckt

Die Datei beschreibt einen Elementor-Elementbaum: Container mit Layout, Hintergrund, Rahmen und Abständen sowie Widgets mit ihren Inhalts- und Stileinstellungen. Da es das native Elementor-Format ist, wird alles als bearbeitbare Widgets importiert – nicht als HTML-Block. Überschriften, Texte, Bilder, Buttons, Icon-Boxen, Bild-Boxen und Grids kommen direkt bearbeitbar an.

Ein praktischer Hinweis: Bildreferenzen im JSON sind URLs, keine eingebetteten Dateien. Hat Ihre Quelle echte Mediathek-URLs verwendet, werden sie beim Import aufgelöst; lokale Pfade und Base64-Bilder werden zu leeren Platzhaltern, die Sie anschließend füllen. Die Bilder vorher hochzuladen ist die eine Änderung, mit der eine JSON-Vorlage sauber importiert wird.

Vorlagen vor dem Speichern websiteunabhängig machen

Eine Vorlage mit fest eingetragenen Farben und Schriften sieht auf der nächsten Website, in die Sie sie importieren, falsch aus. Bevor Sie einen Block exportieren, den Sie wiederverwenden möchten, konvertieren Sie ihn mit Farben der Zielseite übernehmen und Globale Schriften der Zielseite übernehmen. Die Vorlage übernimmt dann die Palette und die Schriften, die die Zielwebsite definiert – so wirkt dasselbe JSON überall, wo Sie es importieren, als wäre es für die jeweilige Website gemacht.

Die Struktur sauber halten

Eine gute wiederverwendbare Vorlage besteht aus einem einzigen Container auf oberster Ebene mit einem flachen Baum darin. Prüfen Sie vor dem Export die Strukturübersicht: Eine geringe Verschachtelungstiefe und Kartenreihen, die als Grid die Widgets direkt enthalten – statt jede Karte in einen eigenen Container zu packen –, machen die Vorlage nach dem Import wesentlich leichter umzugestalten. Saubere Eingabe ergibt sauberes JSON.

Wie die Datei tatsächlich aufgebaut ist

Dahinter steckt kein Geheimnis, und wer die Felder kennt, verliert schnell den Respekt vor dem Format. Eine heruntergeladene Vorlage ist ein einzelnes JSON-Objekt mit fünf Schlüsseln:

• content – der Elementbaum: Container und Widgets, jeweils mit ihren Einstellungen.
• page_settings – Einstellungen auf Seitenebene, bei einem konvertierten Block leer.
• version – "0.4", die Schemaversion der Elementor-Vorlagen.
• title – das, was Sie in das Feld für den Vorlagentitel eingegeben haben, standardmäßig „HTML Converted Page“.
• type – "page".

Den Wert type sollten Sie verstehen. Da die Vorlage als Seite und nicht als Abschnitt deklariert ist, landet sie unter „Gespeicherte Vorlagen“ als Seitenvorlage. Über den Bibliotheks-Button können Sie sie trotzdem in jede bestehende Seite einfügen, es geht also nichts verloren – zusätzlich können Sie aber auch direkt eine leere Seite damit beginnen.

Warum die Daten in der Zwischenablage anders aussehen

Wenn Sie sich ansehen, was der Kopieren-Button in die Zwischenablage legt, ist es nicht dasselbe Objekt. Es enthält type: "elementor", eine siteurl und das Element-Array – keine Version, keinen Titel.

Das ist das Einfügeformat von Elementor, nicht sein Vorlagenformat. Wenn Sie mit der rechten Maustaste klicken und Von anderer Website einfügen wählen, sucht der Editor genau nach dieser Kennung, um den Inhalt der Zwischenablage als Elementor-Daten statt als reinen Text zu erkennen. Deshalb funktioniert das Einfügen ohne jeden Importschritt – und deshalb können Sie den Inhalt der Zwischenablage auch nicht in einer Datei speichern und importieren: Die beiden Formate sind nicht austauschbar, obwohl sie dieselben Komponenten beschreiben.

Reines JSON heißt echte Versionsverwaltung

Da die Datei lesbares JSON und kein Binärpaket ist, verhält sie sich wie Quellcode. Das ermöglicht einiges, was wirklich nützlich ist und mit Seitenabschnitten nur selten gemacht wird:

• Zwei Exporte vergleichen. Konvertieren Sie einen Block, ändern Sie die Quelle, konvertieren Sie erneut und vergleichen Sie die Dateien per Diff – so sehen Sie genau, welche Einstellungen sich verschoben haben. Schneller lässt sich kaum herausfinden, was eine bestimmte Konvertierungsoption tatsächlich ändert.
• Ein Design zu einem bestimmten Zeitpunkt archivieren. Eine datierte JSON-Datei hält exakt fest, wie ein Abschnitt aussah – und lässt sich auch dann noch wiederherstellen, wenn die Live-Seite längst bis zur Unkenntlichkeit bearbeitet wurde.
• Vor dem Import prüfen. Durchsuchen Sie die Datei nach http, und Sie sehen jede Bild-URL, auf die sie verweist – damit wissen Sie sofort, ob sie sich sauber auf einer anderen Website importieren lässt.

Der letzte Punkt dauert zehn Sekunden und fängt den häufigsten Importfehler überhaupt ab: eine Vorlage voller URLs, die auf eine Website zeigen, die das Ziel nicht erreichen kann.

Kopieren oder herunterladen – eine einfache Regel

Fügen Sie die Daten aus der Zwischenablage ein, wenn Sie etwas einmalig in die Seite übernehmen, die Sie gerade bearbeiten. Laden Sie die JSON-Datei für alles herunter, was Sie mehr als einmal importieren, weitergeben oder aufbewahren wollen. Dieselbe Konvertierung, zwei Ziele – entscheiden Sie danach, ob Sie Übertragbarkeit brauchen.