MENU

Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

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.

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

Meer handige tips ontvangen?

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.
Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.

4 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

  2. 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..

  3. 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?

  4. 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.

Geef een reactie

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

Tips ontvangen?

Schrijf je in voor updates!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.