Inloggen:

Elementor handleiding voor beginners 2024

Elementor handleiding voor beginners

Elementor bestaat sinds 2016 en was al heel snel de populairste page builder plugin voor WordPress. Er zijn meer dan 14 miljoen websites die Elementor gebruiken en dit is niet voor niks.

Het is een uitermate handige plugin om op een makkelijke manier schitterende pagina’s te bouwen in WordPress, zonder ook maar enige kennis van code nodig te hebben.

Het fijne aan Elementor is dat je alles wat je doet gewoon live op de website ziet gebeuren. Je bent dus niet in een editor aan het werken zonder het design van je website te zien, je werkt juist in een live editor op de website.

Om dingen toe te voegen aan de pagina kun je eenvoudig verschillende elementen, ook wel widgets genoemd, op de juiste plek slepen (drag and drop) en content toevoegen.

Aangezien Elementor heel fijn werkt gebruik ik de plugin ook op mijn eigen website voor verschillende pagina’s. In dit artikel help ik je graag om goed kennis te maken met de Elementor plugin, dus laten we maar snel starten met deze Elementor handleiding.

Ik gebruik de Elementor plugin dan ook op mijn eigen website voor verschillende pagina’s. In dit artikel laat ik je graag goed kennis maken met deze page builder voor WordPress.

Waar kun je Elementor voor gebruiken?

Eenvoudig gezegd kun je Elementor gebruiken wanneer de standaard editor van WordPress, de blok editor (ook wel Gutenberg genoemd), niet genoeg mogelijkheden heeft wat betreft het opmaken en designen van een pagina op je website.

Elementor is een WordPress page builder waar je eenvoudig content elementen kunt toevoegen aan een pagina. Je zet het op de juiste plek door het element simpelweg te slepen naar de locatie waar je het wil hebben.

Alle aanpassingen die je aan de pagina doet zie je direct live gebeuren, waardoor je precies weet hoe de pagina er live op je website komt uit te zien. Je kunt Elementor dus ook wel een frontend editor noemen.

Elementor gebruik ik persoonlijk op Webtalis voor pagina’s als de homepage, verkooppagina’s en andere belangrijke pagina’s van mijn website. Eigenlijk dus de pagina’s waarbij de opmaak wat belangrijker is. Dit is dan ook waar Elementor perfect voor geschikt is. Zo is het WordPress hosting artikel, waar ik je meer vertel over de betere wordpress hosting providers die er zijn, gemaakt met Elementor en ook de pagina Website tools is met Elementor gebouwd.

Elementor handleiding: Hoe werkt het?

In deze handleiding zal ik je de absolute basis vertellen van Elementor, zodat jij met deze page builder plugin kunt werken en er schitterende pagina’s mee kunt gaan bouwen zonder kennis van code.

Elementor is in ieder geval een erg gebruiksvriendelijke live editor waar je elementen als tekst, afbeeldingen, video’s, iconen en nog veel meer naar de juiste plek kunt slepen om de pagina op te maken.

Mocht je nieuw zijn met WordPress en wil je een website maken met Elementor, bekijk dan zeker ook mijn handleiding WordPress website maken met Elementor. Laten we nu echt gaan beginnen met de Elementor handleiding.

Elementor installeren

Elementor heeft een gratis en betaalde versie (Elementor Pro). De gratis versie kun je installeren net als iedere WordPress plugin. Het is een kwestie van naar Plugins → Nieuwe plugin toevoegen gaan, zoeken naar Elementor en dan op Nu installeren klikken.

Elementor installeren

Wanneer de plugin eenmaal geïnstalleerd is komt er op de plek van ‘Nu installeren’ een blauwe knop met Nu activeren te staan. Klik hierop om Elementor actief op je website te krijgen.

Elementor Pro installeren

Mocht je Elementor Pro hebben aangeschaft (Twijfel je? Zie Elementor Pro kopen: Is het de moeite?), dan zal je ook nog Elementor Pro moeten installeren. Je doet dit op een iets andere manier.

Als allereerst zal je Elementor Pro moeten downloaden van de Elementor website. Wanneer je dit gedaan hebt kun je wederom naar Plugins → Nieuwe plugin toevoegen gaan. Nu komt het verschil. In plaats van een plugin te zoeken, klik je nu bovenaan op de knop Plugin uploaden.

Elementor pro installeren

Je kunt nu op Bladeren… klikken of het Elementor pro .zip-bestand slepen naar dit veld. Klik vervolgens op Nu installeren om Elementor Pro te installeren op je WordPress website. Daarna zal je alleen nog op Nu activeren en dan heb je Elementor en Elementor Pro volledig geïnstalleerd.

Elementor editor starten

Zodra je de Elementor plugin geïnstalleerd hebt op je website, kun je de page builder eenvoudig starten wanneer je een nieuw bericht of pagina aanmaakt op je website. Je doet dit door bovenaan de pagina op Bewerk met Elementor te klikken.

Elementor page builder starten

Voordat je op de ‘Bewerk met Elementor’ knop klikt, is het wel handig om twee dingen te doen. Als allereerst zou ik de titel invullen. Op deze manier kun je de pagina makkelijker terugvinden wanneer je het op een later moment weer wil werken. Je kunt de titel ook nog in de Elementor editor invoeren, maar het werkt zo veel sneller want je kunt het direct invoeren.

Iets anders wat je ook meteen kunt doen is aan de rechterkant een template kiezen. Met een page builder als Elementor heb je namelijk invloed op de breedte van het contentgebied van je website. Je hoeft je dus niet aan de vooraf bepaalde breedte te houden waar je thema gebruik van maakt. andere optie is om aan de rechterkant ook een template te kiezen.

Voor bepaalde pagina’s wil je geen rekening houden met de breedte. Met de juiste template kun je volledige breedte van een pagina gebruiken. Dit kan handig zijn voor bijvoorbeeld de homepage, verkooppagina’s of diverse andere pagina’s.

Om een template te kiezen kun je aan de rechterkant (sidebar) van de standaard editor bij de bericht of pagina opties aangeven welke template je wil gebruiken.

WordPress template kiezen

Ga hier voor de optie Elementor volledige breedte om gebruik te maken van de volledige breedte. Wil je de standaard breedte van je thema gebruiken, dan hoef je hier niks te doen.

Elementor page builder editor overzicht

Wanneer ik de Elementor page builder editor open op mijn website ziet het er als volgt uit.

Elementor page builder editor overzicht

Editor top balk: Nu moet ik zeggen dat de zwarte editor top balk nog een ‘beta’ functie is en nog niet standaard ingesteld staat, maar het zal niet lang meer duren voordat dit de standaard is.

In de top balk kun je bij verschillende instellingen komen. Zo kun je bij de site-instellingen, structuur en pagina-instellingen komen. Verder kun je aangeven op wat voor type scherm je de pagina wil zien in de editor, zodat je ervoor kunt zorgen dat jouw website er op alle apparaten goed uitziet.

Linkerzijde: Aan de linkerzijde kun je alle widgets (elementen) zien die beschikbaar zijn in Elementor. Zonder editor top balk kun je hier ook nog de instellingen terugvinden die ik hierboven heb genoemd.

Wanneer je een widget wil gebruiken kun je deze naar de rechterkant slepen en op de juiste positie op de pagina plaatsen.

Rechterzijde: De rechterzijde is het gedeelte waar je jouw content kunt maken en direct live kunt zien hoe het er op je website uit. Wanneer je iets wil wijzigen kun je op het element klikken en dan zal je alle mogelijkheden voor het desbetreffende element zien. Verder kun je op het plusje of het mapje klikken. Wanneer je op het plusje klikt kun je een type layout kiezen en wanneer je op het mapje klikt kun je een template kiezen om in te laden op de pagina.

Site instellingen

De site instellingen zijn zoals je al kunt vermoeden voor heel de website geldig. In Elementor krijg je de volgende instelopties wanneer je op site instellingen klikt.

Site instellingen in Elementor

Het gaat in dit geval bij vrijwel alle instellingen om de opmaak van de website. Je kunt het jezelf makkelijk maken door bijvoorbeeld de globale kleuren, typografie, knoppen, en dat soort zaken direct globaal in te stellen zoals je het wil hebben. Je hoeft het dan niet elke keer te doen als je een element toevoegt.

Pagina instellingen

Bij de pagina instellingen kun je een aantal dingen doen die je normaliter in de standaard WordPress editor kunt doen, maar nu dus ook gewoon vanuit de Elementor editor.

Zo kun je de pagina-titel wijzigen, de status, een samenvatting toevoegen, uitgelichte afbeeldingen plaatsen en reacties toestaan of niet. Een andere handige functie is dat je de titel kunt verbergen, want het kan heel goed zijn dat je die zelf in de pagina wil verwerken op een mooie manier, in plaats van hoe het hierboven staat in de afbeelding. Een pagina layout kun je ook kiezen indien de editor bijvoorbeeld niet de volledige breedte kan gebruiken en je dit wel zou willen.

De verschillende widgets in Elementor

Je krijgt in de gratis versie van Elementor 30+ widgets waar je gebruik van kunt maken om je pagina’s mee op te bouwen. Dit is al een heel mooi aantal waar veel mensen genoeg aan hebben.

Elementor gratis widgets

Eigenlijk zijn dit alle basis widgets die je kunt bedenken. Het zal dan ook geen enkel probleem zijn om tekst, afbeeldingen, titels, video’s, knoppen en andere dingen te plaatsen op je website.

Wanneer je net wat extra’s wil, dan kun je met Elementor Pro toegang krijgen tot nog veel meer widgets.

Hier staan wederom weer meerdere hele handige widgets bij. Wil je bijvoorbeeld een inhoudsopgave toevoegen aan een pagina, dan kun je dit nu heel eenvoudig doen. Op je homepage en blogpagina kun je ook eenvoudig de posts widget gebruiken om artikelen van je website weer te geven.

Bij Elementor Pro krijg je ook nog een thema bouwer waarbij je extra widgets kunt gebruiken. Het gaat om onderstaande widgets.

Thema elementen in Elementor Pro

Tot slot zijn er ook nog Pro widgets speciaal voor WooCommerce. Dit is dus alleen handig wanneer je een WordPress webshop wil maken en is overbodig bij andere type websites.

Alle WooCommerce widgets van Elementor pro

Templates in Elementor

Een hele makkelijke manier om je website vorm te geven is behulp met templates. Je hoeft dan enkel de kleuren, afbeeldingen en teksten aan te passen naar hoe je het zelf zou willen hebben. In deze handleiding gaan we hier geen gebruik van maken, omdat ik wil dat je leert hoe Elementor werkt en niet hoe een template inladen werkt. Desalniettemin kun je natuurlijk altijd eens kijken naar de beschikbare templates in Elementor.

Elementor template bibliotheek

Afhankelijk van je versie (gratis of pro) kun je de templates inladen in je website. Mocht je op zoek zijn naar meer templates, dan kun je ook altijd nog kijken naar plugins als Starter Templates in combinatie met het WordPress thema Astra.

Pagina bouwen met containers en widgets in Elementor

Nu je een beetje weet waar alles staat in Elementor en welke widgets je allemaal kunt toevoegen om een pagina te bouwen, is het wel ook prettig hoe dit ongeveer werkt. In de Elementor Cursus vertel ik je hier natuurlijk alles over en bouwen we ook een aantal standaard pagina’s, maar ook hier zal ik je in het kort het een en ander uitleggen.

Containers in Elementor

Vroeger werd er in Elementor gewerkt met secties, rijen, kolommen en widgets. Tegenwoordig kun je met containers werken. Dit werkt ongeveer hetzelfde, maar is toch weer een stuk efficiënter dan rijen, kolommen en widgets.

Wanneer je een lege pagina voor je hebt kun je in het midden op het plusje drukken om de structuur te bepalen van de pagina of in ieder geval van dat onderdeel van de pagina, ook wel sectie genoemd.

Nieuwe sectie toevoegen in Elementor

Wanneer je hierop geklikt hebt krijg je het volgende te zien:

Structuur selecteren in Elementor

Je ziet hier diverse opties waar je uit kunt kiezen. De eerste twee opties zijn wat dat betreft het interessants. Bij de eerste optie met het pijltje naar beneden zullen al je widgets onder elkaar komen te staan in de container. Bij de tweede optie met het pijltje naar rechts, zullen widgets naast elkaar komen te staan indien hier ruimte voor is. Dankzij deze optie heb je dus niet altijd perse aparte containers naast elkaar nodig, wat weer aan code in de achterkant scheelt.

De andere opties geven aan hoeveel containers je naast elkaar kunt plaatsen of geven je handige andere structuren die je zou kunnen gebruiken in je design. Bepaal voor jezelf welke optie handig is en kies hiervoor. In onderstaand voorbeeld heb ik voor 2 containers naast elkaar gekozen.

Elementor containers

Om de hoofdcontainer te bewerken kun je op de 6 puntjes in het midden klikken van de roze box. Je krijgt vervolgens aan de linkerkant alle instellingen voor de desbetreffende container te zien. Wanneer je een container binnenin de container wil bewerken kun je er met je muis overheen gaan en op het container icoontje klikken. Je komt dan wederom aan de linkerkant bij de instellingen van de container terecht.

Container instellingen

Over de container instellingen gesproken, hieronder staan alle instellingen die je bij een container kunt vinden.

Container instellingen in Elementor

Zoals je ziet zijn er 3 type instellingen. Je hebt layout instellingen, stijl instellingen en geavanceerde instellingen.

De layout instellingen van een container geven je onder andere de mogelijkheid om aan te geven of je de volledige breedte wil gebruiken of een specifieke breedte die je voor ogen hebt. Het is tevens mogelijk om een minimale hoogte aan te geven, wat in diverse situaties handig is. Bij richting kun je aangeven of widgets naast elkaar kunnen komen (pijltje opzij) te staan of onder elkaar mogen staan (pijltje omhoog of beneden). Verder heb je nog wat mogelijkheden qua uitlijnen en ruimtes tussen elementen.

Bij de stijl instellingen heb je invloed over de opmaak. Zo kun je een achtergrondkleur, afbeelding of video selecteren, randen toevoegen en een scheiding maken tussen containers.

Tot slot hebben we ook nog geavanceerde instellingen. Hier kun je marges en padding toevoegen. Dit is simpel gezegd ruimte rondom (marge) of binnenin (padding) je containers. Aan andere opties zou ik niet direct zitten als je niet weet wat het inhoud, want je zal het vermoedelijk niet heel hard nodig hebben. Wat nog wel leuk is zijn de bewegingseffecten die je kunt selecteren en onder het kopje responsive kun je ook aangeven of een bepaalde container bijvoorbeeld niet zichtbaar mag zijn op een apparaat (desktop, tablet of mobiel).

Tot zover in het kort de containers. Hopelijk is het je duidelijk geworden en anders raad ik je altijd aan om gewoon wat instellingen uit te testen om te zien wat het resultaat daarvan is.

Widgets (elementen) toevoegen met Elementor

Laten we nu gewoon iets simpels opbouwen op de pagina. Ik wil aan de linkerkant een titel en tekst hebben en aan de rechterkant een afbeelding. Om hiermee te beginnen klikken we als eerste op het plusje in een container of linksboven in de editor top balk.

Widgets toevoegen in Elementor

Vervolgens kunnen we vanaf de linkerkant de widgets koptekst en tekstbewerker slepen naar de gewenste linkercontainer. Elke keer dat je een widget in de container sleept zal je direct de mogelijkheid hebben om de widget te bewerken. Je zal dan linksboven in de editor top balk opnieuw op het plusje moeten klikken om een nieuwe widget toe te kunnen voegen.

Nu we overigens toch widgets aan het toevoegen zijn, kunnen we ook alvast de afbeeldingenwidget slepen naar de rechtercontainer. Het zal er dan als volgt uit komen te zien:

Widgets bewerken in Elementor

Door de widgets en de container te bewerken kun je dit er echter al vrij eenvoudig heel anders uit laten zien. Zo zou dit het resultaat kunnen worden.

Koptekst, tekst en afbeelding design in Elementor

Direct een aardig verschil toch? Dit is heel eenvoudig te bereiken door gewoon de inhoud toe te voegen en wat aanpassingen te doen bij het stijl tabblad als je een widget bewerkt.

Widgets bewerken

Vanaf hier is het op alle onderdelen klikken en de inhoud toevoegen en eventueel de opmaak nog iets wijzigen. Laten we dus eens een widget bewerken zoals je het op de afbeelding hierboven ziet voor de koptekst. Je hebt hier net als bij de containers altijd een tabblad ‘Stijl’ en ‘Geavanceerd’ staan bij de instellingen.

Bij Stijl kun je altijd je invloed uitoefenen op de opmaak zoals het lettertype bij tekst of juist de randen of breedte van een afbeelding. Kijk dus zeker altijd bij de stijl opties. Bij Geavanceerd heb je altijd marge en padding mogelijkheden en een aantal dingen meer.

Het grote verschil nu is het tabblad Inhoud wat direct opent. Je kunt hier bij de koptekst direct de titel invullen, eventueel een link toevoegen aan de titel, een afmeting (grootte) meegeven, de HTML tag (H1, H2, H3, etc.) meegeven en de uitlijning selecteren.

Natuurlijk verschilt de inhoud tabblad het meest tussen alle widgets. Voor een koptekst of tekstbewerker widget heb je tenslotte weer hele andere inhoud dan bij een afbeelding en bij weer andere widgets zullen de opties weer anders zien. Laten we voor je beeldvorming daarom ook nog even de instellingen van een afbeelding widget bekijken.

Je kunt hier uiteraard een afbeelding kiezen uit je mediabibliotheek of een afbeelding uploaden om te gaan gebruiken. Vervolgens kun je de afbeeldingsgrootte, ‘Full’ geeft in dit geval aan dat het originele formaat gebruikt wordt. Bij uitlijning kun je kiezen of je de afbeelding links, in het midden of rechts wil uitlijnen. Verder hebben we nog de optie onderschrift, zodat je een stukje tekst onder de afbeelding kunt plaatsen en bij Link kun je de afbeelding koppelen aan een URL.

Handige functionaliteiten in Elementor

Je bent al onwijs ver in dit artikel gekomen en daar staat een beloning tegenover. We gaan eens kijken naar een aantal handige functies waar je gebruik van kunt maken in Elementor. Ben je er klaar voor?

De rechtermuisknop is ontzettend handig

Wanneer je de rechtermuisknop gebruikt als je met de muisaanwijzer op een container of widget staat krijg je ontzettend veel interessante opties. Het is een iets waar je eigenlijk gewoon niet zonder kan en ik op veel pagina’s heb gebruikt. Ik zal het je laten zien.

Rechtermuisknop opties in Elementor

Wellicht denk je van zo interessant is dit toch niet? Maar een aantal dingen zijn wel zeker interessant. Zo kun je een element Kopiëren en vervolgens bij een ander element voor de optie Plakstijl gaan. Elementor regelt dan dat de stijl exact hetzelfde wordt als bij het element die je gekopieerd hebt. Dit is bijvoorbeeld handig wanneer je bepaalde schaduweffecten op meerdere plekken wil gebruiken en het niet telkens opnieuw wil instellen.

De mogelijkheid Dupliceren is ook onwijs handig. Het scheelt je weer een actie om op het plusje te klikken en een widget te slepen naar de juiste locatie. Je kunt nu gewoon een soortgelijk element dupliceren, slepen naar de juiste plek en direct bewerken.

Wanneer je meerdere websites hebt is de optie Plakken van andere site ook enorm handig. Heb je op een andere website een schitterende container gemaakt die je wil hergebruiken? Dan kun je op de desbetreffende website de container kopiëren en vervolgens op een andere site plakken. Veel sneller werken dan dit zal niet snel mogelijk zijn. Het is nu alleen nog maar een kwestie van de inhoud aanpassen.

Een optie die je hier niet helemaal ziet staan, is de optie Opslaan als template. Dit is een optie die je tegenkomt als je de rechtermuisknop gebruikt op een container gebruikt. Je kunt je container dan opslaan als template en vervolgens op andere pagina’s inladen als template, waardoor alles er direct hetzelfde uit zal zien. Het is dan wederom een kwestie van de inhoud naar wens aanpassen, zonder dat je de rest weer allemaal moet instellen.

Elementor AI

Elementor heeft tegenwoordig een AI functie ingebouwd waar je gebruik van kunt maken. Maak je geen zorgen, deze Elementor handleiding is gewoon door mij (Maikel van de Weerd) geschreven.

Het is echter mogelijk om je teksten te laten schrijven door AI. Sterker nog, je kunt er zelfs afbeeldingen mee genereren. Wanneer de optie er voor een widget is zal je ‘Bewerk met AI‘ zien staan of enkel het AI icoontje wat Elementor hiervoor gebruikt.

Bewerken met AI mogelijkheid in Elementor

Vervolgens krijg je de mogelijkheid om een opdracht (prompt) in te voeren.

Elementor AI prompt invoeren

Schrijf hier een zo’n nauwkeurig mogelijke opdracht. Hoe nauwkeuriger je bent, hoe beter het resultaat vaak is. Eenmaal alles ingevoerd zoals je het voor ogen hebt? Dan kun je op tekst genereren (of afbeelding genereren) klikken om de opdracht te laten uitvoeren.

Verschil tussen de gratis versie en Elementor Pro

Elementor heeft een gratis variant waar iedereen gebruik van kan maken en die te downloaden is via WordPress.org. Wanneer je echter meer mogelijkheden wil krijgen kom je bij Elementor Pro terecht. Het verschil zit hem, zoals je waarschijnlijk wel verwacht, voornamelijk in de opties die je krijgt. De gratis versie is een gestripte versie van de betaalde variant.

Met de gratis Elementor variant kom je al een heel eind, maar toch heb je een stuk minder modules, templates en mogelijkheden. Zo kun je met Elementor Pro echt je complete thema naar je eigen hand zetten met behulp van de thema bouwer. Voor een webshop zitten er ook super handige widgets bij waar je gebruik van kunt maken op allerlei pagina’s van je website.

Wanneer je echter serieus aan de slag wilt gaan met Elementor, kom je wat mij betreft bij de betaalde oplossing terecht. Voor meer informatie over of Elementor Pro de moeite is verwijs ik je graag door naar mijn artikel waarin ik dit uitgebreider bespreek. Klik hier om te kijken of Elementor Pro voor jou de moeite is.

Elementor Pro kosten

Wat we hier wel alvast kunnen doen is naar de kosten kijken van Elementor pro. De volgende pakketten zijn beschikbaar.

Elementor Pro kosten overzicht

Tussen het Essential pakket en de rest van de pakketten zit het grootste verschil. Bij het essential pakket kun je namelijk niet de popup builder gebruiken, custom code toevoegen, de webshop functies gebruiken en kun je ook geen notities maken.

Wanneer je niks met deze opties wil doen en enkel 1 website hebt, kan ik je in ieder geval het Essential pakket aanbevelen.

Heb je een webshop, meerdere websites of de functies echt nodig die ontbreken in het Essential pakket? Je komt dan al snel uit bij het Advanced pakket of hoger. Het verschil zit hem hier eigenlijk alleen nog maar in het aantal websites.

  • Heb je 1-3 websites? Dan ga je voor Advanced
  • Heb je 4-25 websites? Dan is Expert jouw keuze
  • Heb je 26-1000 websites of gebruik je het graag voor je klanten? Neem het Agency pakket

Leer meer met de Elementor Cursus

Ik hoop dat deze basis Elementor handleiding je een hoop duidelijk heeft gemaakt. Wil je echter meer leren over Elementor, dan kan ik je ook mijn online Elementor video cursus aanraden. Je kunt dan over mijn schouder meekijken en exact zien hoe Elementor werkt.

Elementor cursus modules horizontaal

In de Elementor cursus leer je het volgende:

  • Een goede start: Hoe start je een website of webshop en installeer je de plugins.
  • De basis: Algemene instellingen, elementor interface, site instellingen en de flexbox container.
  • Demo site: We maken een aantal demo pagina’s om precies te ontdekken hoe alles werkt.
  • Handige functies: Ontdek functionaliteiten die je graag gaat gebruiken.
  • Elementor Pro: Ik laat je de extra functies zien die Elementor Pro je geeft.
  • WooCommerce: Leer hoe je Elementor kunt gebruiken voor je webshop
  • Toekomstige updates: Elementor blijft veranderen. De cursus blijft up-to-date.

WordPress Hulp Nodig? Join Het WP Lab

Het WordPress Lab MockupHeb je vragen aan de hand van dit artikel of wil je verder op weg geholpen worden met je website?

Sluit je aan bij Het WordPress lab, een community voor WordPress-liefhebbers waarin ik antwoord geef op jouw WordPress vragen en je toegang krijgt tot al mijn WordPress cursussen.