Als je met Elementor werkt, ken je ze wel. Je klikt op de padding of marge van een element, of opent de hoogte- en breedte-instellingen van een container, en daar staat het rijtje: PX, %, VW, VH, EM, REM.
Binnen Elementor krijg je hier precies nul uitleg over. Als je niet dagelijks met CSS bezig bent, voelt dit al snel als: "Kies maar iets en hoop er het beste van." Garantie voor succes, toch? 😅
Hoe berekent Elementor afstanden en formaten eigenlijk?
Sommige eenheden zijn vaste maten, andere bewegen soepel mee met een container, het scherm of de tekstgrootte. Als je snapt waar Elementor naar kijkt (het referentiepunt), weet je voortaan altijd wat je moet kiezen. Als je een waarde invult, kan Elementor die baseren op:
- Een vaste maat (onveranderlijk)
- De container waar je element in zit
- Het scherm van de bezoeker (de viewport)
- De lettergrootte (typografie)
Dit referentiepunt bepaalt of je ontwerp netjes meebeweegt of juist raar gaat doen op mobiel of tablet. Let's break it down!
Pixels (PX) = Altijd dezelfde, vaste maat
Pixels zijn altijd en overal hetzelfde. Zet jij iets op 100px, dan is het altijd en overal 100px. Op desktop, tablet en mobiel.
Dat is wel duidelijk, maar niet altijd handig. Want hoe prop je een container van 1440px breed op een mobiel scherm?
Wanneer kies je voor PX?
Vooral voor kleine, vaste details die overal gelijk moeten blijven. Denk aan randen (borders), schaduwen, icoongroottes en de minimale padding van een knop.
Wanneer kies je NIET voor PX?
Grote lay-outsecties of enorme tussenruimtes (spacing) die op verschillende schermen flexibel moeten meeschalen.
% (procent): schaalt mee op basis van zijn omgeving
Procenten zijn relatief en daardoor vaak gebruikt voor responsive layouts. Zet je een container op een breedte in %, dan schaalt die automatisch mee met de beschikbare ruimte. En die beschikbare ruimte is op een telefoon heel anders dan een desktop.
Maar bij padding en marges moet je opletten als je werkt met %.
Elementor berekent de procenten in principe vanaf de container waar je element in staat. Geef je een desktop container 10% padding, bedenk dan wat er met diezelfde hoeveelheid padding gebeurt op een telefoon.
Daardoor pakt dezelfde 10% padding veel groter uit.
VW & VH uitgelegd
VW en VH zijn gekoppeld aan het scherm van je bezoeker. Ze rekenen met de zogeheten “viewport”: het zichtbare deel van het scherm. Daardoor schalen ze automatisch mee met het apparaat waarop iemand je site bekijkt.
VW = Viewport width = de breedte van het scherm
1vw is 1% van de schermbreedte. Dit houdt geen rekening met jouw containers of scherminstellingen. 1 vw houdt alleen rekening met de volledige schermmaat van de bezoeker.
Dus, als jij een paragraaf 50vw de ruimte geeft, is dit altijd 50% van het scherm.
Op een laptop (1440px) is dat dus 720 px. Op een mobiele telefoon (390px) is dat dus 195px.
Het verschil tussen VW en % in Elementor
Deze wil je graag goed begrijpen. Stel, je hebt een hoofdcontainer met daarin twee nested containers. Zet je deze nested containers op 50%, dan wordt de breedte 50% ten opzichte van de hoofdcontainer.
Maar zet je deze containers op 50vw, dan worden ze 50% ten opzichte van het scherm. Deze twee containers hebben dus samen een breedte van 100% ten opzichte van de schermmaat. Is de hoofdcontainer 100%, is er niet zoveel aan de hand.
Let op. Als de hoofdcontainer uberhaupt maar 80% is ten opzichte van de beschikbare ruimte, zijn de nested containers samen breder dan de hoofdcontainer.
VH = Viewport Height = de hoogte van je scherm
Hetzelfde idee, maar dan met de hoogte. 100vh is altijd de volledige schermhoogte. 100vh wordt vaak gebruikt voor schermvullende hero-secties, voor een verpletterende eerste indruk.
Bij gebruik van deze toepassing op telefoons heb te maken met een handicap waar je vanuit Elementor weinig aan kunt doen. Soms telt de adresbalk wel mee in de hoogteberekening, en soms ook niet. Daardoor kan 100vh te hoog uitvallen en heb je alsnog te maken met een klein stukje scroll.
EM en REM zegt iets over de lettergrootte
EM en REM zijn relatieve eenheden die niet kijken naar pixels of schermen, maar naar de lettergrootte (typografie).
REM (Root EM) = Kijkt naar de basis
REM staat voor Root EM en kijkt naar de basislettergrootte van je website (de “root”). Daardoor is rem voorspelbaar en consistent: 1rem betekent overal hetzelfde op je site. Als je ooit je basislettergrootte aanpast, schaalt rem netjes mee. In Elementor is rem vooral handig als je bewust consistentie wilt in typografie en spacing zonder dat je per onderdeel hoeft te puzzelen.
EM = Kijkt naar de elementen op hem heen
EM kijkt niet naar de basis van je website, maar naar de lettergrootte van het element (of de parent-container) waar het in staat. Heeft je menubalk een lettergrootte van 20px? Dan is 1em daar gelijk aan 20px. Heeft je footer een lettergrootte van 12px? Dan is 1em daar 12px.
Dit kan handig zijn als je wilt dat de tussenruimte van een knop perfect meeschaalt als je de tekst van die specifieke knop groter maakt. Het nadeel? In geneste onderdelen kan dit zich opstapelen (compounden), waardoor de maten al snel onvoorspelbaar en veel te groot worden.
Samengevat
Laat je niet gek maken door de overvloed aan opties; je hebt al die verschillende eenheden lang niet allemaal nodig om een goede website te bouwen.
PX & %: Dit is je vaste basis. Gebruik pixels (PX) voor harde, onveranderlijke formaten en procenten (%) om onderdelen soepel te laten meeschalen.
VW & VH: Bewaar deze specifieke eenheden puur voor bijzondere uitschieters, zoals gigantische titels of grote, beeldvullende intro-secties.
EM & REM: Werk je in Elementor? Dan kun je deze twee gerust links laten liggen en compleet negeren. Je kunt je font-maten perfect inrichten met Global Elements.
Hou het simpel, dat bouwt een stuk fijner!
