HTML to Elementor
Zurück zu den Tutorials

HTML to Elementor JSON: export and import templates

Elementor-Vorlagen werden als JSON gespeichert. Das bedeutet, eine HTML-Seite kann in eine JSON-Vorlagendatei konvertiert werden, die Sie wie jede andere Elementor-Vorlage importieren – portabel, wiederverwendbar und unabhängig von der Zwischenablage. So funktioniert der JSON-Weg und wann Sie ihn wählen sollten.

Zwei Exportformate, dieselben Komponenten

Nach der HTML-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 besteht darin, dass eine Datei portabel ist, eine Zwischenablage-Nutzlast jedoch nicht.

Wann die JSON-Datei die richtige Wahl ist

  • Wiederverwendung über Websites hinweg. Importieren Sie dieselbe Datei in jede WordPress-Installation mit Elementor.
  • Versionskontrolle. Die Datei ist reines JSON, daher können Sie sie in einem Repository aufbewahren, zwei Exporte vergleichen oder ein Design in dem Zustand archivieren, in dem es an einem bestimmten Datum existierte.
  • Teilen. Sie können einem Kollegen oder Kunden eine Datei senden; Ihre Zwischenablage können Sie nicht versenden.
  • Aufbau einer Bibliothek. Ein Ordner mit 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; fügen Sie sie auf einer beliebigen Seite über die Schaltfläche der Elementor-Bibliothek ein.

Was sich in der JSON-Datei befindet

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

Ein praktischer Hinweis: Bildreferenzen in der JSON-Datei sind URLs, keine eingebetteten Dateien. Wenn Ihre Quelle echte Medienbibliotheks-URLs verwendet hat, werden sie beim Import aufgelöst; lokale Pfade und Base64-Bilder werden zu leeren Platzhaltern, die Sie anschließend ausfüllen. Das vorherige Hochladen von Bildern ist die einzige Änderung, die einen sauberen Import einer JSON-Vorlage ermöglicht.

Vorlagen vor dem Speichern websiteunabhängig machen

Eine Vorlage, die Farben und Schriftarten fest codiert, 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 Website-Farben und Website-Typografie. Die Vorlage übernimmt dann die Palette und Schriftarten, die die Ziel-Website definiert, sodass dieselbe JSON-Vorlage überall, wo Sie sie importieren, nativ aussieht.

Die Struktur sauber halten

Eine gute wiederverwendbare Vorlage ist ein einziger Container auf oberster Ebene mit einem flachen Baum im Inneren. Überprüfen Sie vor dem Export die Strukturansicht: Eine geringe Verschachtelungstiefe und Kartenreihen, die ein Raster bilden, das Widgets direkt enthält – anstatt jede Karte in einen eigenen Container zu verpacken – machen die Vorlage nach dem Import viel einfacher neu zu gestalten. Saubere Eingabe erzeugt sauberes JSON.

Kopieren oder Herunterladen – eine schnelle Regel

Fügen Sie die Zwischenablagedaten für ein einmaliges Einfügen in eine Seite ein, die Sie gerade bearbeiten. Laden Sie die JSON-Datei für alles herunter, was Sie mehr als einmal importieren, teilen oder aufbewahren möchten. Dieselbe Konvertierung, zwei Ziele – wählen Sie danach, ob Sie Portabilität benötigen.