Så här viewar du mobilversionen av WordPress webbplatser från skrivbordet

Vill du få en preview av mobilversionen av din site i WordPress?

Preview av den mobila layouten hjälper you att se hur din website ser ut på mobila enheter. När din site är under utveckling eller till och med när den är live är det ofta enklare att viewa mobilversionen på en stationär dator. Då kan du snabbt göra ändringar och se effekten av dem.

I den här artikeln visar vi dig hur du kan viewa en mobilversion av WordPress site från en stationär dator.

Varför du bör Preview din mobila layout

Mer än 50% av besökarna på din website kommer att använda sina mobiltelefoner för att komma åt din site. Cirka 3% använder en surfplatta.

Det innebär att det är mycket viktigt att ha en site som ser bra ut på mobilen.

Faktum är att mobilen är så viktig att Google nu använder ett mobile first-index för sin algoritm för ranking av websites. Detta innebär att Google kommer att använda din sites mobilversion för indexering. Du kan lära dig mer genom att läsa vår ultimata guide till sökmotorsoptimering för WordPress.

Även om du använder ett responsivt WordPress theme måste du ändå kontrollera hur din site ser ut på mobilen. Du kanske vill skapa olika versioner av viktiga landing pages som är optimerade för mobila användares behov.

Det är viktigt att komma ihåg att de flesta mobila previews inte kommer att vara helt perfekta eftersom det finns så många olika mobila skärmstorlekar och webbläsare. Ditt slutliga test bör alltid vara att klämma på din site på en faktisk mobil device.

Med det sagt, låt oss nu titta på hur du kan viewa mobilversionen av din WordPress website på en stationär dator.

Vi kommer att täcka två olika metoder för att testa hur din site ser ut på mobilen med hjälp av stationära webbläsare. Du kan klicka på länkarna under för att hoppa till valfri section:

Video Tutorial

Subscribe to WPBeginner

Om du föredrar skriftliga instruktioner kan du fortsätta Läsa.

Metod 1: Använda WordPress’s Theme Customize

Du kan använda WordPress theme customize för att previewa den mobila versionen av din WordPress site.

Logga bara in på din WordPress dashboard och gå till vyn Appearance ” Customize.

Detta kommer att öppna upp WordPress tema customize. För denna tutorial kommer vi att använda Astra theme.

Beroende på vilket theme du använder kan det hända att du ser lite olika alternativ i menyn till vänster.

Längst ner på vyn klickar du bara på den mobila ikonen.

Du kommer då att se en preview av hur din site ser ut på mobila enheter.

Den här metoden för Preview av mobilversionen är viss användbar när you inte har slutfört skapandet av din blogg eller när den är i underhållsläge.

Du kan nu göra ändringar på din website och kontrollera hur de ser ut innan du skickar dem live.

Metod 2: Använda DevTools Device Mode i Google Chrome

Nästa metod för hur du kan viewa mobilversionen av en website är att använda webbläsaren Google Chrome.

Google Chrome webbläsare har en uppsättning verktyg för utvecklare som låter dig köra olika checks på alla webbplatser, inklusive att se en preview av hur det ser ut på mobila enheter.

Öppna helt enkelt webbläsaren Google Chrome på din dator och besök den page du vill kontrollera. Det kan vara en preview av en page på din site, eller till och med din konkurrents website.

Därefter måste du högerklicka på sidan och välja alternativet ”Inspektera”.

En new panel öppnas på höger sida eller längst ner på vyn.

Det kommer att se ut ungefär så här:

I vyn för utvecklare kan du se webbplatsens HTML-källkod, CSS och andra detaljer.

Därefter måste du klicka på knappen ”Toggle Device Toolbar” för att byta till mobil view.

You will see the preview of your website shrink to the mobile screen size.

Din websites allmänna appearance kommer också att förändras i den mobila viewen. Exempelvis minimeras menyerna och ytterligare icons flyttas till vänster i stället för till höger i menyn.

När du hoverar muspekaren över den mobila viewen av din site blir det en cirkel. Denna cirkel kan du flytta med din mus för att efterlikna pekskärmen på en mobil device.

You can also hold down the ’Shift’ key, then click and move your mouse to simulate pinching the mobile screen to zoom in or out.

Ovanför den mobila viewen av din site kommer du att se några ytterligare alternativ.

Med dessa Settings kan du göra flera extra saker. You can check how your site would look on different types of smartphones.

Du kan till exempel selecta en mobil device som gillar iPhone och se hur din site kommer att se ut på den enheten.

You can also simulate your site’s performance on fast or slow 3G connections. Du kan även rotera den mobila vyn med hjälp av ikonen rotate.

Bonus: Så här skapar du mobilspecifikt content i WordPress

Det är viktigt att din website har en responsiv design så att mobila besökare enkelt kan navigera på din website.

Men att bara ha en responsive site kanske inte räcker långt. Användare av mobila enheter letar ofta efter andra saker än användare av stationära datorer.

Många premiumteman och tillägg låter dig skapa element som visas på olika sätt på datorn jämfört med mobilen. Du kan också använda ett page builder-plugin som SeedProd för att editera dina landing pages i mobil view.

You should consider creating mobile-specific content for your lead generation forms. På mobila enheter bör dessa formulär be om minimalistisk information, helst bara en email address. De ska också se bra ut och vara lätta att stänga.

För mer details, you can see our guide on how to create a landing page in WordPress.

Ett annat bra sätt att skapa mobilspecifika popups och lead-genereringsformulär är med OptinMonster. Det är det mest kraftfulla pluginet för popup och lead-generering för WordPress på marknaden.

OptinMonster har specifika visningsregler för enhetsinriktning som låter dig visa olika kampanjer för mobilanvändare jämfört med stationära användare. Du kan till och med kombinera detta med OptinMonsters geo-targeting-funktion och andra avancerade personaliseringsfunktioner för att få de bästa konverteringarna.

Du kan läsa vår guide om hur du skapar mobila popups som konverterar om du vill ha mer information.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du kan previewa den mobila layouten på din site. Du kanske också vill se våra expertval för de bästa tilläggen för att konvertera en WordPress site till en mobil app och lära dig sätt att skapa en mobilvänlig website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.