Je bent een element aan het opmaken in Elementor. Container, widget, knop, het maakt niet uit. Je klikt op padding of marge, en daar staan ze: PX, EM, REM, %, VW, VH. Zes opties. Geen uitleg. Welke kies je?
De meeste tutorials leggen het uit met CSS-termen en technisch jargon. Dat helpt niet als je gewoon wilt weten wat er op je scherm gebeurt. Daarom leggen we het hier visueel uit, met echte schermvoorbeelden op laptop en telefoon.
Na dit artikel weet je precies welke eenheid je wanneer kiest, en waarom.
PX (Pixels): vast, altijd hetzelfde
Een pixel is het kleinste puntje op je scherm. Je hele beeldscherm is opgebouwd uit miljoenen van die puntjes. Als je iets op 20px zet, zeg je eigenlijk: maak dit 20 puntjes breed. Dat blijft altijd 20 puntjes, op een laptop, op een tablet, op een telefoon. Er verandert niks.
Dat klinkt fijn (duidelijk!), maar het heeft een keerzijde. Op een groot scherm ziet 20px padding er netjes uit. Op een telefoon kan diezelfde 20px ruimte opeens te breed voelen, omdat het scherm zelf maar 390px breed is.
Wanneer gebruik je PX? Voor dingen die altijd exact hetzelfde moeten zijn: randen, schaduwen, icoongroottes. Niet voor de breedte van je containers of secties.
% (Procenten): schaalt mee met je container
Procenten zijn relatief. Maar relatief ten opzichte van wat? Dat hangt af van waarvoor je ze gebruikt.
De breedte van je container instellen
Als je een container op 90% breedte zet, neemt die 90% van de beschikbare ruimte in. Op een laptop is dat breed, op een telefoon smal. De container schuift automatisch mee.
Dit is de meest gebruikte manier om containers responsive te maken. Geen extra instellingen nodig voor mobiel.
Padding en marges in procenten
Hier wordt het even opletten. Als je 10% padding instelt op een element, dan kijkt Elementor naar de breedte van de parent container. De parent container is de hoofdcontainer waar je elementen in plaatst. In die container kun je weer een kleinere container zetten, en daarin weer widgets. Elementor kijkt bij procenten altijd naar de container waar het element direct in staat, niet naar het element zelf en niet naar het scherm.
Concreet: je hebt een foto van 150px breed in een container van 500px. Je zet 10% padding. Die padding wordt dan 50px (10% van 500), niet 15px (10% van de foto).
[AFBEELDING: 03-Procent-Padding.png]
Alt-tekst: 10% padding in Elementor kijkt naar de container, niet naar het element zelf
Wanneer gebruik je %? Voor containerbreedtes, padding en marges. Ideaal voor responsive design. Je hoeft minder handmatig aan te passen voor mobiel.
VW (Viewport Width): schaalt mee met het scherm
VW staat voor Viewport Width. 1vw = 1% van de breedte van je scherm. Niet van je container, niet van je element, maar van het volledige scherm van je bezoeker.
Stel je een foto in op 50vw. Dan is die foto altijd precies de helft van het scherm. Op een laptop (1440px breed) is dat 720px. Op een telefoon (390px breed) is dat 195px. De foto schaalt automatisch mee, zonder dat je iets apart instelt voor mobiel.
Het verschil met %: stel je hebt een kleinere container op je pagina. Zet je die op 50% breedte, dan wordt hij de helft van de container waar hij in zit. Zet je hem op 50vw, dan wordt hij de helft van je scherm. Dat is een groot verschil. Je scherm is namelijk bijna altijd breder dan die ene container. Dus 50vw levert een breder resultaat op dan 50%, soms zelfs breder dan de container zelf.
Wanneer gebruik je VW? Voor de breedte van containers, afbeeldingen en koppen die altijd in verhouding tot het scherm moeten staan. Handig als je wilt dat iets op elk apparaat dezelfde verhouding tot het scherm heeft. Minder geschikt voor padding en marges, want die worden op grote schermen al snel te veel.
VH (Viewport Height): vult de hoogte van je scherm
VH werkt hetzelfde als VW, maar dan voor de hoogte. 100vh = de volledige hoogte van het scherm van je bezoeker.
De meest voorkomende toepassing: hero-secties. Zet je hero op 100vh, en hij vult het hele beeld. Op laptop, op tablet, op telefoon. Je bezoeker ziet alleen jouw hero, en moet scrollen voor de rest.
Let op met mobiel: op telefoons telt de adresbalk soms mee in de berekening. Daardoor kan 100vh net iets hoger zijn dan het zichtbare scherm, en krijg je een klein stukje extra scroll. Dit is een bekend probleem waar je weinig aan kunt doen vanuit Elementor.
Wanneer gebruik je VH? Voor hero-secties en fullscreen-blokken. 100vh = volledig beeldvullend. 50vh = precies de helft van het scherm.
EM en REM: relatief aan lettergrootte
EM en REM zijn eenheden die gebaseerd zijn op lettergrootte in plaats van pixels of schermgrootte. Je kunt ze gewoon kiezen in de Elementor editor, net als PX en %. Je zult ze in de praktijk minder snel pakken, maar het is goed om te weten wat ze doen.
REM: altijd hetzelfde
REM staat voor Root EM. Het kijkt altijd naar de basislettergrootte van je website (standaard 16px). 1rem = 16px, 1.5rem = 24px. Dat verandert niet, ongeacht waar op je pagina je het gebruikt.
EM: stapelt op per laag
EM kijkt naar het element erboven. Dat klinkt onschuldig, maar het wordt een probleem bij geneste elementen. Als je op drie niveaus diep steeds 1.2em instelt, wordt de tekst op elke laag groter. De eerste laag: normaal. De tweede: iets groter. De derde: nog groter. Dat is zelden wat je wilt.
Wanneer gebruik je REM? Als je consistente spacing wilt die gebaseerd is op de basislettergrootte. In Elementor heb je het zelden nodig.
Wanneer gebruik je EM? Eigenlijk liever niet, tenzij je precies weet wat je doet. De meeste Elementor-gebruikers zijn beter af met % of PX.
Welke eenheid kies je? (keuzehulp)
Twijfel je welke eenheid je moet pakken? Gebruik dit overzicht:
De twee snelste vuistregels:
1. Twijfel je? Begin met PX. Werkt altijd. Je kunt later nog optimaliseren.
2. Wil je dat het responsive is? Pak %. Schuift netjes mee op elk scherm, zonder verrassingen.
Samengevat
Je hoeft niet alle zes de eenheden te gebruiken. De meeste websites komen prima weg met PX voor vaste maten en % voor responsive elementen. VW en VH zijn handig voor specifieke situaties (koppen en hero-secties). EM en REM kun je in Elementor gerust negeren.
Het belangrijkste: kijk altijd even op je telefoon hoe het eruitziet. Daar zie je direct of je de juiste eenheid hebt gekozen.
Krijg je hier nu al hoofdpijn van?
Besteed dan het bouwen van je website lekker uit.
