Claude vs ChatGPT: Welche KI baut die bessere WordPress-Seite? Unter meinem letzten Video kam genau diese Frage. Manche sagen, mit ChatGPT werden Elementor-Seiten besser als mit Claude. Also habe ich es getestet.
Beide haben exakt denselben Auftrag bekommen, auf derselben Testseite, über dasselbe Werkzeug: den offiziellen Elementor MCP, der direkt in Elementor steckt. Claude mit Opus 5.5, ChatGPT mit GPT-6-Astra in Codex, jeder auf der höchsten Stufe. Mein Ergebnis vorweg: Optisch sind beide auf Augenhöhe. ChatGPT war fast doppelt so schnell. Claude hat so gebaut, dass du die Seite hinterher viel leichter pflegst. Und mit zwei Sätzen im Auftrag bauen beide sauber. Die findest du weiter unten zum Kopieren.
Teil 5 der Serie „KI direkt in WordPress“
- Teil 1: MCP einfach erklärt: was das ist und was es bringt
- Teil 2: WordPress mit KI verbinden: Beiträge, SEO, Menüs, Gutenberg
- Teil 3: Elementor mit KI verbinden: der Weg mit EMCP Tools
- Teil 4: Elementor MCP einrichten: der offizielle Weg, Schritt für Schritt
- Teil 5: Claude vs ChatGPT: du bist hier
Das Wichtigste in Kürze
- Getestet habe ich Claude Opus 5.5 in Claude Code gegen GPT-6-Astra in ChatGPT Codex, beide auf der höchsten Stufe, beide über den offiziellen Elementor MCP.
- Optisch auf Augenhöhe. Beide Seiten sind vollständig, hochwertig und auf dem Handy sauber.
- ChatGPT war fast doppelt so schnell: 18 gegen 33 Minuten für zwei Runden.
- Claude baut pflegeleichter: 30 Klassen und 8 Variablen. ChatGPT schrieb 1.281 Werte einzeln an die Elemente.
- Mit zwei Sätzen im Auftrag bauen beide sauber, mit Klassen, Variablen und eigenen Hover-Farben.
- Zwei Fallen gab es bei beiden: Buttons werden beim Drüberfahren lila, und die gewählte Schrift lädt nicht. Beides behebst du in wenigen Minuten.
Der Test: gleicher Auftrag, gleiches Werkzeug
Ich baue seit 2018 Websites mit WordPress und Elementor. Mich interessiert deshalb nicht, was eine KI laut Werbung kann, sondern was hinten herauskommt. Den Auftrag kennst du vielleicht aus Teil 4: die Startseite für eine erfundene Physiotherapie-Praxis.
Sieben Abschnitte von oben nach unten: ein Kopfbereich mit zwei Buttons, drei Leistungen als Karten, ein Abschnitt über die Praxis mit einer Illustration, ein Band mit drei Zahlen, zwei Patientenstimmen, drei Fragen zum Aufklappen und ein Kontaktformular. Farben vorgegeben, dazu klare Regeln: nur echte Elementor-Elemente, die du hinterher im Editor anklicken und ändern kannst, kein HTML-Block, so wenig eigenes CSS wie möglich, keine globalen Website-Einstellungen ändern.
| Claude | ChatGPT | |
|---|---|---|
| Programm | Claude Code | Codex |
| Modell | Opus 5.5, höchste Stufe | GPT-6-Astra, höchste Stufe |
| Werkzeug | offizieller Elementor MCP | offizieller Elementor MCP |
| Elementor | 4.3.3, Testkopie meiner Website | 4.3.3, Testkopie meiner Website |
| Runden | bauen, dann verbessern | bauen, dann verbessern |
Jeder hat zwei Runden bekommen. Erst bauen, dann ein zweiter Auftrag: „Schau dir die Seite noch einmal Abschnitt für Abschnitt an und mach daraus die beste Version, die du kannst.“ Beide haben allein gearbeitet, ich habe nicht eingegriffen. Alle Zahlen in diesem Beitrag habe ich selbst gemessen, in der Datenbank der Testseite, statt den Berichten der KI zu glauben.
Claude vs ChatGPT: die beiden Seiten nebeneinander
Links Claude, rechts ChatGPT. Fahr mit der Maus über die Seiten, dann scrollen beide gemeinsam, und zwar so, dass immer derselbe Abschnitt auf gleicher Höhe steht. Mit den Buttons darunter springst du direkt zu einem Abschnitt. Oben schaltest du auf die Seiten um, die beide mit den zwei Sätzen gebaut haben. Was es damit auf sich hat, liest du weiter unten.
- 30 Klassen und 8 Variablen, von sich aus angelegt
- 219 Werte direkt an einzelnen Elementen
- 33 Minuten für beide Runden
- Serifenschrift Fraunces, wirkt edel
- 57 Klassen und 15 Variablen
- Kein einziger Wert direkt an einem Element
- 22 Minuten, eine Runde
- Kein Button wird beim Drüberfahren lila
- Keine Klassen, keine Variablen
- 1.281 Werte direkt an einzelnen Elementen
- 18 Minuten für beide Runden
- Eigener kleiner Praxis-Kopf, Platzhalter ehrlich markiert
- 46 Klassen und 15 Variablen
- Kein einziger Wert direkt an einem Element
- Knapp 10 Minuten, eine Runde
- Kein Button wird beim Drüberfahren lila
Fahr mit der Maus über die Seiten: Beide scrollen gemeinsam, Abschnitt für Abschnitt auf gleicher Höhe.Beide Seiten laufen gemeinsam durch, Abschnitt für Abschnitt auf gleicher Höhe. Tipp auf einen Abschnitt, um hinzuspringen. Gleicher Auftrag, gleiches Werkzeug, gleiche Testseite.
Was Claude gut gemacht hat
Die Seite wirkt edel. Überschriften in der Serifenschrift Fraunces, oben halb kursiv: „Bewegung braucht Zeit. Wir nehmen sie uns.“ Darunter Karten, die sich beim Drüberfahren anheben, und kleine Haken vor den Vorteilen im Kopfbereich.
Claude hat mitgedacht. Die Schrift auf den Korallen-Buttons ist dunkelgrün statt weiß. Im Bericht stand die Begründung: Weiß hätte auf Koralle nur einen Kontrast von 2,9 zu 1 und wäre schlecht lesbar. Das hat niemand verlangt.
Und Claude hat von sich aus ein kleines Design-System angelegt, mit Klassen und Variablen. Dazu gleich mehr, denn das ist der wichtigste Unterschied im ganzen Test.
Was ChatGPT gut gemacht hat
Tempo. Die erste Runde war nach weniger als neun Minuten fertig. Claude brauchte dafür 21.
Ein moderner, kräftiger Auftritt. Die Groteskschrift Manrope, sehr große Überschriften: „Wieder bewegen. Wieder wohlfühlen.“ Oben hat ChatGPT sich sogar einen kleinen Praxis-Kopf mit Namen gebaut, der gar nicht im Auftrag stand.
Ehrliche Platzhalter. Wo Angaben fehlten, steht sichtbar „[Straße und Hausnummer]“ oder „[Telefonnummer ergänzen]“. Die Patientenstimmen sind als Beispiel gekennzeichnet, mit dem Satz „Platzhaltertexte für den Entwurf, keine echten Patientenstimmen“. Claude hat dagegen echt wirkende Daten eingesetzt, dazu unten mehr.
Gleiche Grafiken bei beiden
Vielleicht wunderst du dich, dass Illustration und Symbole bei beiden gleich sind. Der offizielle Elementor MCP kann keine Bilder hochladen. Beide haben deshalb die Grafiken aus meiner Mediathek genommen, die vom Test in Teil 4 noch da waren. Gefunden haben sie beide selbst.
Auf dem Handy
Auf dem Handy stapelt sich bei beiden alles sauber untereinander, die Buttons werden breit und gut zu treffen. ChatGPT hat dafür 78 Regeln fürs Handy und 46 fürs Tablet geschrieben, jede einzeln an einem Element. Claude kam mit 31 aus, rund die Hälfte davon in den Klassen.
Tempo: ChatGPT ist fast doppelt so schnell
| Claude | ChatGPT | |
|---|---|---|
| Runde 1: bauen | 21,1 Minuten | 8,8 Minuten |
| Runde 2: verbessern | 11,5 Minuten | 9,6 Minuten |
| Gesamt | 32,6 Minuten | 18,4 Minuten |
| Aufrufe an die Website | 93 | 80 |
Beim Tempo gibt es einen klaren Sieger. Claude hat in der längeren Zeit aber auch mehr gemacht, und zwar etwas, das du auf der fertigen Seite nicht siehst. Du merkst es erst, wenn du die Seite pflegst.
Unter der Haube: der Unterschied, den du nicht siehst
Das neue Elementor arbeitet mit zwei Werkzeugen, die dir viel Arbeit sparen. Eine Variable ist ein Wert mit Namen, zum Beispiel „Salbeigrün“ oder „Überschriftenschrift“. Eine Klasse ist ein gespeicherter Stil, etwa „Karte“, den du an viele Elemente hängst. Änderst du die Variable oder die Klasse, ändern sich alle Stellen auf einmal.
Claude hat genau so gebaut: 30 Klassen, die an 123 Elementen hängen, und 8 Variablen für Farben und Schriften. Alle drei Leistungskarten benutzen dieselbe Klasse. ChatGPT hat keine einzige Klasse und keine Variable angelegt. Jede Farbe, jeder Abstand, jede Schrift steht einzeln an jedem einzelnen Element.
Gemessen, nicht geschätztAus der Datenbank gezählt, nicht aus dem Bericht der KI
- Claude
- ChatGPT
- Bauzeitzwei Runden, weniger ist schneller
- 32,6 Min18,4 Min
- Klassenmehr heißt pflegeleichter
- 300
- Variablen für Farben und Schriftenmehr heißt pflegeleichter
- 80
- Werte direkt an Elementenweniger ist besser
- 2191.281
- Feste Farbcodesweniger ist besser
- 7154
- Buttons und Links, die beim Drüberfahren lila werdenweniger ist besser
- 32
Erster Auftrag: Endstand nach zwei Runden, bauen und verbessern. Mit den zwei Sätzen: neue Seiten, je eine Runde. Beide Male Elementor 4.3.3, offizieller Elementor MCP, dieselbe Testseite.
Was heißt das für dich? Stell dir vor, die Praxis will ein anderes Grün. Bei Claude änderst du eine Variable, und die ganze Seite zieht mit. Bei ChatGPT steht derselbe Farbcode an 154 Stellen. Viel Spaß beim Suchen. Oder du lässt es wieder die KI machen und hoffst, dass sie keine Stelle vergisst.
Das Spannende: Im Auftrag stand „so wenig eigenes CSS wie möglich“, und eigene Klassen waren ausdrücklich erlaubt. ChatGPT hat trotzdem an 71 Stellen eigenes CSS geschrieben und im Bericht erklärt, die Farben und Abstände blieben so auf diese Seite beschränkt. Es wollte also vermutlich nichts außerhalb der Seite verändern. Gut gemeint, aber das Gegenteil von pflegeleicht.
Alle Messwerte
| Claude | ChatGPT | |
|---|---|---|
| Elemente | 150, alle neue Atomic-Bausteine | 155, alle neue Atomic-Bausteine |
| Klassen | 30, an 123 Elementen | keine |
| Variablen | 8 (5 Farben, Weiß, 2 Schriften) | keine |
| Werte direkt an Elementen | 219 an 53 Elementen | 1.281 an allen 155 |
| Eigenes CSS | 10 Stellen | 71 Stellen |
| Feste Farbcodes | 7 | 154 |
| Schriften | Fraunces und DM Sans, als Variable | Manrope und DM Sans, jedes Mal einzeln |
| Regeln fürs Handy | 31 | 78, dazu 46 fürs Tablet |
| Hover-Effekte | 8 | 22 |
| HTML-Blöcke | keine | keine |
| Im Navigator benannt | alle Elemente | alle Elemente |
Beide haben sich also an die wichtigste Regel gehalten: nur echte Elementor-Elemente, kein HTML-Block. Du kannst bei beiden Seiten jedes Element im Editor anklicken und ändern. Der Unterschied liegt darin, wie viel Arbeit eine Änderung macht.
Zwei Sätze, mit denen beide sauber bauen
Liegt das an der KI, oder lässt sich das ändern? Ich habe beiden denselben Auftrag noch einmal gegeben, auf neuen Seiten. Mit zwei Sätzen mehr.
Satz eins sorgt für Ordnung. Er sagt der KI, dass sie Farben und Schriften als Variablen anlegen und für alles, was sich wiederholt, Klassen nutzen soll.
Satz zwei kümmert sich um Hover, also um das, was passiert, wenn du mit der Maus über einen Button fährst. Das vergisst fast jede KI, wie du gleich siehst.
Die zwei SätzeEinfach ans Ende deines Auftrags setzen, egal ob Claude oder ChatGPT.
Lege Farben und Schriften als Variablen an und nutze für alles, was sich wiederholt, Klassen. Schreib so wenig wie möglich direkt an einzelne Elemente. Prüf am Ende alle Hover-Effekte, vor allem bei Buttons und Links: Gib ihnen eigene Farben, die zur Seite passen, damit nichts die Standardfarben der Website übernimmt.
Und das Ergebnis: Beide haben beide Sätze verstanden.
| Mit den zwei Sätzen | Claude | ChatGPT |
|---|---|---|
| Dauer, eine Runde | 22,3 Minuten | 9,6 Minuten |
| Klassen | 57 | 46 (vorher keine) |
| Variablen | 15 | 15 (vorher keine) |
| Werte direkt an Elementen | 0 (vorher 219) | 0 (vorher 1.281) |
| Feste Farbcodes | 2 | 2 (vorher 154) |
| Lila beim Drüberfahren | 0 (vorher 3) | 0 (vorher 2) |
Bei beiden steht kein einziger Wert mehr direkt an einem Element, und kein Button wird mehr lila. Schon Satz eins allein wirkt: In einem Zwischentest mit nur diesem Satz kam ChatGPT auf 45 Klassen und 9 Variablen. Und schön sind beide Seiten auch geworden, schalt oben im Vergleich auf „Mit den zwei Sätzen“.
Heißt für dich: Egal welche KI du nimmst, schreib diese zwei Sätze in deinen Auftrag. Das kostet dich zehn Sekunden und spart dir später eine Menge Arbeit.
Noch bequemer: Schreib sie einmal in die Datei mit den Anweisungen für dein Projekt. Claude Code liest dafür die Datei CLAUDE.md, Codex die Datei AGENTS.md. Dann gelten die Sätze bei jedem Auftrag, ohne dass du daran denken musst.
Die Hover-Falle: warum Buttons plötzlich lila werden
Fahr bei den Seiten aus dem ersten Auftrag mit der Maus über „Termin anfragen“, und die Schrift wird plötzlich lila. Bei Claude betraf das drei Buttons und Links, bei ChatGPT zwei. Gemessen habe ich das, indem ich den Hover-Zustand im Browser für jeden Button erzwungen habe.
Lila ist keine Idee der KI. Die Buttons sind technisch Links. Für das Drüberfahren haben beide KIs einen neuen Hintergrund gesetzt, aber keine eigene Schriftfarbe. Dann greift die Farbe, die in den Website-Einstellungen für Links beim Drüberfahren hinterlegt ist. Auf meiner Testseite ist das ein kräftiges Lila. Bei dir kann es jede andere Farbe sein, passen wird sie selten.
Die Lösung ist Satz zwei. Damit hat keine der beiden KIs mehr einen Button vergessen. Und unabhängig davon: Fahr vor dem Veröffentlichen mit der Maus über jeden Button und jeden Link einer KI-Seite. Wo die Standardfarben deiner Website stehen, siehst du in Elementor in den Website-Einstellungen: für Links unter Typografie, für Buttons im Bereich Buttons, jeweils mit einem eigenen Reiter für Hover.
Die Schrift-Falle: Times statt der schönen Schrift
Beide KIs haben sich schöne Schriften ausgesucht. Claude Fraunces und DM Sans, ChatGPT Manrope und DM Sans. Geladen wurden sie aber nicht. Auf meiner Website ist Google Fonts in Elementor aus Datenschutzgründen abgeschaltet. Dann sieht dein Besucher statt der gewählten Schrift die Ersatzschrift seines Geräts, meist Times.
Das Tückische: Du selbst merkst es oft nicht. Auf meinem Mac sind DM Sans und Manrope installiert, deshalb sah die Seite bei mir richtig aus. Ein Besucher ohne diese Schriften bekommt Times. Schau dir eine neue Seite deshalb immer auch auf einem anderen Gerät an, zum Beispiel auf dem Handy.
Die Lösung sind zwei Schalter in Elementor. Beide findest du in WordPress unter Elementor, Einstellungen.
Schalter 1, Reiter Erweitert: Google Fonts auf „Aktivieren“ stellen.
Schalter 2, Reiter Leistung: „Google Fonts lokal laden“ auf „Aktivieren“ stellen.
Dann lädt Elementor die Schriften einmal herunter und liefert sie von deinem eigenen Server aus. Der Browser deiner Besucher verbindet sich nicht mehr mit Google. Ich habe das auf der Testseite nachgeprüft: Danach spricht die Seite nur noch mit dem eigenen Server, und die Schriften sind da. Damit fällt der Grund weg, aus dem viele Google Fonts komplett abschalten.
Was sonst auffiel
Platzhalter: ehrlich markiert oder echt wirkend
ChatGPT hat fehlende Angaben sichtbar markiert. Claude hat echt wirkende Daten eingesetzt, eine Adresse wie „Parkallee 12, 12345 Musterstadt“, eine Telefonnummer und zwei erfundene Patientenstimmen mit Vornamen. Gewarnt hat Claude nur im Bericht: Erfundene Stimmen seien wettbewerbswidrig und müssten vor dem Livegang ersetzt werden. Das stimmt, auf der Seite selbst stand davon aber nichts. Prüf deshalb vor dem Veröffentlichen jeden Text, egal welche KI gebaut hat.
Beide bauen blind
Keine der beiden KIs sieht die fertige Seite. Sie arbeiten über den MCP direkt in den Daten von Elementor, ohne Browser. Beide haben mich am Ende gebeten, die Seite auf dem Handy anzuschauen. Mach das immer, das ist dein Job.
Das Formular schickt noch nirgends hin
Bei Claude passiert nach dem Absenden nichts, weil die Empfängeradresse fehlte. ChatGPT speichert die Anfragen in Elementor, verschickt aber keine E-Mail. Empfänger und Datenschutz-Häkchen trägst du bei beiden selbst ein. Für das Formular brauchst du Elementor Pro.
Claude hat die Seitenvorlage umgestellt
Claude hat die Seite von sich aus auf die Vorlage „Elementor Volle Breite“ gestellt, damit Kopf und Fuß der Website erscheinen. ChatGPT blieb bei der leeren Vorlage und baute sich einen eigenen kleinen Kopf. Für einen fairen Vergleich habe ich beide Seiten auf dieselbe Vorlage ohne Kopf und Fuß gestellt.
ChatGPT mit Elementor verbinden
Codex ist das Programm von ChatGPT, das selbstständig arbeitet, so wie Claude Code bei Claude. Der Weg in Elementor ist derselbe, den ich dir in Teil 4 Schritt für Schritt für Claude zeige. Nur im zweiten Schritt wählst du einen anderen Reiter.
- Atomic Editor einschalten: Elementor, Einstellungen, Reiter Atomic Editor, „Aktiviere die neue Erfahrung“. Falls du das schon für Claude gemacht hast, ist es erledigt.
- Zugang erzeugen: Unter Elementor, Elementor MCP schaltest du den Zugang ein und wählst den Reiter Codex. Häkchen setzen, dass ein Anwendungspasswort angelegt wird, dann „Generate Prompt“ und „Copy prompt“.
- In Codex einfügen: Füg den Text in Codex ein und schick ihn ab. Codex trägt die Verbindung in seine Einstellungsdatei ein. Danach startest du Codex neu, neue Verbindungen kennt es erst in einer neuen Sitzung. Frag zum Test: „Welche Seiten gibt es auf meiner Testseite?“
Codex fragt dich beim Arbeiten, ob es auf Elementor zugreifen darf. Das erlaubst du. Codex ist in ChatGPT enthalten, für so einen Auftrag brauchst du aber ein bezahltes Abo wie Plus. Und wie bei Claude gilt: Im Einrichtungstext steht ein Passwort für deine Website. Füg ihn nur in dein eigenes Codex ein und probier alles zuerst auf einer Testkopie deiner Website.
Claude oder ChatGPT: Welche KI nimmst du?
Du willst schnell einen schönen Entwurf, zum Testen oder zum Zeigen? Dann ist ChatGPT mit Codex richtig stark. Fast doppelt so schnell und optisch auf Augenhöhe.
Du baust eine Seite, die du lange pflegst, deine eigene oder die eines Kunden? Dann hat Claude die Nase vorn, weil es von sich aus mit Klassen und Variablen baut.
Und mit den zwei Sätzen bauen beide sauber. Dann bleiben am Ende nur noch zwei Unterschiede: das Tempo und dein Geschmack.
Meine ganz persönliche Meinung
Ich arbeite selbst mit Claude, und mir fehlt nichts. Aber ehrlich: Es ist fast egal, was du nimmst. Nach dem ersten großen ChatGPT-Hype kam auf einmal Anthropic mit Claude, und Opus war und ist der Wahnsinn. Dann kam Astra, natürlich mit einem riesigen Hype. Und ich vermute, Anthropic legt bald wieder nach.
So fühlt es sich für mich an: Ein halbes Jahr ist das eine zwei Prozent besser, dann das andere ein Prozent, und so weiter. Zum Glück gibt es beide, die Konkurrenz macht beide besser. Wer mit ChatGPT arbeitet, wird genauso wenig etwas vermissen. Nimm das Abo, das du sowieso hast. Beide verbinden sich in ein paar Minuten mit Elementor.
Den Test selbst nachbauen
Hier der komplette Auftrag mit den zwei Sätzen. Gib ihn deiner KI auf einer Testkopie deiner Website, nie auf der Seite, auf der gerade deine Kunden landen. Viele Hoster bieten so eine Kopie mit einem Klick an, meist unter dem Namen Staging.
Der ganze Testauftrag mit den zwei SätzenDamit baust du den Vergleich auf deiner eigenen Testseite nach. Die KI legt die Seite selbst neu an.
Bau auf meiner Testseite eine neue Startseite für eine Physiotherapie-Praxis. Leg dafür eine neue Seite an. Sie bleibt ein Entwurf, nichts veröffentlichen. Die Praxis: Physiotherapie am Park. Vier Therapeuten, seit 18 Jahren am Stadtpark, alle Kassen und privat, Termine auch abends. So soll sie wirken: ruhig, hochwertig, vertrauenswürdig. Wie eine moderne Praxis, nicht wie eine Vorlage. Farben: Salbeigrün #2F6B5E als Hauptfarbe, ein dunkles Grün #1E3F38 für dunkle Flächen, warmes Sand #F5F0E8 als heller Grund, Koralle #E07A5F nur für die wichtigsten Buttons. Überschriften groß und kräftig, Fließtext gut lesbar, viel Weißraum. Aufbau von oben nach unten: 1. Kopfbereich in voller Breite mit einem weichen Verlauf von Salbeigrün zu Dunkelgrün. Große Überschrift mit höchstens sieben Wörtern, ein Satz darunter, zwei Buttons: "Termin anfragen" in Koralle und "Leistungen ansehen" als Umriss. Darunter eine kleine Zeile: Alle Kassen und privat, Termine auch abends. 2. Drei Leistungen nebeneinander: Krankengymnastik, Manuelle Therapie, Massage. Jede als weiße Karte mit abgerundeten Ecken, leichtem Schatten, einem schlichten Symbol als Linienzeichnung in Salbeigrün, Überschrift, zwei Zeilen Text. Beim Überfahren hebt sich die Karte leicht an. 3. Über die Praxis: Text links mit einem kurzen Absatz und drei Punkten, warum man hier richtig ist. Rechts statt eines Fotos eine schlichte Illustration als SVG in den Farben der Seite, zum Beispiel ein Baum im Park. 4. Ein dunkelgrünes Band mit drei großen Zahlen nebeneinander: 18 Jahre, 4 Therapeuten, über 2000 Patienten. 5. Zwei kurze Patientenstimmen als Karten, je ein Satz und ein Vorname. 6. Drei häufige Fragen zum Aufklappen: Brauche ich ein Rezept? Was kostet eine Behandlung privat? Wie schnell bekomme ich einen Termin? 7. Kontakt in zwei Spalten. Links Adresse, Telefon und Öffnungszeiten. Rechts ein Formular mit Name, E-Mail, Telefon, Nachricht und dem Button "Termin anfragen". Auf dem Handy stapelt sich alles sauber untereinander. Regeln: - Nur echte Elementor-Elemente, die man hinterher im Editor anklicken und ändern kann. Kein HTML-Block, so wenig eigenes CSS wie möglich. - Keine globalen Website-Einstellungen ändern. Eigene Klassen oder Variablen bekommen das Präfix physio-. - Abschnitte im Navigator sinnvoll benennen. - Lege Farben und Schriften als Variablen an und nutze für alles, was sich wiederholt, Klassen. Schreib so wenig wie möglich direkt an einzelne Elemente. - Prüf am Ende alle Hover-Effekte, vor allem bei Buttons und Links: Gib ihnen eigene Farben, die zur Seite passen, damit nichts die Standardfarben der Website übernimmt. Bau zuerst alles, dann prüf die Struktur und bessere nach, was fehlt oder nicht passt. Sag mir am Ende kurz, was du gebaut hast und was du nicht umsetzen konntest.
Häufige Fragen
Ist Claude oder ChatGPT besser für WordPress und Elementor?
Im Test lagen beide optisch gleichauf. ChatGPT war fast doppelt so schnell, Claude baute von sich aus mit Klassen und Variablen und damit deutlich pflegeleichter. Mit zwei zusätzlichen Sätzen im Auftrag bauen beide sauber. Nimm am besten das Abo, das du schon hast.
Kann ChatGPT Elementor-Seiten bauen?
Ja. Mit Codex, dem Programm von ChatGPT, und dem offiziellen Elementor MCP baut ChatGPT echte Elementor-Seiten, die du hinterher im Editor ändern kannst. Elementor hat dafür in den Einstellungen des MCP einen eigenen Reiter Codex.
Was kostet das?
Der Elementor MCP ist kostenlos in Elementor eingebaut. Du zahlst nur dein KI-Abo: Für Claude Code brauchst du mindestens das Pro-Abo von Claude, für Codex ein bezahltes ChatGPT-Abo wie Plus. Elementor Pro brauchst du nur für Formulare und den Theme Builder.
Welche Modelle hast du getestet?
Claude Opus 5.5 in Claude Code und GPT-6-Astra in Codex, beide auf der höchsten Stufe. Getestet am 10. und 11. Oktober 2026 mit Elementor 4.3.3 und dem offiziellen Elementor MCP, auf einer Testkopie meiner Website.
Warum wird mein Button beim Drüberfahren lila?
Weil die KI dem Button beim Drüberfahren keine eigene Schriftfarbe gegeben hat. Dann greift die Linkfarbe aus den Website-Einstellungen von Elementor. Schreib in deinen Auftrag, dass die KI am Ende alle Hover-Effekte prüfen und ihnen eigene Farben geben soll.
Warum lädt die Schrift auf meiner Elementor-Seite nicht?
Meist ist Google Fonts in Elementor abgeschaltet. Schalte unter Elementor, Einstellungen, Erweitert Google Fonts ein und unter Leistung „Google Fonts lokal laden“. Dann kommen die Schriften von deinem eigenen Server, ohne Verbindung zu Google.
Kann die KI die fertige Seite sehen?
Nein. Claude und ChatGPT arbeiten über den MCP direkt in den Daten von Elementor und sehen die Seite nicht im Browser. Schau sie dir deshalb immer selbst an, auch auf dem Handy, und fahr mit der Maus über alle Buttons.
Was sind Klassen und Variablen in Elementor?
Eine Variable ist ein Wert mit Namen, etwa eine Farbe oder eine Schrift. Eine Klasse ist ein gespeicherter Stil, den du an viele Elemente hängst. Änderst du eine Variable oder Klasse, ändern sich alle Stellen auf einmal. Beides gibt es mit dem neuen Atomic Editor von Elementor.
Mein Fazit
Claude vs ChatGPT geht bei Elementor-Seiten unentschieden aus, mit zwei klaren Unterschieden: ChatGPT ist schneller, Claude baut von Haus aus pflegeleichter. Mit den zwei Sätzen im Auftrag verschwindet der zweite Unterschied fast ganz. Prüf bei beiden die Texte, fahr über jeden Button und schau dir die Seite auf dem Handy an.
Und jetzt du: Welche Seite gefällt dir besser, links Claude oder rechts ChatGPT? Schreib es mir in die Kommentare unter dem Video.
2 Kommentare
Hi Stefan
Danke für deine Tests und Videos. Mir gefällt die linke Website von claude besser.
Noch ne frage; Kann claude nicht auch die Globalen Farben und Schriften von Elementor nutzen? Die wären doch genau für sowas gedacht.
Gruss Thomas
Danke für deine Rückmeldung, Thomas, und schön, dass dir die Claude-Seite besser gefällt.
Gute Frage, da steckt eine Eigenheit von Elementor 4 dahinter: Die neuen Atomic-Elemente, mit denen der offizielle Elementor MCP baut, arbeiten mit Variablen und Klassen statt mit den alten globalen Farben und Schriften aus den Website-Einstellungen. Der MCP kann laut Elementor auch nur diese neuen Variablen anlegen.
In meinem Test stand außerdem im Auftrag, dass die globalen Einstellungen unangetastet bleiben, und die Farben waren vorgegeben. Deshalb hat Claude eigene Variablen angelegt, die auf der ganzen Website nutzbar sind.
Willst du sie auch in klassischen Widgets nutzen: Im Variablen-Manager kannst du jede Variable mit den globalen Farben oder Schriften synchronisieren. Andersherum geht es laut Elementor noch nicht automatisch, das soll später kommen. Mit EMCP kommt die KI übrigens auch an die alten globalen Farben und Schriften ran.