WordPress & Elementor kennisbank

Extra breakpoints Elementor instellen in 2 stappen

Inhoud van dit artikel:

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:

  1. Ga in de back-end naar Elementor –> Instellingen
  2. Ga naar het tabje ‘Experimenten’
  3. Zet de breakpoints op ‘Actief’
Extra breakpoints elementor activeren

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’

Extra breakpoints elementor site instellingen
Scroll vervolgens naar beneden naar het tabje ‘Breekpunten’ en klik op het + icoontje om extra breakpoints toe te voegen. Je hebt hierbij de keuze uit: Mobiel Extra, Tablet Extra, Laptop en Breedbeeld.
Extra breakpoints elementor instellen

Het ziet er dan als volgt uit:

Extra breakpoints ingesteld elementor
Sla de instellingen vervolgens op en keer terug naar de pagina die je wilt optimaliseren voor mobiel. Als je hier kiest voor de mobiele modus, zie je dat de breakpoints bovenaan zijn toegevoegd:
Je kunt nu de pagina optimaliseren voor alle breakpoints.

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!

Sanne IJspeerd

Sanne IJspeerd

Eigenaar SIJ Web | WordPress & Elementor Specialist
Website Strateeg | Marketing Manager in de IT

Zoek je een Elementor Expert?
Ik koppel je aan de juiste expert voor jouw website.

Populaire plugins

4/5
5/5
4.5/5
Meer doen met Elementor?
Schrijf je in voor de nieuwsbrief
No worries. Ik ga je niet spammen. Je ontvangt max. 2 keer per maand een nieuwsbrief.

Ook interessant voor jou

Elementor site instellingen: stijlen zonder thema

Elementor update 2.10: multi-step formulieren en integratie met Lottie!

Elementor Pro update 2.9: full site editing en dynamische kleuren

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Mis geen updates

Blijf op de hoogte van de laatste
Elementor Trends & Ontwikkelingen!

No worries, je ontvangt max. 2 keer per maand een mailing.