Je wilt een website die je zelf eenvoudig kunt aanpassen en beheren. Geen lastige codering of ingewikkelde handelingen, maar gewoon een handige visuele bouwer. Daarnaast moet je website snel & veilig zijn er ook gewoon heel goed uitzien. Dit en meer is allemaal mogelijk met WordPress en Elementor. Ontdek waarom deze twee zo goed met elkaar werken en wat je er allemaal mee kunt doen. Ook deel ik enkele handige tips met je waardoor het nóg eenvoudiger wordt om je eigen website te bouwen!
Wat staat er in dit blog?
Wat is WordPress?
WordPress is een open-source CMS (Content Management System) dat volledig gratis te gebruiken is. Open-source houdt in dat het voor iedereen toegankelijk is om aan te werken. Heb je wat ervaring in webdesign en codering, dan kan WordPress zonder beperkingen worden gebruikt. Waar het voorheen een platform was voor het maken van blogs, is het inmiddels uitgegroeid tot een enorm veelzijdige websitebouwer voor bedrijven, portfolio’s, e-commerce en meer. WordPress is wereldwijd een van de meest gebruikte websitebouwers en een uitstekende keuze als je serieus een website wilt maken en een professioneel merk wilt opbouwen. Andere populaire websitebouwers zijn Wix en Shopify.
Dankzij de duizenden eenvoudig te installeren plugins blijft je website altijd aan je wensen voldoen. Maak contactformulieren, creëer een leeromgeving, voeg een webshop toe, maak automatisch back-ups en nog veel meer. Wat je ook wilt doen, er is altijd een plugin beschikbaar die je erbij helpt. Let wel op met het gebruik van plugins, teveel maken je website namelijk langzaam.
LET OP: Er zijn twee verschillende opties om met WordPress te werken, WordPress.com en WordPress.org. Ik raad je ten alle tijde aan om met WordPress.org te werken. Lees hier de verschillen tussen beide websitebouwers.
Wat is Elementor?
Elementor is een gratis WordPress plugin waarmee je jouw website kunt vormgeven. Het wordt ook wel een pagebuilder genoemd. Deze drag & drop front end editor maakt het je heel makkelijk om zonder code je website in elkaar te zetten. Met meer dan 5 miljoen gebruikers is Elementor één van de meest populaire WordPress pagebuilders, en dat is niet voor niets. Met de gratis versie kom je al een heel eind, maar de betaalde PRO versie maakt het je nog makkelijker. Een groot voordeel van Elementor is, dat het niet aan een thema vast zit, je kunt het dus met ieder thema gebruiken.
Elementor en WordPress werken erg goed samen waardoor jij een prachtige site kunt ontwerpen en bouwen. De combinatie is ideaal voor mensen met weinig kennis van webdesign en coderen. Dit wil niet zeggen dat je het zomaar even doet, het kost zeker nog de nodige tijd en moeite om beide systemen te leren kennen en de mogelijkheden ervan te ontdekken. Daarnaast is het met het bouwen van een website ook belangrijk om te kijken waar een goede website aan moet voldoen.
Wist je dat? Een gemiddelde website twee tot drie jaar meegaat en daarna weer moet worden vernieuwd.
Websites bouwen met Elementor
Websites bouwen wordt steeds makkelijker en Elementor speelt hier mooi op in. De pagebuilder maakt gebruik van widgets die je kunt gebruiken om je pagina’s vorm te geven. Niet alleen met de vormgeving maar ook de styling kun je volledig naar wens aanpassen. Ander letterype? Andere kleur? Menu of footer zelf ontwerpen? Het kan allemaal! Je kunt bijna alles bouwen met Elementor, zelfs in de gratis versie zijn er enorm veel functies en bijna geen beperkingen, dat zie je niet vaak. Ik bouw al mijn websites met Elementor en zou niets anders meer willen. Heb je een thema waarin je wordt beperkt in de lay-out of styling? Met Elementor heb je daar geen last meer van!
De voordelen van Elementor
Ik vind websites bouwen met Elementor ontzettend fijn, en heb eigenlijk nog geen nadelen kunnen vinden. Hieronder zie je de belangrijkste voordelen van werken met Elementor:
Template Bibliotheek
In de gratis versie vind je al een aantal templates die je zo kunt invoegen op een pagina of deel van je website. De templates zijn opgedeeld in categorieën als contact, producten, over mij etc. Je kunt ervoor kiezen om een van deze templates te gebruiken, ze zijn volledig aanpasbaar. Gebruik je templates, dan staat je website super snel, maar is het ontwerp wel minder origineel. In de PRO versie heb je keuze uit een stuk meer templates en vaak ook van betere kwaliteit.
Goede functies voor responsive design
Tegenwoordig bezoeken mensen je website niet alleen via een pc, maar ook via een laptop, tablet of mobiel. Vooral die laatste wordt steeds meer gebruikt. Het is dan ook super belangrijk dat jouw website zich aanpast aan de diverse afmetingen van de apparaten: dit heet een responsive design. Bekijkt iemand jouw website vanaf een mobiele telefoon, dan moet het er nog steeds goed en duidelijk uitzien. Elementor heeft zeer goede functies hiervoor, zodat je precies kunt zien hoe het er op elk apparaat eruit komt te zien. Staat het niet helemaal lekker, dan pas je het zo aan!
Volledige controle over het ontwerp
Net als met WordPress, vind ik dit één van de belangrijkste voordelen van het werken met Elementor. Nergens in beperkt worden en kunnen doen en aanpassen wat jij wilt, heerlijk!
Uitgebreide functies en widgets
Even simpel uitgelegd bouw je pagina’s met secties, kolommen en widgets, hierover lees je verderop meer. Zo heb je bijvoorbeeld een tekstwidget, een afbeeldingwidget en een afstandshouderwidget. Zo zijn er nog tientallen andere widgets die je kunt slepen naar de gewenste plek.
Elementor werkt super snel
Sommige pagebuilders zorgen voor een tragere website, maar Elementor niet. Dit is belangrijk, want snelheid speelt een belangrijk rol in de vindbaarheid en gebruiksvriendelijkheid van je website.
Sla een pagina (of element) op als template
Zorg voor eenheid in je website door bepaalde onderdelen terug te laten komen, denk aan een header of footer, maar ook de lay-out voor een blogpost. Met Elementor kun je gemakkelijk een pagina of element opslaan als template, die je vervolgens weer kunt invoegen wanneer je wilt.
Nieuwe elementen & ontwikkelingen
De ontwerpers van Elementor staan niet stil en dat is fijn, want er komen regelmatig nieuwe elementen bij. Ook worden er verbeteringen doorgevoerd aan de interface en gebruiksvriendelijkheid.
Een website bouwen met Elementor en WordPress
Wellicht ben je er al uit dat je jouw website wilt gaan bouwen met Elementor en WordPress, dit is altijd een goede keuze. Twijfel je nog je aan de slag wilt met Elementor, lees ook dan vooral door. Je komt te weten hoe Elementor precies werkt en hoe je jouw website kunt bouwen.
WordPress installeren op je website
Voordat je WordPress kunt installeren op je website, heb je eerst een webhostingpakket nodig en moet je een domeinnaam registreren. De meeste webhosting aanbieders hebben tegenwoordig een pakket met een one-click installatie voor WordPress en ben je snel klaar. En waarom moeilijk doen als het ook makkelijk kan toch? Ik heb voor mijn eigen websites hosting bij TransIP, waar je zowel een pakket kunt afnemen, een domeinnaam registeren en WordPress met één klik kunt installeren.
Wanneer je WordPress hebt geïnstalleerd, ga je in je browser naar jouwwebsite.nl/wp-admin. Hier voer je je inloggegevens in en dan ben je ingelogd op de “achterkant” van jouw website. Er staat nu nog vrij weinig, op voorbeeldpagina en voorbeeldbericht na. Het eerste wat je gaat doen, is het installeren van de Elementor plugin. Verderop lees je welke plugins nog meer handig zijn op jouw WordPress website.
Elementor installeren op je website
Zoals de meeste plugins, is ook het installeren van de Elementor plugin een eitje. Het dashboard van WordPress zit vrij logisch in elkaar, waardoor je niet lang hoeft te zoeken naar de juiste knoppen. Ga naar Plugins –> Nieuwe plugin. Vul bij trefwoord ‘Elementor’ in om de plugin te vinden. Klik vervolgens op ‘Nu installeren’. Na installatie, wat meestal maar een paar seconden duurt, moet je de plugin ook meteen activeren. Dit doe je op dezelfde pagina, door op de button ‘Activeren’ te klikken (waar voorheen ‘nu installeren’ stond). Je bent nu bijna klaar om je eerste pagina te maken, maar eerst kijken we nog even naar een thema.
Juiste thema voor Elementor
Zonder een thema kun je geen WordPress website maken. Maar dit is niet perse een nadeel, er zijn zoveel thema’s dat er voor iedereen wel wat geschikt tussen zit. Een template is eigenlijk de blauwdruk van je website: de lay-out en look & feel is vooraf bepaald en al ontworpen door een webdesigner. WordPress biedt talloze gratis thema’s aan die je kunt gebruiken, maar pas hiermee wel op. Sommige zijn erg beperkt en je kunt niet altijd alles aanpassen. Ik werk graag met Astra en OceanWP, beide gratis en snelle thema’s waar je alles naar wens kunt aanpassen, helemaal in combinatie met Elementor!
Je kunt een template of thema installeren door in te loggen op je site (zoals hierboven eerder is vermeld) en vervolgens klik je op Weergave > Thema’s en zoek je het thema dat je wilt installeren. Na de installatie maak je het thema zichtbaar door op “activeren” te klikken. Je kunt in WordPress makkelijk van thema wisselen, maar de instellingen en lay-out willen hierdoor nog wel eens wijzigen. Het is dus beter om voor een breed en all-round thema te kiezen zodat je achteraf niet hoeft te wijzigen.
Hello Theme
Ik gebruik een thema eigenlijk amper, want ik vind het veel te leuk om bij een website zelf het design te maken. Elementor heeft een eigen “Hello” thema, met weinig functies dat het je zo min mogelijk in de weg zit tijdens het ontwerpen van je website. Met dit basic thema kun je jouw website een naam geven, je een logo en een flavicon instellen en wat custom CSS toevoegen. Verder maak je alles met Elementor, het eigen thema is dus ideaal als je lekker zelf aan de slag wil gaan.
Maak een pagina in Elementor
Na het installeren van een thema en de Elementor plugin, kun je direct beginnen met het bouwen van je website. Hoe bouw je een website met Elementor? Ik ga de basis aan je uitleggen, daarna is het een kwestie van lekker proberen, daar leer je altijd het meeste van! Om een pagina aan te maken, klik je in de linkerbalk op Pagina’s > Nieuwe pagina. Je vult daarna de naam in van je pagina, meestal begin ik met de homepage. Check even in de rechterbalk (onder kopje Pagina-attributen) of het standaard template op “Elementor volledige breedte” staat. Klik daarna bovenaan op de blauwe balk Bewerk met Elementor.
Lay-out van de pagina wijzigen
We hebben gekozen voor de pagina template “elementor volledige breedte” maar je hebt ook andere opties. Meestal wordt een nieuwe pagina op een “standaard” template ingesteld. Wanneer je een pagina gaat maken met Elementor, kun je het beste kiezen uit:
- Elementor Canvas
Dit is hele lege pagina, zonder header en footer. - Elementor volledige breedte
Dit is ook een lege pagina, maar hier zijn de header en footer al ingesteld via je thema.
Je kunt met Elementor ook zelf templates maken en opslaan, die komen dan ook in dit rijtje te staan. Hoe je templates maakt, opslaat en gebruikt, lees je verderop in dit blog.
Een pagina inrichten met Elementor
Je hebt nu een lege pagina voor je, of indien je dit hebt ingesteld, een lege pagina met een header en een footer. Geen idee wat een header of een footer is? Een header is het bovenste gedeelte van je website, vaak een foto, onder je menu. Een footer zit aan de onderkant van je website, daar staan vaak contactgegevens in. Vooral de footer komt vaak op elke pagina terug.
Je kunt nu op twee manieren te werk gaan om je pagina op te vullen: Je gebruikt een template van je thema of Elementor, of je bouwt zelf je pagina. Het is even uitvogelen wat alle functies en knoppen precies doen. Gebruik je Elementor voor de eerste keer, begin dan met een template. Zo kun je spelenderwijs eens kijken wat er gebeurt als je bepaalde dingen aanpast, verwijdert of toevoegt. Om een template van Elementor te gebruiken, klik je onderaan op het grijze mapje, Template toevoegen. Vervolgens opent de template bibliotheek en kun je kiezen uit blokken of hele pagina’s. Heb je er één gevonden die je wilt gebruiken, klik dan op Invoegen. Het template wordt nu geladen op je lege pagina. Je kunt nu alleen de teksten en foto’s aanpassen of nog andere wijzigingen doorvoeren aan de lay-out of het design.
Zelf een pagina bouwen
Je kunt vooraf enkele Engelstalige video tutorials bekijken op de website van Elementor, maar het beste kun je alles gewoon een beetje uitproberen. De basis van een pagina met Elementor bestaat uit een sectie. Hierin kies je hoeveel kolommen je wilt, en in deze kolommen voeg je vervolgens widgets toe. Hoe het precies werkt, leg ik je hieronder uit.
Basisinstellingen Elementor
Kijk vooraf eens naar de basisinstellingen van Elementor, klik linksboven in de Elementor sidebar op de 3 balkjes en klik op Site instellingen. Je kunt hier het standaard lettertype, breedte en de ruimte tussen je Elementor blokken aanpassen. Pas je dit aan, wordt dit overal de standaard op je website. Wil je toch een keer iets anders qua instellingen, dan valt dit altijd nog te overschrijven per sectie of kolom.
De breedte van je inhoud staat standaard op 1140 pixels, je kunt dit in het kopje Lay-out wijzigen naar bijvoorbeeld 1400 pixels. Waarom? Omdat de meeste beeldschermen tegenwoordig wat groter zijn en je wilt natuurlijk dat jouw website goed staat op elke grootte.
Een sectie aanmaken
Secties zijn blokken / onderdelen waarmee je pagina is opgebouwd. Om een nieuwe sectie toe te voegen, klik je op het rode plusje. Selecteer vervolgens hoeveel kolommen je in deze sectie wilt en de indeling daarvan (deze kun je later ook nog uitbreiden, wijzigen of verwijderen). Handig om vooraf te weten: je kunt ook een sectie in een sectie toevoegen. Klik met de rechtermuisknop op de zes puntjes van de sectie in de blauwe balk, dan kun je deze bewerken. In de Elementor sidebar worden dan de ontwerp opties getoond. Als je al secties hebt aangemaakt en je wilt er nog een toevoegen, dan kun je dit op twee manieren doen:
1. Vanuit een andere sectie
Naast de 6 puntjes staat aan de linkerkant een plusje. Als je daar op klikt, kun je vervolgens kiezen welke nieuwe sectie je wilt.
2. Naar beneden scrollen
Onderaan iedere pagina die je opmaakt zie je dit blok staan. Daarmee kun je dus altijd een nieuwe sectie toevoegen.
Kolommen
Je hebt nu dus een sectie aangemaakt met één of meerdere kolommen. Per kolom kun je de instellingen aanpassen, maar dit kan ook per sectie. Even een voorbeeld om het wat makkelijker te maken: Stel je wilt een afbeelding en een tekst naast elkaar, in één rij. Je hebt dan een sectie nodig met twee kolommen. In de ene kolom sleep je een tekstwidget en in de andere kolom een afbeeldingswidget.
Wil je binnen een kolom nogmaals een opsplitsing maken in meer kolommen dan gebruik je het inner sectie element. In de meeste gevallen zul je een sectie gebruiken met één, twee of drie kolommen.
Elementor widgets
Aan de linker kant vind je alle widgets die je naar het rechtervak kunt slepen (bij het kopje Elementen). Deze naam is een beetje verwarrend want in je WordPress dashboard staat ook een speciale “widget area”, waar je dingen kunt toevoegen in de sidebar en footer. Het gaat nu dus niet over deze functie, maar over de widgets waarmee je jouw website in Elementor gaat opbouwen.
De meeste voorkomende widgets die worden gebruikt zijn Kop, Tekstbewerker, Afbeelding, Afstandshouder en Knop. Daarnaast zijn er nog talloze andere widgets zoals een fotogalerij, icoon, video of social media. Wil je een widget toevoegen aan je website, sleep deze dan gewoon naar je sectie of kolom. Let op: je moet dus eerst een sectie of kolom aanmaken op je pagina om de widgets te kunnen gebruiken.
Handige gratis plugins om over meer widgets te beschikken, zijn de Elementor – Header, Footer & Blocks en Essential Addons for Elementor. Nadat je deze plugins hebt gedownload, vind je ook deze widgets in de Elementor Sidebar. Zo krijg je bijvoorbeeld met de populaire webshop plugin WooCommerce een prijs-, product- en categorie filter widgets, die je met Elementor dus overal op de pagina kunt plaatsen, hoe handig is dat! Ook kun je er eens over nadenken of je de Pro versie van Elementor nodig hebt, hierbij krijg je veel extra opties.
Styling opties
Er zijn echt enorm veel styling opties om een sectie, kolom of widget helemaal naar jouw wens aan de te passen. Het is even uitzoeken wat alles precies doet, maar als je dit eenmaal doorhebt, zijn de mogelijkheden eindeloos! Elke sectie, kolom of element kun je bewerken via de Elementor sidebar. Je kunt kiezen uit de kopjes:
- Lay-out (de belangrijkste instellingen)
- Stijl (design aanpassingen, zoals font, kleuren en effecten)
- Geavanceerd (de instellingen voor marges en padding, animaties, responsive voor smartphones, de marge en padding aanpassen, de kleur aanpassen en bepalen of een element uitlijnen)
Handig om te weten: Heb je een foutje gemaakt, dan kun je eenvoudig de undo / redo button gebruiken. Je vind al je acties onderaan in de Elementor sidebar bij het kopje ‘geschiedenis’. Ook maakt Elementor gebruik van een autosave functie waardoor je nooit teveel werk verliest.
Elementor vs Elementor pro
Elementor heeft zowel een gratis versie als een pro versie. Mijn eerste twee websites heb ik met de gratis versie gebouwd. Dit ging prima en eigenlijk zonder al teveel beperkingen. Nu ik inmiddels professioneel aan de slag ben gegaan als webdesigner en copywriter, kan ik eigenlijk niet meer zonder Elementor Pro. Sommige functies die je niet hebt met de gratis versie, kun je alsnog krijgen door een paar plugins te installeren zoals Contact form 7 voor een contactformulier en een plugin voor het maken van een footer, maar lang niet alles. En dat is natuurlijk logisch, anders zou niemand meer de Pro versie kopen 😉
Eén van de beste functies van Elementor Pro is de Theme Builder. Met deze builder kun je zelf een theme bouwen met Elementor. Wil je een unieke en op maat gemaake website, dan is dit the way to go.
WooCommerce & Elementor
Met de WooCommerce plugin bouw je eenvoudig een webshop, deze werkt goed samen met Elementor. Wil je graag een webshop beginnen, is het zeker aan te raden om de Pro versie van Elementor aan te schaffen. Je kunt dan heel gemakkelijk producten weergeven, geavanceerd filteren en een productpagina van WooCommerce volledig aanpassen.
Prijzen van Elementor Pro
Wil je alleen gebruik maken van de functies van de Pro versie voor je eigen website? Dat kan voor $49 dollar per jaar. Voor drie websites betaal je $99 dollar en voor 25 websites $199 dollar per jaar. Welke optie je hiervan ook kiest, je krijgt toegang tot meer dan 90 widgets en 300 templates. Denk aan een pop-up & woocommerce builder en prijstabellen maar ook hele goede support. Bekijk het totale prijzenoverzicht van Elementor hier.
Templates maken in Elementor Pro
Een template is een design dat op meerdere delen van de website terug komt. Je hoeft dit dus maar een keer te maken en kan het vervolgens overal op je site terug laten komen. Denk aan een header, footer of blogpost. Wil je wat wijzigen, hoef je dat ook maar één keer te doen; je wijziging wordt dan automatisch op alle pagina’s doorgevoerd. Templates (of eigenlijk themes) vind je onder Templates > Theme Builder> Nieuwe toevoegen. Je wordt automatisch doorgestuurd naar de Elementor builder. Heb je geen ElementorPro maar wil je toch een header / footer maken, download dan de plugin Elementor header footer.
Header template
Elke website heeft een header. De header is het gedeelte wat bovenaan je website staat, meestal samen met een logo en een menu. Dit gedeelte is belangrijk, want het komt overal terug op je website en is één van de eerste elementen die jouw websitebezoeker te zien krijgt. Zo maak je een template voor je header: Maak in het nieuwe thema een nieuwe sectie/rij. Wil je een logo en een menubalk, dan voeg je twee kolommen toe. In de ene kolom sleep je het logo en in de andere kolom het element (of widget) “Nav Menu”. Heb je nog geen menu aangemaakt, moet je dit eerst even doen. Ga in je WordPress Dashboard naar Weergave > Menu’s.
Tip: Klik op de 6 puntjes in de blauwe balk en ga naar Geavanceerd > Bewegings effecten > Sticky om het menu “sticky” te maken aan de top van je pagina. Als je naar beneden scrollt, zal je altijd het menu bovenin je beeld blijven zien.
Heb je geen zin of tijd om zelf je header te bouwen, dan kun je ook kiezen uit de vele templates in de Elementor bibliotheek. Deze kun je trouwens ook gewoon aanpassen waar nodig. Handig als je even geen inspiratie meer hebt! Vergeet je template vervolgens niet op te slaan in je bibliotheek, zodat je het kunt gebruiken wanneer je maar wilt.
Footer template
Eigenlijk werkt het maken van een footer hetzelfde als de header. Meestal zet je in een footer je contactgegevens, eventueel je logo, social media en linkjes zoals je privacyverklaring. Vaak is de footer een donkere kleur, zodat de informatie opvalt. Je kunt de kleur hiervoor aanpassen bij het kopje Stijl. Met de Theme Builder van Elementor Pro kun je eenvoudig footers instellen voor je hele website.
Single template
Een single template zegt je misschien niet zoveel want vaak zijn deze verwerkt in een thema. Deze templates worden automatisch geladen voor een bepaalde post type of categorie. Denk aan blogartikelen of productpagina’s in WooCommerce. Met een single template kun je zelf bepalen hoe de lay-out eruit ziet. Je kunt na het ontwerpen van een single template zelf de ‘condities’ instellen. Dit houdt in dat je kunt aangeven waar je het wilt gebruiken.
Blog template
Bijna alles websites hebben tegenwoordig een blog. Met relevante content bereik je jouw doelgroep. Dat is ook het doel van dit blog over de mogelijkheden van WordPress en Elementor. Bijna alle thema’s hebben een blogmodule, wat niet zo gek is aangezien WordPress ooit is gestart als blogplatform. Werk je met een thema zoals Astra of Ocean WP, dan heb je meestal een aantal opties voor het weergeven van blogartikelen. Zo heb je zelf de controle over waar de titel en de uitgelichte afbeelding komt. Ook kun je zaken toevoegen of juist weglaten als meta informatie, auteur en datum van plaatsing. Eventueel kun je widgets toevoegen aan je blogpagina zoals gerelateerde artikelen, reactieformulier of een call to action button.
Beste plugins voor SEO
Met de Theme Builder van Elementor Pro kun je gemakkelijk aanpassingen doen voor het thema dat je gebruikt. Je hoeft je niet te laten beperken door het thema. Heb je meer nodig om je WordPress website te bouwen? Download dan met een paar klikken extra plugins of Elementor addons.
Als ik een website ga bouwen, is het eerste wat ik doe na het inloggen op WordPress, het installeren van enkele handige plugins. Elementor is al erg uitgebreid maar toch zijn de onderstaande plugins echt de moeite waard. Ze helpen vooral om je website sneller te maken, gebruikersdata te verzamelen en beter vindbaar te worden. Een aanwinst als je ook maar iets aan SEO wilt doen (en dat wil je). Een overzicht van de belangrijkste plugins:
- Yoast SEO
- Smush
- Really Simple SSL
- WP Rocket
- Native Lazy Load
- WP Fastest Cache
- Google Analytics
Welk CMS of pagebuilder gebruik jij voor je website? Waar ben je tevreden mee of waar loop je tegenaan? Mocht je hulp kunnen gebruiken bij het bouwen van je WordPress website, sta ik voor je klaar. Stuur me gerust een mailtje of een berichtje via WhatsApp.
Wil je handige tips over webdesign en online marketing, schrijf je dan hieronder in:
