Rendi il tuo sito adatto ai dispositivi mobili

I siti WordPress si adattano automaticamente alle diverse dimensioni dello schermo grazie al design responsivo. In questa guida scoprirai come visualizzare in anteprima e ottimizzare il tuo sito per i dispositivi mobili.

I siti WordPress utilizzano un design responsivo: il tuo sito si adatta automaticamente per offrire una visualizzazione ottimale su qualsiasi schermo, che sia un telefono, un tablet o un computer. Quando modifichi il sito in WordPress, esiste un solo editor e le modifiche che apporti si applicano a tutti i dispositivi contemporaneamente.

Tutti i temi offerti su WordPress.com sono responsivi e si adattano ai dispositivi mobili. Non è quindi necessario creare versioni separate del sito per dispositivi diversi. I contenuti, le immagini e il layout si adatteranno automaticamente allo schermo del visitatore. Ad esempio, un testo visualizzato su tre colonne su un desktop potrebbe disporsi in un’unica colonna su un telefono, risultando più facile da leggere su uno schermo più piccolo.

Questo approccio garantisce che il tuo sito resti coerente e facile da gestire. Apporti una modifica e funziona ovunque.

Tutti i temi offerti su WordPress.com sono responsivi e si adattano ai dispositivi mobili, il che significa che sono pensati per apparire al meglio su telefoni, tablet e desktop.

Se stai usando un tema di terze parti, verifica che venga presentato come adatto ai dispositivi mobili. Prova ad aprire il tuo sito sul telefono o tablet per assicurarti che venga visualizzato correttamente. Controlla la documentazione del tema per eventuali opzioni di personalizzazione specifiche per i dispositivi mobili.

L’editor di WordPress include uno strumento di anteprima che ti permette di vedere come appare il tuo sito a diverse dimensioni dello schermo. Per un’anteprima più accurata, visualizza il sito direttamente in un browser o sul tuo dispositivo mobile.

Segui questi passaggi per visualizzare in anteprima il tuo sito:

1. Apri la pagina, l’articolo o il template che vuoi visualizzare in anteprima.
2. Fai clic sull’icona Visualizza in alto a destra dello schermo (ha l’icona di un laptop).
3. Scegli tra le seguenti opzioni:
   • Desktop: la visualizzazione predefinita che vedi durante la modifica.
   • Tablet: mostra come appaiono i contenuti sulla maggior parte dei tablet.
   • Dispositivo mobile: mostra come appaiono i contenuti sulla maggior parte dei dispositivi mobili.
   • Stili responsivi: applica modifiche a specifiche dimensioni dello schermo. Scopri di più nella nostra guida alla modifica della versione mobile.
   • Mostra template: mostra intestazione e piè di pagina, così puoi vedere l’aspetto dell’intera pagina nel suo template.
   • Anteprima in una nuova scheda: apre il sito in una nuova scheda del browser, così puoi ridimensionare la finestra per testare diverse dimensioni dello schermo.

Segui questi suggerimenti per assicurarti che i contenuti vengano visualizzati correttamente su schermi di ogni dimensione.

Se un’immagine contiene del testo, su schermi più piccoli questo potrebbe essere tagliato, come in questo esempio:

Il testo contenuto in un’immagine non è responsivo e non può adattarsi alle diverse dimensioni dello schermo. Aggiungi invece il testo sopra un’immagine utilizzando il blocco Copertina. In questo modo il testo diventa responsivo e si adatta automaticamente ai dispositivi mobili:

Il testo impostato in pixel (px) resta bloccato a una dimensione fissa. Il testo impostato in em o rem si adatta in base alle impostazioni e alle dimensioni dello schermo del visitatore, rendendo il tuo sito più accessibile e più facile da leggere su dispositivi diversi. Per istruzioni dettagliate su come cambiare le unità dei font, scopri come modificare la versione mobile del tuo sito.

WordPress include funzionalità integrate per personalizzare l’aspetto del tuo sito sui dispositivi mobili. Le opzioni di personalizzazione includono:

• Modifica della visualizzazione del menu sui dispositivi mobili.
• Disposizione verticale dei contenuti sui dispositivi mobili.
• Disposizione su più righe di pulsanti e menu su schermi più piccoli.
• Regolazione delle dimensioni del testo per gli schermi dei dispositivi mobili.
• Impostazione di stili diversi, come allineamento, dimensione o colore, per ogni dimensione dello schermo.
• Possibilità di nascondere contenuti specifici su dispositivi mobili o desktop.

Scopri come modificare queste impostazioni nella nostra guida sulla modifica della versione mobile del tuo sito.

AMP (Accelerated Mobile Pages) è un framework che consente di creare pagine mobili a caricamento rapido. Puoi aggiungere AMP al tuo sito installando il plugin AMP. Per i siti WordPress.com con plugin attivati prima del 13 giugno 2022, il plugin AMP era installato per impostazione predefinita.

Nota: AMP elimina molte funzionalità del sito ed elementi di design per migliorare la velocità di caricamento. Tutti i temi di WordPress.com sono già adatti ai dispositivi mobili, quindi AMP non è indispensabile per un’esperienza ottimizzata su tali dispositivi. Usa AMP solo se il tuo tema è stato progettato specificamente per il suo utilizzo.

Se riscontri problemi di visualizzazione o vedi un’opzione “Esci dalla versione mobile” che desideri rimuovere, prova a disattivare il plugin AMP. Tieni presente però che, se il tuo sito ha utilizzato AMP, i motori di ricerca potrebbero continuare a mostrare gli URL delle pagine AMP anche dopo la disattivazione del plugin. Questo può causare errori 404 per i visitatori, fino a quando i motori di ricerca non aggiornano i propri elenchi.

Per evitare errori 404, configura dei reindirizzamenti utilizzando un plugin di reindirizzamento. Dovrai creare un reindirizzamento 301 con un’espressione Regex simile a /(.*)/amp. Consulta la documentazione del plugin di reindirizzamento per sapere come configurarlo.