Dat is een website mobielvriendelijk moet zijn is niet langer een wens, maar een vereiste. Als je geen gekke dingen doet met Elementor, gaat er eigenlijk al een hele hoop goed op mobiele apparaten. Maar voor de pietjes precies heeft Elementor een interessante functie, namelijk het instellen van extra breakpoints!
Wat zijn breakpoints?
Het breakpoint, is het ‘breekpunt’ waarop je website overgaat naar een andere lay-out. Zo heeft Elementor standaard twee breakpoints: tablet (staand) en mobiel. Door te werken met breakpoints, kun je de lay-out van die pagina dus specifiek aanpassen voor dat apparaat, kolommen omdraaien of elementen zelfs compleet verbergen. Zo kun je je website eenvoudig optimaliseren voor mobiel.
Waarom extra breakpoints?
Het heeft even geduurd voordat Elementor de extra breakpoints introduceerde, maar inmiddels zet ik ze bij iedere website aan. Twee breakpoints vind ik namelijk te weinig. Als je optimaliseert voor tablet staand, betekent dit dat je op tablet liggend automatisch de desktop versie te zien krijgt. En dat ziet er niet altijd heel mooi uit. Daarnaast zijn er ook veel verschillende beeldscherm groottes voor smartphones. Eén breakpoint is dan onvoldoende.
Stap 1: Extra breakpoints Elementor activeren
Om extra breakpoints in Elementor te gebruiken, moet je deze eerst activeren:
- Ga in de back-end naar Elementor –> Instellingen
- Ga naar het tabje ‘Experimenten’
- Zet de breakpoints op ‘Actief’
De reden dat de extra breakpoints nog niet standaard zijn ingesteld is dat dit in de eerste plaats problemen kan opleveren op bestaande sites. Met name als je website al is geoptimaliseerd voor twee breakpoints en je bijvoorbeeld ervoor hebt gekozen om bepaalde elementen te verbergen voor mobiel of tablet. Zet je de extra breakpoints aan, dan zijn deze opeens dubbel zichtbaar. Niet zo handig dus.
Daarnaast heb ik in het verleden wel eens problemen gehad met de extra breakpoints in combinatie met verschillende add-ons. Deze lijken, in ieder geval bij Crocoblock, verleden tijd.
Stap 2: Extra breakpoints toevoegen
Als je de extra breakpoints hebt geactiveerd ga je vervolgens naar de site-instellingen.
Ga naar het tabje ‘Layout’
Het ziet er dan als volgt uit:
Voorkom extra werk met extra breakpoints Elementor
Als je achteraf je website gaat optimaliseren voor meerdere breakpoints, ben je enorm veel tijd kwijt. Zorg er daarom voor dat je eerst alle (content)blokken die je op je site wilt gebruiken klaar hebt staan en optimaliseert voor alle breakpoints. Als je deze vervolgens kopieert naar andere pagina’s hoef je ze niet opnieuw te optimaliseren. Helaas bestaat er geen snellere manier dan alles handmatig na te lopen.
Veel succes!
