Heb je interesse in het bouwen van een geweldige website?
Nou, goed nieuws… Het is nu makkelijker dan ooit! Het is niet nodig om elke pagina helemaal opnieuw te coderen of een team van professionals in te huren.
Tegenwoordig is alles wat je echt nodig hebt een plugin genaamd Elementor. Het is een van de meest veelzijdige en toegankelijke WordPress page builders op de markt.
Sterker nog, het is helemaal gratis om aan de slag te gaan!
In deze Elementor gids gaan we stap voor stap bespreken hoe jij Elementor kunt gebruiken en laat ik je enkele van de beste functies ervan zien.
Aan het einde zou je alles moeten weten wat je nodig hebt om in een mum van tijd je eigen WordPress website te bouwen die indruk maakt!
Inhoudsopgave
wat is Elementor?
Elementor is een van de meest populaire plugins voor het maken van WordPress pagina’s, met meer dan 8 miljoen installaties wereldwijd. Hiermee kun je jouw website aanpassen via een interface voor drag & drop, waardoor het gemakkelijk wordt om pagina’s en berichten te maken zonder enige kennis van coderen en HTML of CSS.
Elementor wordt gebruikt in een aparte interface die verschilt van de standaard WordPress interface. Je hebt er echter nog steeds rechtstreeks toegang toe vanuit jouw website, dus je hoeft niets anders te beheren dan de daadwerkelijke Elementor plugin.
Elementor wordt geleverd met een groot aantal widgets, waarmee je verschillende functies aan jouw website kunt toevoegen.
Misschien wel de sterkste eigenschap van Elementor zijn de ontwerpmogelijkheden. Je kunt aangepaste posities instellen, margins wijzigen en regels maken voor kleuren en typografische instellingen.
Houd er rekening mee dat Elementor zelf geen WordPress thema is. Het is enkel een plugin. Dit is belangrijk om te weten omdat je nog steeds een speciaal thema moet kiezen om andere aspecten van je website aan te pakken. Ik heb een aparte blog geschreven waarin mijn top 10 Elementor thema’s bekend maar.
Je kunt met Elementor vele soorten websites maken, waaronder portfolio’s, webshops, bestemmingspagina’s, blogs en vrijwel alles wat je maar kunt bedenken.
is Elementor makkelijk?
Elementor is een van de gemakkelijkst te begrijpen page builders voor WordPress, en het is ook degene die je gratis de meeste functies biedt. In wezen is het de perfecte doe-het-zelf-oplossing voor mensen die zelf geweldige pagina ontwerpen willen maken zonder enige programmeervaardigheden of HTML en/of CSS-kennis.
Elementor vs. Elementor pro
Elementor heeft zowel een gratis als een betaalde versie. De gratis versie wordt geleverd met 40+ basis widgets en 30+ templates. De premium abonnementen beginnen vanaf $49 per jaar voor één website, variërend tot $999 per jaar voor het agency plan.
Elementor Pro voegt verschillende wenselijke functies toe om je workflow te versnellen en je nog meer controle te geven over het uiterlijk en de functionaliteit van jouw website.
Hier is een kort overzicht van de belangrijkste verschillen tussen Elementor Free en Elementor Pro.
| Elementor | Elementor Pro | |
|---|---|---|
| Prijs | Gratis | Start vanaf $49 per jaar per website |
| Aantal widgets | 30+ | 90+ |
| Page builder | ||
| Theme builder | ||
| Premium support | ||
| Aangepaste CSS | ||
| Contactformulieren |
hoe installeer ik Elementor?
Nadat je WordPress en een gekozen thema voor je site hebt geïnstalleerd is het tijd om de Elementor page builder plugin te installeren op je website.
Dit kan je doen door in te loggen op de wp-admin omgeving van jouw WordPress website en vervolgens links in het menu op Plugins → Nieuwe toevoegen te klikken.
Om Elementor te vinden, typt je gewoon het woord “Elementor” in de zoekbalk in.De Elementor page builder plugin zou meteen moeten verschijnen als de eerste optie die je kunt installeren.
Klik gewoon op “Installeren” en vervolgens op “Activeren” zodra het is gedownload.
Vervolgens zal er in het menu aan de linkerkant een Elementor optie verschijnen. Vanuit hier gaan we alle instellingen doen!
In tegenstelling tot veel andere plugins, zit de meeste functionaliteit van Elementor echter op de pagina’s zelf.
Dat betekent dat je het grootste deel van je tijd zult besteden aan het gebruik van Elementor wanneer je pagina’s en berichten maakt of bewerkt.
hoe installeer ik Elementor pro?
Deze stap is optioneel wanneer je alleen de gratis versie van Elementor wilt gebruiken. De gratis versie biedt je voldoende functionaliteiten om je website te bouwen. Wanneer je je website next level wilt maken, en nog meer super handige features van Elementor wilt gebruiken moet je de Elementor Pro versie kopen!
Er zijn twee manieren om Elementor Pro met WordPress te verbinden. Als je nog geen Elementor Pro licentie hebt gekocht, zou je deze via deze link kunnen kopen! Volg vervolgens de stappen op het scherm om een Elementor account aan te maken.
Kies vervolgens het abonnement dat je wilt kopen. Dit zal voor jou waarschijnlijk het Essential plan zijn, omdat dit een licentie geeft voor het gebruik van Elementor Pro op 1 website. Wanneer je een freelancer of agency bent, die meerdere Elementor website gaat opzetten voor klanten, kan je de andere Elementor plannen overwegen.
Omdat je voor Elementor een actieve WordPress website moet hebben, moet je de domeinnaam van je website invoeren. Elementor voert vervolgens een controle uit om te verifiëren WordPress geïnstalleerd is op jouw domein.
De volgende stap is het klikken op Elementor installeren. Je wordt automatisch doorgestuurd naar de Elementor plugin pagina als je op dat moment bent ingelogd op de wp-admin omgeving van jouw website.
Wanneer gevraagd, klik op Nu installeren > Activeren. De page builder plugin zal dan aan je website worden toegevoegd.
Als je al een Elementor Pro licentie hebt gekocht, kun je ook naar de officiële website gaan en inloggen met de gegevens die je in je bevestigingsmail hebt ontvangen.
Selecteer in je Elementor account “Subscriptions” in het menu aan de linkerkant. Je kunt dan klikken op Download Zip.
Log vervolgens in op jouw WordPress wp-admin omgeving en navigeer naar Plugins > Nieuwe toevoegen. Je kunt dan het Elementor Pro .zip bestand uploaden dat je zojuist hebt gedownload.
Na het installeren en activeren van Elementor Pro, zou WordPress je moeten vragen om je licentiesleutel in te voeren. Als alternatief kun je navigeren naar Elementor > License > Connect & Activate.
hoe maak ik een pagina in Elementor?
Dus, met dat alles uit de weg, ben je klaar om Elementor in actie te zien?
De Elementor page builder heeft tal van kant-en-klare templates om uit te kiezen, maar laten we voor deze blog eens kijken hoe het eruit ziet om bij het begin te beginnen.
Een pagina maken
Om een nieuwe pagina te maken in Elementor ga je net als bij het aanmaken van een WordPress pagina naar de wp-admin omgeving van jouw WordPress website en klik je op “Nieuwe toevoegen”, onder Berichten of Pagina’s. Als voorbeeld voor deze blog maken we een nieuwe blogpost.
de pagina omzetten naar Elementor pagina
Zodra je bij dit scherm hieronder komt, kun je ervoor kiezen om de pagina te bewerken met de standaard WordPress editor. Om Elementor te gebruiken, moet je op de knop “Bewerk met Elementor” klikken.
Elementen (secties, kolommen en widgets) naar de pagina slepen
Deze pagina zal in eerste instantie leeg zijn. Kies en sleep elementen uit de Elementor sidebar.
Laten we voor nu een nieuwe kop (titel) voor de pagina maken. Het enige dat je hoeft te doen, is op het vak met de tekst “Kop” klikken en vervolgens de muisknop ingedrukt houden en het naar het widgetgebied op de pagina slepen (waar staat “Widget hierheen slepen”).
Als je niet wilt dat dit element de volledige breedte van je pagina inneemt (wat het standaard doet), kun je op de kleine “plus” knop (+) klikken om de structuur van dat gedeelte van jouw pagina aan te passen.
Nadat je op de plus knop hebt geklikt, zie je een optie “Selecteer je structuur”. Laten we voor nu kiezen voor drie gelijke kolommen.
Nadat we op dat icoontje met de drie kolommen hebben geklikt, zien we nu een gloednieuwe sectie op de pagina met drie kolommen, elk met een plus-knop.
En wat als we wat willen aanpassen deze sectie? Je raadt het al, we slepen daar een widget naartoe. Voor nu heb ik een video element naar de middelste kolom gesleept. Om een beetje in de Elementor sfeer te blijven heb ik hier alvast een Elementor video ingezet.
Instellingen aanpassen
Voor elke sectie of elk element dat je op de pagina plaatst, heb je opties om het verder aan te passen. Dit kan je doen door bij de sectie op de zes stippen te klikken.
Als we bijvoorbeeld de kop selecteren, kunnen we de content, de stijl of geavanceerde functies zoals de marge en de padding, responsiveness (mobiele/tablet weergave) en nog veel meer wijzigen.
De pagina publiceren
Als je eenmaal tevreden bent met de instellingen, is het tijd om het eindproduct te bekijken.
We hebben gezien hoe deze pagina eruitziet in de editor, maar als we een kijkje nemen in het voorbeeld van de eigenlijke pagina, zien we dat het hetzelfde is! Hoe handig is dat!
Dat is een heel goede zaak. Het betekent dat zodra de pagina waaraan je werkt live is, je erop kunt vertrouwen dat deze er precies zo uitziet als toen je deze aan het bewerken was. Dat is een van de belangrijkste kenmerken van Elementor.
Dit was natuurlijk een snel en eenvoudig voorbeeld, maar het laat zien hoe gemakkelijk het is om elementen te plaatsen en een werkende website te maken!
Het komt erop neer dat je geen expert hoeft te zijn om een website met Elementor te bouwen. Met talloze templates om uit te kiezen, hoef je nooit helemaal opnieuw te beginnen, tenzij je dat natuurlijk zelf wilt.
Er is nog een belangrijk punt dat ik hier willen benadrukken:
Of je nu kiest voor Elementor Free of Elementor Pro, de moeren en bouten van Elementor’s pagebuilder zijn identiek. Pro biedt gewoon meer geavanceerde functionaliteit via premium widgets!
Het was een geweldige beslissing om Elementor op deze manier in te stellen, omdat je niets opnieuw hoeft te leren als je eenmaal klaar bent om de sprong van de gratis versie van Elementor naar Elementor Pro te maken.
hoe gebruik ik de Elementor theme builder?
Meestal, wanneer iets erg eenvoudig te gebruiken wordt, moet het nuttige functies laten vallen. Gelukkig is Elementor een speciaal geval dat zowel gebruiksvriendelijk als erg veelzijdig is, grotendeels dankzij de theme builder.
De theme builder is beschikbaar in de Pro-versie van Elementor en is een game changer voor iedereen die bekend is met page builders, omdat je hiermee aangepaste headers, footers en andere dynamische content voor je website kunt maken.
Je kunt zelfs aspecten van je WordPress thema overschrijven, zodat je kunt behouden wat werkt en je de gewenste wijzigingen aan kunt brengen!
Waarom zou je dynamische content nodig hebben? Nou, soms wil je misschien een verkooppagina bouwen die geen traditionele header en sidebar heeft of misschien wil je een aangepaste blog layout opslaan die je elke keer dat je een nieuwe blog toevoegt, kunt gebruiken.
De mogelijkheden zijn eindeloos!
bouw een header/footer met Elementor
Klaar om een aangepaste header- of footer te bouwen met Elementor met behulp van de theme builder? Dit is hoe je dat doet!
stap 1. Klik op “Templates” in het WordPress dashboard
Nadat je bent ingelogd in de wp-admin omgeving van je website, ga je naar “Templates” onder Elementor in het zijmenu.
Stap 2. Nieuw template toevoegen of importeren
Hier maak je een nieuw template voor jouw header.
Als je al een header hebt gezien waarvan je het uiterlijk leuk vindt, kun je deze importeren om als startpunt te gebruiken. Klik anders op “Nieuwe toevoegen”.
Er verschijnt een dialoogvenster waarin je het template type kunt kiezen, in dit geval de header, samen met de naam van jouw template.
Stap 3. Bewerk je nieuwe template
Als deze stap bekend voorkomt, komt dat omdat het dezelfde editor is die we eerder hebben gebruikt om een volledige pagina te maken. Nu wordt het toegepast op het maken van een aangepaste header.
Je kunt het proces doorlopen om jouw layout te maken met verschillende widgets en zelfs specifieke afbeeldingen of andere content. Nadat je jouw nieuwe header hebt opgeslagen, is deze gemakkelijk toegankelijk vanaf een nieuwe pagina!
WooCommerce pagina’s bouwen met Elementor
Het proces voor het maken van een aangepaste WooCommerce product pagina is vergelijkbaar met elke andere pagina of sectie die je kunt bouwen. Je zou dit kunnen doen om de branding van je website beter weer te geven op de productpagina’s. je kunt ook proberen je pagina te optimaliseren om meer conversie te genereren.
Met de WooCommerce Builder ondersteunt Elementor de mogelijkheid om een template te maken voor een enkele productpagina. Nadat je een nieuw template hebt gemaakt, zie je een template bibliotheek vol blokken of volledige pagina’s die je kunt gebruiken voor je WooCommerce productpagina.
Om een aangepaste WooCommerce productpagina te ontwerpen, selecteert je Templates in het menu aan de linkerkant. Klik vervolgens op de knop Nieuw toevoegen. Open in het volgende venster het eerste vervolgkeuzemenu en selecteer Single Product.
Houd er rekening mee dat deze WooCommerce templates een aantal dynamische product widgets heeft, waaronder producttitel, product afbeelding en productprijs.
Je kunt de details van de producten instellen met WooCommerce, en Elementor gebruiken om up-to-date productinformatie op de front-end weer te geven.
Het is zo simpel!
hoe maak ik mijn Elementor website mobiel responsive?
Nu steeds meer gebruikers websites bezoeken vanaf hun mobiele apparaten, is het van cruciaal belang om de mobiele weergave van je website te optimaliseren. Meer dan 50% van je websiteverkeer zal waarschijnlijk van mobiele apparaten komen.
Ik heb enkele stappen op een rij gezet waarmee je ervoor kunt zorgen dat je website mobielvriendelijk is als je de Elementor page builder gebruikt.
Als je liever video’s kijkt dan een blog leest, check dan de uitlegvideo van Elementor over het mobielvriendelijk maken van een Elementor pagina.
Elementor maakt het super makkelijk als het gaat om het aanpassen van je website voor verschillende apparaten.
De algemene vuistregel is dat alle bewerkbare functies een specifieke instelling hebben voor desktop, mobiel en tablet. De meest voorkomende instellingen zijn tekstgrootte, margin en padding.
Let bijvoorbeeld op het apparaat pictogram naast ‘Breedte’, zoals weergegeven in de onderstaande afbeelding. Dit is het geval met bijna elk element dat je wilt aanpassen.
Klik op het apparaat waarvoor je de aanpassing wilt uitvoeren. Eenmaal geselecteerd, ga je gang en speel je met de instellingen op basis van je voorkeur.
Standaard reageren de achtergrondafbeeldingen automatisch. Je hebt volledige controle over het verder aanpassen van de afbeeldingen aan je apparaat, zelfs in de mate dat je verschillende afbeeldingen hebt voor verschillende schermformaten.
Wist je dat je kunt kiezen om een sectie te tonen of te verbergen op basis van het apparaat? Als er bijvoorbeeld een rij afbeeldingen of tekst is die je op mobiele apparaten wilt verbergen, kunt je dit vrij eenvoudig doen.
Ga gewoon naar het tabblad Bewerken > Geavanceerd > Responsive.
Zie je een reeks opties onder ‘Zichtbaarheid’? Standaard is de sectie ingesteld om op alle apparaten te worden weergegeven. Als je het wilt verbergen, kun je de knop gewoon wisselen op basis van je apparaat.
Hoewel je de sectie mogelijk nog steeds te zien krijgt tijdens het bewerken van de pagina, is deze niet zichtbaar aan de voorkant, zodra je de pagina publiceert.
Om de weergave van de hele webpagina te wijzigen, hoef je alleen maar op het pictogram voor de responsive modus onder aan jouw Elementor widgets te klikken.
waarom moet ik Elementor gebruiken?
Nu we weten hoe we Elementor moeten gebruiken, ga ik misschien een vreemde vraag stellen: “Waarom zouden we Elementor moeten gebruiken?”
Hoe ervaren je ook bent, het maken van een website kan een uitdaging zijn. Van het bouwen van de header tot het behouden van de algehele stijl van de website, het kost tijd en moeite.
Als je een freelancer of een website ontwerper bent, weet je heel goed dat elke nieuwe klant nieuwe uitdagingen en specifieke vereisten met zich meebrengt.
Platforms zoals WordPress maken het hele website ontwikkelingsproces inderdaad een stuk eenvoudiger. Dat gezegd hebbende, je wilt altijd meer.
Gelukkig heb je page builders met met drag & drop, zoals Elementor, die het hele ontwikkelingsproces naar een heel nieuw niveau tillen.
Van het gebruik van een reeks widgets en elementen om jouw webpagina te bouwen tot de indrukwekkende blokken en sjablonen, er is veel dat je kunt doen met Elementor.
Laten we dieper ingaan op waarom je de plugin Elementor page builder zou moeten gebruiken!
1. Gebruiksvriendelijk
Een website maken met Elementor is zo eenvoudig als 1-2-3. Gebruik de functie voor drag & drop, voeg eenvoudig een widget of element naar keuze toe, pas het naar wens aan en publiceer de pagina. Je hoeft niet te kunnen coderen of programmeerkennis te hebben.
2. Krachtige en indrukwekkende assets
Met meer dan 90 ongelooflijke widgets (ook wel blokken genoemd) en meer dan 300 ontworpen templates, kun je je fantasie de vrije loop laten terwijl je je webpagina’s, bestemmingspagina’s, pop-ups en meer maakt. Van headers tot knoppen, pictogrammen voor sociale media tot galerijen en carrousels, er is een widget voor zowat elke functie die je aan je website wilt toevoegen.
3. Globale lettertypen en kleuren
Stel met één klik jouw lettertypen en kleuren op jouw website in. Van de titels, alinea’s en zelfs de knoptekst, definieer jouw branding één keer en laat ze toepassen op elk element op jouw website.
4. Live bewerken
Elementor is een WYSIWYG-editor (What You See Is What You Get). Met het realtime voorbeeld kun je precies zien hoe jouw pagina eruit ziet na een update, in plaats van deze te publiceren en vervolgens opnieuw te moeten doen als het niet is zoals je wilde.
5. Responsive design
Aangezien meer dan 50% van het websiteverkeer afkomstig is van mobiele apparaten, is het absoluut noodzakelijk dat je de mobiele weergave van jouw website optimaliseert.
Met Elementor kun je eenvoudig een voorbeeld van je pagina’s bekijken en aanpassen voor desktop-, mobiele en tablet-apparaten. Verander eenvoudig de weergave en pas elk element aan om er op elk apparaat perfect uit te zien.
6. Maak geavanceerde animatie-effecten
Vind je het leuk om animaties in je website op te nemen? Je weet wel, die parallax-effecten, teksten laten opvallen door een 3D-effect te creëren? Met Elementor kun je dat vrij eenvoudig doen.
7. Zeer veilig
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
8. Voorgemaakte templates
Elementor bevat meer dan 100 voorgemaakte templates die jij met één druk op de knop kunt importeren in jouw pagina. Vervolgens kun je deze helemaal naar je eigen stijl aanpassen!
9. naadloze integratie met WordPress plugins
Of het nu WooCommerce, Rank Math, Yoast SEO en nog veel meer is, Elementor is compatibel met bijna alle populaire WordPress plugins.
10. Revisiegeschiedenis
Als je al een tijdje codeert of wat dat betreft, zelfs als je Google Documenten gebruikt, ben je het ermee eens dat de functie voor ongedaan maken een enorme zegen is. Of je nu een enkele regel code of een heel codeblok hebt verwijderd, een eenvoudige “ongedaan maken knop” kan erg handig zijn!
11. Open source
Hoewel dit wat codering van jouw kant vereist, heb je volledige toegang tot de Elementor broncode. Je kunt de mogelijkheden van Elementor verbeteren door jouw eigen aangepaste functionaliteiten en aangepaste CSS aan hun code toe te voegen.
12. Actieve community
Met Elementor ben je niet de enige. Vanwege de enorme populariteit van de Elementor plugin, is er een groeiende community waarmee je connectie kunt maken.
Je leert constant nieuwe tools, ontwerpideeën en nog veel meer. Om nog maar te zwijgen, de community is er om je te ondersteunen als je hulp, suggesties en ideeën nodig hebt om een geweldige website te bouwen.
13. Gratis
Last but not least kun je helemaal gratis aan de slag met Elementor. Hoewel er een pro versie is, zoals eerder in de blog vermeld, zou de gratis versie het prima moeten doen.
voor- en nadelen van het gebruik van de Elementor page builder
Net als al andere plugins voor WordPress heeft Elementor zijn voor- en nadelen. Hoewel de voordelen opwegen tegen de nadelen, heb ik ze hier allebei voor je op een rijtje gezet.
| Voordelen | Nadelen |
|---|---|
| Drag and drop page builder | Je moet upgraden naar de Pro versie voor ondersteuning |
| Eenvoudige en intuïtieve interface | Geen lifetime prijs optie. Er zijn alleen prijs opties voor 1 jaar. |
| Live, realtime previews tijdens het bewerken | Gevallen van langzaam laden van pagina's |
| Pas pagina's eenvoudig aan voor verschillende apparaten (desktop, mobiel, tablets) | |
| Naadloze integratie met tools van derden | |
| 90+ widgets, meer dan 300+ templates en verschillende blokken om uit te kiezen | |
| Veilig door regelmatige updates | |
| Compatibel met de meeste thema's | |
| Integreert perfect met WooCommerce | |
| De gratis versie werkt geweldig |
Conclusie
Oef, we hebben veel terrein behandeld met deze WordPress Elementor tutorial!
Ik hoop dat je kunt zien waarom Elementor een fantastische page builder is die veel werk uit webdesign haalt. Het biedt een ideale balans tussen gebruiksgemak en uitgebreide functionaliteit, waardoor het een van de meest toegankelijke page builders is die beschikbaar is voor WordPress.
Bedankt voor het lezen! Hopelijk heeft dit bericht je een goed startpunt gegeven voor succes met Elementor. Als je vragen of opmerkingen hebt, deel ze dan in de reacties hieronder met mij!
Hulp nodig met je website, of liever de hele website uitbesteden?
Heb jij hulp nodig bij jouw website, of wil je toch liever je hele website uitbesteden? Neem dan contact met mij op! Dan gaan we samen de uitdaging aan om voor jou een toekomstbestendige, efficiënte website te bouwen!
