Hoe bouw je een website met behulp van Elementor Pro

Bouw jouw WordPress website in 17 stappen met Elementor Pro

Je bent hard op weg jouw merk vorm te geven en je bent aangekomen bij de website. Om geld te besparen heb je besloten, ondanks het gebrek aan kennis (en tijd 😉), de website zelf te ontwerpen en bouwen. Een moedige beslissing, maar waar begin je?  

Om jou te helpen, heb ik “Het 17 stappenplan voor het bouwen van jouw website met behulp van Elementor Pro” geschreven. Het doel van dit stappenplan is, jou richting te geven in jouw webdevelopment proces. In deze fase heb je al een ontwerp gemaakt en ben je nu klaar om dit ontwerp te gaan realiseren in WordPress.  

Inhoud

Dit stappenplan is geschreven voor degene die er niet vies van is, om zelf de mouwen op te stropen. Voor de mensen onder ons die het niet erg vinden om, zo nu en dan, zelf even iets uit te moeten zoeken. Maar het stappenplan moet jou, als leek in webdesign en web development, handvaten geven in het bouwen van jouw WordPress website.   

“Het stappenplan moet jou de handvaten geven in het bouwen van jouw WordPress website” 

Ik leg je dus niet uit hoe de page-builder van Elementor Pro klik-voor-klik werkt. Ben je daar wel naar opzoek? Kijk hiervoor dan naar deze Youtube video:  

Maar voordat we overgaan naar het stappenplan, eerst iets meer informatie over WordPress en Elementor Pro.  

Belangrijke termen binnen WordPress. 

Pagina’s en berichten. 

WordPress is content managementsysteem, wat standaard werkt met (statische) pagina’s en berichten (bijvoorbeeld jouw blog-artikelen) die je schrijft, die je onder kunt brengen in een archief, een verzameling alle berichten binnen een categorie. Pagina’s en berichten zijn beide posttypes die je kunt uitbreiden met bijvoorbeeld producten, portfolio stukken, teamleden en meer. Hier kan je specifieke plug-ins voor downloaden, waardoor deze posttypes worden toegevoegd, maar je kunt ook zelf aan de gang, door ze zelf helemaal te configureren met de plugin Custom Post Types UI.  

Thema’s. 

Met een thema bepaal je in feiten de uitstraling. Het ene thema heeft een heel uitgesproken stijl, waarbij je zelf heel weinig kunt aanpassen als je geen HTML en CSS taal beheerst. Maar er zijn ook thema’s waar je bijna alles kunt aanpassen in een speciale editor. Tot slot er zijn thema’s die eigenlijk helemaal kaal zijn, waardoor je echt alles zelf kunt ontwerpen.

Thema’s komen in allerlei stijlen, groottes en maten en er zijn veel premium thema’s (dus betaald) die jou extra mogelijkheden geven in de vormgeving van jouw website. Ik kies zelf altijd voor het Hello-theme van Elementor. Dit thema ondersteund de themebuilder van Elementor Pro, een pagebuilder plug-in. Hierdoor kan je in feiten je met behulp van je page builder een volledig eigen thema creëren zonder dat je ook maar één woordje aan code hoeft te gebruiken.  

Plug-ins. 

Met plug-ins voeg je functionaliteit toe aan de website. Dit kan een functionaliteit zijn voor de backend, de omgeving waarin de website door jou beheerd wordt, of in het front-end, waardoor je in vormgeving en in functies meer mogelijkheden hebt om de customer journey van jouw klanten vorm te geven. 

Elementor Pro: WordPress #1 pagebuilder. 

Voor alle WordPress websites die ik maak voor mijn klanten en mijzelf, bouw ik met Elementor Pro. Een premium pagebuilder die mij helpt stapsgewijs, snel en efficiënt websites te bouwen. Elementor Pro is de meest gebruikte WordPress pagebuilder ter wereld.  

Net als elke andere pagebuilder heeft Elementor Pro zijn voor- en nadelen. Professioneel webdevelopers vinden pagebuilders sowieso een onnodige luxe, maar dit stappenplan is ook niet voor developers. Het is voor mensen zoals jij, die voor hun eigen merk een eigen website willen bouwen en onderhouden. Mensen met geen of beperkte kennis over webdevelopement.  

Waarom gebruik ik Elementor Pro? 

Voor mij geeft Elementor Pro mij juist de mogelijkheid om mijn klanten, de superhelden, zoveel mogelijk vrijheid te geven in content creatie voor hun website. Hierdoor kunnen ze hun merk zelf door ontwikkelen, zonder dat ze bij elke wijziging een nieuwe factuur kunnen verwachten. Daarnaast sluit het perfect aan bij mijn workflow, die ik zo lean mogelijk heb vormgegeven.  

Wat kost Elementor Pro? 

Zoals gezegd is Elementor Pro een premium plug-in. De plug-in kost voor 1 website $ 49,- per jaar. Mocht je ook nog op zoek zijn naar hosting? Dan zou je gebruik kunnen maken van Elementor Cloud Website voor $ 99,- per jaar (ofwel $8,25 per maand). Hierbij krijg je naast cloudhosting een volwaardige installatie van WordPress incl. een installatie van Elementor Pro (twv. $49,- per jaar). 

Nummer 1 WordPress Pagebuilder`voor jouw online brand design: Elementor Pro

Bouw jouw WordPress website in 18 stappen. 

1. Installatie wordpress 

Er zijn verschillende manieren om WordPress te installeren en het is deels afhankelijk van jouw web host. Er zijn web hosts waar WordPress al standaard op geïnstalleerd is. Of waar je met een wizard gemakkelijk WordPress kunt installeren. Maar er zijn ook web hosts, waarbij je met een ftp-server aan de gang moet, om WordPress te installeren. Let hierbij op bij het aanschaffen van een web host.  

Wanneer je WordPress installeert, volg dan de “aanbevolen” stappen. Zaken als titel en subtitel kan je altijd later nog aanpassen.  

2. Plug-ins en thema 

Zoals gezegd, gebruik ik altijd het Hello theme, zo goed als volledige vrijheid heb in de vormgeving van de website. Hij werkt perfect met de voor mij standaard pagebuilder: Elementor Pro.  

Voor plug-ins is het belangrijk dat ze betrouwbaar zijn. Ze maken immers je website zwaarder, verhogen de kans op veiligheidsrisico’s en kunnen je website zelfs slopen als je een verkeerde plug-in gebruikt. Om er zeker van te zijn, dat ik de juiste plug-ins gebruik, heb ik richtlijnen. Deze richtlijnen bepalen of ik een specifieke plug-in mag gebruiken, om zo de kwaliteit te bewaken.   

Mijn richtlijnen, waar een WordPress plug-in aan moet voldoen: 

  • Goede reviews 
  • Wordt regelmatig geüpdatet 
  • Minimaal 100.000 actieve installaties (hier en daar zijn er uitzonderingen) 
  • Hoe gaan ze om met support (ik kijk hiervoor naar de FAQ-secties van de plug-ins) 

Door deze richtlijnen heb ik een standaardpakket aan plug-ins die ik standaard voor elke website gebruik, plus een lijst aan aanvullingen die ik gebruik wanneer ik ze nodig heb. Want downloadt en installeer een plug-in alleen, als je deze echt, maar dan ook echt, nodig hebt. Hieronder de plugins die ik altijd en vaak gebruik bij de installatie van WordPress websites voor mijn klanten.

Mijn standaard gebruikte plug-ins anno 2022: 

Vaak gebruikte plug-ins anno 2022: 

3. Bezoekers en zoekmachines omleiden 

In dit stappenplan bouwen we de website op de plek waar deze uiteindelijk ook moet komen. Maar je wilt niet hebben dat klanten of zoekmachines jouw website gaan bekijken. De website staat nog volop in de stijgers, het is niet af. Dat zou een verkeerde indruk kunnen geven op je bezoekers. Daarnaast kan het tot een slecht resultaat leiden bij zoekmachines. Daarom gaan we 2 dingen doen.  

We gaan ervoor zorgen dat alle mogelijke bezoekers op een comming soon pagina terecht komen. Daarnaast zorgen we ervoor dat zoekmachines kunnen zien, dat ze later terug moeten komen om de website te beoordelen.  

Hoe leid je bezoekers en zoekmachines om? 

Doordat we gebruik maken van Elementor Pro krijg je ook een aantal handige functies erbij, zonder dat je hier een extra plug-in voor hoeft te downloaden. Zo ook de “comming-soon-functie”. Als eerste ga je naar Templates/Opgeslagen-templates en maak je een nieuwe pagina-template aan. In deze nieuwe template ontwerp je een comming soon pagina. Je kunt het net zo compex en mooi maken als dat je zelf wilt, met een aftellende klok en dergelijke. Maar een simpele tekst kan natuurlijk ook.  

Vervolgens ga je naar Elementor/Extra en dan naar tabje onderhoudsmodus. Hier stel je de website in op comming soon en selecteer je de door jouw gemaakte template als coming soon pagina. Hierdoor zal iedereen die nu jouw website bezoekt (en niet ingelogd is) op de comming soon pagina uitkomen. Je kunt dan enkel de website bekijken en bewerken, wanneer je ingelogd bent.  

Om de zoekmachines aan te geven dat het een comming soon website is, ga je naar instellingen/lezen en vind je het hokje aan “Zoekmachines ontmoedigen om deze site te indexeren”. Hierdoor weten zoekmachines, of beter gezegd de bots die namens de zoekmachines jouw website bezoeken, dat ze later terug moeten komen.  

4. Verplaatsen van de inlogpagina. 

Elk WordPress website gebruikte dezelfde url structuur voor de inlogpagina. Dit is altijd [jouwdomeinnaam]/wp-admin. Hierdoor maak je het voor cybercriminelen al een stuk gemakkelijker om binnen te komen. Ze weten daardoor immers waar de achterdeur zit en nu hoeven ze alleen nog maar het slot te kraken. Met behulp van plug-ins zoals WPS Hide Login kan je de inlogpagina verhuizen naar een door jou in te stellen URL binnen jouw website. Hierdoor weten de cybercriminelen ineens niet meer waar de achterdeur zit. Zorg wel dat je het nieuwe adres niet zomaar met iedereen deelt, anders heb je er nog niks aan.

Voor het geval ze alsnog de achterdeur vinden, installeer je de plug-in Limit Login Attempts Reloaded. Meestal wordt deze door WordPress zelf al geïnstalleerd en geactiveerd, maar het kan geen kwaad om dit te checken. Deze plug-in zorgt ervoor dat een gebruiker een maximaal aantal keren kan inloggen en andere x minuten geen toegang meer heeft tot de inlog pagina. Daarnaast kan je hiermee ook blokkeren als hij of zij te vaak probeert in te loggen met een fouten inlog.  

5. Kit liberary 

Nu de basis instellingen allemaal gedaan zijn, wordt het nu tijd om te beginnen met de vormgeving van de website. Of beter gezegd: je gaat jouw eerder gemaakte ontwerp, (na-)bouwen in WordPress. Elementor pro heeft een grote bibliotheek aan webdesign kits en blocks. Dit zijn in feiten templates en volledig ontworpen pagina’s waar je de vooraf ingevulde content (tekst en afbeelding) kunt vervangen voor jouw eigen tekst en afbeeldingen. Een kit is in feiten een volledig ingerichte website, die je kunt gebruiken als startpunt voor jouw eigen website. Je kunt vervolgens alles aanpassen na eigen smaak, wensen en behoefte.

Je hebt toegang tot de liberary bij zowel de gratis versie als de pro versie van Elementor. Het enige verschil is dat je met de pro versie meer keuze hebt. Ook op creative marketplaces zoals Envato market kan je kits voor Elementor kopen. Handig om hier al eens door heen te bladeren, voordat je de website gaat ontwerpen. Misschien zit er iets voor jou tussen en hoef je dus minder te ontwerpen (en later dus ook minder te bouwen).  

6. Van XD naar Global settings (fonts, lettertypes, knoppen, formulieren). 

Het krachtige aan Elementor Pro (de gratis versie heeft deze functie niet), is dat je heel veel op een centrale plek kunt instellen. Zo bepaal ik aan de hand van mijn ontwerp in Adobe XD, welke typografische elementen, kleuren, knoppen en formulieren ik nodig heb en hoe deze eruit zien. Deze voeg ik vervolgens in de site instellingen van Elementor. Ik werk hierbij altijd met global fonts en colors.  

Het mooie hiervan is, dat ik bijvoorbeeld een primaire kleur bepaal (global color) en dat zo instel in de site instellingen. Vervolgens gebruik ik de global colors als mijn kleurenpallet bij het bouwen van alle elementen. Maar dat is niet alles. Op het moment dat ik bijvoorbeeld met kerst besluit dat mijn primaire kleur tijdelijk moet veranderen naar rood, pas ik deze kleur aan in de site instellingen. Hierdoor veranderd alles wat de primaire kleur heeft toegewezen gekregen naar de nieuw ingestelde kleur. Je hoeft dus niet meer pagina voor pagina, element per element die kleur aan te passen. Extra reden dus om een goed Adobe XD ontwerp te maken, voordat je begint aan het bouwen van je website.  

7. Pagina’s deel 1 

Ten behoeve van het maken van menu’s en dergelijke, wordt het nu alvast tijd om de pagina’s aan te maken. Je hoeft ze nog niet te ontwerpen. Enkel aan te maken en publiceren. Let hierbij op. Pagina’s zijn dus de statische pagina’s op je website. Een pagina waar er 1 van is. Dus geen blog artikel, waar er steeds meer van bij zullen komen.  

8. Menu’s. 

Onder Weergave/menu’s kan je de navigatie menu’s aanmaken voor jouw website. Maak hier je menu structuur aan op basis van pagina’s en archiefpagina’s (verzamelingen van berichten).  

9. Templates. 

Met de templates in de template builder van Elementor Pro in combinatie met het Hello theme, bouw je in feiten je eigen thema. Je geeft de header en footer vorm, elk in een eigen template. Daarbij kan je per template instellen onder welke condities de template wel, of wanneer juist niet getoond hoeft te worden.

Heb je bijvoorbeeld een footer, die voor je blog artikelen anders moet zijn dan voor de rest van de website? Dan kan je 2 footer templates maken, waarbij je instelt dat de ene getoond wordt op de hele website, behalve als het een bericht is, terwijl bij de ander ingesteld wordt dat deze juist enkel getoond mag worden als het een bericht is.

In de theme builder van Elementor Pro zitten diverse categorieën aan templates. Standaard bevat het de header, footer, bericht, archief pagina, 404 pagina, zoekresultaten pagina (voor interne zoekopdrachten) en pagina templates. Met de installatie van specifieke plugins zoals Elementor Custom Skin en Woo-commerce, worden er extra categorieën toegevoegd, zoals loop, producten en winkel (het productoverzicht).  

Tip bij het maken van de templates: Aangezien het gebruik van het internetgebruik meer en meer verschuift richting mobiel in plaats van desktop, is het mobiele ontwerp bijna belangrijker dan je desktop ontwerp. Zorg dus met de responsive weergave van Elementor (Links onderin aan en uit te zetten) dat je jouw ontwerp aanpast per weergave (desktop, tablet en mobiel).

Websites die slecht scoren voor mobiel zullen door zoekmachines zoals Google “gestraft” worden met een lagere ranking. En nog veel belangrijker: je bezoekers zullen eerder geneigd zijn om je website te verlaten, op het moment dat deze niet goed laad op hun mobiel.  

Gebruik je ontwerp om te bepalen welke templates je allemaal nodig hebt. De kans is groot dat je erachter komt dat, je nog een paar onderdelen van je website zult moeten ontwerpen. Dit kan je de design tool ook, maar je kunt deze ook direct in Elementor ontwerpen en bouwen. Je hebt je “huisstijl” immers bepaald, nu hoef je deze enkel te vertalen naar de specifieke nodige templates. 

10. Pagina’s, deel 2. 

Nadat je alle templates ontworpen hebt, wordt het tijd om de pagina’s vorm te geven. In een eerdere stap heb je alle nodige pagina’s al aangemaakt en nu wordt het tijd om deze ook vorm te geven. Doordat je alle templates al gemaakt hebt, zal je zien dat dit een stuk gemakkelijker gaat. Je hebt al een header en footer, mogelijk een postloop (een zelfontworpen weergave van een post in een postoverzicht) en specifieke secties die nu enkel een plekje hoeven te krijgen. Als de ze niet al een vast plekje hebben, zoals een header en een footer.  

11. Afbeeldingen. 

Afbeeldingen zijn een steeds belangrijker wordend onderdeel van jouw website. Naast dat de website visueel aantrekkelijker wordt voor je klanten en klanten eerder geneigd zijn om te kopen/klikken etc, heeft de afbeelding steeds meer functies. Zo ranken zoekmachines jouw website tegenwoordig niet alleen op tekst, maar ook op afbeeldingen. Daarnaast heeft de afbeelding een groot effect op de snelheid en werkbaarheid van de website. Is een afbeelding te groot, dan vertraagd hij de laadtijd, met het gevolg dat je een mogelijke klant al kwijtraakt, voordat hij je website volledig heeft bekeken. Ook zoekmachines nemen tegenwoordig laadtijden mee in het beoordelen van jouw website. Hoge laadtijd = lage ranking.  

Daarom moet jouw afbeelding voldoen aan de volgende eisen: 

  • De afbeelding moet het juiste formaat hebben. Laat je de afbeelding zien op een grootte van 700×700 pixels, dan moet deze dus niet 1000×1000 zijn. Hierdoor bespaar je op geheugen (dus laadtijd) en waarborg je de kwaliteit van de afbeelding. Als een foto (met in bijzonder JPG’s) geschaald wordt door de browers, willen er nogal eens rare dingen gebeuren met de afbeelding, waar jij geen invloed op hebt. 
  • Gebruik bij voorkeur SVG (vector) of WEBP (raster) afbeeldingen met een maximale grootte van 200kb. PNG, GIF en JPG mogen natuurlijk ook, maar bij deze is de afmeting en het maximale geheugen nog belangrijker.  
  • Voor de hand liggend: Maak je afbeeldingen relevant en aansprekend voor jouw doelgroep.  Maak gewoon vette plaatjes 😉

12. Rankmath. 

Rankmath is de tegenhanger van een andere grote SEO plug-in binnen de Wordpess Community: Yoast. Ik gebruik Rankmath, omdat de gratis versie alle functies heeft die ik zoek in een SEO tool. Wil je het precieze verschil weten tussen de 2 SEO tools? Lees dan dit artikel op Frankwatching. Maar wat doet een SEO-tool en wat moet jij er in deze stap mee doen? 

Een SEO-tool helpt jou met het beoordelen en optimaliseren van jouw content t.b.v. zoekresultaten. Je stelt in of pagina’s/berichten geïndexeerd (beoordeeld) moeten worden door zoekmachines. Hierbij geef jij aan op welke zoekterm de pagina of het bericht zich moet focussen. De plug-in beoordeeld vervolgens aan de hand van de SEO-richtlijnen van zoekmachines, of jouw content voldoet aan deze richtlijnen. Daarnaast geeft de plug-in handige tips, om de content van die pagina te optimaliseren.  

Maar let op. De score betreft je On-site Search Engine Optimisation. Dus of de content van de betreffende pagina voldoet aan de richtlijnen. Dat wil niet zeggen dat je met een 100% score ook bovenaan in de zoekmachines komt. Zoekmachines kijken namelijk naar veel meer dan alleen dit onderdeel. Zorg dat je dit goed voor elkaar hebt, dat is in ieder geval stap 1 naar een betere ranking. Wat je voor de rest moet doen zal ik in een ander artikel op terug komen.  

Doorloop alle stappen van de installatie wizard van Rankmath en ga nu alle pagina’s langs en optimaliseer de pagina’s aan de hand van de adviezen van Rankmath.  

13. Google Sitekit. 

De website is zo goed als klaar. Maar zodra je live gaat, wil je wel weten hoe jouw website presteert. Hiervoor kan je gebruik maken van legio analyse tools. De meest bekende en gebruikte tools zijn de tools van Google: Google Analytics, Google Search Console en Google Ads. Voorheen moest je echt wel wat kennis van zaken hebben, om de betreffende tools te koppelen aan jouw WordPress website. Maar met de plug-in Google Sitekit, wordt het een stuk gemakkelijker. Met deze plug-in en jouw Google account kan je gemakkelijk en snel de 3 tools koppelen aan jouw website. Doorloop de wizards en volg alle aanbevelingen. Daarna is jouw website gekoppeld en is het meetbaar. Let wel op! Zolang jouw website op comming soon staat zal niet alles gemeten kunnen worden.  

14. Wordfence. 

Je hebt in stap 5 al wat veiligheidsmaatregelen getroffen. Maar nu is het tijd om een beveligingsplug-in te installeren. Er zijn er vele, maar Wordfence is de autoriteit als het gaat om WordPress veiligheid. Je kunt de plug-in vergelijken met een virusscanner voor je computer. Hij scant met enige regelmaat alle bestanden van jouw website, op zoek naar mallware en andere schadelijke bestanden. Daarnaast toetst het de website op veiligheidsrisico’s, zoals of alle plug-ins, het thema of WordPress zelf up to date zijn. Volg ook hier de standaard installatie wizard, om Wordfence in te stellen. Zo creëer je een handig dashboard om de veiligheid van jouw website te monitoren.  

15. JOUW WEBSITE GAAT LIVE! 

Wow, de website kan live! Je zet de coming soon status van je website uit, door naar Elementor/Extra en dan naar het tabje “Onderhoudsmodus” te gaan. Daar zet je “comming soon” terug naar “uitgeschakeld”. Daarnaast wil je dat zoekmachines jouw website vanaf dit moment kunnen vinden. Ga naar instellingen/lezen en vink het hokje uit bij “Zoekmachines ontmoedigen om deze site te indexeren.” Dit wil overigens niet zeggen dat zoekmachines jouw website direct meenemen in de resultaten. Dit heeft tijd nodig en het is afhankelijk van vele andere factoren. Houd er rekening mee dat het weken kan duren, voordat je website geïndexeerd is voor de zoekmachines. En dan kan het nog maanden duren, voordat je op de eerste pagina van de zoekresultaten terecht komt.  

Maar goed: je website is live. Bijna tijd voor een feestje! 

16. Broken link check. 

Waar gewerkt wordt, worden fouten gemaakt. Zo kan het voorkomen dat er links op jouw website verwijzen naar pagina’s die niet bestaan. Dit noemen we een broken link. Bezoekers komen door deze kapotte link op de 404-pagina van jouw website. Grote kans dat je ze hier kwijtraakt.  

Het is dus belangrijk dat je de website controleert op broken links. Ga naar www.brokenlinkcheck.com en voer jouw website in en doe de scan. Als de check gedaan is, worden alle broken links opgesomd, zodat je deze aan kunt pakken. Heb je alle broken links aangepakt? Doe de check opnieuw. Herhaal deze stappen, tot er geen broken links meer over zijn.  

17. Hier begint het echte werk pas.  

Nu wordt het tijd om je website onder de aandacht te brengen bij jouw doelgroep. Promoot je website via je social mediakanalen en maak eventueel gebruik van online advertenties via social media en/of zoekmachines. Maar start ook direct met optimalisatie van je website. Wat zie je dat er gebeurt op de website in Google Analytics. Wat zijn de reacties op social media?  En hoe kan je ervoor zorgen dat je meer relevante bezoekers ontvangt op jouw website?  

Met een premium pagebuilder bespaar je geld.  

Of je nu Elementor Pro, of een andere pagebuilder gebruikt, je bespaart hier geld mee. Ja, Elementor Pro kost op zijn minst $ 49 per jaar. Maar dat verdien je gemakkelijk terug, wanneer je gebruik maakt van templates, global settings en themebuilder. En al helemaal als je ook nog eens gebruik maakt van een al voor je ontworpen kit uit de ruime kit liberary van Elementor. Je zou dan binnen 1 dag een simpele website hebben staan. En voor $ 99,- hoef je zelfs de WordPress installatie niet meer te doen en heb je een supersnelle webhost. Alles bij één leverancier met één klantenservice en een super behulpzame en wereldwijde community om jou te helpen.  

Elementor Pro: de manier om jouw webdesign te realiseren

Interessant om te
delen met je netwerk?

Klaar om van jouw merk de superheld te maken?

Neem vandaag nog contact op en maak een afspraak voor een vrijblijvend intake gesprek.

Meer blogs: