Come visualizzare la versione mobile dei siti WordPress dal desktop

Volete visualizzare l’anteprima della versione mobile del vostro sito WordPress?

L’anteprima del layout mobile aiuta a vedere come appare il sito web sui dispositivi mobili. Quando il sito è in fase di sviluppo o è già attivo, spesso è più facile visualizzare la versione mobile su un computer desktop. In questo modo è possibile apportare rapidamente le modifiche e vederne l’effetto.

In questo articolo vi mostreremo come visualizzare una versione mobile del sito WordPress da un desktop.

Perché è necessario visualizzare in anteprima il layout per dispositivi mobili

Oltre il 50% dei visitatori del vostro sito web utilizzerà il cellulare per accedervi. Circa il 3% utilizzerà un tablet.

Ciò significa che è molto importante avere un sito che si veda bene su mobile.

In effetti, il mobile è così importante che Google sta utilizzando un indice mobile-first per il suo algoritmo di classificazione dei siti web. Ciò significa che Google utilizzerà la versione mobile del vostro sito per l’indicizzazione. Per saperne di più, leggete la nostra guida definitiva alla SEO di WordPress.

Anche se utilizzate un tema WordPress responsive, dovete comunque verificare l’aspetto del vostro sito su mobile. Potreste voler creare diverse versioni delle principali pagine di destinazione ottimizzate per le esigenze degli utenti mobili.

È importante tenere presente che la maggior parte delle anteprime per dispositivi mobili non saranno del tutto perfette perché esistono schermi e browser di dimensioni diverse. Il test finale dovrebbe essere sempre quello di guardare il vostro sito su un dispositivo mobile reale.

Detto questo, vediamo come visualizzare la versione mobile del vostro sito WordPress su un desktop.

Verranno illustrati due metodi diversi per testare l’aspetto del sito su dispositivi mobili utilizzando i browser desktop. Potete fare clic sui link sottostanti per passare a qualsiasi sezione:

Video tutorial

Subscribe to WPBeginner

Se preferite le istruzioni scritte, continuate a leggere.

Metodo 1: Utilizzo del personalizzatore di temi di WordPress

È possibile utilizzare il personalizzatore di temi di WordPress per visualizzare l’anteprima della versione mobile del sito WordPress.

È sufficiente accedere alla dashboard di WordPress e andare alla schermata Aspetto ” Personalizzazione.

Si aprirà il personalizzatore di temi di WordPress. Per questa esercitazione, utilizzeremo il tema Astra.

A seconda del tema utilizzato, le opzioni del menu di sinistra possono essere leggermente diverse.

Nella parte inferiore dello schermo, è sufficiente fare clic sull’icona del cellulare.

Verrà quindi visualizzata un’anteprima dell’aspetto del sito sui dispositivi mobili.

Questo metodo per visualizzare l’anteprima della versione mobile è particolarmente utile quando non si è ancora terminato di creare il blog o quando è in modalità di manutenzione.

Ora potete apportare modifiche al vostro sito web e verificarne l’aspetto prima di renderlo operativo.

Metodo 2: utilizzare la Modalità dispositivo di DevTools di Google Chrome

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

Il browser Google Chrome dispone di una serie di strumenti per gli sviluppatori che consentono di eseguire vari controlli su qualsiasi sito web, compresa un’anteprima del suo aspetto sui dispositivi mobili.

È sufficiente aprire il browser Google Chrome sul desktop e visitare la pagina che si desidera controllare. Potrebbe trattarsi dell’anteprima di una pagina del vostro sito o del sito di un vostro concorrente.

Successivamente, è necessario fare clic con il tasto destro del mouse sulla pagina e selezionare l’opzione “Ispeziona”.

Si aprirà un nuovo pannello sul lato destro o nella parte inferiore dello schermo.

Avrà un aspetto simile a questo:

Nella vista sviluppatore, potrete vedere il codice sorgente HTML del vostro sito, il CSS e altri dettagli.

Successivamente, è necessario fare clic sul pulsante “Attiva la barra degli strumenti del dispositivo” per passare alla visualizzazione mobile.

Vedrete l’anteprima del vostro sito web ridursi alle dimensioni dello schermo mobile.

Anche l’aspetto generale del sito web cambierà nella visualizzazione mobile. Ad esempio, i menu si riducono e le icone aggiuntive si spostano a sinistra anziché a destra del menu.

Quando si passa il cursore del mouse sulla visualizzazione mobile del sito, questo diventa un cerchio. Questo cerchio può essere spostato con il mouse per simulare il touchscreen di un dispositivo mobile.

È anche possibile tenere premuto il tasto ‘Shift’, quindi fare clic e muovere il mouse per simulare il pizzicamento dello schermo del cellulare per ingrandire o ridurre lo schermo.

Sopra la vista mobile del vostro sito, vedrete alcune opzioni aggiuntive.

Queste impostazioni consentono di fare diverse cose in più. È possibile verificare l’aspetto del sito su diversi tipi di smartphone.

Ad esempio, è possibile selezionare un dispositivo mobile come l’iPhone e vedere come apparirà il vostro sito sul dispositivo.

È anche possibile simulare le prestazioni del sito su connessioni 3G veloci o lente. È anche possibile ruotare lo schermo del cellulare utilizzando l’icona di rotazione.

Bonus: Come creare contenuti specifici per i dispositivi mobili in WordPress

È importante che il vostro sito web abbia un design reattivo, in modo che i visitatori mobili possano navigare facilmente nel vostro sito.

Tuttavia, avere semplicemente un sito responsive potrebbe non essere sufficiente. Gli utenti dei dispositivi mobili spesso cercano cose diverse da quelle degli utenti desktop.

Molti temi e plugin premium consentono di creare elementi che vengono visualizzati in modo diverso su desktop e su mobile. È inoltre possibile utilizzare un plugin di page builder come SeedProd per modificare le pagine di destinazione in visualizzazione mobile.

Dovreste prendere in considerazione la creazione di contenuti specifici per dispositivi mobili per i vostri moduli di lead generation. Sui dispositivi mobili, questi moduli dovrebbero richiedere informazioni minime, idealmente solo un indirizzo e-mail. Devono inoltre avere un bell’aspetto ed essere facili da chiudere.

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

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

OptinMonster dispone di regole di visualizzazione specifiche per il targeting dei dispositivi che consentono di mostrare campagne diverse agli utenti mobili rispetto a quelli desktop. Potete anche combinarle con la funzione di geo-targeting di OptinMonster e con altre funzioni di personalizzazione avanzate per ottenere le migliori conversioni.

Per maggiori informazioni, potete consultare la nostra guida su come creare popup mobili che convertono.

Speriamo che questo articolo vi abbia aiutato a capire come vedere l’anteprima del layout mobile del vostro sito. Potreste anche voler consultare i nostri esperti che hanno scelto i migliori plugin per convertire un sito WordPress in un’app mobile e imparare a creare un sito web mobile friendly.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.