Wat is Elementor?
Elementor is een populaire drag-and-drop paginabouwer voor WordPress waarmee je zonder programmeerkennis professioneel ogende websites kunt maken. Je ziet direct wat je bouwt (front-end editor), wat het heel gebruiksvriendelijk maakt.
🔧 1. Installatie van Elementor
A. Elementor Plugin Installeren
- Log in op je WordPress-dashboard.
- Ga naar Plugins > Nieuwe plugin.
- Zoek naar Elementor Website Builder.
- Klik op Nu installeren en daarna op Activeren.
B. Elementor Pro (optioneel, betaald)
- Bezoek de officiële Elementor-website voor een Pro-licentie.
- Download de zip-bestand.
- Ga naar Plugins > Nieuwe plugin > Plugin uploaden.
- Upload de zip, installeer en activeer.
- Voer je licentiesleutel in via Elementor > Licentie in je dashboard.
2. De Basis van Elementor begrijpen
Elementor Interface
- Widgets Panel (links): Hier sleep je elementen zoals tekst, afbeeldingen, knoppen, etc.
- Preview Area (midden): Live weergave van je pagina terwijl je bouwt.
-
Onderste balk: Bevat opties voor:
- Responsieve weergave (mobiel/tablet/desktop)
- Opslaan / bijwerken
- Geschiedenis (ongedaan maken / opnieuw uitvoeren)
- Pagina-instellingen
3. Een Pagina Maken met Elementor
A. Nieuwe Pagina aanmaken
- Ga naar Pagina’s > Nieuwe pagina.
- Geef je pagina een naam (bijv. “Home”).
- Klik op Bewerken met Elementor.
B. Structuur kiezen
- Klik op het plusje (+) om een nieuwe sectie toe te voegen.
- Kies een kolomindeling (bijv. 1 kolom, 2 kolommen).
C. Elementen toevoegen
- Sleep een widget van het linker paneel naar je sectie.
- Populaire widgets:
- Koptekst: Voor titels.
- Afbeelding: Voor visuals.
- Teksteditor: Voor paragrafen.
- Knop: Voor call-to-actions.
- Video, Afstandhouder, Afbeeldingsbox.
4. Stijl en Vormgeving
A. Stijl van Elementen aanpassen
Klik op een element > gebruik de drie tabbladen:
- Inhoud: De tekst of afbeelding zelf.
- Stijl: Kleuren, lettertypes, uitlijning, etc.
- Geavanceerd: Marges, padding, animaties, aangepaste CSS (Pro).
B. Mobiele weergave instellen
- Klik linksonder op Responsieve modus.
- Schakel tussen desktop, tablet, mobiel en pas aan voor elk formaat.
5. Pagina opslaan en publiceren
- Klik rechtsonder op Publiceren of Bijwerken als je wijzigingen maakt.
- Je kunt pagina’s ook opslaan als sjabloon (rechtsklik op sectie > Opslaan als sjabloon).
6. Geavanceerde Functionaliteiten (Pro)
Elementor Pro biedt extra widgets en functies, zoals:
- Formulieren (contact, inschrijving, etc.)
- Dynamische content (zoals blogposts tonen)
- Theme Builder: Pas headers, footers, 404-pagina’s en archive-pagina’s aan.
- Popup Builder: Voor meldingen, banners, inschrijfformulieren, enz.
7. Werken met Sjablonen
A. Sjabloon gebruiken
- Klik op het map-icoon in een lege sectie > kies uit Elementor-sjablonen.
- Klik op Invoegen > sjabloon verschijnt op de pagina.
B. Eigen sjabloon opslaan
- Rechterklik op een sectie of pagina > Opslaan als sjabloon.
- Hergebruik dit sjabloon op andere pagina’s.
8. Tips voor Efficiënt Gebruik
- Maak gebruik van globale kleuren en typografie via Site-instellingen (linksonder tandwiel > Site instellingen).
- Gebruik Herbruikbare secties.
- Combineer Elementor met thema’s zoals Hello Theme of Astra.
- Controleer altijd op mobiele compatibiliteit.
- Maak regelmatig back-ups voordat je grote wijzigingen maakt.
9. Veelgestelde Vragen (FAQ)
Is Elementor gratis?
Ja, Elementor heeft een gratis versie met de meeste basisfunctionaliteiten. Voor geavanceerde functies heb je Elementor Pro nodig.
Welk thema werkt goed met Elementor?
Het officiële Hello Theme of lichte thema’s zoals Astra, GeneratePress of OceanWP.
Kan ik Elementor gebruiken voor blogberichten?
Ja, maar blog-layouts pas je het beste aan met de Theme Builder (Pro).
Conclusie
Elementor maakt het mogelijk om op een visuele en eenvoudige manier prachtige websites te bouwen in WordPress. Of je nu een portfolio, zakelijke site of webshop maakt — met Elementor kun je vrijwel alles.
Klik hier voor een praktijkvoorbeeld.