Eine Vorab-Checkliste für HTML, das Sie konvertieren möchten

Die Qualität einer Konvertierung hängt größtenteils vom HTML ab, das Sie dem Konverter übergeben. Dies ist die Checkliste, die Sie durchgehen sollten, bevor Sie etwas in den Konverter einfügen.

1. Verwenden Sie semantische Tags

Überschriften als <h1>–<h6>, Fließtext als <p>, Handlungsaufforderungen als <button> oder <a class="button">, Listen als <ul>. Native Tags werden auf native Widgets abgebildet. Eine Überschrift, die mit einem gestylten <div> vorgetäuscht wird, kann zwar erkannt werden, aber ein echter Tag ist niemals mehrdeutig.

2. Halten Sie das DOM flach

Ein Wrapper pro Abschnitt. Jede zusätzliche Verschachtelungsebene wird zu einem weiteren Container, durch den Sie sich im Editor klicken müssen. Rein dekorative Wrapper ohne Styling werden automatisch zusammengefasst, aber Wrapper, die ein Padding oder einen Hintergrund tragen, bleiben erhalten, da das Entfernen das Layout verändern würde.

3. Machen Sie Ihr CSS eigenständig

Inline-Styles oder ein einzelner <style>-Block lassen sich am besten konvertieren, da der Konverter die tatsächlich vom Browser berechneten Stile liest. Ein externes Framework-Stylesheet, das nie geladen wird, führt dazu, dass die Seite ohne Stile gerendert wird – und genau diese ungestylte Seite wird konvertiert.

4. Kümmern Sie sich zuerst um die Bilder

Idealfall: Laden Sie die Bilder in die Mediathek hoch und verwenden Sie die echten https://-URLs. Andernfalls stellen Sie die Option „Bilder“ auf Leere Bildplatzhalter um und füllen Sie diese anschließend – jeder Platzhalter behält sein alt als Bildunterschrift. Base64-Bilder und lokale Dateipfade werden absichtlich zu Platzhaltern, da sie nicht zuverlässig in WordPress importiert werden können.

5. Bevorzugen Sie Font-Awesome-Klassen gegenüber Inline-SVG

Nur klassenbasierte Icons können als bearbeitbare Icons in die Icon-Bibliothek von Elementor aufgenommen werden. Inline-SVGs können nicht in das Icon-Steuerelement gelangen und verlieren jegliche Größenangaben und Strichfarben, die im Seiten-CSS definiert waren.

6. Verwenden Sie gap statt Margins pro Kindelement

Gaps bei einem Flex- oder Grid-Elternelement werden auf eine einzige Gap-Einstellung in Elementor abgebildet. Margins, die auf jedes Kindelement angewendet werden, werden pro Widget übernommen und sind später viel mühsamer anzupassen.

7. Zentrieren Sie mit max-width plus automatischen Margins

Das Muster max-width + margin:0 auto wird erkannt und zu einem Boxed-Container, der sich bei jeder Bildschirmgröße nativ zentriert.

8. Entfernen Sie, was Sie nicht übernehmen möchten

Skripte, Tracking-Tags, Cookie-Banner und Einbettungen von Drittanbietern werden aus Sicherheitsgründen entfernt oder neutralisiert. Formulare verlieren ihre Absendeaktion – ein Elementor-Formular muss mit einem echten Ziel auf Ihrer Website verbunden werden. Navigationsmenüs müssen auf ein echtes WordPress-Menü verweisen.

9. Konvertieren Sie abschnittsweise

Verwenden Sie bei einer großen Seite den visuellen Auswähler oder legen Sie in der Strukturübersicht eine Kopierwurzel fest und übernehmen Sie jeweils einen Abschnitt. Kleinere Einheiten lassen sich viel einfacher überprüfen, und Sie vermeiden, versehentlich den Website-Header und -Footer zu importieren.

10. Überprüfen Sie die Strukturübersicht vor dem Export

Prüfen Sie die Anzahl der Komponenten, die maximale Verschachtelungstiefe und die Konfidenzaufschlüsselung. Grüne Zeilen wurden direkt konvertiert; rote Zeilen wurden als HTML beibehalten und sind diejenigen, die einen zweiten Blick wert sind. Die Quelle zu korrigieren und erneut zu konvertieren ist in der Regel schneller, als das Ergebnis in Elementor zu reparieren.

11. Öffnen Sie die Quelle zuerst bei jedem Breakpoint

Der wertvollste Punkt auf dieser Liste – und der am häufigsten übersprungene. Das Layout wird bei jeder Breakpoint-Breite neu vermessen, und was der Browser dort berechnet, wird gespeichert – es gibt keine Interpretationsschicht, die Dinge aufräumt.

Ziehen Sie daher vor der Konvertierung das Browserfenster mit der Quelle auf ungefähr 820px und 390px zusammen. Ein Layout, das bei 390px bereits kaputt ist, wird zu einem originalgetreu kaputten mobilen Layout konvertiert, und es ist sehr leicht, eine Stunde damit zu verbringen, die Konvertierung für ein Problem verantwortlich zu machen, das die ganze Zeit in der Quelle lag. Zwei Minuten, in denen Sie die Fenstergröße ändern, zeigen Ihnen, ob Sie etwas konvertieren, das funktioniert.

12. Überprüfen Sie die Details, die stillschweigend nicht konvertiert werden

Vier Dinge sehen in der Quelle gut aus und fehlen danach einfach. Wenn Sie vorher danach suchen, wird aus jedem Rätsel eine erwartete Aufgabe:

• Dekoration durch Pseudoelemente. Alles, was mit ::before oder ::after gezeichnet wird – Anführungszeichen, Akzentbalken, Farbverlaufsüberlagerungen, Unterstreichungs-Schnörkel – ist kein DOM-Knoten und kann kein Widget werden. Wenn ein Designdetail verschwindet, sollten Sie als Erstes hier ansetzen.
• Buttons mit rechtwinkligen Ecken, die keine Inline-Block-Links sind. Echte <button>-Elemente und Links, die inline-block sind oder eine btn/button-Klasse tragen, werden immer konvertiert. Alles andere – Flex-gestylte Anker, klickbare Divs – muss einen Geometrietest bestehen, der einen Eckenradius von mindestens 3px voraussetzt, sodass solche mit scharfen Ecken gestylter Text bleiben. Eine btn-Klasse auf dem Link behebt alle auf einmal.
• Schriftarten, die Sie nicht haben. Die Namen der Schriftfamilien werden übertragen, die Schriftdateien nicht. Installieren Sie die Schriftart auf Ihrer WordPress-Website, bevor Sie konvertieren, sonst bewerten Sie das Ergebnis in einer Ersatzschrift und jagen Unterschieden nach, die gar nicht vorhanden sind.
• Hover- und Fokus-Zustände. Nur der Ruhezustand kann aus einem berechneten Stil gelesen werden. Jede Hover-Farbe ist eine Aufgabe nach dem Import, daher lohnt es sich, vorher zu notieren, wie viele interaktive Elemente die Seite hat.

Wie guter Quellcode aussieht

Alles oben Genannte lässt sich in einem Absatz zusammenfassen. Das HTML, das sich am besten konvertieren lässt, ist semantisch, flach und eigenständig: echte Überschriften- und Absatz-Tags, ein Wrapper pro Abschnitt, Layout mit Flex oder Grid und gap, Icons als Font-Awesome-Klassen, Bilder als echte gehostete URLs, das gesamte CSS in einem einzigen Style-Block und keine Skripte.

Nicht zufällig sieht gut geschriebenes HTML ohnehin genau so aus. Wenn Sie die Quelle generieren, anstatt sie zu übernehmen, kostet die Anforderung dieser Eigenschaften einen Satz im Prompt und erübrigt den größten Teil dieser Checkliste.

Nach dem Import

Verknüpfen Sie Buttons neu, verbinden Sie Formulare und Menüs erneut, gehen Sie die drei Geräteansichten durch und laden Sie alle Platzhalterbilder erneut hoch. Dann ist es eine normale Elementor-Seite – vollständig bearbeitbar, ohne dass ein HTML-Widget zwischen Ihnen und Ihrem Inhalt steht.