Als u een Elementor-site bouwt en de tekst „niet echt ademt“ of koppen te krap op de alinea's zitten, ligt het bijna altijd aan het samenspel van line-height en margin. Beide hangen samen, beide worden in de Elementor-interface apart ingesteld — en beide worden in de praktijk vaak verward. In dit artikel loop ik de logica door, laat ik concrete waarden zien die zich in meer dan 50 projecten hebben bewezen, en ga ik in op de typische valkuilen (vooral mobiel). Als u zich in het algemeen dieper in Elementor-design wilt verdiepen, is mijn artikel Top 10 designtips voor Elementor de goede vervolgstap.
Vereiste: Elementor 3.20+ of nieuwer. De meeste tips gelden ook voor Elementor Pro — waar Pro-specifieke functies in het spel komen, wijs ik daarop.
Line-height vs. margin: waar zit het verschil
Twee verwante, maar verschillende begrippen:
Line-height is de afstand binnen een tekstblok — tussen twee regels van dezelfde alinea. Als uw bodytekst „gedrongen“ oogt, is line-height de knop waaraan u draait.
Margin is de afstand tussen elementen — bijv. tussen een alinea en de volgende kop. Als twee alinea's „tegen elkaar plakken“ of een kop „op de alinea zit“, is margin de hefboom.
Vuistregels die in de praktijk werken:
- Line-height bodytekst: 1.5–1.7 (soms em, soms unit-less — Elementor staat beide toe)
- Line-height koppen: 1.1–1.3 (grote headlines hebben minder lucht nodig)
- Margin tussen alinea's: 1em–1.5em (dus ongeveer één regelhoogte)
- Margin tussen kop en aansluitende tekst: 0.5em (krap, hoort bij elkaar)
- Margin tussen alinea en daaropvolgende nieuwe kop: 2em (afstand, nieuw onderwerp)
Deze waarden zijn geen dogma — pas ze aan uw lettertypekeuze aan. Een smal schreeflettertype (bijv. Lora) heeft meer line-height nodig, een breed schreefloos lettertype (bijv. Inter, Source Sans) minder.
Globale typografie: één keer instellen, overal gebruiken
De grootste fout die ik in Elementor-projecten zie: line-height wordt per widget ingesteld, in plaats van globaal. Het resultaat: 47 verschillende line-heights verspreid over de site, geen consistentie, elke wijziging wordt een Sisyfusarbeid.
In plaats daarvan: gebruik globale typografie.
In Elementor → hamburgermenu linksboven → „Site Settings“ → „Typography“. Daar definieert u:
- Primary Heading (H1)
- Secondary Heading (H2)
- Text (body)
- Accent Text (bijv. leadteksten)
Per stijl legt u Font Family, Weight, Size, line-height en Letter-Spacing vast. Die zijn daarna in elke widget met één klik toe te passen — en als u later de line-height van 1.6 naar 1.55 wijzigt, verandert dat overal op de site, niet alleen op één plek.
Aanbevolen standaardwaarden:
| Stijl | Font Size (Desktop) | Line-Height | Margin-Bottom |
|---|---|---|---|
| Primary Heading (H1) | 48 px | 1.15 | 0.5em |
| Secondary Heading (H2) | 32 px | 1.2 | 0.6em |
| Tertiary Heading (H3) | 24 px | 1.3 | 0.5em |
| Body Text | 17 px | 1.6 | 1.2em |
| Accent / Lead | 20 px | 1.5 | 1.5em |
Deze waarden zijn een startpunt voor moderne tech-/servicesites. Bij magazines, blogs, langere leesteksten zou ik de body-line-height op 1.7 of zelfs 1.8 zetten — leesvloed gaat boven dichtheid.
Pro-sectie: regelafstand voor headlines vs. body
Headlines verdragen weinig line-height, omdat ze tussen de regels geen leesvloed-karakter hebben — ze zijn kort, krachtig, moeten bij elkaar staan. Als u een H1 over twee regels met line-height 1.6 instelt, ziet het eruit alsof iemand twee aparte zinnen heeft neergeschreven.
Bodytekst daarentegen is leestekst. Hier hebben de regels ademruimte nodig, zodat het oog naar de volgende regel kan springen zonder de aansluiting te verliezen. Vuistregel: hoe langer uw regellengte, hoe meer line-height. Een 800 pixel brede tekstkolom met 65 tekens per regel verdraagt 1.6 probleemloos; een smalle kolom van 400 pixel met 35 tekens per regel kan beter 1.4 hebben.
Praktijkhack: in de Elementor-widget-instellingen ziet u onder „Style“ → „Typography“ een „Line Height“-slider. Zet die op „Unit-less“ (het kleine dropdown rechts van de slider). Unit-less line-height schaalt mee met de lettergrootte — als u later de font-size wijzigt, past de regelafstand zich automatisch aan. Bij „Em“- of „px“-waarden gaat dat mis.
Spacing-widget vs. CSS margin: wanneer wat?
Elementor biedt drie manieren om verticale afstand te creëren:
- Margin op het element (Style-Tab → Advanced → Margin)
- Padding op de container (Layout-Tab → Padding)
- Spacer-widget (een eigen widget dat u tussen elementen invoegt)
Welke manier is juist? Hangt van de context af.
Margin gebruik ik voor:
- Standaardafstanden tussen tekstelementen
- Globale consistentie (in globale typografie gedefinieerd)
Padding gebruik ik voor:
- Afstanden tussen secties (boven/onder padding op de container)
- Wanneer de achtergrond/background een rol speelt (padding schuift de inhoud, niet het gekleurde gebied)
Het spacer-widget gebruik ik voor:
- Eenmalige, zeer specifieke afstanden die niet in de standaardlogica passen
- Snelle tests in de designmodus
Wat ik vermijd:
- Meerdere lege
-tags in de teksteditor om afstand te creëren. Dat is een HTML-hack uit 2007 — niet-semantisch, slecht voor screenreaders, gedraagt zich bij responsive anders dan men verwacht. - Pixelnauwkeurige spacers op elke sectie. Een spacer van 73 px ziet er in de editor exact uit, maar is een onderhoudsnachtmerrie.
Mobiele regelafstand: wat er op tablet/telefoon misgaat
De meest voorkomende mobiele spacing-valkuil: op de desktop heeft u een H1 met fontgrootte 48 px en line-height 1.15. Op de telefoon krimpt de font-size automatisch naar 32 px — maar line-height 1.15 maakt het kopblok daar plotseling te krap, omdat mobiele koppen vaak afbreken.
Oplossing: Elementor staat responsive waarden per breakpoint toe. Klik op het apparaaticoon naast elke waarde en stel in:
- Desktop H1: line-height 1.15
- Tablet H1: line-height 1.2
- Mobile H1: line-height 1.25
Net zo bij bodytekst:
- Desktop body: line-height 1.6
- Mobile body: line-height 1.55 (kortere regels hebben minder nodig)
Op mobiel zou de margin kleiner moeten zijn dan op desktop. Wie 2em tussen H2 en alinea op desktop heeft, zou mobiel naar 1.2em moeten teruggaan — anders ziet de site op een 5-inch-display eruit alsof iemand elke sectie met drie lege regels heeft gescheiden.
Bonustip voor Pro-gebruikers: met Elementor Pro kunt u onder „Site Settings“ → „Layout“ eigen breakpoints definiëren. Standaard zijn Mobile (≤767 px), Tablet (768–1024 px), Desktop. Als uw doelgroep veel iPad Pro's heeft, loont een extra breakpoint bij 1200 px.
Performance-noot: geen inline-CSS-orgieën
Elke spacing-waarde die u in Elementor per widget instelt, belandt als gegenereerde CSS-klasse in de HTML — en kan zich opstapelen. Een pagina met 200 individueel gestylede widgets heeft 200 extra CSS-regels in de head. Dat is niet crimineel, maar onnodig.
Best practices voor schone performance:
- Globale typografie definiëren (zie boven) in plaats van per widget te stylen.
- Vooraf gebouwde sectie-templates hergebruiken in plaats van elke sectie opnieuw te stylen.
- Custom CSS Classes (Elementor Pro) definiëren — bijv. een klasse
.spacing-mediumdie 2em margin-bottom instelt, en die dan toepassen waar nodig. - Ongebruikte widgets uitschakelen. Elementor laadt CSS voor elke geactiveerde widget — ook als u hem niet gebruikt. Onder „Settings“ → „Features“ kunt u opruimen.
Voor diepere performance-tips voor Elementor kijkt u in mijn artikel Elementor performance-optimalisatie. En als u helemaal aan het begin staat en Elementor gestructureerd wilt leren, is Elementor beginnerstutorial verplichte kost.
Regeleinde forceren — zonder nieuwe alinea
Nauw verwant aan de regelafstand is het regeleinde. Soms wilt u een regel afbreken zonder een hele nieuwe alinea (met extra afstand) te beginnen — bijvoorbeeld bij een adres, een slogan of een meerregelige vermelding. In de Elementor-teksteditor stuurt u dat zo aan:
- Shift + Enter maakt een eenvoudig regeleinde (
<br>) — dezelfde regelhoogte, geen extra alinea-afstand. - Een gewone Enter maakt een nieuwe alinea (
<p>) met de grotere alinea-afstand, die u hierboven via margin aanstuurt.
Juist dit onderscheid is de meest voorkomende struikelblok: wie overal Enter indrukt, krijgt te veel afstand en verbaast zich over verscheurde tekstblokken. Met Shift+Enter houdt u de controle — en gecombineerd met de juiste regelhoogte van boven oogt de tekst eindelijk rustig.
Designcheck of training gewenst?
Als uw Elementor-site qua spacing „niet helemaal klopt“, kijk ik 60 minuten met u mee en leg ik de meest voorkomende hiaten bloot — meestal volstaat een uur om de typografie netjes in te stellen en consistentie te creëren. Schrijf me kort en ik plan met u een 1:1-coaching of een kleine audit.
→ Coaching aanvragen: Neem contact op
Tags