Come visualizzare la versione mobile dei siti WordPress dal desktop

Esaminare la versione mobile del tuo sito WordPress in un'anteprima desktop è un compito semplice ma essenziale.

Ti permette di verificare come appare il tuo sito su schermi più piccoli, aiutandoti a individuare problemi di layout o difetti di progettazione che altrimenti potresti trascurare.

Nel corso degli anni, abbiamo lavorato con molti proprietari di siti web per assicurarci che i loro siti abbiano un aspetto fantastico e funzionino bene sui dispositivi mobili. Diamo anche priorità ai design ottimizzati per i dispositivi mobili ogni volta che creiamo nuove pagine e articoli sul sito WPBeginner.

Una sfida che abbiamo notato è che controllare la versione mobile su un desktop può essere complicato senza gli strumenti giusti.

Fortunatamente, il Personalizzatore del tema di WordPress e la Modalità dispositivo di Chrome DevTools ti consentono di visualizzare rapidamente in anteprima e apportare modifiche.

In questa guida, ti illustreremo entrambi i metodi per visualizzare la versione mobile dei siti WordPress dal desktop.

Perché dovresti visualizzare in anteprima il tuo layout mobile

Più del 50% dei visitatori del tuo sito web accederà al tuo sito utilizzando il proprio telefono cellulare e circa il 3% utilizzerà un tablet.

Ciò significa che avere un sito che appare fantastico su mobile è molto importante.

Infatti, il mobile è così importante che Google ora utilizza un indice mobile-first per il suo algoritmo di ranking dei siti web. Ciò significa che Google utilizzerà la versione mobile del tuo sito per l'indicizzazione. Puoi saperne di più leggendo la nostra guida definitiva all'ottimizzazione SEO di WordPress.

Anche se utilizzi un tema WordPress responsive, devi comunque verificare come appare il tuo sito sui dispositivi mobili. Potresti voler creare versioni diverse delle pagine di destinazione chiave che siano ottimizzate per le esigenze degli utenti mobili.

È importante ricordare che la maggior parte delle anteprime mobili non sarà completamente perfetta perché esistono così tante dimensioni di schermo e browser mobili diversi. Il tuo test finale dovrebbe essere sempre quello di guardare il tuo sito su un dispositivo mobile.

Nelle sezioni seguenti, vedremo come puoi visualizzare la versione mobile del tuo sito WordPress su un desktop.

Tratteremo 2 metodi diversi per testare come appare il tuo sito sui dispositivi mobili utilizzando i browser desktop. Puoi fare clic sui collegamenti sottostanti per passare a qualsiasi sezione:

• Metodo 1: Utilizzo del personalizzatore di temi di WordPress
• Metodo 2: Utilizzo della modalità dispositivo di Google Chrome DevTools
• Suggerimento bonus: Creazione di contenuti specifici per dispositivi mobili in WordPress
• Tutorial video
• Domande frequenti

Iniziamo!

Metodo 1: Utilizzo del personalizzatore di temi di WordPress

Puoi utilizzare il personalizzatore di temi di WordPress per visualizzare in anteprima la versione mobile del tuo sito WordPress.

Accedi semplicemente alla tua bacheca di WordPress e vai alla schermata Aspetto » Personalizza.

Questo aprirà il personalizzatore di temi di WordPress.

A seconda del tema che stai utilizzando, potresti vedere opzioni leggermente diverse nel menu a sinistra.

In fondo alla schermata, fai semplicemente clic sull'icona del telefono cellulare.

Vedrai quindi un'anteprima di come appare il tuo sito sui dispositivi mobili.

Questo metodo per visualizzare in anteprima la versione mobile è particolarmente utile quando non hai finito di creare il tuo blog o quando è in modalità di manutenzione.

Ora puoi apportare modifiche al tuo sito web e verificare come appaiono prima di pubblicarle.

Metodo 2: Utilizzo della modalità dispositivo di Chrome DevTools

Il prossimo metodo per visualizzare la versione mobile del sito web è utilizzare il browser Google Chrome.

Il browser Google Chrome dispone di un set di strumenti per sviluppatori che consentono di eseguire varie verifiche su qualsiasi sito web, inclusa l'anteprima del suo aspetto sui dispositivi mobili.

Apri semplicemente il browser Google Chrome sul tuo desktop e visita la pagina che desideri controllare. Potrebbe essere un'anteprima di una pagina del tuo sito o persino del sito web del tuo concorrente.

Successivamente, devi fare clic con il pulsante destro del mouse sulla pagina e selezionare l'opzione 'Ispeziona'.

Si aprirà un nuovo pannello sul lato destro o in basso dello schermo.

Sarà simile a questa:

Nella vista sviluppatore, sarai in grado di vedere il codice sorgente HTML del tuo sito, il CSS e altri dettagli.

Successivamente, devi fare clic sul pulsante 'Attiva/disattiva barra degli strumenti del dispositivo' per passare alla visualizzazione mobile.

Vedrai l'anteprima del tuo sito web rimpicciolirsi alle dimensioni dello schermo del cellulare.

Anche l'aspetto generale del tuo sito web cambierà nella visualizzazione mobile. Ad esempio, i menu si chiuderanno e le icone aggiuntive si sposteranno a sinistra invece che a destra del menu.

Quando passi il cursore del mouse sulla visualizzazione mobile del tuo sito, diventerà un cerchio. Puoi spostare questo cerchio con il mouse per simulare il touchscreen su un dispositivo mobile.

Puoi anche tenere premuto il tasto 'Maiusc', quindi fare clic e spostare il mouse per simulare il gesto di pizzicare lo schermo del cellulare per ingrandire o rimpicciolire.

Sopra la visualizzazione mobile del tuo sito, vedrai alcune opzioni aggiuntive.

Queste impostazioni ti consentono di fare diverse cose extra. Puoi controllare come apparirebbe il tuo sito su diversi tipi di smartphone.

Ad esempio, puoi selezionare un dispositivo mobile come un iPhone e vedere come appare il tuo sito su di esso.

Puoi anche simulare le prestazioni del tuo sito su connessioni 3G veloci o lente. Usando l'icona di rotazione, puoi ruotare lo schermo del cellulare.

Suggerimento bonus: Creazione di contenuti specifici per dispositivi mobili in WordPress

È importante che il tuo sito web abbia un design responsive in modo che i visitatori mobili possano navigare facilmente sul tuo sito web.

Tuttavia, avere semplicemente un sito responsive potrebbe non essere sufficiente. Gli utenti su dispositivi mobili spesso cercano cose diverse rispetto agli utenti desktop.

Molti temi e plugin premium ti consentono di creare elementi che vengono visualizzati in modo diverso su desktop rispetto ai dispositivi mobili. Puoi anche utilizzare un page builder plugin come SeedProd per modificare le tue landing page in visualizzazione mobile.

Dovresti considerare la creazione di contenuti specifici per dispositivi mobili per i tuoi moduli di generazione di lead. Sui dispositivi mobili, questi moduli dovrebbero richiedere informazioni minime, idealmente solo un indirizzo email. Dovrebbero anche avere un bell'aspetto ed essere facili da chiudere.

Per maggiori dettagli, puoi consultare la nostra guida su come creare una landing page in WordPress.

Un altro ottimo modo per creare popup specifici per dispositivi mobili e moduli di generazione di lead è con OptinMonster. È il plugin popup e lo strumento di generazione di lead WordPress più potente sul mercato.

OptinMonster dispone di regole di visualizzazione specifiche per il targeting del dispositivo che ti consentono di mostrare campagne diverse agli utenti mobili rispetto agli utenti desktop. Puoi combinare questo con la funzione di geo-targeting di OptinMonster e altre funzionalità di personalizzazione avanzate per ottenere le migliori conversioni.

Puoi consultare la nostra guida su come creare popup mobili che convertono per maggiori informazioni.

Tutorial video

Prima di andare, potresti voler consultare il nostro tutorial video su come visualizzare la versione mobile dei siti WordPress dal desktop.

Iscriviti a WPBeginner

Domande frequenti

Ecco alcune domande frequenti poste dai nostri lettori sull'anteprima del layout mobile del tuo sito.

Queste anteprime desktop corrisponderanno esattamente ai dispositivi mobili reali?

Non sempre. Sebbene utili per individuare problemi di layout evidenti, questi strumenti basati su desktop possono solo emulare le dimensioni dello schermo, il comportamento del browser e le condizioni di rete.

Potrebbero non catturare problemi di prestazioni o interazioni specifiche dell'hardware come i gesti touch.

Ecco perché suggeriamo di testare sempre su dispositivi reali, inclusi telefoni e tablet, per confermare l'usabilità nel mondo reale prima di andare online.

Posso modificare il mio sito in visualizzazione mobile dal mio desktop?

Sì, WordPress ti consente di modificare i contenuti mentre visualizzi l'anteprima in modalità mobile nel Personalizzatore o utilizzando page builder come Elementor, SeedProd e Beaver Builder.

Quando passi all'anteprima mobile, puoi:

• Regolare padding, margini e dimensioni dei font per schermi più piccoli.
• Nascondere o mostrare determinati elementi solo su mobile (come immagini grandi o banner solo per desktop).
• Testare menu e widget progettati per interazioni touch.

La maggior parte dei builder fornisce impostazioni specifiche per dispositivo, così puoi personalizzare i layout senza influenzare le versioni desktop o tablet.

Come posso controllare la visualizzazione mobile del mio WordPress senza accedere?

Se vuoi vedere come appare il sito live per i visitatori, prova questi metodi:

• Apri il tuo sito in una finestra del browser in incognito e utilizza la modalità dispositivo degli strumenti per sviluppatori.
• Utilizza controlli online per il responsive design come il Responsive Design Checker.

Questi strumenti ti permettono di visualizzare il tuo sito a diverse risoluzioni senza richiedere credenziali di accesso.

Speriamo che questo articolo ti abbia aiutato a imparare come visualizzare l'anteprima del layout mobile del tuo sito. Potresti anche voler vedere le nostre scelte esperte per i migliori plugin per convertire un sito WordPress in un'app mobile e imparare i modi per creare un sito web mobile-friendly.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.