Hoe voorkom ik dat mijn website stuk gaat op mobiel?

Onderaan de Elementor editor vind je iconen voor desktop, tablet en mobiel. Klik erop om te schakelen. Instellingen die je in een specifieke modus aanpast, gelden alleen voor dat apparaat.

Tekst die op desktop mooi is, kan op mobiel te groot zijn. Kolommen die naast elkaar staan, stapelen op mobiel. Check dit altijd.

Gebruik percentages in plaats van vaste pixels voor breedtes. Verberg elementen die op mobiel niet nodig zijn via het oog-icoon in responsive modus.

Test elke pagina op minimaal drie schermformaten: desktop, tablet en telefoon. Een tekstblok dat op je laptop prima past, kan op een telefoon over de rand van het scherm lopen. Bekijk je website het liefst op een echt mobiel toestel, want de responsive preview in Elementor geeft niet altijd het volledige beeld.

Standaard werkt Elementor met breakpoints voor mobiel, tablet en desktop, maar met Elementor Pro voeg je extra breakpoints toe, bijvoorbeeld voor grote schermen of een smalle mobiele telefoon. Ga naar Site Settings > Layout > Breakpoints om dit aan te passen. Voeg alleen een extra breakpoint toe als je merkt dat de layout op een specifiek formaat echt anders moet ogen, anders maak je het onderhoud onnodig ingewikkeld.

Tekst die op desktop prettig leest, kan op mobiel te groot of juist te klein overkomen. Stel de lettergrootte daarom apart in voor mobiel via het apparaat-icoon naast het lettergrootte-veld. Een kop van veertig pixels op desktop werkt op een telefoon vaak beter op zo'n vierentwintig tot achtentwintig pixels, anders neemt de kop het hele scherm in beslag.

Heb je drie kolommen met diensten naast elkaar op desktop, dan stapelen die op mobiel automatisch onder elkaar als je met percentages werkt. Test dit altijd zelf: klik in de responsive modus op het telefoon-icoon en controleer of de tekst goed leesbaar blijft en of afbeeldingen niet worden uitgerekt. Pas zo nodig de volgorde van de kolommen aan, zodat de belangrijkste informatie op mobiel bovenaan staat.