Elementor WordPress handleiding: hoe werkt een pagebuilder?

Laatste update: 18 juni 2021 door Ruben Bunskoeke

Elementor is de populairste WordPress pagebuilder.

Met Elementor kun je met een drag-and-drop systeem webpagina’s voorgeven.

De basis versie van Elementor is gratis, makkelijk te gebruiken en meer dan voldoende voor 90% van de website-eigenaren. Als je meer opties, het thema zelf wil vormgeven en meer voorafgedesignde elementen wil, of een webbouwer bent of wil worden, dan kun je ook investeren in de Premium versie van Elementor.

Elementor installeren

Elementor kun je installeren via jouw WordPress website

  • Ga naar Plugins en klik op Nieuwe Plugin.
  • Typ rechtsboven in het zoekveld Elementor. Je kunt de Elementor plugin ook op het tabblad Populairste en Aanbevolen vinden.
  • Klik op Nu Installeren en daarna op Nu Activeren.

Elementor gebruiken

Wanneer Elementor geactiveerd is, verschijnt er een Bewerk met Elementor-knop wanneer je een pagina bezoekt.

Die knop opent de Elementor Pagebuilder.

Elke keer wanneer je een pagina wil maken die afwijkt van een standaard pagina of blog – waar tekst, afbeeldingen en video’s onder elkaar verschijnt – kun je de Elementor pagebuilder gebruiken.

Aangeven dat je de hele pagina wil vormgeven

Met een pagebuilder kun je het contentgedeelte van een website aanpassen.

De locatie en breedte van dit gedeelte is door het thema die je gebruikt vastgesteld.

Wanneer je Elementor wil gebruiken dan wil je vaak het hele design aanpassen en niet met vooraf gedefinieerde elementen werken, zoals een smalle pagina en een titel met Over helemaal bovenaan de pagina.

Helemaal rechtsonder van een pagina zie je een kopje met Pagina-attributen en daaronder een optie met Templates. Kies hier voor Elementor volledige breedte. Wil je ook geen logo en menu tonen? Dan kun je voor de canvas optie gaan.

De Elementor pagebuilder

Aan de linkerkant kun je het menu van Elementor vinden met alle contentblokken (ook wel widgets genoemd) en alle instellingen van de pagina en per contentblok. In het midden zie je de indeling van de pagina. Hier kun je rijen toevoegen, kolommen maken en contentblokken toevoegen. Al deze elementen kun je met een drag-and-drop systeem aanpassen en individueel aanpassen.

Het Elementor menu

Het hamburgermenu linksboven brengt je naar een tabblad met o.a. de site instellingen en een optie om terug naar het dashboard van WordPress the gaan.

Wanneer je rechtsboven op hier vierkantje klikt, kom je weer op het ‘hoofdscherm’ met de contentblokken van Elementor.

Linksonder zie je vijf iconen:

  • Het tandwiel brengt je naar de instellingen van de pagina met o.a. de titel van de pagina en de uitgelichte afbeelding.
  • De drie opeengestapelde vierkantjes laat zien hoe de elementen – de rijen, kolommen en contentblokken – van de pagina opeengestapeld zijn met een Navigator (die je dan helemaal rechts ziet).
  • Het klokje geeft je de optie om jouw actiegeschiedenis te bekijken – en acties terug te draaien.
  • Het scherm geeft je de optie om de pagina te bekijken op andere apparaten en schermgrootten (responsive).
  • Het oogje toont een voorbeeld van hoe de pagina er op dat moment uit ziet.
  • En daarna heb je de grote groene knop waarmee je het design van de pagina kunt bijwerken (opslaan) en publiceren.

Hoe werkt een pagebuilder?

Met de meeste pagebuilders krijg je te maken met drie, vier of soms vijf elementen.

  • Secties / Rijen
  • Kolommen
  • Contentblokken / widgets
  • Templates

Sectie / Rij

Een website met een afwijkend design, zoals de homepage, bestaat meestal uit meerdere secties/rijen met ieder een ander design, die op elkaar gestapeld zijn. Zo start een homepage vaak met een zogenaamde ‘hero’-sectie met een pakkende titel, een afbeelding en een call-to-action. Verder heb je secties voor opsommingen, voor het blog etc.

Kolom

Een sectie/rij kun je vervolgens kolommen plaatsen van verschillende grootte. Zoals drie kolommen die allemaal 1/3 van de breedte van de pagina zijn. Of twee kolommen, waarbij de eerste 3/4 is en de tweede 1/4.

Contentblok / widget

En in een kolom kun je verschillende contentblokken/widgets plaatsen. Je hebt widgets voor tekst, knoppen, afbeeldingen, producten, blogartikelen etc.

Template

Tot slot heb je templates. Dat zijn vooraf gedesignde secties – met rijen, kolommen en contentblokken – die je met een paar klikken kunt toevoegen.

Hierboven zie je één sectie/rij met twee kolommen. één van 2/3 en één van 1/3 van de pagina. De rij heeft een achtergrondafbeelding. In de linkerkolom zie je twee widgets. De rechterkolom is leeg, omdat we in dit geval een achtergrond hebben ingesteld bij de sectie. Als we geen achtergrondfoto gebruiken kunnen we aan de rechterkant een widget voor een afbeelding toevoegen.

Sectie, kolommen, widgets en templates

Het meeste leer je door te doen, laten we daarom een pagina ontwerpen.

Door op het plusteken te klikken kun je een sectie of een kolom toevoegen. Naast het plusteken heb je teken van een map, waarmee je een template kunt toevoegen.

We starten met een sectie waar een titel wordt gecentreerd.

Klik op het plusteken. Selecteer de eerste optie om een horizontale rij toe te voegen.

Je ziet vervolgens een horizontaal blok – dit is een sectie. De sectie kun je selecteren door op het icoontje met de zes puntjes te klikken in het kleine blauwe tabblad. Via het plusje in het blauwe tabblad kun je een sectie toevoegen en met het kruisje kun je een sectie verwijderen.

Wanneer je een element selecteert zie je aan de linkerkant allerlei opties om het element te bewerken. Die opties bespreken we later.

We gaan nu een titel toevoegen.

Klik op het plusje om terug te gaan naar het widgetmenu. En sleep vervolgens de ‘kop’-widget naar de aangemaakte sectie.

Je ziet dan een blauwe koptekst. We laten dit zo voor dit moment.

Bij site instellingen kun je de kleur, grootte en lettertype van alle teksten en koppen in één keer bepalen. Wij gaan zo eerst bespreken hoe je dit voor individuele widgets kunt instellen en later bespreken we hoe je de site instellingen aanpast, zodat dit in één keer wordt aangepast.

Wij voegen eerst een nieuwe sectie toe door op het plusje te klikken.

De sectie bestaat uit twee kolommen.

We klikken daarna op een plusje. Of op het blokje met negen puntjes linksboven in het menu.

Daarna slepen we in de linkerkolom een kop, een tekstverwerker en een knop. Dit doen we daarna ook voor de rechterkolom.

(Wit)ruimte: margin en padding

Laten we nu nog een belangrijk designelement bespreken: witruimte. Of om het anders te zeggen: margin, border en padding.

Een groot gedeelte van webdesign is het managen van witruimte. De ruimte om elementen een. De hoeveelheid witruimte geeft rust en beïnvloed hoe we elementen beoordelen en bekijken. De weg naar een beter design is vaak betegelt met meer witruimte. Wees vrijgevig.

Er zijn meerdere soorten witruimte

De beste manier om het te visualiseren is om te kijken naar een knop.

  • De ruimte tussen de tekst en de zijkanten van een knop heet de padding. Bij de bovenstaande knop zie je dat het groene gedeelte de padding bevat.
  • Sommige knoppen hebben een rand. Een border. Die rand is soms zwart. Soms een paar pixel breed. En vaak rond. Veel knoppen hebben helemaal geen rand.
  • Margin is de ruimte tussen een element en omringende elementen. En het einde van dit element wordt bepaald door een eventuele padding en border.

Dus padding en margin zijn beide witruimte, maar het functioneert net ietsje anders. Meestal moet je margin gebruiken om extra witruimte toe te geven.

Dimensies

In CSS kun je aangegeven hoeveel witruimte elke dimensie krijgt.

margin: 100px 50px 100px 50px;

Dit gaat met de klok mee en begint bovenaan. Dus 100 px afstand tussen dit element en het bovenstaande element. 50px rechts, 100px onder en 50px links.

Widget bewerken

Laten we de instellingen per element even langslopen.

Wanneer je op de ‘kop’-widget klikt, dan zie je drie kolommen met Inhoud, Stijl en Geavanceerd.

Bij Inhoud kun je de titel aanpassen, een link toevoegen, de grootte bepalen, de header tag invullen en de tekst uitlijnen.

In dit voorbeeld geven wij de titel een naam, passen we afmeting aan naar XL en zetten wij de uitlijning op gecentreeerd.

Bij Stijl veranderen we de tekstkleur naar zwart en passen het lettertype aan bij typografie. We kiezen hier het populaire font Open Sans, zetten de grootte van de tekst op 45px en passen we de dikte van de letters aan.

Bij Geavanceerd kunnen we o.a. de margin en padding aanpassen.

Wij klikken dan eerst rechts bij Marge (Margin) het ‘ketting’-icoon uit. Dit icoon stelt namelijk alle waarden gelijk. Daarna voegen we 50px margin toe aan de boven-en onderkant. Verder voegen we 100px margin toe aan de linker- en rechterkant.

Witruimte managen bij secties: breedte, hoogte en kolommen

Elementor heeft een paar functies die het managen van witruimte makkelijker maakt. Dit zorgt ervoor dat je niet overal individueel margin waarden hoef toe te voegen.

Je kunt de sectie bewerken door met je muis over de sectie te hoveren en op het blauwe icoontje met de zes kleine puntjes te klikken. Bij de eerste kolom, Lay-out, kun je de witruimte beheren.

Bij de eerste optie breedte inhoud kun je breedte van de sectie groter of kleiner maken. Hier kun je ook de breedte instellen op de volledige breedte van de pagina. Gebruik die optie echter zelden, want niemand wil een tekst lezen die even breed is als het hele scherm, helemaal op grote beeldschermen.

Let vooral op de optie hoogte. Hier kun je de hoogte van de hele sectie bepalen en zo in één klap een sectie genoeg witruimte geven boven en onder de pagina.

Bij beide secties hebben we bij het uitklapmenu van Hoogte aangegeven dan we een Min. hoogte willen. En bij beiden hebben we die in dit geval ingesteld op 350px.

Daarna hebben wij bij de onderste sectie, die met de kolommen, de optie Tussenruimte kolommen ingesteld op Breed.

Achtergrondafbeelding toevoegen en instellen

We kunnen bij de eerste sectie op het tweede tabblad Stijl klikken en daar een achtergrondafbeelding toevoegen en aanpassen.

  • Bij Type afbeelding kun je op het kwastje klikken om een afbeelding toe te voegen. Je kunt ook gaan voor een kleur, een video of een verloop.
  • Klik daarna bij Afbeelding op het plusteken en voeg een afbeelding toe.
  • Bij Positie kun je instellen welk punt van de afbeelding in het midden komt.
  • Bij Herhaling kun je aangeven dat de afbeelding niet herhaald mag worden (anders krijg je meerdere van dezelfde afbeeldingen als de afbeelding niet groot of breed genoeg is.
  • Bij Afmeting kun je het format van de afbeelding bepalen. Zo kun je de afbeelding uitrekken om de hele sectie te overdekken.

Globale typografie en kleuren instellingen

Het is tijdrovend om steeds voor elke kop, tekst en knop de individuele stijl aan te passen. Daarom is het verstandig om bij Site Instellingen de stijlen van de tekst, knoppen en soorten headers te bepalen.

Laten we daarom globale kleuren en lettertypen instellen. Dat doe je door eerst linksboven op het hamburgermenu te klikken en daarna op Site Instellingen.

Deze afbeelding heeft een leeg alt-attribuut; de bestandsnaam is Elementor_Site_instellingen.png

Bij Globale kleuren kun je kleuren selecteren die op meerdere plekken terugkomen op de website en die je versneld kunt instellen.

De Primaire kleur is o.a. de kleur van de koppen en titels. Die kleur veranderen we van blauw tot zwart. De kleur verander je met een kleurenkiezer waar je een kleur kunt selecteren op basis van basiskleur, doorzichtigheid en waarde. Verder kun je ook specifieke kleurcodes invullen.

De kleur van de tekst maken wij ook zwart. En de accent kleur – dat is de kleur voor o.a. knoppen – maken we een zachte kleur groen. We klikken daarna linksonder op bewerken.

Bij Globale lettertypen kun je voor verschillende teksttypen verschillende lettertype instellen.

Vaak kies je eerst een Familie, daarna pas je als het nodig is de dikte aan en de afmeting (de grootte van de tekst). In uitzonderingen kun je lettertypen ook een bepaalde stijl geven, zoals alles moet cursief of een hoofdletter zijn.

  • Bij Primair – voor titels en koppen – selecteerde wij bijvoorbeeld Open Sans met een dikte van 600.
  • Bij het lettertype voor Tekst kozen we voor Roboto met een afmeting van 18px.
  • En voor Accent – wat voor o.a. knoppen is – kozen we ook Roboto.

Minimale grootte