Elementor MCP: KI-generiertes HTML in bearbeitbare Elementor-Seiten verwandeln

Elementor hat jetzt einen offiziellen Weg, eine von KI entworfene HTML-Seite in eine echte, bearbeitbare Elementor-Seite zu verwandeln: den Elementor MCP, der mit Elementor 4.3 erschienen ist. Wir haben ihn auf einer frischen WordPress-Website eingerichtet, damit eine Landingpage mit zehn Abschnitten nachgebaut und alles notiert, worüber wir gestolpert sind. Das hier ist dieser Bericht – was er ist, wie Sie ihn verbinden, welcher Ablauf funktioniert und welche Kleinigkeiten Sie vor dem Start kennen sollten.

Was der Elementor MCP ist

MCP (Model Context Protocol) ist ein Standard, über den KI-Tools Aktionen in anderer Software aufrufen. Der Elementor MCP stellt die Seitenbau-Funktionen von Elementor dem KI-Tool zur Verfügung, das Sie bereits nutzen – Claude Code, Claude Desktop, Codex, Cursor oder jedem anderen MCP-Client. So kann der Assistent Seiten anlegen, Elemente hinzufügen und gestalten, Ihre globalen Klassen und Variablen verwalten und das Ergebnis direkt auf Ihrer eigenen Website speichern. Nichts wird von Hand eingefügt oder importiert: Die KI baut direkt in Elementor, und alles, was sie anlegt, ist ein normales Element, das Sie danach im Panel auswählen und bearbeiten können.

Gebaut wird mit den neueren atomic-Elementen von Elementor – Flexbox-, Div-Block- und Grid-Containern, Heading, Paragraph, Button, Image, SVG, Tabs, Accordion und weiteren –, gestaltet über globale Klassen und Variablen statt über Einstellungen pro Widget. Das ist der wichtigste Punkt, den Sie vor dem Start verstehen sollten, denn er bestimmt sowohl die Voraussetzungen als auch den Ablauf.

Der Elementor-Editor mit der vom MCP gebauten Seite: links das Panel „Atomic Elements“, rechts das Strukturpanel mit den angelegten Abschnitten Nav, Hero, Logos, Features, Stats, Quote, Pricing, FAQ, CTA und Footer. — Was der MCP hinterlässt: gewöhnliche atomic-Elemente, ein benannter Container pro Abschnitt, alles im Panel bearbeitbar.

Was Sie brauchen

WordPress 6.8 oder neuer und Elementor 4.3 oder neuer. Das kostenlose Plugin reicht zum Verbinden und Bauen; Elementor Pro und das kostenlose Plugin Angie bringen weitere Fähigkeiten mit, etwa Formulare, Theme-Vorlagen und eigene Widgets.
Den eingeschalteten Atomic Editor. Auf Websites, die direkt mit Elementor 4 installiert wurden, ist er meist schon aktiv. Auf älteren Websites, die auf 4.3 aktualisiert wurden, startet er ausgeschaltet, und die Bauwerkzeuge des MCP bleiben gesperrt, bis Sie ihn unter Elementor → Einstellungen → Atomic Editor einschalten.
Ein KI-Tool, das MCP unterstützt. Elementor selbst verlangt für den MCP nichts; Sie zahlen nur, was Ihr KI-Tool für die Arbeit berechnet.

Die Verbindung dauert etwa eine Minute

Öffnen Sie in WordPress Elementor → Elementor MCP und klicken Sie auf Enable MCP access.
Wählen Sie Ihr Tool: Claude Code, Claude Desktop, Codex, Cursor oder Other.
Setzen Sie das Häkchen, das bestätigt, dass für die Website ein Anwendungspasswort erstellt wird.
Klicken Sie auf Generate Prompt, kopieren Sie den Prompt und fügen Sie ihn in Ihr KI-Tool ein. Er richtet die Verbindung ein; manche Tools müssen danach neu gestartet werden.

Die Seite „Elementor MCP“ in WordPress: Reiter für Claude Code, Claude Desktop, Codex, Cursor und Other, ein Kontrollkästchen zur Bestätigung, dass ein Anwendungspasswort erstellt wird, und ein Button „Generate Prompt“. — Elementor → Elementor MCP auf unserer Testseite. Tool wählen, Häkchen setzen, Prompt erzeugen und in das Tool einfügen.

Die Verbindung arbeitet mit den Rechten des WordPress-Benutzers, der sie angelegt hat – ein Redakteurskonto kann also nur, was ein Redakteur kann. Eine einzelne Verbindung widerrufen Sie unter Benutzer → Profil → Anwendungspasswörter; für die ganze Website schalten Sie den MCP auf derselben Elementor-Seite ab.

Der Ablauf, der funktioniert

Elementors eigene Vorführung und unser Test laufen auf dieselbe Reihenfolge hinaus. Der wichtige Gedanke: Jeder Schritt gibt dem nächsten eine feste Vorlage, sodass die KI Entscheidungen übernimmt, statt sie zu erfinden. Wenn Sie den ganzen Ablauf sehen möchten, zeigt Elementors Webinar zu diesem Ablauf (etwa 45 Minuten, auf YouTube), wie ein Produktmanager aus dem Editor-Team auf diese Weise eine komplette Seite baut.

Legen Sie zuerst das Aussehen fest. Erkunden Sie Richtungen mit schnellen Bildern und lassen Sie die KI die Seite dann als schlichtes HTML und CSS schreiben. HTML ist günstig zu ändern; hier feilen Sie an Layout, Texten und Farben.
Laden Sie Ihre Bilder hoch. Legen Sie die Bilder der Seite vor dem Bauen in die Mediathek, damit die KI sie verwenden kann, statt zu improvisieren.
Legen Sie das Designsystem an. Lassen Sie die KI das HTML lesen und Ihre Farben und Schriften als globale Variablen anlegen, wiederkehrende Stile – Buttons, Abschnittstitel, Karten – als globale Klassen. Halten Sie es schlank: In Elementors eigener Vorführung entstanden im ersten Durchgang über hundert Klassen, die auf rund sechzig allgemeine gekürzt wurden.
Bauen Sie einen Abschnitt nach dem anderen, mit einer kurzen Anweisung wie „baue den Preisabschnitt nach dem HTML mit unseren Klassen“. Kleine Schritte sind leichter zu prüfen und günstiger zu wiederholen.
Prüfen Sie jeden Abschnitt im Editor und in Mobilbreite, bevor Sie weitermachen. Das Elementor-Team sagt klar, dass das Ergebnis noch einen letzten Durchgang durch einen Menschen braucht – in ihrer Vorführung musste ein Bild für Mobilgeräte angepasst und ein Hero mit Tabs nachjustiert werden.

Sieben Erkenntnisse aus unserem Test

Wir haben Elementor 4.3.5 auf einer frischen WordPress-Installation verwendet, ohne Pro oder Angie, und eine Landingpage mit Hero, Logoleiste, sechs Feature-Karten, Kennzahlen, einem Testimonial, drei Preisplänen, einer FAQ, einem Call-to-Action-Band und einem Footer nachgebaut. Das Ergebnis lag sehr nah am Original. Diese Details haben uns Zeit gekostet:

Nebeneinander: links die ursprüngliche HTML-Landingpage, rechts dieselbe Seite, nachgebaut mit dem Elementor MCP. Sie sind fast identisch, nur haben die hervorgehobenen Wörter in der Überschrift rechts ihre Farbe verloren. — Links das ursprüngliche HTML, rechts die vom MCP gebaute Seite. Achten Sie auf die Überschrift: „whole team“ hat seine Farbe verloren – einer der Stile, die ohne Warnung weggefallen sind.

SVG-Icons hochzuladen braucht eine Einstellung. Das SVG-Element zeigt nur Icons aus der Mediathek, und WordPress lehnt SVG-Uploads standardmäßig ab. Aktivieren Sie in Elementor die Einstellung Ungefilterte Datei-Uploads aktivieren und laden Sie die Icons über die Medienauswahl von Elementor hoch.
Linien-Icons können gefüllt erscheinen. Das SVG-Element setzt die Füllung des Icons auf die aktuelle Textfarbe, sodass reine Linien-Icons – der Stil der meisten KI-generierten Seiten – als volle Flächen dargestellt werden. Eine transparente Textfarbe für das SVG-Element brachte die Umrisse zurück.
Die Reihenfolge der Klassen ist ihre Priorität. Setzen zwei globale Klassen dieselbe Eigenschaft, gewinnt die weiter oben in der Liste. Klassen stehen in der Reihenfolge, in der sie angelegt wurden; eine Klasse für kleine Buttons, die nach der Basis-Button-Klasse entsteht, würde ihr kleineres Padding verlieren. Wir haben die KI vor dem Bauen gebeten, die Modifikator-Klassen über die Basisklassen zu schieben.
Achten Sie auf stillschweigend verworfene Stile. Das meiste nicht unterstützte CSS meldet das Tool in seiner Antwort als Warnung – Rahmenfarben pro Seite, ein radialer Verlauf mit Größenangabe, ein separater Zeilenabstand. Einiges fiel aber ohne Warnung weg: Ein hervorgehobenes Wort in einer Überschrift verlor seine Farbe, und eine verschachtelte Regel für ein span in einem Preis griff nicht. Das findet man nur, wenn man sich die Seite ansieht und nicht nur die Antwort.
Textelemente haben feste Tags. Das Paragraph-Element akzeptiert nur p oder span; ein als <blockquote> ausgezeichnetes Zitat wird also zu einem normalen Absatz.
Planen Sie die Markierung des Akkordeons ein. In unserem Test erschien die Auf-/Zu-Markierung der FAQ nicht – weder mit leerem Icon-Platz noch ganz ohne ihn. Laut den Anweisungen des Tools selbst gehört in diesen Platz ein SVG-Element; geben Sie ihm also ein hochgeladenes Icon oder ergänzen Sie die Markierung später im Editor.
Nutzen Sie den Vorschaulink zur Selbstkontrolle. Der MCP kann eine temporäre Vorschau-URL des aktuellen Entwurfs erzeugen. Die KI nach jedem Abschnitt darauf schauen zu lassen, ist der günstigste Weg, Probleme früh zu erkennen.

Dieselbe Feature-Karte zweimal: links ist das Diagramm-Icon als dunkle volle Fläche dargestellt, rechts als die beabsichtigte dünne Linie. — Links der erste Bau: Das SVG-Element hat das Linien-Icon gefüllt. Rechts nach einer transparenten Textfarbe für das SVG-Element.

Zur Größenordnung: Die ganze Seite brauchte etwa dreißig Tool-Aufrufe – zwei davon scheiterten an unseren eigenen Fehlern (ein doppelter Elementname und ein Tag, den das Paragraph-Element nicht akzeptiert) und mussten erneut gesendet werden – und rund eine Viertelstunde Arbeit des Assistenten auf einem langsamen lokalen Testserver. Jede neue Sitzung beginnt außerdem damit, die Liste der Tools zu lesen, die der MCP anbietet, und das ist eine ganze Menge Text; kurze, klar abgegrenzte Sitzungen sind daher wirtschaftlicher als eine lange.

Wann ein einfacherer Weg besser passt

Der MCP ist die leistungsfähigste Option, wenn Sie bereits mit einem KI-Coding-Tool arbeiten und eine Seite auf einem sauberen Designsystem aufbauen möchten. Wenn Sie nur einen einzelnen Block in eine bestehende Seite einfügen wollen, kein KI-Tool nutzen oder das Ergebnis auf einer Website mit dem klassischen Editor brauchen, ist ein Konverter, der klassische Widgets erzeugt, der einfachere Weg – genau das macht der Konverter auf dieser Website, lokal in Ihrem Browser. Beides lässt sich auch gut kombinieren: Das fertige HTML aus Ihrem KI-Tool ist in beiden Fällen dieselbe Eingabe.

Kurz gesagt

Gestalten Sie in HTML, laden Sie Ihre Assets hoch, richten Sie ein kleines Designsystem ein und lassen Sie dann den MCP Abschnitt für Abschnitt bauen, während Sie jeden prüfen. Der Elementor MCP macht aus einem guten HTML-Design eine native, bearbeitbare Elementor-Struktur – und die Zeit, die Sie in die Vorbereitung stecken, sorgt für ein sauberes Ergebnis.

Dieser Leitfaden ist unabhängig und steht in keiner Verbindung zu Elementor. Er bezieht sich auf Elementor 4.3.5, getestet im Oktober 2026; Details können sich in späteren Versionen ändern.