Elementor V4: Was sich mit Elementor 4.0 ändert und wie ihr umsteigt

Elementor V4 ist kein Update wie die vorherigen. Elementor 4.0 erschien am 30. März 2026 und bringt einen neuen Unterbau: Ihr gestaltet nicht mehr jedes Element einzeln, sondern arbeitet mit Klassen, Variablen und Komponenten. Bestehende Seiten laufen unverändert weiter. Was neu ist, wie ihr umsteigt und wo es im Oktober 2026 noch hakt, steht in diesem Beitrag.

Elementor V4 (Elementor 4.0): die Neuerungen im Überblick

Die neuen Bausteine heißen bei Elementor „Atomic Elements“. Neue Installationen starten direkt damit. Das ändert sich:

• Klassen: Ihr legt einen Stil einmal an, etwa „button-primaer“, und gebt ihn allen passenden Elementen. Ändert ihr die Klasse, ändern sich alle Buttons. Verwaltet werden die Klassen im Class Manager.
• Variablen: Farben, Schriften und Größen stehen zentral. Eine neue Markenfarbe tragt ihr an einer Stelle ein.
• Zustände: Hover, Fokus und Aktiv gestaltet ihr direkt am Element, ohne eigenes CSS.
• Komponenten (Pro): Wiederkehrende Bereiche wie ein Kopfbereich oder eine Referenzbox bleiben überall gleich. Einzelne Felder könnt ihr pro Einsatz freigeben, etwa Text und Bild.
• Ein Style-Tab für alles: Alle neuen Elemente teilen sich denselben Aufbau. Jede Eigenschaft lässt sich pro Gerät einstellen.
• Schlankeres HTML: Jedes Element hat nur noch einen Wrapper statt mehrerer verschachtelter.
• Atomic Forms und Interactions (Pro): Formulare aus den neuen Elementen und Animationen, die auf Scrollen, Hover oder Klick reagieren, einstellbar pro Breakpoint.

Elementor V3 und V4 im Vergleich

Ihr könnt V4 auch wie V3 benutzen und jedes Element einzeln gestalten. Dann verschenkt ihr aber genau das, was V4 besser macht.

Umsteigen in fünf Schritten

Ein Werkzeug, das alte Seiten automatisch auf die neuen Elemente umbaut, gibt es nicht. Der Umstieg ist Handarbeit, und er lohnt sich am meisten, wenn ihr ihn planvoll angeht.

1. In der Testumgebung beginnen. Kopiert die Website auf eine Staging-Umgebung. Dort probiert ihr V4 aus, ohne die echte Seite zu gefährden.
2. V4 einschalten. Bei bestehenden Installationen erscheint im Elemente-Panel ein Hinweis zum Einschalten. Abschalten lässt es sich unter Elementor → Editor → Settings → Atomic Editor.
3. Zuerst die Variablen. Legt Farben, Schriften und Abstände mit funktionalen Namen an, etwa „farbe-marke“, „text-leise“, „abstand-m“. Das ist euer Fundament.
4. Dann Klassen und Komponenten. Baut Buttons, Überschriften und wiederkehrende Bereiche als Klassen und Komponenten. Benennt sie klar, damit auch Kolleg:innen sie finden.
5. Seiten nach und nach umbauen. Fangt mit neuen Seiten und Landingpages an. Alte Seiten baut ihr um, wenn ihr sie ohnehin überarbeitet. V3- und V4-Elemente vertragen sich auf derselben Seite. Prüft nach jedem umgebauten Bereich drei Dinge: ob Formulare noch ankommen, ob Popups gestaltet erscheinen und ob die Seite mit eingeschaltetem Caching genauso aussieht wie im Editor.

Eine Warnung aus der Praxis: Wer im Editor eine Klasse bearbeitet, ändert sie überall. Soll nur ein einzelner Button anders aussehen, prüft vorher, ob ihr gerade die Klasse oder nur das Element bearbeitet.

Klassen und Variablen benennen: ein Beispiel

Ob V4 euch Arbeit spart, entscheidet sich an den Namen. Benennt nach Aufgabe, nicht nach Aussehen. „button-blau-gross“ stimmt nach dem nächsten Rebranding nicht mehr, „button-primaer“ schon. Ein kleines System für eine Unternehmenswebsite kann so aussehen:

• Farben: farbe-marke, farbe-akzent, text-standard, text-leise, hintergrund-hell, hintergrund-dunkel
• Abstände: abstand-s, abstand-m, abstand-l, abstand-xl
• Schriftgrößen: text-klein, text-normal, ueberschrift-m, ueberschrift-l
• Klassen: button-primaer, button-sekundaer, karte, bereich-hell, bereich-dunkel

Mit 20 bis 30 Variablen und einer Handvoll Klassen kommt eine typische Unternehmenswebsite gut aus. Wer jeden Sonderfall als eigene Klasse anlegt, hat bald wieder das Durcheinander, das V4 beseitigen soll.

Typische Fehler beim Umstieg

• Klassen stapeln. Fünf Klassen auf einem Element, die sich gegenseitig überschreiben, versteht nach drei Monaten niemand mehr. Eine Grundklasse und höchstens eine Abwandlung reichen meist.
• Alt und neu doppelt pflegen. Die globalen Farben aus V3 und die neuen Variablen parallel zu führen, sorgt für zwei Wahrheiten. Legt fest, welche gilt, und zieht die andere nach und nach ab.
• Add-ons nicht prüfen. Viele Add-ons für V3 arbeiten nicht mit den neuen Elementen zusammen. Prüft vor dem Umstieg, welche ihr noch braucht und ob es Fassungen für V4 gibt.
• Ohne Testumgebung umbauen. Wer auf der echten Seite experimentiert, ändert im Zweifel eine Klasse, die auf 40 Seiten steckt.

Beispiel: eine Landingpage mit Elementor V4 bauen

Eine Landingpage ist der beste Einstieg in V4, weil sie klein ist und ein klares Ziel hat.

1. Ziel festlegen. Eine Landingpage hat eine Aufgabe: eine Anfrage, eine Anmeldung, ein Download. Alles auf der Seite arbeitet darauf hin.
2. Leere Seite anlegen und die Vorlage „Elementor Canvas“ oder eure Vorlage mit Kopf- und Fußbereich wählen.
3. Aufbau mit Containern: Kopfbereich mit klarer Überschrift und einer Handlung, darunter Nutzen, Belege, Fragen und noch einmal die Handlung.
4. Gestalten nur über eure Klassen und Variablen. So sieht die Landingpage aus wie der Rest der Website, und Änderungen an der Marke kommen automatisch an.
5. Formular mit Atomic Forms (Pro) oder eurem bisherigen Formular-Plugin. Fragt nur ab, was ihr wirklich braucht.
6. Mobil prüfen und messen. Schaut euch die Seite auf dem Handy an und prüft sie mit PageSpeed Insights. Google bewertet gute Seiten mit einem LCP bis 2,5 Sekunden, einem INP unter 200 Millisekunden und einem CLS unter 0,1.

Bekannte Probleme, Stand Oktober 2026

V4 ist seit über einem halben Jahr fertig, aber nicht ohne Ecken. In Foren und bei Anbietern von Add-ons tauchen immer wieder dieselben Punkte auf:

• Popups ohne Gestaltung: Bei Popups, die per Klick öffnen, fehlt teils das CSS der neuen Elemente.
• Konflikte mit Caching-Plugins wie LiteSpeed Cache oder WP Rocket, wenn CSS zusammengefasst oder verzögert wird.
• Fehlende Funktionen: Einiges aus V3 gibt es in V4 noch nicht, etwa die Anbindung von Adobe Fonts.
• Viele kleine Updates: Nach Version 4.3 folgten mehrere Korrekturen in kurzer Folge. Testet Updates zuerst auf der Staging-Umgebung.

Wie ihr typische Fehler findet und behebt, steht in Elementor-Fehler und Probleme.

Lohnt sich der Umstieg auf Elementor V4?

Für neue Projekte mit Elementor: ja. Klassen, Variablen und Komponenten machen eine Website einheitlicher und leichter zu pflegen, und ihr müsst sie später nicht noch einmal umbauen.

Drei Fälle, wie wir sie bei Kund:innen sehen:

• Eine kleine Website, die gut läuft und selten geändert wird: bei V3 bleiben, Updates einspielen, mehr nicht.
• Eine Website mit vielen Landingpages oder Kampagnen: neue Seiten in V4 bauen, das Gestaltungssystem dafür einmal sauber anlegen.
• Eine gewachsene Website mit vielen Add-ons und uneinheitlicher Gestaltung: nicht flicken, sondern den Neuaufbau planen.

Für bestehende Seiten, die gut laufen: nicht sofort. Plant den Umstieg für das nächste Redesign ein. Dann lohnt sich auch die Frage, ob Elementor überhaupt das richtige Werkzeug bleibt. Wir bauen neue Kundenprojekte inzwischen mit Bricks und pflegen bestehende Elementor-Seiten weiter. Warum, erklären wir in Bricks vs. Elementor V4.

Ihr wollt wissen, ob sich ein Umstieg oder ein Neuaufbau bei eurer Seite lohnt? Auf der Seite Websites & Relaunch könnt ihr eine kostenlose Erstberatung anfragen.