Eindelijk! Elementor 4.0 is live gegaan!

Elementor 4.0 is op 1 april 2026 live gegaan, en dat is geen grap!

Toen Elementor in 2024 bekend maakte, dat er een compleet nieuwe editor editor zou komen, werd heel optimistisch ‘Spring 2025’ genoemd. Het is een jaartje later geworden, maar eindelijk is het er dan toch. Het belangrijkste verschil tussen Elementor 3 en Elementor 4 (en dat geldt ook voor de Elementor Pro edities) is een complete overhaul van het beoogde design systeem. ‘Beoogd’ design systeem inderdaad, want het ‘oude’ design systeem blijft in ieder geval voorlopig gewoon werken. Sterker nog, wanneer je van Elementor 3.x naar 4.0 update, dan zal je in eerste instantie niet veel verschil opmerken. De complete ‘twee kolommen’ interface die je in de afbeelding hierboven ziet, is er in één van de laatste 3.x versies al bijgekomen.

Het eerste wat je echter zal zien, wanneer je naar het Elementor menu toegaat, is de uitnodiging om de ‘Atomic Editor’, zoals ‘Editor V4’ nu voortaan officieel genoemd zal worden, te activeren. Maar voor je dit gaat doen, wil ik je toch eerste het volgende in overweging geven.

Elementor 3 en Elementor 4 – Een wereld van verschil

Voor je aan de slag gaat met het aanpassen van je site, is het een goed idee om eerst een staging kopie van je site te maken, daar de ‘Atomic Editor’ op te installeren en eerst de nieuwe functies te verkennen. Want het design systeem is werkelijk totaal anders. Het is veel krachtiger dan het ‘oude’ systeem, maar het vergt iets meer planning en je zal er toch even aan moeten wennen.

In een aantal blogartikelen heb ik in het afgelopen jaar meer over het werken met de nieuwe Elementor 4 editor verteld, en om een begin te maken, is het een goed idee deze nog eens na te lezen. En in de toekomst kan je meer artikelen over deze onderwerpen verwachten.

De ‘nieuwe manier’ van werken is door te werken met zogenaamde ‘atomaire elementen‘. Op deze atomaire elementen is het nieuwe designsysteem van toepassing. Werk je met de widgets, zoals deze van oudsher in Elementor voorkwamen, werk je nog steeds met het oude designsysteem.

Maar wat zijn nu eigenlijk de werkelijke verschillen.

Atomic Elements en het nieuwe designsysteem van Elementor

Tot en met Elementor 3.x was -om het even oneerbiedig te zetten- Elementor gebaseerd op het principe van ‘widgets op een pagina slepen’. Er is een voorgedefinieerd aantal widgets -die je overigens uit kan breiden met allerlei add ons – die widgets sleep je naar je pagina, stelt ze in en klaar zijn Kees en Klaartje.

Vanaf Elementor 4.0 werkt dit anders. Gelukkig voor jou -anders zou je alle pagina’s opnieuw op moeten bouwen- werkt het oude systeem met widgets ook nog steeds, maar verwacht van Elementor geen nieuwe widgets meer. Bestaande widgets blijven ondersteund worden, maar het Widget systeem wordt niet meer verder ontwikkeld. Natuurlijk is het nog steeds mogelijk, dat andere partijen hun bestaande widget collecties met nieuwe widgets uit gaan breiden.

Maar de basis van Elementor 4+ is niet langer ‘de widgets’, maar ‘Atomic Elements’. Of Atomaire Elementen, in het Nederlands.

Dat lijkt in eerste instantie een pleonasme. En in tweede instantie nog steeds. Want iedereen met een beetje basiskennis van scheikunde weet natuurlijk, dat een element een verzameling van hetzelfde type atomen is. Alle elementen zijn ‘atomair’, net zoals al het water nat is.

Een ‘atomair element’ in Elementor mag dan scheikundig (en daarmee ook taalkundig) geen juiste aanduiding zijn, het bekt wel lekker. Laten we eens nader bekijken, wat het in de praktijk is.

In het kort, Atomic Elements zij de kleinste visuele onderdelen van je webpagina. En die kleinste visuele onderdelen kan je samenvoegen tot zogenaamde ‘componenten’. Een component is -op dit moment- een Div block, een Flexbox of een Tab atomic element (gebruik hier niet een tab, container of Flexbox widget voor) met daarin een aantal Atomic Elements.

Het nadeel van het widget systeem, is dat je als designer beperkt was met betrekking tot de layout van de widget. Neem bijvoorbeeld de ‘CTA’ (Callout to Action) in Elementor. Een knop, een afbeelding, een koptekst en een wat langere tekst. De typische opbouw van een CTA. Maar de volgorde en de plaatsing van de elementen binnen je widget, daar had je weinig controle over.

Met Elementor 4 kan je met behulp van Atomic Elements je eigen CTA samenstellen, die je vervolgens als component opslaat. In de afbeelding hierboven zie je hoe er een tweede tab is met de titel ‘Components’. Daar komen alle componenten te staan die je hebt opgeslagen.

‘Maar wacht eens even’, zul je denken, ‘dus wat je mij eigenlijk vertelt is, dat het mij meer tijd gaat kosten om een website te maken, omdat ik eerst al die components moet gaan bouwen?’.

Ja en nee. Je moet inderdaad eerst je componenten gaan bouwen, maar dat bespaart je later in het proces heel veel tijd. En hier maakt het niet uit, of je nu een webdesigner bent, of gewoon je eigen website bijhoudt.

Componenten

Want heb je eenmaal je component gemaakt, dan hoef je het nergens meer aan te passen. Stel je de volgende situatie voor. In de widget opzet, heb je een CTA die je op meerdere plaatsen wilt gebruiken. Bijvoorbeeld met knoppen met sterk afgeronde hoeken en een afbeelding die ‘groeit’ wanneer je er overheen gaat.

Na die CTA op 20 plaatsen op je website geplaatst te hebben -gelukkig wist je al wel, dat je na het instellen van een widget, de instellingen als ‘default’ op kunt slaan, waardoor de volgende keer dat je deze gebruikt hij er precies hetzelfde uitzien- denk je toch, dat die knoppen best wat minder rond mogen. Natuurlijk hoef je die niet overal opnieuw in te tikken, want je weet ook dat je met ‘Copy’ en ‘Paste style’, je de stijl van een widget direct kunt kopiëren, maar je moet wel die 20 plaatsen in je site stuk voor stuk bezoeken, openen en de waarden inkopiëren.

En wanneer je er net klaar mee bent, bedenk je, dat die afbeelding die groeit toch wel veel onrust geeft… laten we dat hover effect maar achterwege laten… en je mag opnieuw al die pagina’s langs gaan om het hovereffect van de afbeelding aan te passen.

Wanneer je gebruik maakt van ‘components’, kan je direct het component wijzigen, en op alle plaatsen is het aangepast. Wil je meer lezen over componenten en atomaire elementen, ik heb hier het één en ander over geschreven toen Elementor 4 nog in beta was.

Class based stijlen vs Global Styles

Een ander belangrijk verschil tussen Elementor 3 en 4 is het directe gebruik van CSS classes (maar dan eenvoudig gemaakt door een visuele interface) voor de styling. En dat komt met een enorme hoeveelheid voordelen. Laten we nogmaals het voorbeeld van de CTA widget gebruiken.

In Elementor-oude-stijl heb je de ‘Global colors’, ‘Global fonts’ en ‘Theme style’.

Je kunt hier voor de hele website de ‘standaard kleuren’, ‘standaard lettertypes’ en voor de tekst en formulieren die vanuit ‘Tekstbewerker’ widgets is toegevoegd de weergave van die tekst instellen.

Hier lopen we echter opnieuw tegen een probleem aan. Stel, ik heb in een pagina een tekstverwerker widget. Maar in deze widget heb ik geen witte, maar een zwarte achtergrond nodig. Dat verandert natuurlijk het één en ander met betrekking tot de zichtbaarheid van de tekst. Zwart op zwart is vrij lastig te lezen. Nu kan je in de instellingen van de widget de kleur van de tekst wel aanpassen, maar de kleur van de links bijvoorbeeld niet.

Het enige wat je hier kunt doen is CSS code toevoegen aan de widget om ook de links een lichte kleur te geven. Maar dan moet je wel bekend zijn met CSS. Door de visuele interface voor CSS in Elementor 4 heb je geen kennis van CSS meer nodig om dit soort probleempjes de kop te bieden.

In Elementor 4 is letterlijk alles instelbaar en voor gebruik van classes en variabelen ook later makkelijk te wijzigen of te overrulen. Meer informatie over classes en variabelen vind je in een aantal eerder verschenen blogposts over Elementor 4

Alle elementen zijn dynamisch

In Elementor kan je al heel wat jaartjes gebruik maken van dynamische tags. Door achter een veld in een widget op een ‘stapel pannenkoeken’ te klikken, kan je gegevens dynamisch ophalen. Zoals bijvoorbeeld velden uit de WordPress database.

En op deze manier kan je heel makkelijk nieuwe ‘post types’ toevoegen aan je website en de informatie zichtbaar maken op je pagina’s. Dit kan in de ‘Widgets’ echter niet voor alle velden.

Omdat Componenten opgebouwd worden uit Atomic Elements en alle Atomic Elements over dynamische koppelingen beschikken, kan je bij componenten altijd alle velden dynamisch gebruiken. En dat kan dus heel interessant zijn. Stel je bijvoorbeeld voor, dat ik de achtergrondkleur van een heading af wil laten hangen van een veld uit een post. Ik kan dan een ACF veld toevoegen aan die post, waar een kleur ingevuld kan worden. In de instellingen van de stijl kan ik dan zeggen, dat de waarde uit een veld in de post moet worden gehaald.

Alle Elementen hebben responsive instellingen

Wat ik zelf behoorlijk vervelend vind in Elementor 3 en lager, is dat ik niet voor alle velden in een widget in kan stellen hoe iets eruit moet zien op een tablet of een mobiel.

Omdat atomaire elementen altijd instelbaar zijn voor meerdere devices, valt dit nadeel helemaal weg.

Nu naar de werkelijkheid

Dit klinkt natuurlijk allemaal heel mooi, maar we hebben hier ook te maken met de wrede werkelijkheid. En in die wrede werkelijkheid hebben we al een groot aantal sites gebouwd in Elementor 3 ter wereld gebracht. Moeten we die nu allemaal opnieuw bouwen?

Gelukkig niet. Want de Atomic Editor ondersteunt gelukkig ook ‘Elementor oude stijl’.

Iets anders om bij stil te staan, is dat het aantal atomic elements nog niet compleet is. Er wordt een aantal toch niet onbelangrijke elementen node gemist. Ik denk hier bijvoorbeeld aan een ‘Icon’ element, of containers met flexibele inhoud (denk bijvoorbeeld aan containers voor een slide- of flip- functionaliteit).

Ook had ik graag de ‘Atomic Button’ als ‘nestbaar’ gezien. Want op dit moment kan ik niet veel creatiefs met de ‘button’ doen. Buttons waarop ik afbeeldingen, meer tekst, of andere atomic elements zou kunnen plaatsen waren zeer welkom geweest.

Maar zo’n 60% van de op dit moment aanwezige widgets die standaard met Elementor Pro geleverd worden is op dit moment ‘na te bouwen’ als componenten.

Elementor 4 – Een mindshift

Het grootste probleem met de overgang naar Elementor 4 zal echter niet technisch zijn. De grootste aanpassing zal in je mindset plaats moeten vinden. Het design concept van Elementor 4 is totaal anders, dan dat van Elementor 3 en vraagt om een compleet andere workflow. Dat zal er -vrees ik- in de praktijk toe leiden, dat de meerderheid van de designers die met Elementor 3 werken, de werkelijke overstap naar de Elementor 4 editor niet durven wagen.

Mocht je toch meer avontuurlijk aangelegd zijn, en de stap naar Elementor Atomic Editor willen maken, dan help ik je hier graag mee.

In de komende tijd zijn er diverse trainingen ‘in den lande’ gepland, waar de nieuwe workflow nader wordt uitgelegd.

Nu Elementor 4 eenmaal verschenen is, zal ook de training ‘Elementor Pro voor Webdesigners’ geheel worden herzien. Mocht je zodra de cursusinhoud duidelijk is, meer informatie willen ontvangen, neem dan contact op via het contactformulier.