Elementor is een visuele paginabouwer voor WordPress waarmee je pagina's opbouwt door elementen te slepen en het resultaat direct ziet, zonder code. In dit artikel leer je de opbouw van Elementor (sectie, kolom, widget), bouw je je eerste pagina, maak je die netjes voor mobiel en publiceer je hem. Ook lees je hoe je met globale stijlen je hele site in één keer consistent houdt.
Wat is Elementor en wanneer gebruik je het?
Elementor draait bovenop WordPress en vervangt het niet. Je installeert het als plug-in en bewerkt daarna pagina's in een visuele editor: links een paneel met widgets en instellingen, rechts een live voorbeeld van je pagina. Wat je sleept, verschijnt meteen op zijn plek.
De paginabouwer is sterk voor pagina's met een eigen opmaak, zoals een homepage, een landingspagina of een Over ons. Voor gewone blogartikelen volstaat de standaard WordPress-editor vaak, en voor complexe maatwerkfunctionaliteit is een plug-in of ontwikkelaar geschikter dan een paginabouwer.
De opbouw: sectie, kolom, widget
Elke pagina in Elementor is opgebouwd volgens dezelfde drielaagse structuur. Begrijp je die, dan begrijp je Elementor:
- Sectie: een horizontaal blok over de volle breedte van de pagina. Hierin regel je achtergrondkleur of achtergrondafbeelding, breedte en de ruimte eromheen.
- Kolom: verdeelt een sectie verticaal. Een sectie kan één kolom (100 procent), twee kolommen (50/50) of drie kolommen (33/33/33) bevatten.
- Widget: het eigenlijke inhoudselement, zoals een koptekst, tekst, afbeelding, knop of video. Widgets plaats je altijd binnen een kolom.
De volgorde is vast: je plaatst widgets in kolommen, en kolommen in secties. Tekst of een knop los in een lege sectie plakken werkt niet. Begin dus altijd met een sectie, kies een kolomindeling en sleep daar je widgets in.
Je eerste pagina bouwen
- Maak in WordPress een nieuwe pagina via Pagina's › Nieuwe pagina en klik op Bewerken met Elementor.
- Voeg een nieuwe sectie toe en kies een kolomindeling, bijvoorbeeld twee kolommen.
- Sleep vanuit het linkerpaneel een Koptekst in de eerste kolom en typ je titel.
- Sleep er een Teksteditor en een Knop onder voor je uitleg en je call-to-action.
- Plaats in de tweede kolom een Afbeelding en kies er een uit je mediabibliotheek.
- Herhaal dit met nieuwe secties tot je pagina compleet is.
Widgets bewerken
Klik je een widget aan, dan verschijnen links drie tabbladen:
- Inhoud voor de tekst, afbeeldingen en links van de widget.
- Stijl voor kleuren, lettertypen en afstanden.
- Geavanceerd voor marge en opvulling (margin en padding), responsieve instellingen en animaties.
Het verschil tussen padding en margin zorgt vaak voor verwarring: padding is de ruimte binnen een element, tussen de rand en de inhoud, terwijl margin de ruimte buiten een element is, tussen dit element en het volgende. Gebruik padding om blokken lucht te geven en margin spaarzaam.
Mobiel bewerken
Verreweg de meeste bezoekers komen op een telefoon binnen, dus je pagina moet ook daar kloppen. Elementor werkt met drie weergaven: desktop, tablet en mobiel. Onderin de editor wissel je met de apparaaticoontjes tussen die weergaven.
Per weergave kun je zaken los aanpassen zonder de desktopversie te raken, bijvoorbeeld:
- De lettergrootte van koppen verkleinen zodat ze niet over meerdere regels breken.
- De opvulling van secties verkleinen zodat er minder lege ruimte is.
- Een element verbergen dat op een klein scherm te veel ruimte inneemt.
Verberg content op mobiel liever dan hem te verwijderen. Verwijder je een widget, dan is hij ook op desktop weg. Met de zichtbaarheidsopties in het tabblad Geavanceerd verberg je een element alleen op de schermen waar je het niet wilt tonen.
Globale stijlen voor consistentie
In plaats van elke knop en kop apart op te maken, stel je je huisstijl één keer centraal in. Open in de editor de Site-instellingen en leg daar je lettertypen, kleuren, knopstijlen en standaardachtergronden vast. Pas je later een kleur aan, dan verandert die in één keer overal op je site. Dat scheelt werk en houdt je pagina's rustig en herkenbaar.
Opslaan en publiceren
Onderin het paneel staan de belangrijkste knoppen. Met Voorbeeld bekijken controleer je je pagina zonder hem te publiceren, met Concept opslaan bewaar je tussentijds werk, en met Publiceren (of Bijwerken bij een bestaande pagina) zet je je wijzigingen live. Klik altijd op publiceren of bijwerken, anders zien bezoekers je wijzigingen niet.
Let op de snelheid
Een paginabouwer voegt code toe, en te veel widgets, effecten en animaties maken je pagina traag. Een trage pagina kost bezoekers en scoort slechter in Google. Houd pagina's daarom overzichtelijk, vermijd dubbele of overbodige widgets en optimaliseer je afbeeldingen voordat je ze uploadt. Controleer na een update van Elementor of je thema steekproefsgewijs je belangrijkste pagina's, en werk nooit een live site bij zonder recente back-up.
Veelgestelde vragen
Heb ik Elementor nodig voor WordPress?
Nee. WordPress heeft een ingebouwde editor. Elementor is handig als je pagina's visueel wilt opbouwen met slepen en neerzetten en meer controle over de opmaak wilt dan de standaardeditor biedt.
Is Elementor gratis?
Er is een gratis versie met de basisfuncties en een betaalde Pro-versie met extra widgets en sjablonen. Voor een eenvoudige site kom je vaak al ver met de gratis versie.
Waarom kan ik geen tekst in een sectie plaatsen?
Tekst hoort in een widget, niet los in een sectie. Sleep een Teksteditor- of Koptekst-widget in een kolom binnen de sectie en typ je tekst daarin.
Mijn pagina ziet er op mobiel rommelig uit. Wat nu?
Schakel in de editor over naar de mobiele weergave en pas daar de lettergroottes en de opvulling aan. Verberg zo nodig elementen die op een klein scherm te veel ruimte innemen, in plaats van ze te verwijderen.
Nog niet vertrouwd met de WordPress-basis? Lees eerst WordPress starten, dan bouw je daarna met Elementor verder op een stevige basis.