Elementor: Jouw complete gids voor de WordPress Page Builder

Maddy Osman Laatst bijgewerkt op 08.07.2021
10 Min.
Hoe Elementor  te gebruiken: een handleiding voor installatie van begin tot eind
Laatst bijgewerkt op 08.07.2021

Elementor is een van de meest populaire WordPress Page Builders die er nu zijn. Dat is niet voor niets: Elementor zit boordevol functies waarmee het bouwen van websites op maat eenvoudiger is dan ooit. In dit artikel leer je alles wat je moet weten over Elementor.

Als je nieuwsgierig bent hoe je Elementor kunt gebruiken, ben je hier aan het juiste adres. Vandaag draait alles om Elementor - inclusief installatietips en de beste themes & add-ons. Want vooral in het begin kan het gebruik van Elementor verwarrend zijn. We zullen de volgende onderwerpen nader bekijken:

  • Elementor: Wat Elementor is en hoe de Page Builder werkt
  • Voordelen van het gebruik van Elementor als WordPress Page Builder
  • Verschillen tussen Elementor en Elementor Pro
  • Hoe installeer je de Elementor Page Builder in WordPress
  • Hoe gebruik je Elementor: stap voor stap uitgelegd
  • De beste Elementor themes en hoe je die kunt gebruiken
  • Aanbevolen add-ons voor Elementor
  • Conclusie: de uitgebreide gids hoe je Elementor gebruikt

Elementor: Wat is het en hoe werkt het

Wat is een Page Builder eigenlijk?

Een Page Builder is te vergelijken met een "bouwpakket" voor de inhoud van je website, waarin je afzonderlijke elementen naar de gewenste locaties kunt slepen en ze kunt vullen met je eigen inhoud. In ons artikel leer je de belangrijkste voor- en nadelen van Page Builders.

Elementor is een plugin voor het ontwerpen van WordPress websites. Elementor voegt een hele reeks functies voor drag & drop toe. Zo maken zelfs nieuwelingen verbluffende websites die er professioneel uitzien.

Het grootste voordeel van Elementor is dat je een volledig live overzicht van je website krijgt - en dat terwijl je wijzigingen aanbrengt.

Elementor creëert een intuïtieve ontwerpervaring, vooral voor beginners. Om dit te bereiken gebruikt de plugin tientallen widgets, een volledige template bibliotheek en een functie voor het wijzigen van de geschiedenis. 

De Core Plugin Elementor is gratis en wordt geleverd met veel basiselementen. Als je meer geavanceerde functies nodig hebt, is Elementor Pro beschikbaar. Deze premium versie van Elementor heeft verschillende prijsniveaus, beginnend bij $49/jaar voor één website en oplopend tot $999/jaar voor 1.000 websites.

Voordelen van het gebruik van Elementor als WordPress Page Builder

Zoals je misschien al geraden had, heeft Elementor een aantal voordelen. Laten we er een paar onder de loep nemen voordat we naar de eigenlijke Elementor tutorial gaan. Enkele belangrijke voordelen zijn: 

  • Gemakkelijk te gebruiken. Visuele frontend editing gecombineerd met widgets maakt het werken met Elementor Page Builder ongelooflijk eenvoudig, zelfs voor beginners. 
  • Flexibel en uitbreidbaar voor ontwikkelaars. Een robuuste sjabloonbibliotheek, blockeditor en volledige controle over de output betekent dat zelfs meer ervaren ontwikkelaars kunnen leren hoe ze Elementor Theme Builder moeten gebruiken en ermee moeten werken. 
  • Veel mogelijkheden voor styling. Je kunt het editorpaneel met sliders gebruiken om instellingen in het ontwerp aan te passen binnen een comfortabel bewerkingskader.  
  • Globale widgets die tijd besparen. Wijzigen, aanpassen, opslaan en widgets op meerdere websites gebruiken. 
  • Drag & Drop Theme bouwen. Maak een Elementor Theme vanaf nul met behulp van de ingebouwde widgets - of gebruik Elementor Pro templates als basis. 
  • E-commerce integratie. Gebruik het widget panel om een onlineshop met de volledige responsieve controle te maken, die je van andere builders met WooCommerce compatibiliteit gewend bent.
  • Ingebouwde marketing tools. Vooral wanneer je met Elementor begint, zul je meteen het volgende merken: Je kunt formulierstijlen aanpassen, een Elementor landingspagina maken en pluginwidgets gebruiken om tegelijkertijd je webaanwezigheid en marketingstrategie op te bouwen. 
  • Grote third-party community en marktplaats. Een groot voordeel van Elementor is de grote Developer Community die erachter zit. Je kunt uren doorbrengen met het doorbladeren van alle Elementor paginasjablonen, WordPress themes en add-ons die de kernfuncties van Elementor uitbreiden. 
Vergelijking van de 15 populairste WordPress Page Builders

Er is meer dan één WordPress page builder. Ik bespreek nu 15 verschillende plugins om je te helpen sneller aan de slag te gaan met WordPress. Maak kennis met de beste WordPress Page Builders die tegenwoordig op de markt zijn.

Verschillen tussen Elementor en Elementor Pro

Voor we verder gaan, is het belangrijk om te vermelden dat er een Pro versie van Elementor is. Met de gratis versie kom je een heel eind, maar als je op zoek bent naar nog meer functies, kun je Elementor Pro overwegen. 

De gratis versie van Elementor bevat alles wat je nodig hebt om een website te maken, inclusief de volgende bouwfuncties:

  • Header 
  • Tekstvelden 
  • Afbeelding widgets 
  • Video widgets 
  • Galerij widgets
  • Testimonials 
  • Divider widgets 
  • Accordion widgets 

Elementor Pro voegt verschillende functies toe die gericht zijn op bedrijven, waaronder:

  • Formulieren 
  • Slides 
  • Portfolio's 
  • Prijstabellen 
  • Fotocarrousels 
  • Teller widgets 
  • Pop-ups 
  • Social Buttons Widgets
  • Custom Footer en Header Builder 
  • Call to Action

Je kunt ook aangepaste lettertypen en breekpunten toevoegen en veel premium widgets gebruiken. Hier vind je een vergelijking van de gratis versie van Elementor en Elementor Pro: 

Verschillen tussen Elementor en Elementor Pro
Infographic met een vergelijking van de kenmerken van Elementor en Elementor Pro

Hoe installeer je de Elementor Page Builder in WordPress

Om Elementor te installeren heb je een geïnstalleerde WordPress nodig met een hosting plan en een domeinnaam. Wanneer je bent ingelogd op het dashboard van je WordPress website, ga je naar Plugins > Add new

Hoe installeer je de Elementor Page Builder in WordPress
WordPress Plugins zoekscherm in het Dashboard

Zoek naar Elementor en installeer het. Klik dan op Activeren

Hoe installeer ik de Elementor  plugin
Installeer en activeer de Elementor plugin in het WordPress dashboard

Als je kiest voor Elementor Pro (of wilt upgraden van de basis Elementor plugin) ga dan op de Elementor website naar Mijn account en klik op de knop Download plugin. Dit zal een ZIP-bestand op je computer opslaan. 

Elementor  rekeningoverzicht
Elementor Accountweergave, toegang tot het menu Downloads

Log vervolgens in op je WordPress dashboard en ga naar Plugins > Add new. Upload het ZIP-bestand dat je zojuist hebt opgeslagen naar je computer, klik op Installeren en vervolgens op Activeren. Je moet de gratis versie van Elementor Plugins geïnstalleerd en geactiveerd hebben, zodat dit werkt. 

Toevoegen van plugins aan WordPress
Plugins toevoegen aan WordPress

Van daaruit moet je je licentie activeren. Ga hiervoor naar Elementor > Licentie en klik vervolgens op Verbinden & Activeren. 

Activeren van de Elementor  Pro licentie in het WordPress  dashboard].
Activeren van de Elementor Pro-licentie in het WordPress dashboard

Klik op het volgende scherm op Verbinden en log dan in op je Elementor account. 

De Elementor  licentie verbinden met uw WordPress  website
Het koppelen van de Elementor licentie aan je WordPress website

Je wordt teruggeleid naar het Dashboard. Het bericht bovenaan het scherm waarin je wordt gevraagd om je licentie te activeren, zou verdwenen moeten zijn. 

Hoe gebruik je Elementor: stap voor stap uitgelegd

Nu de installatie is voltooid, is het tijd om aan de slag te gaan met het gebruik van Elementor in de praktijk. Elementor raadt aan om de Envato Elements Plugin te installeren, die een selectie van Elementor paginasjablonen in het dashboard ter beschikking stelt. Zorg ervoor dat je het standaard WordPress theme geïnstalleerd en geactiveerd hebt. 

Downloaden van de Envato Elements plugin in het WordPress  dashboard
Envato Element plugin in het WordPress Dashboard downloaden

Om te beginnen, navigeer je naar Elements in het WordPress dashboard. Je kunt kiezen tussen gratis en premium template kits. Kies dan een sjabloon dat bij jou past.

Een lijst van gratis sjabloon kits door Envato Elements in WordPress
Een lijst van gratis template kits van Envato Elements in WordPress

Scroll naar beneden in het template menu en selecteer een homepage ontwerp dat je wilt importeren. Herhaal dit voor elk specifieke nieuwe paginasjabloon dat je wilt maken. Veel mensen kiezen er vaak voor om pagina's te maken zoals Over ons, Service en Contact - maar dat is aan jou.

Een lijst van gratis sjabloon kits door Envato Elements in WordPress
Sjabloonopties voor de startpagina in de CoWorking Space Template Kit

Zodra je pagina's zijn gemaakt, kun je ze bewerken met Elementor. Ga hiervoor naar Pagina's > Alle. Ga met de muis over de pagina die je wilt bewerken en klik op Bewerken met Elementor

Zodra de pagina geladen is, zou je de Elementor editor in actie moeten zien. Aan de linkerkant van het scherm zie je de geactiveerde editor modus. En aan de rechterkant zie je de editor preview. Dit is in feite een live weergave van je website die je direct kunt aanpassen, herformatteren en bewerken. 

Elementor: Jouw complete gids voor de WordPress Page Builder
Een homepage bewerken in Elementor

De inhoud wordt in de bewerkmodus in secties verdeeld. Als je met de muis over de secties beweegt, moeten ze lichtblauw oplichten. 

Als je op een sectie klikt, kun je de inhoud ervan rechtstreeks bewerken. Als je met de rechtermuisknop klikt, wordt het sectie-paneel geopend. Hier kun je zien hoe na het klikken op een afbeelding in het sjabloon, het controlepaneel voor de afbeelding aan de linkerkant verschijnt: 

Afbeeldingen bewerken in Elementor
Afbeeldingen bewerken in Elementor

Werken met widgets is een vergelijkbaar proces: als het al in de template aanwezig is, klik dan op het grijze potlood-icoon om de bewerkingsmodus te openen voor die specifieke widget. Deze verschijnt dan weer aan de linkerkant. 

Als je wijzigingen wilt aanbrengen in een afbeeldingscarrousel-widget, kun je deze aanklikken in het gemaakte sjabloon en vervolgens de instellingen wijzigen door de grootte, de bijbehorende tekst en de afbeeldingen aan te passen. 

Een afbeeldingscarrousel-widget toevoegen in Elementor
Een afbeeldingscarrousel widget toevoegen in Elementor

Naarmate je Elementor sjablonen leert gebruiken en je pagina-lay-out naar wens ontwerpt, kun je gaan nadenken over styling. Je kunt kleuren aanpassen door ze op globaal niveau te veranderen (voor je hele website als je Pro gebruikt) en ook op widget-basis. 

Het veranderen van de kleur van de koptekst is een fluitje van een cent:

De kleur, het lettertype en de stijl van tekst wijzigen in Elementor
Verander de kleur, het lettertype en de stijl van tekst in Elementor

Je kunt de lettertypes, -stijlen en -groottes aanpassen, wel of geen slagschaduw (en de ondoorzichtigheid daarvan) en diverse andere stijlinstellingen voor spatiëring, marges en randen aanpassen. Je kunt zelfs de lijngrootte en het patroon van de Divider Widget veranderen. 

Je kunt pictogrammen voor sociale media invoegen, de kleur en grootte aanpassen en hun plaatsing bepalen. Je kunt ook hun vorm veranderen, kolommen toevoegen en de uitlijning wijzigen. 

Sociale media pictogrammen toevoegen met Elementor
Sociale media-pictogrammen toevoegen met Elementor

De hele workflow met Elementor is gebruiksvriendelijk. Als je een fout maakt, is dat gemakkelijk te herstellen omdat je altijd je revisiegeschiedenis kunt bekijken en met één klik kunt terugkeren naar een oudere versie van je website. 

De weergaven Revisiegeschiedenis en Navigator in Elementor
De Revision History en Navigator in Elementor

Evenzo maakt de navigator het gemakkelijk om elke sectie, binnensectie en widget in één keer te zien, zodat je niet eindeloos omhoog of omlaag hoeft te scrollen. Het manipuleren van elk deel van je website is vergelijkbaar bij Elementor. Selecteer een sectie of een widget, breng wijzigingen aan en sla je werk op. En als je klaar bent, kun je je website publiceren. 

Als je meer functies wilt toevoegen of een nog robuustere starter theme wilt, kun je gebruik maken van Elementor themes en add-ons - dat is precies waar we het nu over gaan hebben. Nu je de basis van het gebruik van Elementor begrijpt, gaan we eens kijken naar enkele meest populaire themes die beschikbaar zijn voor het platform. 

De beste Elementor themes

  • Hello: Hello is een gratis en makkelijk te gebruiken theme, ontworpen voor Elementor. Hello is een echt theme voor het begin met Elementor. Hello bevat geen styling of scripts, maar het is met de belangrijkste  WordPress plugins compatibel. 
  • Layers: Elementor heeft Layers overgenomen, zodat het nu compatibel is met de plugin en ontwerpkeuzes biedt die geschikt zijn voor professionals - volledig gratis. 
  • Astra: Bekend als het populairste WordPress thema aller tijden. Astra is licht, snel en gemakkelijk aan te passen via Elementor. De gratis versie is zeer rijk aan functies, maar er is ook een Pro-versie die een grotere selectie van vooraf gemaakte widgets en aanpassingsopties biedt. De prijs begint bij 47 dollar per jaar.
  • Hestia: Hestia is een ander theme dat compatibel is met Elementor. Het biedt gratis een modern ontwerp. Maar je kunt ook upgraden naar de Pro-versie om meer opties voor widgets te krijgen en verbeterde Elementor compatibiliteit. Prijzen beginnen bij $69/jaar.
  • GeneratePress: Dit gratis en open source WordPress theme is een solide keuze voor het maken van elk type website. Er is ook een Pro-versie met meer functies die begint bij 44 dollar per jaar. 
  • OceanWP: Dit premium WordPress theme biedt volledige Elementor compatibiliteit, inclusief meerdere demo's, extensies en widgets, vanaf $ 39/jaar. 
  • Customify: Dit theme is gratis. Dankzij de integratie met Elementor en de Header & Footer Builder geeft het je een heleboel aanpassingsmogelijkheden. Je kunt ook upgraden naar de Pro-versie, die beschikbaar is vanaf $59/jaar voor extra modules, updates en support.
  • Neve: Dit theme heeft een Mobile First ontwerp dat werkt met Elementor en is kosteloos te gebruiken. Er is een Pro versie met nog meer functies beschikbaar vanaf $59/jaar.
  • Phlox Pro: Dit premium theme is beschikbaar op ThemeForest voor $49 en bevat meer dan 150 Elementor sjablonen. 
  • Zakra: Dit thema is ontworpen voor snelheid en SEO en bevat meer dan 65 startup templates. De Pro-versie bevat premium demo's en een breder scala aan functies, vanaf 59 dollar per jaar. 

Aanbevolen add-ons voor Elementor 

Elementor zit vol met functies. Je weet nu hoe je Elementor Themes moet gebruiken. Maar je moet ook de verschillende populaire add-ons overwegen om de functionaliteit verder uit te breiden. 

Terwijl je leert hoe je Elementor moet gebruiken, kan het handig zijn om deze opties bij de hand te hebben:

  • Ultimate Addons: Breidt Elementor uit met meer add-ons, widgets en blokken, vanaf $55. 
  • Essential Addons for Elementor: Dit is de meest populaire Elementor Library voor Elementor en wordt geleverd met meer dan 70 opties, vanaf $39.97 voor een enkele site. 
  • Elementor Pack: Dit pakket zit vol met gratis Elementor widgets en add-ons. De Pro-versie biedt nog meer widgets, support en updates, vanaf $29/jaar.
  • Prime Slider: Met deze add-on kun je een slider maken in de header en hero area van je Elementor website. Je kunt de plugin gratis downloaden of kiezen voor de Pro-versie, die ondersteuning en updates omvat, vanaf $7,92/jaar.
  • ToolKit voor Elementor: ToolKit heeft tot doel de creatie van Elementor websites te vereenvoudigen dankzij prestatieverbeteringen en meer intuïtieve admintools. Met deze add-on kun je voor 49 dollar per jaar aan de slag met maximaal drie websites.
  • Happy Addons: Last but not least, is er Happy Addons. De add-on voegt nieuwe widgets, secties en presets toe aan Elementor. Er is een gratis versie en een pro versie. Deze laatste wordt geleverd met extra functies zoals Live Copy, 24/7 support en updates. De prijs begint bij $29/jaar. 

Conclusie over Elementor Page Builder

Elementor wordt vaak bejubeld als de beste Page Builder Plugin voor WordPress. Daar is een goede reden voor: het functierijke ontwerp, de robuuste community en de beschikbaarheid van themes en add-ons maken Elementor een flexibele en toegankelijke manier om een website te bouwen. 

Als je Elementor wilt leren gebruiken, moet je beginnen met een solide hostingplan. Wij van RAIDBOXES bieden WordPress specifieke hosting die een verscheidenheid aan behoeften dekt. Als je vragen hebt over onze plannen neem dan gerust contact met ons op.

Jouw vragen over het onderwerp Elementor

Welke vragen heb je voor Maddy? We kijken uit naar je comment Ben jr geïnteresseerd in WordPress en webdesign? Volg RAIDBOXES dan op Twitter, Facebook, LinkedIn of via onze nieuwsbrief.

Maddy Osman is een SEO Content Strategist. Ze werkt met geselecteerde klanten op het gebeid van WordPress en webhosting. Door haar achtergrond in webdesign en WordPress heeft ze diepgaande kennis van SEO - en weet ze precies hoe ze merken moet verbinden met SEO-relevante content.

Gerelateerde artikelen

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.