Eine Seite mit einem KI-Assistenten zu generieren oder HTML aus einem Design-Tool zu exportieren, bringt Sie einen großen Teil des Weges. Daraus eine wartbare Elementor-Seite zu machen, ist eine kurze, wiederholbare Pipeline.
Schritt 1 – Bringen Sie zuerst die Bilder in Ordnung
Dies ist der Schritt, den viele überspringen, und er verursacht die meiste Nacharbeit. KI kann keine echten Fotos in HTML einbetten, und Exporte aus Design-Tools verwenden oft lokale Pfade oder Data-URLs – nichts davon kann zu Anhängen in der Medienbibliothek werden.
Zwei gute Optionen: Laden Sie Ihre Bilder zuerst in die Medienbibliothek hoch und verweisen Sie im HTML auf die echten URLs, oder akzeptieren Sie leere Platzhalter und füllen Sie sie anschließend in Elementor aus. Wenn Sie den Platzhalter-Weg wählen, stellen Sie sicher, dass jedes Bild ein aussagekräftiges alt-Attribut hat – dieser Text wird als Beschriftung des Platzhalters beibehalten, damit Sie wissen, welches Bild wohin gehört.
Schritt 2 – Bitten Sie um konvertierungsfreundliches Markup
Wenn Sie ein Modell prompten, sagen Sie ihm, was Sie brauchen: semantische Tags, ein flaches DOM mit einem Wrapper pro Abschnitt, das gesamte CSS in einem einzigen Style-Block, Font-Awesome-Icon-Klassen statt Inline-SVG und keine externen Skripte oder Schriftarten. Diese wenigen Einschränkungen haben eine größere Wirkung auf das Ergebnis als alles, was Sie danach tun können.
Schritt 3 – Konvertieren Sie mit den richtigen Optionen
- Modus „Native Komponenten“, damit Sie bearbeitbare Widgets erhalten statt eines einzelnen HTML-Blocks.
- Icons: An die Elementor-Icon-Bibliothek angleichen, damit Icons echte, austauschbare Icons werden.
- Farben und Schriftarten: Website-Werte, wenn dies auf eine Marken-Website kommt, Originalwerte, wenn Sie ein Design reproduzieren.
- Bilder: leere Platzhalter, es sei denn, Sie haben bereits echte URLs.
Schritt 4 – Überprüfen Sie die Struktur vor dem Exportieren
Öffnen Sie den Strukturplan. Sehen Sie sich die Komponentenzahl, die maximale Verschachtelungstiefe und die Konfidenzaufschlüsselung an. Rote Zeilen wurden als HTML beibehalten und verdienen einen Blick. Wenn die Tiefe hoch ist, setzen Sie einen Kopierstamm tiefer im Baum an oder vereinfachen Sie die Quelle und konvertieren Sie erneut – die Eingabe zu korrigieren ist fast immer schneller, als die Ausgabe zu reparieren.
Schritt 5 – Einfügen und fertigstellen
Fügen Sie den Code in Elementor ein und führen Sie dann den standardmäßigen Fertigstellungslauf durch: Verknüpfen Sie Buttons neu, legen Sie Hover-Zustände fest, verbinden Sie Formulare oder Menüs, laden Sie die Platzhalterbilder hoch und gehen Sie die Ansichten für Desktop, Tablet und Mobil durch.
Schritt 6 – Sichern Sie die wiederverwendbaren Teile
Alles, was Sie wiederverwenden werden – eine Preiszeile, ein Feature-Raster, ein Testimonial-Block – speichern Sie sofort in der Vorlagenbibliothek. Über einige Projekte hinweg wird daraus eine Komponentenbibliothek, die den nächsten Aufbau viel schneller macht, und sie ist mehr wert als jede einzelne konvertierte Seite.
Die vier Anweisungen, die in einem Prompt am wichtigsten sind
In Schritt 2 wird der größte Teil des Ergebnisses entschieden, daher lohnt es sich, genau zu benennen, welche Anweisungen das Ergebnis tatsächlich verändern. In grober Reihenfolge ihrer Auswirkung:
- „Bilder nicht als Base64-Daten-URLs einbetten.“ Sich selbst überlassen, wird ein Modell, das nach einer eigenständigen Seite gefragt wird, jedes Bild inline einbetten, und eine Seite mit zwölf Bildern wächst auf über ein halbes Megabyte an. Diese können nicht zu Anhängen in der Medienbibliothek werden, daher kommen sie alle als leere Slots an. Fragen Sie stattdessen nach einer echten gehosteten URL oder einem einfachen Platzhalterpfad.
- „Verwenden Sie Font-Awesome-Klassen für Icons, nicht Inline-SVG.“ Font-Awesome-Klassennamen werden direkt als echte, austauschbare Icons in die Icon-Bibliothek von Elementor übernommen. Ein von Hand erstelltes Inline-SVG kann in dieses Steuerelement überhaupt nicht übernommen werden und bleibt als rohes HTML erhalten. Diese eine Zeile ist der Unterschied zwischen bearbeitbaren Icons und einer Seite voller roter HTML-Blöcke.
- „Halten Sie das DOM flach – ein Wrapper pro Abschnitt, keine redundante Verschachtelung.“ Der Konverter spiegelt Ihr Markup wider, daher entspricht die Verschachtelung im Eingang der Verschachtelung im Ausgang. Modelle verwenden standardmäßig tief verschachtelte Wrapper-Divs, weil die meisten Trainingsdaten so aussehen.
- „Verwenden Sie semantische Tags.“ Echte
<h1>–<h3>,<p>,<button>,<ul>. Semantische Tags werden nativen Widgets zugeordnet; eine Seite, die ausschließlich aus gestylten Divs besteht, gibt dem Konverter deutlich weniger Material zum Arbeiten.
Fertige Prompts, die alle vier enthalten, finden Sie auf der Seite „KI-Prompts“, einschließlich eines, der speziell für den Workflow „Bilder zuerst“ geschrieben wurde.
Warum sich Exporte aus Design-Tools anders verhalten als KI-Ausgaben
Die beiden Quellen scheitern in entgegengesetzte Richtungen, und wenn Sie wissen, mit welcher Sie es zu tun haben, wissen Sie, wo Sie suchen müssen.
KI-generiertes HTML ist semantisch in der Regel brauchbar – es verwendet echte Überschriften und Absätze, weil es auf Dokumentation trainiert wurde. Seine Schwächen sind eingebettete Base64-Bilder, Inline-SVG-Icons und mehr Wrapper-Divs, als das Layout benötigt. Alle drei lassen sich beheben, indem Sie den Prompt ändern und neu generieren, was Sekunden kostet.
Exporte aus Design-Tools sind das Gegenteil. Bilder und Assets werden in der Regel korrekt referenziert, aber das Markup besteht meist aus absolut positionierten Divs mit generierten Klassennamen und überhaupt keiner semantischen Struktur – weil das Tool eine Leinwand beschreibt, kein Dokument. Oft gibt es nirgends ein Überschriftenelement, sodass nichts zu einem Überschriften-Widget werden kann.
Dieser zweite Fall ist nicht wirklich ein Konvertierungsproblem. Absolut positionierte Leinwand-Ausgaben entsprechen keinem Elementor-Layout, und kein Tool kann eine Dokumentstruktur ableiten, die nie ausgedrückt wurde. Wenn Ihr Export so aussieht, ist die ehrliche Antwort, die Struktur neu aufzubauen statt sie zu konvertieren – oder zum Design-Tool zurückzukehren und eine semantische Flow-Layout-Version zu exportieren, sofern es eine anbietet.
Regenerieren statt reparieren
Die Gewohnheit, die diese Pipeline schnell macht, besteht darin, die Quelle als Wegwerfartikel zu behandeln. Wenn der Strukturplan Tiefe 8 und sechs rote HTML-Blöcke zeigt, öffnen Sie nicht Elementor und beginnen zu reparieren – fügen Sie dem Prompt zwei Zeilen hinzu, generieren Sie neu und konvertieren Sie erneut. Diese Schleife dauert etwa eine Minute.
Dieselben Probleme in Elementor zu reparieren, dauert eine Stunde und muss auf der nächsten Seite wiederholt werden. Den Prompt zu korrigieren, behebt jede Seite, die Sie danach generieren – das ist der ganze Grund, warum sich dieser Workflow einzurichten lohnt.