Les 3: Mobiel responsive maken

Meer dan de helft van je bezoekers komt via mobiel. Een pagina die er geweldig uitziet op desktop maar onleesbaar is op telefoon, verliest die bezoekers. Elementor heeft ingebouwde responsieve instellingen die je per apparaat kunt aanpassen.

Responsive modus schakelen

Klik onderaan het linkerpaneel op het responsieve icoon (het scherm-icoon). Je kunt nu schakelen tussen Desktop, Tablet en Mobiel. Elementor toont een preview van hoe de pagina eruitziet op dat apparaat.

Breakpoints instellen

Ga naar Elementor → Instellingen → Stijl → Responsieve breakpoints. De standaard breakpoints zijn:

• Mobiel: onder 768px
• Tablet: 768px – 1024px
• Desktop: boven 1024px

In Elementor Pro kun je extra breakpoints toevoegen (bijv. groot scherm, widescreen). In de gratis versie werk je met de drie standaard apparaten.

Elementen verbergen per apparaat

Open een widget, ga naar “Geavanceerd” en scroll naar “Responsief”. Hier kun je instellen op welke apparaten het element zichtbaar of verborgen is. Handig voor:

• Een grote desktopafbeelding verbergen op mobiel en een kleinere variant tonen
• Een decoratief element weglaten op mobiel om ruimte te sparen
• Een andere navigatietekst tonen op mobiel vs. desktop

Padding en lettergrootte per apparaat

Bijna alle maatinstellingen in Elementor hebben een apparaat-icoon naast het invoerveld. Klik erop om over te schakelen naar tablet of mobiel en stel een andere waarde in. Voorbeeld: desktop padding 80px top/bottom, mobiel 40px top/bottom.

Let ook op lettergroottes. Een koptekst van 60px op desktop is prima, maar 60px op een telefoonscherm is veel te groot. Zet hem voor mobiel terug naar 32-36px.

Kolommen stapelen op mobiel

Bij een twee-kolomsen sectie stapelt Elementor de kolommen automatisch op mobiel — linkerkolom bovenaan, rechterkolom eronder. Wil je de volgorde omdraaien? Ga naar de kolominstelling → “Geavanceerd” → “Volgorde omdraaien (mobiel)”.

Opdracht

Open de pagina die je in les 2 hebt gebouwd. Schakel naar de mobiele preview en controleer: zijn alle teksten leesbaar? Pas de lettergroottes en padding aan voor mobiel. Verberg een eventueel decoratief element dat op mobiel overbodig is.