HTML to Elementor
Zurück zu den Tutorials

Konvertierte Blöcke in eine wiederverwendbare Elementor-Bibliothek umwandeln

Eine Seite zu konvertieren, spart einen Nachmittag. Eine Bibliothek aus konvertierten, aufgeräumten Abschnitten aufzubauen, verändert, wie schnell Sie danach alles bauen können.

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.

Speichern Sie Abschnitte, nicht Seiten

Eine ganze Seite ist selten wiederverwendbar; ein Abschnitt fast immer. Wenn Sie einen Hero-Bereich, ein Feature-Grid, eine Preisreihe oder einen Testimonial-Block konvertiert und aufgeräumt haben, speichern Sie diesen einzelnen Container mit einem aussagekräftigen Namen in der Vorlagenbibliothek. Wählen Sie Namen, die die Form beschreiben und nicht das Projekt – „feature grid, 3 columns, icon top“ ist besser als „client-x-section-2“.

Zwei Exportwege, zwei Einsatzzwecke

  • Elementor-Daten kopieren – am schnellsten, wenn Sie einen Abschnitt in eine Seite einfügen, die Sie bereits geöffnet haben.
  • JSON-Vorlage herunterladen – besser für den Aufbau einer Bibliothek. Die Datei lässt sich auf jeder Website importieren, in die Versionsverwaltung einchecken und mit Ihrem Team teilen.

Für die Arbeit an einer Bibliothek lohnt sich der zusätzliche Klick für den JSON-Weg: Sie erhalten portable Dateien statt bloßer Zwischenablage-Inhalte.

Machen Sie Blöcke vor dem Speichern websiteunabhängig

Ein Block mit fest kodierten Farben und Schriften sieht auf der nächsten Website, auf der Sie ihn verwenden, falsch aus. Überlegen Sie, ihn vor dem Speichern in Ihrer Bibliothek erneut mit Farben der Zielseite übernehmen und Globale Schriften der Zielseite übernehmen zu konvertieren. Solche Blöcke übernehmen dann die Palette und Schriften, die die Zielwebsite festlegt – derselbe Block wirkt überall nativ.

Halten Sie die Struktur sauber

Ein wiederverwendbarer Block sollte ein Container auf oberster Ebene mit einem flachen Baum darin sein. Löschen Sie vor dem Speichern übrig gebliebene leere Wrapper und sorgen Sie dafür, dass Kartenreihen ein Grid oder ein Flex-Container sind, der die Widgets direkt enthält, statt dass jede Karte in ihrem eigenen überflüssigen Container sitzt. Ein aufgeräumter Baum lässt sich sechs Monate später viel leichter neu gestalten.

Globale Widgets für wirklich gemeinsam genutzte Teile

Für etwas, das auf vielen Seiten identisch bleiben muss – ein CTA-Band, eine Garantieleiste –, ist ein globales Widget leistungsfähiger als eine Vorlage: einmal bearbeiten, und jede Instanz wird aktualisiert. Verwenden Sie Vorlagen als Ausgangspunkte und globale Widgets für Dinge, die nicht auseinanderlaufen dürfen.

Eine Einschränkung sei klar benannt: Globale Widgets sind eine Funktion von Elementor Pro. In der kostenlosen Version haben Sie nur gespeicherte Vorlagen, und das sind Kopien – fügen Sie eine in fünf Seiten ein, haben Sie fünf unabhängige Kopien zu aktualisieren. Wenn Sie die kostenlose Version nutzen und etwas wirklich nicht auseinanderlaufen darf, pflegen Sie eine einzige maßgebliche Seite und verlinken Sie darauf, statt sie zu duplizieren.

Was zwischen Websites mitreist und was nicht

Eine JSON-Vorlage ist portabel, aber nicht in sich geschlossen. Drei Dinge überraschen regelmäßig, wenn man einen Block zum ersten Mal auf einer anderen Website importiert:

  • Bilder reisen als URLs, nicht als Dateien. Der Block referenziert Bilder über ihre Adresse. Importieren Sie ihn auf einer Website, die den ursprünglichen Host nicht erreichen kann – oder auf einer Website, auf der diese Dateien später gelöscht wurden –, erhalten Sie defekte Bilder. Für eine Bibliothek, die Sie behalten wollen, ersetzen Sie Fotos vor dem Speichern durch Ihre eigenen Medien oder durch bewusst gewählte Platzhalter.
  • Schriften müssen bereits vorhanden sein. Die Vorlage speichert den Namen einer Schriftfamilie. Ist diese Schriftfamilie auf der Zielwebsite nicht installiert, weicht der Text stillschweigend auf eine Ersatzschrift aus. Blöcke, die im Modus Website-Typografie gespeichert wurden, umgehen das vollständig, weil sie gar keine Schriftfamilie mitführen.
  • Globale Farben sind Verweise über den Namen. Ein Widget, das an eine globale Farbe gebunden ist, sucht diese auf der Zielwebsite. Fehlt sie dort, hängt das Verhalten von der Elementor-Version ab, und es ist selten das, was Sie wollten. Verwenden Sie in Bibliotheksblöcken entweder explizite Farben, oder vereinheitlichen Sie die Namen Ihrer globalen Palette über die Websites hinweg, an denen Sie arbeiten – Letzteres ist anfangs mehr Arbeit und danach viel besser.

Benennen und versionieren Sie sie wie Code

Eine Bibliothek ist in dem Moment nutzlos, in dem Sie darin nichts mehr finden. Zwei Gewohnheiten leisten dabei die meiste Arbeit:

  • Beschreiben Sie die Form, nicht die Herkunft. „hero, split, image right“ sagt Ihnen, ob Sie die Vorlage verwenden sollten. „acme-homepage-v2“ tut das nicht, und Sie öffnen fünf Vorlagen, um die richtige zu finden.
  • Setzen Sie bei JSON-Exporten ein Datum oder eine Version in den Dateinamen. Sie werden einen Block verbessern und genau einmal den alten zurückhaben wollen – aber dann wollen Sie ihn wirklich.

Wenn Sie die JSON-Dateien in einem Repository neben Ihren Projekten aufbewahren, erhalten Sie Diffs und Versionsverlauf gratis dazu. Es ist ungewöhnlich, Seitenabschnitte als versionierte Artefakte zu behandeln, und es zahlt sich aus, sobald Sie zum ersten Mal wissen müssen, was sich geändert hat.

Testen Sie einen Block, bevor Sie ihm vertrauen

Der Test ist günstig und fängt alles oben Genannte ab: Importieren Sie den Block auf einer Testwebsite, die nicht die ist, auf der Sie ihn gebaut haben – idealerweise mit einem anderen Theme und einer leeren globalen Palette. Defekte Bilder, falsche Schriften und fehlende globale Werte zeigen sich sofort, wenn ihre Behebung eine Minute kostet – statt vor einem Kunden, auf einer Seite, die Sie gerade übergeben wollen.

Eine Bibliothek, die sich lohnt

Zehn bis fünfzehn gut benannte, websiteunabhängige Abschnitte decken das meiste ab, was eine Marketing-Website braucht: Hero-Bereich, Feature-Grid, geteiltes Feature, Schritte, Testimonial, Logoleiste, Preise, FAQ, CTA-Band, Footer. Bauen Sie sie einmal aus konvertierten Quellen auf, und die meisten künftigen Seiten werden zu Montage statt Neubau.

Sie müssen auch nicht bei null anfangen. Die Vorlagenbibliothek auf dieser Website bietet fertige Blöcke, die Sie ansehen, konvertieren und anpassen können – ein vernünftiger Weg, die Lücken in Ihrem eigenen Bestand zu füllen, ohne jeden Abschnitt von Grund auf zu gestalten.

Geschrieben von Leo

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