Elementor handleiding (2024) – Direct van start!

Met Elementor kan je in korte tijd verbazingwekkende websites maken zonder code te gebruiken, maar een Nederlands uitleg is niet beschikbaar.
Daarom ontdek je in deze Elementor handleiding stap-voor-stap wat Elementor is, wat het kost en hoe je Elementor gebruikt om snel prachtige websites te ontwerpen zonder te programmeren. Volg de eenvoudige instructies en je kan aan de slag gaan met Elementor.

Wat kan je bouwen met Elementor?

Met Elementor kan je vrijwel alle soorten websites bouwen die je maar voor mogelijk houdt. Verder kun je ook speciale pagina’s en tools maken voor je koopproces of het verzamelen van klantinformatie en nog veel meer:

Voor- en nadelen Elementor

De Elementor pagebuilder is zeer volledig en de mogelijkheden zijn enorm. Vergeleken met de WordPress standaard blockeditor heeft deze tool een flinke streep voor.
De belangrijkste voor- en nadelen hebben we voor je op een rij gezet:

Intuïtieve drag & drop bewerker aan bezoekerskant

Kant & klare blokken en sjablonen

Mobile first werken mogelijk

Popups bouwen (pro)

Woocommerce webshop aan te passen (pro)

Uiterlijk en indeling blog aan te passen (pro)

Koppen en voet volledig op maat te maken (Pro)

Wat ik minder goed vond aan Elementor:

Vele mogelijkheden en opties kunnen verwarrend zijn

De bewerker werkt soms traag

Plug-ins van derden kunnen problemen veroorzaken

Benodigde structured data mist voor de header

Niet te verhullen dat Elementor is gebruikt voor het bouwen

Veel widget-blokken zijn voor de meeste mensen overbodig

Geen Nederlandstalige Elementor handleiding

Hoe werkt Elementor in WordPress?

Elementor is een plugin voor WordPress die na het installeren en activeren nieuwe extra functies en mogelijkheden geeft.

In principe maakt het de standaard block editor Gutenberg overbodig, maar het is ook mogelijk om deze in combinatie te blijven gebruiken. Op deze manier kan je ook een bestaande website rustig ombouwen naar Elementor.

Elementor werkt verder prima samen met de beste WordPress thema’s die de coderingsstandaarden van WordPress volgen. Natuurlijk is het dan wel verstandig om een thema te kiezen dat zelf geen pagebuilder heeft ingebouwd.

Hoe installeer ik Elementor?

Om met deze Elementor handleiding aan de slag te gaan zal je eerst de benodigde plugin moeten installeren.

Elementor & Elementor Pro werken beide op zowel een zelf gehoste WordPress websites (WordPress.org), als op een WordPress.com website.
Let alleen wel op wanneer je WordPress.com gebruikt, want dan heb je minstens het Business pakket nodig om Elementor te kunnen gebruiken.
Lees hier meer over deze twee verschillende varianten van WordPress.

1: Installeer en activeer de Elementor plugin

De eerste stap is het installeren en activeren van Elementor vanuit de WordPress repository door te zoeken naar ‘Elementor’ in de zoekbox.

Zodra je de plugin hebt gevonden, klikt je op ‘Nu Installeren’ en vervolgens op ‘Activeren’ om aan de slag te gaan.

Na de installatie komt er meestal een welkomstpagina met een uitleg filmpje en een optie om direct je eerste pagina te maken.

Bekijk eventueel het filmpje en kies dan de optie om te beginne met bouwen. Mocht je later willen starten, dan kan je direct vanaf stap 2 hieronder beginnen.

2: Maak een nieuwe pagina met Elementor

Zodra je Elementor hebt geïnstalleerd kan je met deze handleiding voor Elementor beginnen door naar het WordPress dashboard navigeren en te klikken op Pagina’s→ Nieuw toevoegen.

Op deze manier ga je de eerste pagina van je website maken met Elementor. Tot nu toe eigenlijk hetzelfde als je ook zonder Elementor zou doen. Je kan alvast een titel toevoegen, maar dan anders later ook nog.

Helemaal bovenaan je nieuwe pagina zie je een blauwe knop met de naam ‘Bewerken met Elementor’. Wanneer je op deze knop klikt, wordt je doorgestuurd naar de Elementor Editor.

Hoe werk je met deze Elementor handleiding?

Het werken met Elementor is terug te brengen tot een aantal standaard werkwijzen die voor de plaatsing van andere blokken (widgets) hetzelfde zijn. De instellingen zijn ook op precies dezelfde plekken terug te vinden, alleen verschillen de opties natuurlijk wel soms per blok. Een afbeelding heeft bijvoorbeeld andere instellingen dan een tekst, dus dat is logisch.

Verder kan je ook met kant & klare bouwblokken werken, of zelfs met volledige pagina’s die al helemaal zijn vormgegeven. Op die manier wordt het bouwen dus meer vervangen van voorbeeldteksten en -afbeeldingen. Ok, dat is genoeg theorie voor nu, we gaan aan de slag:

1: Bouw een pagina met de Elementor Editor

Als je de bovenstaande installatie stappen succesvol hebt doorlopen, dan zou je nu de Elementor Editor aan je linkerhand moeten zien. Vanaf hier kan je beginnen met het ontwerpen van de pagina door de widgets die je wil plaatsen te slepen (muisknop ingedrukt houden) op de pagina.

Je kan ook nieuwe secties(rijen) toevoegen aan je pagina om verschillende elementen toe te voegen in verschillende gebieden van je pagina.

Met de Elementor bewerker heb je de flexibiliteit om de gehele lay-out, structuur en het uiterlijk van je website pagina’s aan te passen. Het enige wat je dan hoeft te doen is de instellingen van de Elementor Editor links aan te passen en de veranderingen in real time te bekijken.

Teksten kan je ook direct in de pagina zelf typen. We hebben hier een Kop blok (widget) toegevoegd:

1: Kies een pagina lay-out in de Elementor bewerker

Je kan de lay-out van je pagina kiezen in de Elementor Editor door op het tandwiel icoon te klikken en vervolgens een van de lay-out opties te kiezen uit het ‘Pagina Lay-out’ drop down menu. Voor deze tutorial gebruiken we de ‘Elementor Full Width’ layout.

Je kan er ook voor kiezen om de optie ‘Titel verbergen’ hier aan te zetten als je de titel van je pagina niet wilt weergeven.

Als je de achtergrondkleur van je pagina wilt veranderen, of een achtergrondafbeelding wil toevoegen aan de pagina, kan je klikken op de ‘Style’ tab en spelen met de instellingen onder ‘Body Style’.

2: Kies lay-out structuur of kant & klare formats

Er zijn twee keuze’s om de indeling van je pagina te bepalen:

1. Van scratch met de “+” Een rij toevoegen met een gekozen aantal kolommen
2. Voor mensen die van gemak houden de kant & klare designs en blokken kiezen met het “Mapje”

Door op het ‘+’ icoontje te klikken boven de ‘Sleep widget hierheen’ optie kan je de layout structuur kiezen voor de sectie(=rij):

Dit is vooral handig als je veel verschillende elementen samen in één sectie wilt toevoegen, en geeft je meer flexibiliteit als het gaat om het ontwerpen van je webpagina. Je kan kiezen hoeveel blokken je naast elkaar wil hebben(is later altijd nog aan te passen).

Wanneer je voor het “Mapje” kiest kan je kant & klare blokken en designs kiezen, of je eigen eerder opgeslagen sjablonen oproepen. Je krijgt na de te klikken op “Invoegen” de voorbeelden exact hetzelfde togeveoegd aan je pagina.

De optie “Invoegen” komt beschikbaar door met je muis boven een design of blok te zweven. Wanneer er “Go Pro” staat kan je die optie alleen kiezen na aanschaf.

3: Elementen toevoegen & verschillende secties verplaatsen

Blijf elementen toevoegen en secties verplaatsen totdat je tevreden bent met hoe je pagina eruit ziet. Voor elk element zie je drie tabbladen: Layout, Style en Advanced.

Voor elk element zullen de instellingen onder deze tabs anders zijn, dus speel met de opties totdat je tevreden bent met het uiterlijk van je pagina.

4: Sectie-rijen, kolommen en widget blokken

Je kan de de onderdelen van een sectie(rij) ook nog beïnvloeden met de blauwe en zwarte opties. In het middelste blauwe blok kan je met de “+” kan je een nieuwe sectie maken en met de “x” de huidige sectie verwijderen. Wanneer je met je muis boven de de stippels zweeft kan het blok eventueel verslepen.

De zwarte optie is voor de kolommen in de sectie. Door je rechtermuisknop te gebruiken (Mac: CTRL/CMD + klik) krijg je meerdere opties, zoals toevoegen/verwijderen kolommen.

5: Stel Global Widgets in en toon ze op alle pagina’s

Met Elementor Pro krijg je ook nog een erg handige optie om globale widgets in te stellen en weer te geven. Deze widgets zullen automatisch worden weergegeven op elke pagina van je website. Dit is erg handig voor elementen die op elke pagina herhaald moeten worden, zoals een menubalk, knoppen, opt-ins en nog veel meer.

Om een element als een globale widget op te slaan, hoef je alleen maar met de rechtermuisknop op het element te klikken en ‘Opslaan als globaal’ te selecteren.

Wat is het verschil tussen Elementor Pro en Basis?

Behalve dat de Elementor pagebuilder gratis is, mist het ook een aantal geavanceerde dingen, zoals de mogelijkheid om templates aan te passen. Dat is ook de reden waarom de Pro versie een themebuilder wordt genoemd, wat je kan er werkelijk elk deel van je website mee aanpassen.

Buiten het aanpassen van de templates van je website kan je met de Pro versie ook nog de volgende dingen doen:

• Formulieren ontwerpen
• Popups en animaties maken
• Kleurverloop en schaduw
• De webshop look & feel aanpassen
• Dynamische velden en custom fields

Weet je nog steeds niet wat je moet kiezen? kijk dan bij Elementor naar gedetailleerde, gemakkelijk te scannen lijst die het verschil tussen Elementor Pro en de gratis versie aangeeft.

Hoe duur is Elementor Pro?

Elementor heeft zowel een gratis versie als een aantal betaalde abonnementen. De gratis versie is al heel compleet en voor veel mensen genoeg om een prachtige website mee te bouwen. Deze bestaat uit de drag-and-drop bewerker met meer dan 40 bouwblokken en vele kant & klare sjablonen.

Als je toegang wilt tot de meer geavanceerde functionaliteit, zoals de mogelijkheid om formulieren te maken, een webshop aan te passen of popups maken, dan kan je upgraden naar de pro-versie. Dit is de huidige prijsstructuur:

• $49 per jaar voor 1 site
• $99 per jaar voor 3 sites
• $199 per jaar voor 1.000 sites

Hoe installeer ik Elementor Pro?

Wanneer je Elementor Pro hebt aanschaft zal je deze moeten installeren.
In deze Elementor handleiding begeleiden we je ook door het hele proces van het installeren en activeren van Elementor Pro op je WordPress site.

Let op: Elementor Pro is een extensie van Elementor, dus je moet de gratis Elementor plugin al geïnstalleerd hebben. Lees hier over gratis plugins installeren

1. Na de aankoop van Elementor Pro, ga je naar de website: my.elementor.com.
2. Log daar in met de inloggegevens die je eerder per mail hebt ontvangen.
3. Na het inloggen, komt je op de ‘Mijn Account’ pagina. Klik op de “Download Plugin” knop in de rechterbovenhoek van het onderdeel Mijn Account en download het .zip bestand naar je desktop.
4. Ga vervolgens in je website naar het WordPress dashboard en klik op Plugins > Nieuw toevoegen. Klik bovenin op het onderdeel Plugin Uploaden en kies het zip-bestand dat je eerder hebt gedownload. Klik dan op installeren en activeer de plugin daarna.
5. Bovenaan het dashboard van je site krijg je nu als het goed is een bericht dat aangeeft dat je de licentiesleutel moet invoeren en moet activeren.

Opmerking: Als je een foutmelding krijgt dat je de style.css stylesheet mist, betekent dit dat je hebt geprobeerd dit te installeren als een thema in plaats van een plugin. Elementor Pro is een plugin, geen thema. Installeer het alleen als een nieuwe plugin.

Meer leren over Elementor

Met wat we in deze handleiding hebben behandeld kan je direct aan de slag gaan en beginnen met het bouwen van je website of webshop. Mocht je ondanks deze uitgebreide handleiding toch nog behoefte hebben aan een Elementor cursus of een aantal uurtjes training of ondersteuning, laat het ons dan weten dan maken we met plezier een kosteloze en vrijblijvende offerte voor je.

Nawoord

Met deze uitgebreide handleiding Elementor kan je nu een mooie website bouwen en weet je wat het kan en de voor- en nadelen van het gebruik binnen WordPress. Je kan direct een vliegende start maken door je eerste schreden te zetten.

Het directe resultaat en het gemak van werken met Elementor zullen je verassen. Veel plezier met deze handleiding en begin met het bouwen van je website of webshop. We hebben nog veel meer informatie op deze website, dus kijk nog even rond wanneer je er niet uitkomt.