Cum să vizualizați versiunea mobilă a site-urilor WordPress de pe desktop

Revizuirea versiunii mobile a site-ului dvs. WordPress într-o previzualizare desktop este o sarcină simplă, dar esențială.

Vă permite să verificați cum arată site-ul dvs. pe ecrane mai mici, ajutându-vă să identificați probleme de aspect sau defecte de design pe care altfel le-ați putea rata.

De-a lungul anilor, am lucrat cu mulți proprietari de site-uri web pentru a ne asigura că site-urile lor arată grozav și funcționează bine pe dispozitivele mobile. De asemenea, prioritizăm designurile prietenoase cu dispozitivele mobile ori de câte ori creăm pagini și postări noi pe site-ul WPBeginner.

O provocare pe care am observat-o este că verificarea versiunii mobile pe un desktop poate fi dificilă fără instrumentele potrivite.

Din fericire, personalizatorul de teme WordPress și modul dispozitiv al instrumentelor pentru dezvoltatori Google Chrome vă permit să previzualizați și să faceți ajustări rapid.

În acest ghid, vă vom prezenta ambele metode pentru a vizualiza versiunea mobilă a site-urilor WordPress de pe desktop.

De ce ar trebui să previzualizați aspectul mobil

Peste 50% dintre vizitatorii site-ului dvs. vor accesa site-ul folosind telefoanele mobile, iar aproximativ 3% vor folosi o tabletă.

Acest lucru înseamnă că este foarte important să aveți un site care arată grozav pe mobil.

De fapt, mobilul este atât de important încât Google folosește acum un index mobil-first pentru algoritmul său de clasificare a site-urilor web. Acest lucru înseamnă că Google va folosi versiunea mobilă a site-ului dvs. pentru indexare. Puteți afla mai multe citind ghidul nostru complet despre SEO WordPress.

Chiar dacă utilizați o temă WordPress responsive, tot trebuie să verificați cum arată site-ul dvs. pe mobil. S-ar putea să doriți să creați versiuni diferite ale paginilor de destinație cheie, optimizate pentru nevoile utilizatorilor mobili.

Este important să rețineți că majoritatea previzualizărilor mobile nu vor fi complet perfecte, deoarece există atât de multe dimensiuni diferite de ecran mobil și browsere. Testul final ar trebui să fie întotdeauna vizualizarea site-ului dvs. pe un dispozitiv mobil.

În secțiunile următoare, vom examina cum puteți vizualiza versiunea mobilă a site-ului dvs. WordPress pe un desktop.

Vom acoperi 2 metode diferite pentru a testa cum arată site-ul tău pe mobil folosind browsere desktop. Poți face clic pe linkurile de mai jos pentru a sări la orice secțiune:

• Metoda 1: Utilizarea personalizatorului de teme WordPress
• Metoda 2: Utilizarea modului dispozitiv din Chrome DevTools
• Sfat bonus: Crearea de conținut specific pentru mobil în WordPress
• Tutorial video
• Întrebări frecvente

Să începem!

Metoda 1: Utilizarea personalizatorului de temă WordPress

Puteți utiliza personalizatorul de teme WordPress pentru a previzualiza versiunea mobilă a site-ului dvs. WordPress.

Pur și simplu conectați-vă la tabloul de bord WordPress și accesați ecranul Aspect » Personalizare.

Aceasta va deschide personalizatorul temei WordPress.

În funcție de tema pe care o utilizați, este posibil să vedeți opțiuni ușor diferite în meniul din stânga.

În partea de jos a ecranului, faceți pur și simplu clic pe pictograma mobilă.

Veți vedea apoi o previzualizare a modului în care arată site-ul dvs. pe dispozitive mobile.

Această metodă de previzualizare a versiunii mobile este deosebit de utilă atunci când nu ați terminat de creat blogul sau când acesta este în modul de întreținere.

Acum puteți face modificări pe site-ul dvs. web și puteți verifica cum arată înainte de a le publica.

Metoda 2: Utilizarea modului dispozitiv din Chrome DevTools

Următoarea metodă pentru a vizualiza versiunea mobilă a site-ului web este utilizarea browserului Google Chrome.

Browserul Google Chrome are un set de instrumente pentru dezvoltatori care vă permit să efectuați diverse verificări pe orice site web, inclusiv previzualizarea modului în care arată pe dispozitivele mobile.

Pur și simplu deschideți browserul Google Chrome pe desktop și vizitați pagina pe care doriți să o verificați. Poate fi o previzualizare a unei pagini de pe site-ul dvs. sau chiar site-ul unui concurent.

Apoi, trebuie să faceți clic dreapta pe pagină și să selectați opțiunea „Inspect”.

Un nou panou se va deschide în partea dreaptă sau în partea de jos a ecranului.

Va arăta cam așa:

În vizualizarea dezvoltatorului, veți putea vedea codul sursă HTML al site-ului dvs., CSS și alte detalii.

Apoi, trebuie să faceți clic pe butonul „Comutare bară de instrumente dispozitiv” pentru a trece la vizualizarea mobilă.

Veți vedea previzualizarea site-ului dvs. web micșorată la dimensiunea ecranului mobil.

Aspectul general al site-ului dvs. web se va schimba și în vizualizarea mobilă. De exemplu, meniurile se vor restrânge, iar pictogramele suplimentare se vor muta în stânga, în loc de dreapta meniului.

Când plimbi cursorul mouse-ului peste vizualizarea mobilă a site-ului tău, acesta va deveni un cerc. Poți muta acest cerc cu mouse-ul pentru a imita ecranul tactil al unui dispozitiv mobil.

Puteți, de asemenea, să țineți apăsată tasta „Shift”, apoi să faceți clic și să mișcați mouse-ul pentru a simula apropierea ecranului mobil pentru a mări sau micșora.

Deasupra vizualizării mobile a site-ului dvs., veți vedea câteva opțiuni suplimentare.

Aceste setări vă permit să faceți mai multe lucruri suplimentare. Puteți verifica cum ar arăta site-ul dvs. pe diferite tipuri de smartphone-uri.

De exemplu, puteți selecta un dispozitiv mobil precum un iPhone și vedeți cum apare site-ul dvs. pe acesta.

De asemenea, puteți simula performanța site-ului dvs. pe conexiuni 3G rapide sau lente. Folosind pictograma de rotire, puteți roti ecranul mobil.

Sfat bonus: Crearea de conținut specific pentru mobil în WordPress

Este important ca site-ul tău să aibă un design responsive, astfel încât vizitatorii pe mobil să poată naviga cu ușurință pe site-ul tău.

Cu toate acestea, simpla deținere a unui site receptiv s-ar putea să nu fie suficientă. Utilizatorii de dispozitive mobile caută adesea lucruri diferite față de utilizatorii de desktop.

Multe teme și pluginuri premium vă permit să creați elemente care afișează diferit pe desktop față de mobil. Puteți folosi, de asemenea, un plugin de creare pagini precum SeedProd pentru a vă edita paginile de destinație în vizualizarea mobilă.

Ar trebui să luați în considerare crearea de conținut specific pentru mobil pentru formularele dvs. de generare de lead-uri. Pe dispozitivele mobile, aceste formulare ar trebui să solicite informații minime, ideal doar o adresă de e-mail. De asemenea, ar trebui să arate bine și să fie ușor de închis.

Pentru mai multe detalii, puteți consulta ghidul nostru despre cum să creați o pagină de destinație în WordPress.

Un alt mod excelent de a crea pop-up-uri specifice pentru mobil și formulare de generare de lead-uri este cu OptinMonster. Este cel mai puternic plugin de pop-up-uri și instrument de generare de lead-uri WordPress de pe piață.

OptinMonster are reguli specifice de afișare țintite pe dispozitiv, care vă permit să afișați campanii diferite utilizatorilor de mobil față de utilizatorii de desktop. Puteți combina acest lucru cu funcția de geo-targeting a OptinMonster și alte funcții avansate de personalizare pentru a obține cele mai bune conversii.

Puteți consulta ghidul nostru despre cum să creați pop-up-uri mobile care convertesc pentru mai multe informații.

Tutorial video

Înainte de a pleca, poate doriți să consultați tutorialul nostru video despre cum să vizualizați versiunea mobilă a site-urilor WordPress de pe desktop.

Abonează-te la WPBeginner

Întrebări frecvente

Iată câteva întrebări frecvente adresate de cititorii noștri despre previzualizarea aspectului mobil al site-ului dvs.

Aceste previzualizări pe desktop vor corespunde exact dispozitivelor mobile reale?

Nu întotdeauna. Deși utile pentru a identifica probleme evidente de aspect, aceste instrumente bazate pe desktop pot emula doar dimensiunile ecranului, comportamentul browserului și condițiile de rețea.

S-ar putea să nu surprindă particularitățile de performanță sau interacțiunile specifice hardware, cum ar fi gesturile tactile.

De aceea, sugerăm întotdeauna testarea pe dispozitive reale, inclusiv telefoane și tablete, pentru a confirma utilizabilitatea în lumea reală înainte de lansare.

Pot să-mi editez site-ul în vizualizare mobilă de pe desktop?

Da, WordPress vă permite să editați conținutul în timp ce previzualizați modul mobil în Customizer sau folosind constructori de pagini precum Elementor, SeedProd și Beaver Builder.

Când comutați la previzualizarea mobilă, puteți:

• Ajustați spațierea, marginile și dimensiunile fonturilor pentru ecranele mai mici.
• Ascundeți sau afișați anumite elemente doar pe mobil (cum ar fi imagini mari sau bannere doar pentru desktop).
• Testați meniurile și widget-urile concepute pentru interacțiuni tactile.

Majoritatea constructorilor oferă setări specifice dispozitivului, astfel încât să puteți personaliza aspectele fără a afecta versiunile pentru desktop sau tabletă.

Cum pot verifica vizualizarea mobilă a WordPress-ului meu fără să mă autentific?

Dacă doriți să vedeți cum arată site-ul live pentru vizitatori, încercați aceste metode:

• Deschideți site-ul dvs. într-o fereastră de browser incognito și utilizați modul dispozitiv al instrumentelor pentru dezvoltatori.
• Utilizați verificatoare online de design responsive, cum ar fi Responsive Design Checker.

Aceste instrumente vă permit să vizualizați site-ul dvs. la diferite rezoluții, fără a necesita credențiale de autentificare.

Sperăm că acest articol v-a ajutat să învățați cum să previzualizați aspectul mobil al site-ului dvs. De asemenea, ați putea dori să vedeți selecțiile noastre de experți pentru cele mai bune plugin-uri pentru a converti un site WordPress într-o aplicație mobilă și să învățați modalități de a crea un site web prietenos cu dispozitivele mobile.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.