Hoe de mobiele versie van WordPress-sites vanaf het bureaublad te bekijken

Wilt u een voorbeeld van de mobiele versie van uw WordPress-site bekijken? Als u een voorbeeld van de mobiele lay-out bekijkt, kunt u zien hoe uw website eruitziet op mobiele apparaten.


Hoewel je zeker je live site op je telefoon kunt bekijken, helpt dit niet tijdens de ontwikkelingsfase.

Zelfs wanneer uw site live is, is het vaak gemakkelijker om de mobiele versie op een desktopcomputer te bekijken, zodat u snel wijzigingen kunt aanbrengen en het effect ervan kunt zien.

In dit artikel laten we u twee eenvoudige manieren zien om eenvoudig een voorbeeld van de mobiele lay-out van uw WordPress-site te bekijken zonder over te schakelen naar verschillende apparaten.

Bekijk een voorbeeld van de mobiele lay-out van uw website

Waarom u uw mobiele lay-out moet bekijken

Meer dan 50% van uw websitebezoekers zullen hun mobiele telefoon gebruiken om uw site te bezoeken. Ongeveer 3% gebruikt een tablet.

Dit betekent dat het essentieel is om een ​​site te hebben die er geweldig uitziet op mobiel.

Mobiel is zelfs zo belangrijk dat Google nu een ‘mobile-first’-index gebruikt voor hun website-rankingalgoritme.

Zelfs als u een responsief WordPress-thema gebruikt, moet u nog steeds controleren hoe uw site er op mobiel uitziet. Misschien wilt u zelfs verschillende versies van belangrijke bestemmingspagina’s maken die zijn geoptimaliseerd voor de behoeften van mobiele gebruikers (hierover later meer).

In dit artikel bespreken we twee verschillende methoden om te testen hoe uw site er op mobiel uitziet met desktopbrowsers.

Het is belangrijk om in gedachten te houden dat de meeste mobiele previews niet helemaal perfect zullen zijn omdat er zoveel verschillende formaten en browsers voor mobiele schermen zijn. Uw laatste test moet altijd zijn om uw site op een echt mobiel apparaat te bekijken.

Video-instructies

Abonneer u op WPBeginner

Als je de video niet leuk vindt of meer instructies nodig hebt, lees dan verder.

1. Met behulp van WordPress Theme Customizer

U kunt de WordPress-thema-aanpasser gebruiken om een ​​voorbeeld van de mobiele versie van uw WordPress-site te bekijken.

Log eenvoudig in op uw WordPress-dashboard en ga naar Uiterlijk »Aanpassen scherm.

WordPress-dashboard dat laat zien waar u het uiterlijk kunt vinden - Aanpassen

Dit opent de WordPress-thema-aanpasser. Afhankelijk van het thema dat je gebruikt, zie je hier mogelijk iets andere opties in het linkermenu:

Aanpassing van WordPress-thema (bureaubladweergave)

Klik onder aan het scherm op het mobiele pictogram. U ziet dan een voorbeeld van hoe uw site eruitziet op mobiele apparaten.

Overschakelen naar mobiele weergave in de thema-aanpasser

Notitie: De blauwe bewerkingssymbolen zijn alleen aanwezig in de previewer. Je ziet deze niet op je live site.

Deze methode om een ​​voorbeeld van de mobiele versie te bekijken, is vooral handig wanneer u nog niet klaar bent met het maken van uw blog of wanneer deze zich in de onderhoudsmodus bevindt.

U kunt wijzigingen aanbrengen en controleren hoe ze eruitzien voordat u ze live plaatst.

2. De DevTools-apparaatmodus van Google Chrome gebruiken

De Google Chrome-browser heeft een set ontwikkelaarstools waarmee u verschillende controles op elke website kunt uitvoeren, inclusief een voorbeeld van hoe uw website eruitziet op mobiele apparaten.

Open gewoon de Google Chrome-browser op uw bureaublad en bezoek de pagina die u wilt controleren.

Dit kan een voorbeeld zijn van een pagina op uw site, of het kan zelfs de website van uw concurrent zijn.

Vervolgens moet u met de rechtermuisknop op de pagina klikken en ‘Inspecteren’ selecteren.

De optie Inspecteren in Chrome selecteren

Aan de rechterkant wordt een nieuw venster geopend, zoals dit:

De standaard bureaubladweergave bij het inspecteren van uw site in Chrome

In de ontwikkelaarweergave kunt u de HTML-broncode van uw site zien.

Klik vervolgens op de knop ‘Apparaatwerkbalk in- / uitschakelen’ om over te schakelen naar de mobiele weergave.

Inspectie van de mobiele weergave van uw site in Chrome

U zult merken dat het voorbeeld van uw website kleiner wordt naar het mobiele schermformaat.

U zult ook merken dat het uiterlijk van uw website verandert in de mobiele weergave. In het bovenstaande voorbeeld is het menu samengevouwen en is het zoekpictogram naar links verplaatst in plaats van naar rechts van het menu.

Wanneer u uw muiscursor over de mobiele weergave van uw site beweegt, wordt het een cirkel, zoals deze:

De ronde muiscursor in de inspectieweergave van Chrome

Deze cirkel kan met je muis worden verplaatst om het touchscreen op een mobiel apparaat na te bootsen.

U kunt ook de ‘Shift’ -toets ingedrukt houden en vervolgens klikken en uw muis bewegen om te simuleren dat het mobiele scherm wordt geknepen om in of uit te zoomen.

Boven de mobiele weergave van uw site ziet u enkele aanvullende opties.

Aanvullende mobiele opties voor het inspecteren van uw site in Chrome

Hiermee kunt u verschillende extra dingen doen. U kunt controleren hoe uw site eruitziet op verschillende soorten smartphones. U kunt ook de prestaties van uw site simuleren op snelle of langzame 3G-verbindingen. U kunt zelfs het mobiele scherm draaien met het rotatiepictogram.

Hoe u mobiele specifieke inhoud in WordPress kunt maken

Het is belangrijk dat uw website een responsief ontwerp heeft, zodat uw mobiele bezoekers gemakkelijk door uw website kunnen navigeren.

Maar het simpelweg hebben van een responsieve site gaat misschien niet ver genoeg. Gebruikers op mobiele apparaten zijn vaak op zoek naar andere dingen dan desktopgebruikers.

Met veel premium thema’s en plug-ins kunt u elementen maken die anders worden weergegeven op desktop en mobiel. U kunt ook een plug-in voor paginabuilder zoals Beaver Builder gebruiken om uw bestemmingspagina’s in mobiele weergave te bewerken.

U moet absoluut mobiel-specifieke inhoud maken voor uw formulieren voor het genereren van leads. Op mobiele apparaten zouden deze om minimale informatie moeten vragen, idealiter alleen een e-mailadres. Ze moeten er ook goed uitzien en gemakkelijk te sluiten zijn.

Een geweldige manier om mobiele specifieke pop-ups en formulieren voor het genereren van leads te maken, is met OptinMonster. Het is de krachtigste WordPress pop-up plug-in en leadgeneratietool op de markt.

Ze hebben specifieke weergaveregels voor apparaattargeting waarmee u verschillende campagnes kunt laten zien aan mobiele gebruikers versus desktopgebruikers. U kunt dat zelfs combineren met de geo-targetingfunctie van OptinMonster en andere geavanceerde personalisatiefuncties voor de beste conversie.

We hopen dat dit artikel u heeft geholpen om een ​​voorbeeld te bekijken van de mobiele lay-out van uw site. Misschien wilt u ook ons ​​artikel over de beste plug-ins bekijken om een ​​WordPress-site om te zetten in een mobiele app.

Bonus: Bekijk onze selectie van de beste zakelijke telefoondiensten, zodat u een click-to-call-knop voor mobiele gebruikers kunt toevoegen.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map