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
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.
Dayo Olobayo
This is a really timely article for me. I’m in the process of redesigning my website, and I want to make sure it looks good on both mobile and desktop. I’ll definitely be trying out the methods you described in this post.
Dennis Muthomi
This post couldn’t have come at a better time!
I’ve been looking for ways to preview my WordPress site on various mobile devices without having to manually check on a bunch of different phones and tablets. I had no idea that the Google Chrome DevTools had a built-in device mode – definitely going to be using that from now on.
WPBeginner Support
Glad we could show the easy way to test this
Administratör
Dennis Muthomi
I have just also discovered that I can take screenshots of the different device views in Chrome DevTools, there’s alot of useful tools to test
Mrteesurez
That’s good, I don’t even know of this, thanks for sharing your what you discovered. In these day where larger percentage of users are using mobile to visit and browse website, it’s important to optimize one’s website for mobile and knowing how to preview it on different screens making it easier to adjust site’s elements.
Mrteesurez
I normally used page builder for this, now I just discovered we can use theme customizer, it’s even shows the three screens size to switch between different devices screen. Thanks.
Ralph
On my website I have even 75-77% mobile traffic every single month. My theme is responsive but article preview (mobile) in wordpress itself never looks like a post on my phone. Nor on my wifes phone.
With my new website I’m making from scratch I even think about building it 100% for mobile users.
Is SeedProd ok for that? Or I should look up for specific builder?
WPBeginner Support
SeedProd will allow you to create a responsive theme for your site
Administratör
Moinuddin waheed
This is very important aspect as most of the traffic comes from the mobile itself and having a good user interface will definitely help in good visual experience.
I have used generateblocks pro and generatepress and it has also the same feature to tweak the mobile version appearance of the website.
Almost all the themes and page builders now a days include this feature.
WPBeginner Support
It is definitely a good feature to have
Administratör
Jiří Vaněk
Elementor also offers a similar function for those building websites using this builder. At the bottom of the left-hand menu, there’s a toggle feature to display the layout. Here, you can switch between desktop, tablet, and mobile views. You can also add your own breakpoints and create custom resolutions for testing purposes. Personally, I’ve found it very useful to check the website’s appearance across multiple devices because, surprisingly, due to the responsive template, the article layout, especially with Elementor, can look dramatically different.
WPBeginner Support
Thank you for sharing, page builders have started adding this view toggle for their users
Administratör
Moinuddin Waheed
I think almost all the page builders are now making this option to make the mobile version look and appearance to be as good as the desktop version.
I have been using seedprod and found it to be very smooth in testing mobile version.
the best thing about seedprod is that we don’t need to make much changes to have good mobile appearance rather a small tweak does the job in most of the cases.
ilham ilmam aufar
hello wpbeginner,
what if i want make mobilw view permanent on desktop view?
thanks
Sakirah
Hello, I have a problem with loading my site on mobile. It displays as Mobile Site view, classic version without theme. I have to click View Full Site at the bottom to display the responsive theme. I want to force View Full Site so that the responsive theme is auto display to any mobile.
WPBeginner Support
You would want to check your site to see if you have a plugin that would be enabling that mobile view as that should not be default WordPress behavior.
Administratör
daniel
there’s a much easier way to do this just by clicking the inspect tool and enable mobile mode ( button on the yop left with a phone icon ).
WPBeginner Support
That is method 2 in this article.
Administratör
Larissa mokom
Hello, Thank you for all the information you are sharing on here i am able to follow your guides step by step to be able to come up with my blog my question is how would i be able to fix the problem of my widgets ( home,about, contact us) not displaying when my website is pulled on a mobile device but on a computer everything is looking good.
WPBeginner Support
You would want to reach out to your theme’s support to ensure this isn’t a choice based on the theme’s styling.
Administratör
Samson Onuegbu
Whoa!
WPbeginner always give the best hacks that many never know existed.
We will be launching our site soon and you have just made my responsive site building job easier.
Thanks a lot!
WPBeginner Support
You’re welcome, glad you found our recommendations helpful
Administratör