De meerderheid van uw bezoekers komt van de telefoon. Toch wordt er bijna altijd op het grote scherm gebouwd — en wordt de kleine weergave, als het al gebeurt, pas helemaal aan het eind gecontroleerd. Precies daaruit ontstaan de problemen die ik in trainingen het vaakst repareer.
De ene tip die alles verandert
Bouw de pagina af, en controleer dan elk gedeelte meteen mobiel voordat u naar het volgende gaat. Niet aan het eind alles in één keer.
Het verschil is aanzienlijk: als u achteraf twintig gedeelten tegelijk corrigeert, verliest u het overzicht welke wijziging waar heeft gewerkt. Gedeelte voor gedeelte is het telkens een kleinigheid.
De weergave wisselt u in de editor linksonder via het apparaatsymbool.
Hoe de apparaatweergaven samenhangen
Het principe waarop de meesten in het begin stranden: Elementor erft van groot naar klein.
Wat u in de desktopweergave instelt, geldt automatisch ook voor tablet en telefoon — zolang u daar niets afwijkends instelt. Zodra u in de telefoonweergave een eigen waarde invult, ligt die waarde voor de telefoon vast en volgt hij de desktop niet meer.
Daaruit volgen twee praktische regels:
Wijzig inhoud altijd in de desktopweergave. Als u een tekst in de telefoonweergave bewerkt, verandert die weliswaar overal — maar u verliest gemakkelijk het overzicht welke instelling waar hangt.
Zet mobiele waarden alleen waar het nodig is. Elke overschreven waarde is een plek die u bij toekomstige wijzigingen extra moet onderhouden.
De vijf meest voorkomende fouten
Vaste pixelbreedtes. Een container van 1200 pixel breed past op geen enkel telefoonscherm en veroorzaakt horizontaal scrollen. Gebruik procentuele waarden of een maximale breedte in plaats van een vaste.
Marges die alleen voor desktop bedoeld zijn. 120 pixel binnenmarge boven en onder ziet er op het grote scherm royaal uit. Op de telefoon betekent het dat de bezoeker langs lege vlakken scrolt. Zet mobiel duidelijk kleinere waarden — meestal de helft of minder.
Lettergroottes zonder mobiele aanpassing. Een kop van 64 pixel loopt op de telefoon over vijf regels. Voor koppen loont een eigen, kleinere waarde bijna altijd.
Te kleine klikvlakken. Knoppen en menupunten hebben een minimale afmeting nodig om met de duim betrouwbaar geraakt te worden — ongeveer 44 bij 44 pixel. Twee links direct onder elkaar met weinig tussenruimte zijn op de telefoon een kwelling.
Verkeerde volgorde. Op de desktop staat de afbeelding links, de tekst rechts. Op de telefoon stapelen ze zich — en opeens komt de afbeelding vóór de kop. Met flexbox-containers wijzigt u de volgorde onder Geavanceerd per weergave, zonder de opbouw te dupliceren. Waarom containers hier superieur zijn, leest u in Containers in plaats van secties.
Elementen mobiel verbergen — met beleid
Onder Geavanceerd → Responsief kunt u elementen per apparaat verbergen. Dat is nuttig voor decoratieve afbeeldingen die op de telefoon alleen ruimte kosten.
Twee beperkingen: verborgen elementen worden toch geladen — u bespaart ruimte, maar geen laadtijd. En verberg nooit inhoud die nodig is voor het begrip. Een mobiele versie waarin wezenlijke informatie ontbreekt, is geen optimalisatie.
Eigen breakpoints
Standaard werkt Elementor met desktop, tablet en telefoon. Onder Website-instellingen → Responsief laten zich extra drempels activeren, bijvoorbeeld voor grote schermen of kleine telefoons.
Mijn advies: houd het bij de drie standaardweergaven zolang u geen concreet probleem hebt. Elke extra breakpoint betekent nog een weergave die u bij elke wijziging moet controleren — en die extra nauwkeurigheid merkt in de praktijk niemand.
Controleren: niet alleen in de editor
De telefoonweergave in de editor is een simulatie. Die toont de breedte correct, maar niet alles: aanraakgedrag, werkelijke letterweergave, laadgedrag bij een slechte verbinding.
Bekijk de pagina minstens één keer op een echt apparaat voordat hij live gaat. En controleer vooral twee dingen: laat de pagina zich horizontaal verschuiven? Dan is er ergens een te breed element. En werkt het menu — klapt het open, laat het zich sluiten?
Wat de laadtijd betreft
Mobiel is de verbinding vaak slechter en het apparaat langzamer. Precies daar worden ook de Core Web Vitals gemeten die in de zoekbeoordeling meewegen. Als u ergens laadtijd wilt besparen, dan mobiel: Elementor en Core Web Vitals.
Elementor Pro: De responsieve instellingen zijn er in beide versies. Pro breidt ze uit naar het koptekstgedeelte, de footer en pop-ups — juist bij het menu op de telefoon is dat het merkbare verschil. Bekijk Elementor Pro
Als u uw site een keer samen mobiel wilt doorlopen in plaats van losse symptomen te bestrijden, is dat een typisch onderdeel van mijn Elementor-training.
Tags