Über die grundlegende Konvertierung hinaus entscheiden drei Funktionen darüber, wie aufgeräumt und bearbeitbar Ihre Elementor-Seite wird: wie Icons, Bilder und die Struktur behandelt werden.
1. Icons, die in der Elementor-Symbolbibliothek landen
Wenn Ihr HTML Font Awesome-Klassen verwendet (wie <i class="fas fa-check"></i>), setzen Sie die Icons-Option auf Match Elementor icon library und jedes Icon wird zu einem echten, bearbeitbaren Icon, das Sie über den Icon-Picker von Elementor austauschen können – und nicht zu einem gesperrten SVG.
Noch besser: Eine Karte, die aus einem Icon + Überschrift + Kurztext besteht, wird in ein einziges Icon Box-Widget umgewandelt. Der Konverter sucht das Icon anhand seines Namens (unter Verwendung der Icon-Klasse und des Kartentitels, z. B. „Reusable“ → recycle) und übernimmt Icon-Größe, Abstände und Typografie. Wenn keine Übereinstimmung gefunden wird, bleibt das Icon leer und Sie können es selbst auswählen.
Tipp: Selbst gezeichnete SVGs können nicht in die Icon-Steuerung von Elementor übernommen werden, daher sollten Sie im Quelltext Font Awesome-Klassen bevorzugen, wenn Sie Bibliotheks-Icons wünschen.
2. Bilder: in Elementor einfügen
Die KI kann keine echten Bilddateien in HTML-Text einbetten, daher sind Bilder der kniffligste Teil. Der einfachste Weg: Setzen Sie Images auf Empty image placeholders. Jedes Bild wird zu einem leeren Platzhalter, und jeder Platzhalter behält seinen alt-Text als Beschriftung, sodass Sie wissen, welches Bild wohin gehört, wenn Sie es in Elementor hochladen.
- Am besten: Laden Sie Bilder zuerst in die Medienbibliothek hoch und verwenden Sie dann die entsprechenden
https://-URLs im HTML – sie werden ohne manuellen Schritt importiert. - Vermeiden: Base64-eingebettete Bilder und lokale Dateipfade – der Konverter verwirft diese standardmäßig zu leeren Platzhaltern.
3. Die Strukturübersicht: vor dem Export prüfen
Öffnen Sie den Tab Structure map, um den exakten Elementor-Baum neben einer Live-Vorschau zu sehen. Wenn Sie über eine Zeile fahren, wird der entsprechende Teil auf beiden Seiten hervorgehoben.
- Das Ziel-Symbol in einer Zeile legt einen copy root fest – nur dieser Block wird exportiert und die äußeren Wrapper entfallen.
- Das ✕-Symbol schließt einen Teil vom Kopieren aus (praktisch für ein störendes Element, das Sie nicht möchten).
- Die Übersicht zeigt die Anzahl der Komponenten, wie tief die Verschachtelung ist und eine Aufschlüsselung der Zuverlässigkeit (direkt / teilweise / als HTML erhalten).
Ein schneller Blick hier erfasst alles, was nicht sauber zugeordnet wurde, bevor es jemals Ihre Live-Seite erreicht.