Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come visualizzare la versione mobile dei siti WordPress dal desktop

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

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.

How to view the mobile version of WordPress sites from 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.

Go to theme customizer from WordPress dashboard

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.

View options in theme customizer

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

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

View mobile screen preview

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”.

Right click to open the inspect option

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

Avrà un aspetto simile a questo:

View the inspect tool

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.

Click the toggle device toolbar

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.

View the mobile version in inspect tool window

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.

Change the dimensions for responsiveness

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.

Previewing a custom page on 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.

Edit campaign design on mobile

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

18 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez says

    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.

  3. Ralph says

    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?

  4. Moinuddin waheed says

    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.

  5. Jiří Vaněk says

    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.

      • Moinuddin Waheed says

        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.

  6. Sakirah says

    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 says

      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.

      Admin

  7. daniel says

    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 ).

  8. Larissa mokom says

    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 says

      You would want to reach out to your theme’s support to ensure this isn’t a choice based on the theme’s styling.

      Admin

  9. Samson Onuegbu says

    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!

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.