Slik ser du den mobile versjonen av WordPress-nettsteder fra skrivebordet

Vil du forhåndsvise den mobile versjonen av WordPress-siden din? Forhåndsvisning av mobiloppsettet hjelper deg å se hvordan nettstedet ditt ser ut på mobile enheter.


Selv om du absolutt kan ta en titt på ditt live nettsted på telefonen din, hjelper dette ikke i utviklingsstadiet.

Selv når nettstedet ditt er live, er det ofte lettere å se mobilversjonen på en stasjonær datamaskin, slik at du raskt kan gjøre endringer og se effekten av dem.

I denne artikkelen viser vi deg to enkle måter å enkelt forhåndsvise mobiloppsettet på WordPress-nettstedet ditt uten å bytte til forskjellige enheter.

Forhåndsvis mobiloppsettet på nettstedet ditt

Hvorfor du bør forhåndsvise mobiloppsettet

Mer enn 50% av besøkende på nettstedet bruker mobiltelefoner for å få tilgang til nettstedet ditt. Rundt 3% bruker et nettbrett.

Dette betyr at det er viktig å ha et nettsted som ser bra ut på mobil.

Faktisk er mobil så viktig at Google nå bruker en “mobile-first” -indeks for nettstedets rangeringsalgoritme.

Selv om du bruker et responsivt WordPress-tema, må du fortsatt sjekke hvordan nettstedet ditt ser ut på mobilen. Du vil kanskje til og med lage forskjellige versjoner av viktige destinasjonssider som er optimalisert for mobilbrukernes behov (mer om dette senere).

I denne artikkelen skal vi dekke to forskjellige metoder for å teste hvordan nettstedet ditt ser ut på mobil ved hjelp av stasjonære nettlesere.

Det er viktig å huske på at de fleste forhåndsvisning av mobiler ikke vil være helt perfekte fordi det er så mange forskjellige skjermstørrelser og nettlesere. Den endelige testen din bør alltid være å se på nettstedet ditt på en faktisk mobil enhet.

Videoopplæring

Abonner på WPBeginner

Hvis du ikke liker videoen eller trenger flere instruksjoner, kan du fortsette å lese.

1. Bruke WordPress’s Theme Customizer

Du kan bruke WordPress-tematilpasseren til å forhåndsvise den mobile versjonen av ditt WordPress-nettsted.

Bare logg inn på WordPress-oversikten og gå til Utseende »Tilpass skjerm.

WordPress dashbord som viser hvor du kan finne Utseende - Tilpass

Dette vil åpne opp WordPress-tematilpasseren. Avhengig av hvilket tema du bruker, kan du se litt forskjellige alternativer i venstre meny her:

WordPress-tematilpasning (skrivebordsvisning)

Klikk på mobilikonet nederst på skjermen. Du vil da se en forhåndsvisning av hvordan nettstedet ditt ser ut på mobile enheter.

Bytter til mobilvisning i tematilpasseren

Merk: De blå redigeringssymbolene er bare til stede i forhåndsviseren. Du vil ikke se disse på ditt live nettsted.

Denne metoden for å forhåndsvise mobilversjonen er spesielt nyttig når du ennå ikke er ferdig med å opprette bloggen din, eller når den er under vedlikeholdsmodus.

Du kan gjøre endringer og sjekke hvordan de ser ut før du setter dem i live.

2. Bruke Google Chrome DevTools Device Mode

Google Chrome-nettleser har et sett med utviklerverktøy som lar deg kjøre forskjellige sjekker på ethvert nettsted, inkludert se en forhåndsvisning av hvordan nettstedet ditt ser ut på mobile enheter.

Bare åpne Google Chrome-nettleseren på skrivebordet ditt og besøk siden du vil sjekke.

Dette kan være forhåndsvisningen av en side på nettstedet ditt, eller det kan til og med være konkurrentens nettsted.

Deretter må du høyreklikke på siden og velge ‘Inspiser’.

Velge alternativet Inspiser i Chrome

En ny rute åpnes på høyre side, slik:

Standard skrivebordsvisning når du inspiserer nettstedet ditt i Chrome

I utviklervisningen vil du kunne se nettstedets HTML-kildekode.

Deretter klikker du på knappen ‘Toggle enhetsverktøylinje’ for å bytte til mobilvisningen.

Inspiserer mobilvisningen til nettstedet ditt i Chrome

Du vil merke at forhåndsvisningen av nettstedet ditt vil krympe til skjermstørrelsen på mobilen.

Du vil også legge merke til at nettstedets utseende endres til mobilvisningen. I eksemplet over har menyen kollapset og søkeikonet flyttet til venstre i stedet for til høyre for menyen.

Når du kjører musepekeren over mobilvisningen på nettstedet ditt, blir det en sirkel, slik:

Den sirkulære musemarkøren i Chromes inspiser-visning

Denne sirkelen kan flyttes med musen for å etterligne berøringsskjermen på en mobil enhet.

Du kan også holde nede ‘Shift’ -tasten, deretter klikke og bevege musen for å simulere klype mobilskjermen for å zoome inn eller ut.

Over mobilvisningen av nettstedet ditt ser du noen ekstra alternativer.

Flere mobilalternativer for å inspisere nettstedet ditt i Chrome

Disse lar deg gjøre flere ekstra ting. Du kan sjekke hvordan nettstedet ditt ville se ut på forskjellige typer smarttelefoner. Du kan også simulere ytelsen til nettstedet ditt på raske eller langsomme 3G-tilkoblinger. Du kan til og med rotere mobilskjermen ved å bruke rotasjonsikonet.

Hvordan lage mobilspesifikt innhold i WordPress

Det er viktig at nettstedet ditt har et responsivt design, slik at mobilbesøkene dine enkelt kan navigere på nettstedet ditt.

Men ganske enkelt å ha et responsivt nettsted går kanskje ikke langt nok. Brukere på mobile enheter leter ofte etter andre ting enn stasjonære brukere.

Mange premium-temaer og plugins lar deg lage elementer som vises annerledes på desktop kontra mobil. Du kan også bruke en sidebygger-plugin som Beaver Builder til å redigere destinasjonssidene dine i mobilvisning.

Du bør definitivt lage mobilspesifikt innhold for blygenerasjonsformene. På mobile enheter bør disse be om minimal informasjon, ideelt sett bare en e-postadresse. De skal også se bra ut og være lette å lukke.

En flott måte å lage mobilspesifikke popups og blygenerasjonsformer med OptinMonster. Det er det kraftigste WordPress popup-plugin- og leadgenerasjonsverktøyet i markedet.

De har spesifikke enhetsmålretting av visningsregler som lar deg vise forskjellige kampanjer for mobilbrukere kontra stasjonære brukere. Du kan til og med kombinere det med OptinMonsters geografiske målrettingsfunksjon og andre avanserte personaliseringsfunksjoner for å få den beste konverteringen.

Vi håper denne artikkelen hjalp deg med å lære hvordan du forhåndsviser mobiloppsettet på nettstedet ditt. Det kan også være lurt å se på artikkelen vår om de beste programtilleggene for å konvertere et WordPress-nettsted til en mobilapp.

Bonus: Sjekk ut vårt utvalg av de beste forretningstelefontjenestene, slik at du kan legge til en klikk for å ringe-knappen for mobilbrukere.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me