Naar de inhoud

Kennisbank · Webdevelopment

Wat is de Elementor page builder?

16 min leestijd
elementor

Elementor is een paginabouwer voor WordPress. Je sleept blokken op een pagina, stelt ze in via een zijbalk en ziet direct wat er verandert, zonder dat je code schrijft.

Het is de meestgebruikte bouwer voor WordPress, met meer dan tien miljoen actieve installaties volgens wordpress.org. Dat levert je veel op. Het verklaart ook waarom Elementor de meeste klachten krijgt over trage sites en de meeste aandacht van aanvallers.

Hoe de editor werkt

Je opent een pagina in de bouwer en werkt in de echte weergave van je site. Links staat een paneel met widgets die je naar de pagina sleept: een tekstblok, een knop, een afbeelding, een video, een formulier.

Klik je een widget aan, dan verandert dat paneel in de instellingen ervan, verdeeld over drie tabbladen. Inhoud is wat er staat. Stijl is hoe het eruitziet. Geavanceerd is waar je marges, achtergronden, animaties en zichtbaarheid per schermbreedte regelt. Dat derde tabblad gebruik je het vaakst en het ligt het minst voor de hand.

De opbouw van een pagina was lange tijd secties met kolommen, en daarin widgets. Sinds versie 3.6 uit het voorjaar van 2022 bestaat er een tweede opbouw op basis van flexbox, de container. Vanaf versie 3.16 uit 2023 is dat bij nieuwe sites de standaard. Containers leveren minder omhulsels op en meer grip op uitlijning.

Wat je maakt, kun je bewaren als sjabloon en elders invoegen. Dat onderdeel ontdekken mensen meestal te laat. Bij een site van twintig pagina's scheelt het een halve dag.

Gratis of Pro

De gratis versie staat in de pluginmap van WordPress en bevat de bouwer met een set basiswidgets: koppen, tekst, afbeeldingen, knoppen, iconen, video, tabbladen, een accordeon. Daarmee maak je een nette pagina.

Elementor Pro is een jaarabonnement per aantal sites. Het voegt toe waar een bedrijfssite op stukloopt: een formulierwidget met koppelingen naar je mailprogramma, de Theme Builder, een popupbouwer, widgets voor WooCommerce, dynamische inhoud uit eigen velden, en weergavevoorwaarden waarmee je bepaalt waar een sjabloon geldt.

Voor de actuele bedragen kijk je op de site van Elementor zelf. Wat daar minder opvalt: Pro staat niet in de pluginmap, dus updates lopen via je licentiesleutel. Vul je die niet in, dan krijg je geen automatische updates en merk je dat pas als er iets misgaat.

Loopt je abonnement af, dan blijft je site werken. Je krijgt alleen geen updates en geen ondersteuning meer. Gezien wat er verderop over beveiliging staat, is dat de verkeerde plek om te bezuinigen.

De Theme Builder

Dit is het onderdeel van Pro dat het meeste verschil maakt en dat in korte uitleg altijd ontbreekt.

Normaal bepaalt je thema hoe je koptekst, je voettekst, je blogartikel en je archiefpagina's eruitzien. Met de Theme Builder ontwerp je die onderdelen zelf in dezelfde bouwer, en geef je per sjabloon aan waar het geldt: overal, alleen op blogartikelen, alleen binnen één categorie.

Daarmee heb je je thema grotendeels vervangen. Dat is prettig, want je hoeft niets meer in code aan te passen. Het betekent ook dat je site van boven tot onder aan Elementor hangt. De vraag hoe je site eruitziet zonder de plugin is daarmee niet langer theoretisch.

Werk je met de Theme Builder, houd het dan bij één sjabloon voor je koptekst en één voor je voettekst. Ik kom regelmatig sites tegen met vijf varianten die niemand meer uit elkaar houdt, waarna een wijziging op de helft van de pagina's niet doorkomt.

Wat Elementor met je HTML doet

Elk element dat je op een pagina zet, komt in de broncode terecht met omhulsels eromheen. Een knop is niet één stukje HTML, maar een knop in een widget, in een widgetomhulsel, in een kolom, in een sectie.

Bij de oude sectieopbouw liep dat op tot zes of zeven lagen div voor één knop. De containeropbouw scheelt daar een paar van, en er is daarnaast een instelling die overbodige omhulsels weglaat.

Waarom dat uitmaakt: de browser moet die hele structuur opbouwen en doorrekenen voordat er iets in beeld staat. Op een laptop merk je het niet. Op een middenklasse Androidtelefoon van drie jaar oud wel.

Daarnaast schrijft Elementor zijn opmaak weg in aparte CSS-bestanden per pagina, in je uploadmap. Elke pagina krijgt zo een eigen bestand met regels die aan een uniek nummer per element hangen. Dat werkt prima. Handmatig ingrijpen wordt er later lastiger van, want je zit met selectors die je zelf niet hebt bedacht.

Wat dat met je laadtijd doet

Elementor laadt van zichzelf een set stijlbestanden en scripts op elke pagina waar hij actief is. Daar zit een iconenlettertype bij, een bibliotheek voor carrousels, en bij Pro nog een stuk of wat extra bestanden.

Jarenlang ging dat allemaal mee, ook op een contactpagina met alleen tekst en een formulier. Daar komt de reputatie vandaan. Sinds de instellingen voor voorwaardelijk laden erbij kwamen, haalt Elementor alleen nog binnen wat een pagina echt gebruikt, en dat scheelt merkbaar.

Wat blijft: de voorkant van Elementor leunt op jQuery. Een site die verder zonder jQuery zou kunnen, kan dat met Elementor niet.

En de grootste vertraging bij trage Elementor-sites komt meestal niet van Elementor. Het zijn de afbeeldingen. Een achtergrondfoto van drie megabyte kost meer dan alle omhulsels van de bouwer bij elkaar. Comprimeer je beeld en zet het om naar WebP, dan win je in één middag meer dan met alle prestatievinkjes samen.

De instellingen die het meeste schelen

Ga naar Elementor en dan naar Instellingen. Afhankelijk van je versie heten de tabbladen Prestaties, Functies of Experiments, en staan de schakelaars op net andere plekken.

  • Laad alleen wat de pagina gebruikt. De belangrijkste van allemaal. Stijl en script van widgets die je niet gebruikt gaan dan niet mee.
  • Zet de containeropbouw aan voor nieuwe pagina's. Minder lagen, minder rekenwerk voor de browser.
  • Zet de opgeschoonde uitvoer aan die overbodige omhulsels weghaalt.
  • Vervang het iconenlettertype door losse iconen waar dat kan. Dan hoeft er geen heel lettertype geladen te worden voor drie pijltjes.
  • Zet uit wat je niet draait. Geen WooCommerce, dan hoeven die widgets ook niet mee.

Wijzig je hier iets, ga dan naar Elementor en dan naar Gereedschappen, en druk op de knop die de bestanden opnieuw opbouwt. Anders blijft je site de oude CSS gebruiken. Dat is de meest voorkomende reden dat mensen denken dat die vinkjes niets doen.

Meet daarna, en meet op mobiel. Een score op je laptop zegt weinig over wat je bezoeker meemaakt; hoe je dat aanpakt staat in je website optimaliseren voor mobiel.

Wat er gebeurt als je Elementor uitzet

Elementor bewaart de opbouw van een pagina als JSON in een apart veld bij dat bericht in de database. Het gewone inhoudsveld van WordPress vult hij daarnaast met een uitgeklede versie van de tekst.

Zet je de plugin uit, dan valt WordPress terug op dat gewone inhoudsveld. Meestal houd je wel tekst over, maar zonder opmaak, zonder kolommen en zonder de widgets die Elementor tekende. Formulieren, tabbladen, accordeons en carrousels zijn dan weg.

Dat is niet uniek voor Elementor. Bij Divi staat de opbouw als codes in het inhoudsveld zelf, dus daar houd je na het uitzetten een pagina over vol regels die met et_pb beginnen. De blokeditor van WordPress is de uitzondering: die schrijft gewone HTML weg, dus daar blijft je pagina leesbaar.

Overstappen betekent bij elke paginabouwer opnieuw opbouwen. Reken daarop voordat je begint, niet erna. Gaat je site vijf jaar mee op dit gereedschap, dan is er niets aan de hand. Zet je hem in voor één campagnepagina, dan bind je je hele site aan iets tijdelijks.

Beveiliging, en waarom bijwerken hier extra telt

Een plugin die op miljoenen sites draait, is voor een aanvaller de moeite waard om geautomatiseerd aan te vallen. Dat is de keerzijde van populariteit, en Elementor heeft die keerzijde een paar keer gemerkt.

In mei 2020 werd een lek in Elementor Pro actief misbruikt. In combinatie met een uitbreidingspakket kon een aanvaller zich registreren, bestanden uploaden en de site overnemen. Er kwam binnen dagen een reparatie, maar wie niet bijwerkte bleef kwetsbaar.

In maart 2023 kwam een fout aan het licht waarmee iedere ingelogde gebruiker met de laagste rechten de site-instellingen kon aanpassen. Op een site met WooCommerce, waar klanten een account hebben, kon iemand zich zo tot beheerder maken. Ook die werd actief misbruikt.

Beide gevallen volgen hetzelfde patroon. Het lek wordt gedicht, de melding wordt openbaar, en daarna gaan scanners op zoek naar sites die nog niet zijn bijgewerkt. Het venster tussen publicatie en de eerste aanvallen is kort.

Wat dat voor jou betekent: zet automatische updates aan voor Elementor en voor Pro, vul je licentiesleutel in zodat Pro die updates ook binnenkrijgt, en maak een back-up voordat je een grote versiesprong doet. Onder Gereedschappen zit een knop om terug te rollen naar de vorige versie, wat bijwerken minder eng maakt. De rest van wat erbij hoort staat in hoe je een WordPress-website beveiligt.

De uitbreidingen zijn een apart risico

Rond Elementor is een hele industrie van uitbreidingspakketten ontstaan. Honderden extra widgets per pakket, meestal gratis met een betaalde versie erboven. Verleidelijk, want je krijgt er in één keer een prijstabel, een tijdlijn en een teamblok bij.

Het is ook de plek waar de meeste lekken zitten. Het bekendste pakket had begin 2022 een fout waarmee bestanden van de server te lezen waren, en in 2024 een fout waarmee iemand het wachtwoord van een andere gebruiker kon resetten. Beide zijn gerepareerd, en beide stonden op miljoenen sites.

Mijn regel is simpel: één uitbreidingspakket, en alleen als je er minstens drie widgets uit gebruikt. Drie pakketten naast elkaar voor drie widgets is drie keer zoveel code, drie keer zoveel updates en drie keer zoveel kans dat er iets langskomt.

Wil je weten of een plugin bekende problemen heeft, zoek dan op de naam in de openbare databases van Wordfence of Patchstack. Dat kost een minuut. Vrijwel niemand doet het.

Google Fonts en de AVG

Elementor haalt lettertypen standaard bij Google op. Het IP-adres van je bezoeker gaat daarmee naar een server van Google op het moment dat je pagina laadt, zonder dat er iets is gevraagd.

Een Duitse rechtbank in München oordeelde op 20 januari 2022 dat dit in strijd is met de AVG, en kende de bezoeker die daarover klaagde een schadevergoeding toe. Daarna volgde in Duitsland een golf van claimbrieven aan website-eigenaren.

Of een Nederlandse rechter er hetzelfde over zou oordelen weet niemand, want die uitspraak is er niet. Het punt is dat je het weg kunt nemen met één instelling: zet het laden van Google Fonts uit en lever de lettertypen mee vanaf je eigen server. Dat is meteen sneller, want het scheelt een verbinding met een ander domein.

Doe hetzelfde met andere onderdelen die van buiten komen, zoals kaarten en ingesloten video. Elke aanroep naar buiten is een gegeven dat je weggeeft en een moment waarop je pagina op iemand anders staat te wachten.

Wat Elementor van je hosting vraagt

Elementor is zwaarder dan een gemiddelde plugin. De editor bouwt je hele pagina in de browser op en praat ondertussen met de server, en dat vraagt geheugen.

Op krappe hosting merk je dat aan een editor die blijft hangen op het laadscherm, een melding dat de voorbeeldweergave niet geladen kan worden, of een lege witte pagina. Negen van de tien keer is dat te weinig PHP-geheugen, een te lage maximale uitvoeringstijd, of een beveiligingsmodule op de server die verzoeken tegenhoudt.

Kijk eerst bij Elementor en dan bij Systeeminformatie. Daar staan je PHP-versie, je geheugenlimiet en de instellingen van je server op één scherm. Klopt daar iets niet, dan is dat een vraag aan je hostingpartij en geen zoektocht in je thema. Wat je van een pakket mag verwachten staat bij webhosting, en de versie waar het meestal op vastloopt bij PHP.

Werkt de editor wel maar gedraagt hij zich vreemd, zet dan de veilige modus aan onder Gereedschappen. Die start de bouwer met alleen Elementor actief. Gaat het dan goed, dan zit het probleem in een andere plugin of in je thema.

Elementor naast de blokeditor, Divi en Beaver Builder

De blokeditor die sinds WordPress 5.0 uit december 2018 in de kern zit, is volwassen geworden. Vanaf versie 5.9 uit januari 2022 kun je met een blokthema ook je koptekst en voettekst in diezelfde editor ontwerpen. Voor een site van tien pagina's is dat inmiddels genoeg, zonder extra plugin en zonder abonnement.

Divi zit dicht bij Elementor qua mogelijkheden en werkt met een eenmalige licentie voor onbeperkt veel sites. Doordat de opbouw als codes in het inhoudsveld staat, is er later moeilijker vanaf te komen.

Beaver Builder kan minder, levert schonere uitvoer en laat de gewone inhoud van je pagina met rust. Wij werken zelf met Beaver Builder, omdat we sites bouwen die we jaren onderhouden en de code dan liever voorspelbaar houden. Dat is een keuze die bij onze manier van werken past en geen oordeel over Elementor. Wil je zelf veel kunnen aanpassen en veel kant-en-klare onderdelen tot je beschikking hebben, dan zit je bij Elementor goed.

Het onderliggende punt weegt zwaarder dan de keuze zelf. Een paginabouwer is een besluit voor de lange termijn. Je kiest geen gereedschap voor deze ene pagina, je kiest hoe je site de komende jaren in elkaar zit.

Koppen, contrast en wat de bouwer je laat doen

Een bouwer laat je alles kiezen, ook wat niet klopt. Dat is de prijs van vrijheid. Het is ook de plek waar Elementor-sites het vaakst rommelig worden.

Bij elke tekstwidget kies je zelf of het een H1, een H2 of een gewone alinea is. Mensen kiezen op grootte in plaats van op betekenis, en dan staat er een pagina met vier keer H1 en geen enkele H2. Een schermlezer springt door je pagina op die koppen, en een zoekmachine leest er de structuur uit af. Houd het simpel: één H1 per pagina, daaronder H2, daarbinnen H3.

Let daarnaast op contrast. Lichtgrijze tekst op wit oogt in de editor rustig en is buiten in de zon onleesbaar. En op een knop met alleen een icoon hoort een tekstlabel, want een pijltje zonder woorden zegt niets tegen wie de pagina niet ziet.

Er zit ook een wettelijke kant aan. Sinds 28 juni 2025 geldt de Europese toegankelijkheidsrichtlijn, in Nederland via de Implementatiewet toegankelijkheidsvoorschriften producten en diensten. Die raakt onder meer webshops en online bankieren. Bedrijven met minder dan tien mensen vallen voor diensten buiten de verplichting, en dat is geen reden om een site te bouwen waar een deel van je bezoekers op vastloopt.

Hoe ik ermee zou werken

Stel je kleuren en lettertypen in bij de site-instellingen en verwijs daar per element naar, in plaats van overal een kleurcode in te tikken. Bij een huisstijlwijziging pas je dan één plek aan en niet honderd blokken.

Bewaar onderdelen die terugkomen als sjabloon. Een contactblok dat op acht pagina's staat, wil je één keer wijzigen.

Gebruik animaties met mate. Elementor maakt het makkelijk om alles te laten invliegen, en een pagina waar elk blok binnenzweeft leest niet prettig. Bezoekers die in hun systeem hebben aangegeven minder beweging te willen zien, horen daar bovendien geen last van te hebben.

Bouw op één breedte en loop daarna de andere twee na. De telefoonweergave in de bouwer is een benadering, geen telefoon. Pak er een echt toestel bij voordat je publiceert.

En houd je pagina's kort van opbouw. Elke sectie die je toevoegt omdat het kan, is een sectie die iemand moet doorscrollen en die je site langzamer maakt.

Veelgestelde vragen over Elementor

Is Elementor gratis?

Ja, de basisversie staat gratis in de pluginmap van WordPress en bevat de bouwer met een set standaardwidgets. Elementor Pro is een betaald jaarabonnement dat je per aantal sites afsluit. Voor de actuele bedragen kijk je op de site van Elementor, want die veranderen.

Wat is het verschil tussen Elementor en Elementor Pro?

Pro voegt de onderdelen toe die je bij een bedrijfssite nodig hebt: een formulierwidget, de Theme Builder voor koptekst, voettekst en artikelweergave, een popupbouwer, WooCommerce-widgets, dynamische inhoud uit eigen velden en weergavevoorwaarden.

Kort gezegd bouw je met de gratis versie losse pagina's, en met Pro je hele site.

Maakt Elementor mijn website traag?

Elementor voegt meer HTML en meer bestanden toe dan een pagina die met de hand is gebouwd, dus hij kost iets. Sinds de instellingen voor voorwaardelijk laden is dat een stuk minder geworden.

Bij de trage Elementor-sites die ik tegenkom zitten de grote verliezen bijna altijd elders: ongecomprimeerde afbeeldingen, een stapel plugins en langzame hosting.

Heb ik Elementor Pro nodig voor een bedrijfswebsite?

Meestal wel. Zodra je een contactformulier wilt dat aan je e-mailprogramma hangt, of een koptekst en voettekst die je zelf ontwerpt, kom je bij Pro uit. Voor een site van drie pagina's met een formulier uit een aparte plugin red je het met de gratis versie.

Wat gebeurt er als ik Elementor uitzet?

Je pagina's vallen terug op het gewone inhoudsveld van WordPress. Er blijft meestal tekst staan, maar zonder opmaak en zonder de widgets die Elementor tekende. Formulieren, tabbladen en carrousels verdwijnen.

Maak dus een back-up voordat je de plugin uitzet, en kijk eerst op een testomgeving wat er overblijft.

Kan ik van Elementor overstappen naar een andere paginabouwer?

Niet automatisch. Er bestaan geen betrouwbare omzetters tussen paginabouwers, dus overstappen betekent pagina's opnieuw opbouwen. Bij een site van tien pagina's is dat een paar dagen werk. Neem dat mee in je keuze voordat je begint.

Is Elementor veilig?

Elementor is niet onveiliger dan andere grote plugins, en hij is wel een aantrekkelijker doelwit omdat hij overal draait. Er zijn een paar keer ernstige lekken geweest, onder meer in mei 2020 en in maart 2023, die telkens snel zijn gerepareerd.

Het risico zit vooral bij sites die niet bijwerken. Een gedicht lek is openbare informatie, en die informatie gebruiken aanvallers om te zoeken naar wie nog achterloopt.

Moet ik Elementor automatisch laten bijwerken?

Ja, bij Elementor zou ik dat aanzetten. De tijd tussen het openbaar worden van een lek en de eerste geautomatiseerde aanvallen is kort, en een site die twee weken achterloopt is een makkelijk doelwit.

Zorg wel dat je een dagelijkse back-up hebt en test grote versiesprongen eerst als je een testomgeving hebt.

Waarom laadt mijn Elementor-editor niet?

In de meeste gevallen komt dat door te weinig PHP-geheugen, een te korte uitvoeringstijd of een beveiligingsmodule op de server. Kijk bij Systeeminformatie wat je limieten zijn en zet daarna de veilige modus aan om een conflict met een andere plugin uit te sluiten.

Blijft het misgaan, dan is het een vraag voor je hostingpartij en niet iets wat je in je thema oplost.

Heb ik nog een thema nodig als ik Elementor gebruik?

Ja, WordPress heeft altijd een thema nodig. Met Elementor Pro neem je alleen het ontwerp ervan grotendeels over. Kies een licht thema dat weinig eigen opmaak meebrengt, anders zitten je thema en je bouwer elkaar in de weg.

Werkt Elementor samen met de blokeditor van WordPress?

Ja, per pagina kies je welke van de twee je gebruikt. Je kunt je blog in de blokeditor houden en je landingspagina's in Elementor bouwen. Door elkaar heen werken binnen één pagina kan niet.

Is Elementor goed voor SEO?

De bouwer zelf maakt weinig verschil. Wat telt, is dat je koppen op betekenis instelt en niet op grootte, dat je pagina snel laadt en dat je tekst er echt staat in plaats van in een afbeelding.

Elementor helpt je daar niet bij en zit je er ook niet bij in de weg. Je hebt daarnaast gewoon een SEO-plugin nodig voor je titels en omschrijvingen.

Moet ik van secties overstappen naar containers?

Voor bestaande pagina's hoeft dat niet, die blijven werken. Voor nieuwe pagina's zou ik het wel doen: minder lagen HTML, en Elementor bouwt daar verder op.

Een bestaande site omzetten is handwerk en levert zelden genoeg op om die middag waard te zijn.

Kan ik met Elementor een webshop bouwen?

Ja, in combinatie met WooCommerce. Met Pro ontwerp je je productpagina, je overzichtspagina en je winkelmandje zelf. Houd er rekening mee dat een webshop meer bezoekers op mobiel heeft en meer pagina's laadt, dus de prestatie-instellingen tellen daar zwaarder dan op een site met tien pagina's.

Dit artikel hoort bij Webdevelopment. Daar vind je meer uitleg over hetzelfde onderwerp.

Een vraag over dit onderwerp?

Vertel waar je tegenaan loopt.

Maurits denkt met je mee en geeft je een praktisch antwoord.

reactie dezelfde werkdag
Maurits van Platform Pro

Vertel kort waar je aan denkt

Nu bereikbaar, je krijgt Maurits zelf te spreken

Maurits leest je bericht en neemt persoonlijk contact met je op.

Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.
Dit veld is verborgen bij het bekijken van het formulier