WordPress & Elementor kennisbank

Website mobielvriendelijk maken met Elementor

Inhoud van dit artikel:

Inmiddels is het algemeen bekend dat het belangrijk is om je website mobielvriendelijk te maken. Wanneer je werkt met Elementor, maak je je je website mobielvriendelijk in een handomdraai. Je kunt bijna alles aanpassen voor mobiele weergave. Ook kun je er bijvoorbeeld voor kiezen om bepaalde blokken of widgets niet te tonen op mobiel. Super handig! In dit artikel nemen we de belangrijkste mogelijkheden om je website mobiel vriendelijk te maken met je door.

Mobiele optimalisatie laatste stap

Om te beginnen is het optimaliseren van je pagina voor mobiel het laatste wat je doet. Pas als je tevreden bent met je desktop versie, ga je verder met de mobiele optimalisatie. Dit voorkomt dat je straks dingen twee keer moet doen als je bijvoorbeeld toch nieuwe blokken plaatst of wijzigt.

De paginaweergave aanpassen

Binnen Elementor kun je de paginaweergave zetten op Desktop, tablet of mobiel. Dit doe je door onderin op het desktop icoontje te klikken. Je kunt de website standaard optimaliseren voor twee breakpoints: mobiel en tablet. Maar het is ook mogelijk om je website te optimaliseren voor meerdere breakpoints.

Vervolgens zie je bovenin je scherm een nieuwe balk verschijnen, waarmee je kunt schakelen tussen de verschillende apparaten:

website mobiel vriendelijk maken elementor mobiele modus

Starten met je website mobielvriendelijk maken

Het meest makkelijke is om te beginnen met het aanpassen van de sectie, dan de kolom en vervolgens de widgets binnen de kolom. Je hoeft niet bang te zijn dat je per ongeluk iets aanpast voor de desktop versie. Je kunt altijd goed zien voor welke pagina weergave je aanpassingen doet, doordat het mobiele icoontje boven de aanpassingen gekleurd is.

Sectie aanpassen voor mobiel:

Wat je allemaal kunt aanpassen om je website mobielvriendelijk te maken:

  • Hoogte van de sectie (onder de tab ‘lay-out’)
  • Achtergrond (onder de tab ‘Stijl’)
  • Margins en paddings
  • Randen (onder de tab ‘Geavanceerd’)
  • Zichtbaarheid (onder de tab ‘Geavanceerd’)
  • Volgorde van kolommen omdraaien binnen de sectie

Kolommen aanpassen voor mobiel

  • Breedte van de kolom (in %) ten opzichte van de andere kolommen in de sectie
  • Achtergrond (hetzelfde als bij sectie)
  • Randen (hetzelfde als bij sectie)
  • Paddings en margins  (hetzelfde als bij sectie)

Widgets aanpassen voor mobiel

Afhankelijk van welke widget je wilt aanpassen heb je hier verschillende mogelijkheden voor. Een paar voorbeelden:

  • Typografie (grootte, diktes, lijnhoogte, letterafstand)
  • Margins en paddings  (hetzelfde als bij sectie)
  • Uitlijning

  • Zichtbaarheid (hetzelfde als bij sectie)
  • Afbeeldingsgrootte

Je website mobielvriendelijk maken kan dus met Elementor op heel veel manieren. Het is hierbij een beetje afhankelijk van hoe je pagina’s zijn opgemaakt.

Lees ook hoe je je header mobielvriendelijk kunt instellen met Elementor

Sanne IJspeerd

Sanne IJspeerd

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

Ook bloggen op
SIJ Web?
Vergroot je zichtbaarheid en meld je aan als partner!

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

Extra breakpoints Elementor instellen in 2 stappen

Elementor site instellingen: stijlen zonder thema

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

5 reacties

  1. Het responsive maken van de website ziet er eenvoudig uit.
    Helaas sta ik voor een raadsel omdat de homepagina helemaal responsive goed werkt en de pagina 2 (is een copy van de homepagina) gaat de boel helemaal door elkaar. Tekst en afbeelding lopen door- en over elkaar heen.
    Alles uit zitten testen en vergeleken. Helaas niet het gewenste resultaat. Ook na lezen van al uw artikelen blijft dit een raadsel waarom de homepagina wel en de andere pagina niet responsive werkt.
    Kan de oorzaak zitten doordat ik de gratis versie van Elemontor gebruik?
    Mw. B. Ploegstra

    1. Dit zou niets te maken moeten hebben met dat je niet de pro versie van Elementor gebruikt. Wat je kunt doen:
      – Van thema wisselen om te kijken of dat iets oplost
      – De stijlen van de secties / kolommen en widgets herstellen. Als dat werkt, dan weet je dat er ergens de marges of paddings niet goed zijn ingesteld voor mobiel.

      Als dat ook niet werkt, zou ik er ook wat dieper in moeten duiken..

  2. Dank, dank, het lag inderdaad aan de stijlen. Met namen de margin was bewerkt voor de desktop.
    Als de mobiel instelling toch worden aangepast blijven de instelling van de desk top dan gewoon bestaan? Voorbeeld: een rij heeft een top margin van 80px desktop, maar deze veroorzaakt in mobiel setting tekst over elkaar. Bij margin mobiel standaard te zetten geeft dat geen probleem bij desktop?

    1. Ja klopt. Als je de marges of paddings aanpast in de mobiele modus, dan blijven ze voor desktop gewoon staan. Eigenlijk moet je altijd alle secties / kolommen / widgets op mobiel even nalopen. Daar zit wel even wat werk in, maar je kunt een hoop optimaliseren voor mobiel.

  3. Kan het ook zijn dat er ergens een instelling aan staat waardoor de aanpassingen in de mobiele versie automatisch worden doorgevoerd in de desktop versie? Ik lees namelijk overal dat deze aanpassingen los van elkaar zijn maar bij mij verandert mijn versie van mijn telefoon als ik iets aanpas op mijn computer, en dus ook andersom. Hoe los ik dit op?

Mis geen updates

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

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