Zo bouw je gratis je eigen website met Elementor!

Gratis website maken

Elementor is met meer dan 4.000.000 downloads één van de populairste plugins ter wereld.

Je kunt voorzichtig wel stellen dat Elementor een ware game changer is. Het heeft de manier van web development namelijk compleet veranderd. Vandaag de dag heb je geen kennis van HTML of CSS nodig om een website volledig naar eigen smaak te ontwerpen.

In de onderstaande video zie je hoe je met Elementor jouw website kan vormgeven naar jouw eigen smaak.

Elementor heeft zowel een gratis versie, als een Pro variant. Uiteraard heeft de Pro versie veel meer mogelijkheden, maar ook met de gratis versie ben je in staat om prachtige websites te bouwen.

In deze Elementor handleiding ga ik je vertellen hoe je jouw webpagina’s compleet kunt inrichten zoals jij dat zelf wilt. Zo bouw je in een handomdraai een gratis website!

De volgende onderwerpen komen aan bod in deze handleiding.

Elementor downloaden en installeren

Je kunt de gratis Elementor plugin downloaden via de website van Elementor.

Klik als eerst op de groene button.

Download Elementor via de groene button

Vervolgens krijg je de vraag of je een WordPress website hebt.

De vraag: Heb je al een Elementor website

Als je op ‘No, I don’t‘ klikt krijg je de mogelijkheid om een webhosting aan te schaffen via Siteground.

Klik je op ‘Yes, I sure do‘ dan wordt ter verificatie jouw URL gevraagd.

Heb je nog geen website op WordPress draaien, maar wil je wel gebruik maken van Elementor (bijvoorbeeld omdat je gebruik maakt van een localhost), klik dan op de kleine tekst onderaan.

Elementor downloaden

Het ZIP-bestand wordt nu gedownload.

Ga vervolgens naar de admin omgeving van jouw WordPress website en ga in het verticale linkermenu naar [Plugins] >> [Nieuwe plugin].

Klik nu op [Plugin toevoegen] en upload het eerder gedownloade ZIP-bestand.

Plugin toevoegen

Het enigste wat je nu nog hoeft te doen is de plugin activeren en je bent klaar om aan de slag te gaan met Elementor!

De functies van Elementor

Vanaf nu kun je starten met het bouwen van jouw webpagina’s met Elementor.

Je kunt gebruik maken van Elementor door naar een nieuwe pagina aan te maken door in het linkermenu naar [Pagina’s] >> [Nieuwe pagina] te gaan.

Geef de pagina nu een titel en klik op [Bewerk met Elementor].

Bewerk met Elementor

De Elementor Page Builder wordt nu geladen. Je krijgt de volgende omgeving te zien.

Bouw je website met de Elementor Page Builder

De pagebuilder is opgebouwd in twee delen.

  • Aan de linkerkant vind je het Elementor paneel. Hier vind je de widgets waarmee je jouw website kunt opbouwen. Voorbeelden van widgets zijn koppen, tekstbewerkers, video’s en afbeeldingen.
  • Aan de rechterkant bevindt het bewerkscherm. Hier voeg je elementen toe en pas je ze aan. In dit scherm bouw je jouw pagina dus op.

Aan de onderkant van het het Elementor paneel vind je een navigatiemenu.

Menu in het Elementor paneel

Van links naar rechts heeft dit menu de volgende mogelijkheden.

Instellingen aanpassen

Via het tandwiel bereik je de instellingen. Hier pas je onder andere de titel aan en voeg je een uitgelichte afbeelding toe.

Je kunt hier ook de pagina layout aanpassen. Je hebt daarin drie opties.

  • Standaard. Dit zijn de standaard instellingen van het thema.
  • Elementor canvas. Hierbij neem Elementor de hele pagina over. Je hebt hier dus ook geen header en footer. Deze optie wordt bijvoorbeeld vaak gebruikt bij een salespage.
  • Elementor volledige breedte. Hier behoudt je pagina wel de header en de footer, maar neemt de Elementor Page Builder de rest van de pagina helemaal over.
Instellingen aanpassen van de pagina

Navigator

De Navigator geeft een handig overzicht van de opbouw van je website. Zeker bij lange pagina’s is het makkelijk om op deze manier naar verschillende delen van de pagina te navigeren, of de opbouw aan te passen.

Voorbeeld van de Navigator

Geschiedenis

Via de geschiedenis-tab kun je recente aanpassingen zien. Op die manier kun je altijd terug naar een eerdere versie.

Ben je meerdere dagen bezig met heb bouwen van een pagina, dan vind je de gemaakte aanpassingen terug onder revisies.

Versie- en revisiebeheer van je pagina

Responsive modus

De Responsive modus geeft de mogelijk om je website te bekijken en aan te passen op verschillende apparaten (desktop, tablet en mobiel).

Responsive modus Elementor

Publiceren

Is je webpagina klaar, dan kun hem publiceren door op de groene button te klikken. Wil je de pagina opslaan, maar nog niet publiceren? Klik dan op het pijltje >> [Opslaan als concept]

Starten met bouwen van je gratis website

Er zijn met Elementor twee manieren om een pagina op te bouwen.

Je kunt beginnen vanaf nul. Op deze manier bouw je de pagina dus helemaal zelf op. Het voordeel is dat je de touwtjes volledig in handen hebt.

Je begint door op de paarse (+) button te klikken.

Secties invoeren in Elementor

Vervolgens kun je een sectie en het gewenste aantal kolommen invoeren.

Het aantal kolommen kiezen

Bouw je voor het eerst een website, dan is het misschien makkelijker om te starten met een template.

Elementor heeft een groot aantal standaard templates, waarmee je snel een eerste opzet van je pagina bouwt. Je kunt deze templates later naar wens aanpassen.

Je benadert de templates door op het mapje naast de paarse (+) button te klikken. Hierdoor opent de bibliotheek.

Elementor bibliotheek

In de bibliotheek kun je kiezen uit complete pagina’s, of uit enkele blokken.

Je voegt een blok of pagina in door op [invoegen] te klikken.

Een template invoeren

Door op de vergrootglas te klikken kun je ook een voorbeeld van het blok zien.

De opbouw van een Elementor pagina

Door een blok uit de bibliotheek aan je pagina toe te voegen wordt duidelijk hoe een webpagina binnen Elementor is opgebouwd. Zeker als je daar de Navigator bij opent.

Een pagina is opgebouwd uit drie verschillende onderdelen.

  • Secties;
  • Kolommen;
  • Widgets.

Sectie

Een sectie binnen Elementor

Een sectie bevat de kolommen en widgets van de webpagina. Je herkent de sectie aan de blauwe rand met de blauwe tab in het midden. Om je website zo snel mogelijk te houden is het aan te raden zo min mogelijk secties te gebruiken.

Kolommen

Binnen een sectie vind je de kolommen. Een sectie kan bestaan uit meerdere kolommen. In de het voorbeeld hieronder heeft de sectie bijvoorbeeld twee kolommen.

Deze sectie heeft twee kolommen

Je kunt zelf kiezen hoeveel ruimte iedere kolom inneemt. In het bovenstaande voorbeeld is de verhouding bijvoorbeeld 30/70.

Widgets

Binnen de kolommen plaats je de widgets. Hieronder zie je bijvoorbeeld dat het rechterkolom twee tekstbewerker widgets heeft.

Elementor widgets

Je kunt extra widgets toevoegen door deze vanaf het Elementor paneel naar de kolom te slepen.

Afbeelding toevoegen aan Elementor

Met je rechter muisknop kun je secties, kolommen en widgets onder andere dupliceren, kopieëren, bewerken of verwijderen.

Verschillende functies van de rechtermuisknop

Het Elementor paneel

De secties, kolommen en widgets kun je verder aanpassen in het Elementor-paneel aan de linkerkant.

Afbeelding bewerken via het Elementor paneel

Dit paneel is opgebouwd uit drie delen.

Inhoud (in het geval van secties of kolommen heet dit ‘Layout’)

Hier kun je bijvoorbeeld de afbeelding kiezen, of als je de tekstbewerker widget selecteert kun je in dit gedeelte de tekst aanpassen.

Stijl

Hier pas je de vormgeving aan. Met Elementor kun je een afbeelding een filter, een rand en zelfs schaduw geven.

Afbeelding binnen Elementor aangepast

In de afbeelding hierboven zie je bijvoorbeeld dat de afbeelding een oranje filter, een gestreepte rand, een boxschaduw en afgeronde hoeken heeft.

Geavanceerd

Hier kun je bijvoorbeeld margin en padding toepassen. Je kunt zelfs animatie effecten waarmee je website een stuk levendiger wordt.

Een andere handige optie hier is ‘Responsive’. Hiermee kan je bijvoorbeeld kiezen of een afbeelding alleen wordt weergegeven op de desktop. Of juist op de mobiel.

Een mooi voorbeeld van padding vind je bijvoorbeeld hieronder. Je ziet namelijk dat er redelijk veel witruimte is tussen de bovenkant van de sectie en de bovenkant van de kolommen.

Padding van de sectie is 100 pixels aan de bovenkant

Dit komt omdat er een padding van 100 pixels is ingesteld aan de bovenkant van de sectie. Zet je de padding op nul, dan zie je dat de ruimte is verdwenen.

Padding van de sectie is nul pixels

Meer widgets en elementen

De gratis versie van Elementor biedt al maar liefst 29 widgets waarmee je een prachtige website kunt maken. Met de Pro versie komen daar nog eens zo’n 70 widgets bij.

Extra gratis widgets

Er zijn gratis plugins waarmee je (ook in de gratis versie van Elementor) extra widgets kunt toevoegen! Eén van de beste plugins is de Unlimited Elements for Elementor plugin.

Zodra je deze plugin hebt geïnstalleerd krijg je een enorme bibliotheek met extra widgets die je gemakkelijk aan je website toe kunt voegen.

Installeer een widget die je wilt gebruiken en deze wordt weergegeven in het Elementor paneel!

Extra gratis elementen

Eerder in dit artikel vertelde ik over de Elementor template bibliotheek waar je kunt kiezen uit een groot aantal templates. Een template bespaart een hoop tijd waardoor je in een handomdraai een prachtige website bouwt!

Behalve Elementor zijn er nog meer aanbieders van gratis templates. Enkele bekende template bibliotheken zijn:

Conclusie

Met Elementor bouw je een prachtige website in een handomdraai. In dit artikel heb je gelezen hoe een pagina binnen Elementor is opgebouwd.

Elementor heeft zowel een gratis- als een betaalde versie. Met de gratis versie heb je toegang tot 50+ widgets waarmee je prachtige websites maakt.

Ik ben benieuwd wat je van het artikel vond en waar jij je website mee maakt. Heb je vragen? Laat het me dan weten in de reacties!

Wat is Elementor?

Elementor is een gratis pagebuilder waarmee je in staat bent prachtige websites te maken, zonder kennis van coderen. Elementor is een plugin dat draait op WordPress.

Heb je met Elementor nog een thema nodig?

Ja. Elementor is een plugin waarmee je pagina’s kunt vormgeven. Je hebt echter altijd nog een thema nodig. Maar je gebruik van Elementor Pro, dan kun je het Hello thema downloaden. Dit thema kun je bewerken met Elementor.

Welke WordPress thema’s werken goed met Elementor?

De bekendste thema’s die vlekkeloos met Elementor werken zijn Astra, OceanWP, GeneratePress, Neve & Page Builder Framework.

Share on facebook
Share on twitter
Share on linkedin