Elementor: zelf WordPress websites ontwerpen

Elementor: zelf WordPress websites ontwerpen

Je eigen thema voor WordPress maken is niet zo eenvoudig. Maar met de betaalde websitebuilder Elementor gaat het wél gemakkelijk, via drag & drop. 

Of je nu een nieuwkomer bent of een WordPress veteraan: iedereen die het blogsysteem kent, weet hoe belangrijk thema’s zijn. Ze bepalen hoe je uiteindelijke website eruitziet. Maar vaak genoeg bieden kant-en-klare thema’s niet de mogelijkheden die je als gebruiker zoekt. Soms zijn ze technisch weliswaar erg slim bedacht, maar zijn ze visueel gewoon niet mooi. En als je niet kunt vinden wat je zoekt, moet je zelf een thema bouwen. Via zogeheten websitebuilders kun je dat probleem omzeilen. Sinds versie 6.0 heeft WordPress zélf een relatief eenvoudige pagebuilder op basis van Gutenberg, waarmee elementen vrij geplaatst kunnen worden. Wil je meer, dan moet je een geschikte tool kopen. Elementor is een sitebuilder die de laatste jaren terecht een goede naam heeft gekregen. Hiermee kun je WordPress thema’s grotendeels vrij ontwerpen, zonder code te programmeren. 

Wat kan Elementor?

Elementor is een zogenaamde websitebuilder, een tool om WordPress websites te bouwen zonder je bezig te hoeven houden met de code en het templatedesign. Elementor wordt als plug-in geïnstalleerd en stelt je dan in staat om naar eigen wens pagina’s, websites en thema’s te ontwerpen. Dat doe je via drag & drop. WordPress gebruikers die hun eigen website willen ontwerpen, vinden in Elementor meer dan 90 widgets. Daarmee kun je de lay-out van een WordPress site helemaal naar eigen smaak configureren. Elementor is een soort Sitebuilder voor WordPress, waarmee zelfs beginnende gebruikers met vrij weinig moeite mooie websites kunnen maken. Tal van professionele themaontwikkelaars gebruiken deze tool al om kant-en-klare WordPress thema’s te maken. Gebruikers die niet vanaf nul willen beginnen, kunnen met zo’n thema veel tijd besparen.

De plug-in Elementor in WordPress installeren
Je kunt Elementor en het Hello Theme direct via WordPress installeren.

Wanneer Elementor nut heeft en wanneer niet

Elementor is dus geschikt voor alle WordPress gebruikers die zelf aan de slag willen met het ontwerp van hun site. De basisversie van Elementor is gratis, maar ook erg beperkt. Veel functies zijn gedeactiveerd en verwijzen je naar de Pro-versie. Die kost ongeveer 50 euro per jaar voor een enkele website. Webdesigners kunnen ook pakketten boeken die aanzienlijk meer websites toestaan. De prijs per pagina is dan lager, maar over het geheel genomen kost het je natuurlijk toch nog meer geld.

Dat brengt ons bij de essentie: Elementor is niet voor elke gebruiker geschikt. De meeste moderne, commerciële thema’s zijn op een ander systeem ontwikkeld. Daarom is de betaalde versie nauwelijks de moeite waard als je één particuliere site wilt bouwen. Wie gewoon een blog met WordPress wil runnen, kan beter een kijkje nemen bij de talloze gratis WordPress thema’s. Weliswaar heb je dan geen pagebuilder, maar misschien vind je toch een design dat aan je eisen voldoet.

Elementor installeren

Wil je Elementor toch gebruiken? Dan kun je gemakkelijk de gratis basisversie downloaden uit de WordPress plug-in-repository. Log daarvoor in op WordPress, kies Plug-ins en dan Installeren. Zoek nu naar ‘Elementor’ in het zoekveld. Vervolgens kies je Nu installeren om het aan je WordPress website te koppelen. Klik dan op Activeren en je kunt Elementor op je WordPress blog gebruiken. Daarna kies je een basisthema dat door Elementor wordt ondersteund. Als gemakkelijke startoplossing kun je het Elementor Hello Theme gebruiken, dat ook via de WordPress repository wordt geïnstalleerd en geactiveerd. Je doet dat op dezelfde manier als de installatie van de plug-in, via Weergave -> Thema’s -> activeren. Heb je de betaalde versie van Elementor gekozen? Dan kun je met de themebuilder ook volledig nieuwe thema’s zelf maken.

De Elementor-editor heeft een groot aantal functies.
De Elementor-editor lijkt op het eerste gezicht eenvoudig, maar hij heeft heel veel functies.

Een pagina met Elementor aanmaken

Heb je Elementor en het Hello Theme ingesteld? Dan is het zinvol om eerst de instellingen te bekijken. Kies Elementor -> Instellingen -> Experimenten en kijk of Elementor op ‘Active’ staat voor ‘Hello Theme Header & Footer’. Vervolgens kun je beginnen met de eigenlijke bewerking van de pagina’s. Het is handig om eerst de structuur van je website te bepalen en dan de pagina’s te bouwen. In dit voorbeeld maken we een startpagina met een afbeelding. Kies in de WordPress interface Pagina’s -> Aanmaken, geef de pagina een naam en klik op Publiceren. Herhaal dit voor alle geplande subpagina’s. 

Sleep elementen naar de startpagina

Roep een van de pagina’s op en klik bovenaan op Bewerken met Elementor. Dit opent de Elementor-pagebuilder. Je ziet nu de beschikbare Elementor-widgets in de balk aan de linkerkant. Sleep ze in het overeenkomstige vak in de Elementor-editor om ze toe te voegen. Wil je weer een widget verwijderen? Dan klik je op X rechtsboven in de elementen. Voor een beter overzicht kun je bovendien de page navigator openen, die alle elementen duidelijk in een lijst laat zien. Je vindt deze functie helemaal onderaan, links van de knop Opslaan. De navigator is erg praktisch om snel elementen te kiezen en te bewerken. Nu kun je het eerste element naar je startpagina slepen. In dit voorbeeld kiezen we een foto, die we vervolgens vanuit de mediabibliotheek kunnen toevoegen. 

De navigator van Elementor (rechts) helpt je om overzicht te houden.
De navigator van Elementor (rechts) helpt je om overzicht te houden.

Elementen bewerken

Heb je het element (in dit geval de foto) naar de Elementor-editor gesleept? Dan zie je aan de linkerkant verdere opties, zoals Inhoud, Stijl en Geavanceerd. Je kunt hier de eigenschappen van het element configureren. Zo kun je Opties -> Stijl -> CSS-filter gebruiken om de afbeelding een beetje aan te passen: lichter, contrastrijker of scherper. Onder Geavanceerd vind je diverse opties waarmee je het betreffende element fijner kunt bewerken. Op deze manier voeg je nu geleidelijk alle widgets die je nodig hebt aan je website toe. Zo bouw je gemakkelijk de site volgens je wensen. Vergeet niet tussendoor de bewerkingen op te slaan. Klik ook eens op de knop Responsive mode (naast Opslaan), om een preview te krijgen op verschillende apparaten.

Handig: je kunt direct de mobiele weergave van je site controleren.
Handig: je kunt direct de mobiele weergave van je site controleren.

Elementor: ideaal voor creatieve websitebeheerders

Natuurlijk kunnen we je in dit blog maar een deel van de functies van Elementor tonen. Zelfs de gratis versie heeft talrijke mogelijkheden om pagina’s naar eigen wens aan te passen. Maar de editor wordt pas écht interessant (en nog krachtiger) als je een upgrade naar de Pro-versie koopt. Dan kun je volledige thema’s bouwen met de themebuilder. Ook krijg je toegang tot praktische functies die de gratis versie van Elementor niet heeft. Vanwege de veelzijdigheid en kracht van de editor raden we je aan om vooral de tijd te nemen. Verken eerst rustig alle mogelijkheden. Als je eenmaal goed overweg kunt met de tool, kun je met een paar eenvoudige stappen de lay-out van je website optimaliseren.

Wil jij ook aan de slag met Elementor?

Naar onze WordPress pakketten
Zoekwoorden:

Delen

  1. Avatar

    Sjoerd zei op

    Hi Strato,

    Ik maak momenteel gebruik van WordPress Basic en Elementor Pro. Helaas is de website vrij traag. Wat raden jullie aan om de snelheid te verbeteren? (Caching en afbeelding optimalisatie zijn al van toepassing!)

    Beantwoorden
  2. Avatar

    Natasja Faust zei op

    Hi Christian,

    Als ik via jullie mijn wordpress site wil hosten en ik wil gebruik maken van een commercieel kant en klaar thema dat is gebouwd met elementor pro, wat heb ik dan nodig en wat moet ik doen om dat thema te activeren en te gaan gebruiken.

    Beantwoorden
    • Jorrit van der Heide

      Jorrit van der Heide zei op

      Hallo Natasja,

      Bedankt voor je vraag. In principe werkt dat als volgt:

      1. Je neemt één van onze WordPress pakketten en doorloopt de stappen om WordPress te installeren.
      2. Je activeert het thema in de backend van WordPress (weergave – thema’s). Als je een commercieel thema gebruikt, moet je het thema waarschijnlijk eerst aanschaffen en de aanwijzingen van de ontwikkelaar van het thema volgen.
      3. Heb je het thema geactiveerd, moet je Elementor (Plugins – nieuwe plugin) nog installeren en activeren. Hier moet je even checken of je de basisversie of Elementor Pro nodig hebt om het thema te kunnen gebruiken. In het laatste geval zou je Elementor Pro nog moeten aanschaffen.
      4. Nu heb je alles om met je website aan de slag te kunnen gaan.

      Ik hoop dat ik je daarmee op weg kan helpen. Laat het graag weten als je nog verdere vragen hebt.

      Hartelijke groet,

      Jorrit

      Beantwoorden

Je kunt pas een reactie plaatsen nadat je ons privacybeleid en cookies hebt geaccepteerd. Om privacyredenen mogen wij jouw persoonsgegevens anders niet verwerken.

Klik onderaan de pagina op de blauwe button OK. Nadat je de pagina opnieuw hebt geladen, kun je een reactie achterlaten.

 

Deze website maakt gebruik van cookies voor onder andere Google Analytics. Deze melding verdwijnt zodra je de cookies hebt geaccepteerd. Meer informatie