Modificare la versione per dispositivi mobili

I siti WordPress usano un design responsivo: non c’è una versione per dispositivi mobili separata da modificare. In questa guida imparerai come personalizzare come i tuoi contenuti vengono visualizzati sui dispositivi mobili utilizzando le impostazioni dei blocchi e il CSS.

Il blocco Navigazione include le impostazioni per il pulsante del menu mobile (noto come icona “hamburger”). Per personalizzare il menu sul dispositivo mobile:

1. Vai ad Aspetto → Editor dalla bacheca del tuo sito.
2. Seleziona il template o la parte del template contenente il menu di navigazione.
3. Apri la Visualizzazione in modalità elenco e seleziona il blocco di Navigazione.
4. Nella barra laterale delle impostazioni del blocco, fai clic sull’icona delle impostazioni (icona degli ingranaggi).

5. Nella sezione Visualizza:
   • Attiva o disattiva il “Pulsante mostra icona” per usare un’icona hamburger o mostrare il testo “Menu”.
   • Scegli lo stile dell’icona (due o tre righe) e seleziona quando appare l’icona dell’hamburger utilizzando le impostazioni del menu in sovrimpressione.

Scopri di più sulla modifica dello stile dei menu del tuo sito.

Alcuni blocchi di layout ti permettono di controllare se i contenuti sono in colonna verticalmente sugli schermi dei dispositivi mobili. Per impostazione predefinita, WordPress impila automaticamente i contenuti affiancati su schermi più piccoli per mantenerli leggibili.

Per regolare il comportamento di impilamento, segui questi passaggi:

1. Vai ad Aspetto → Editor dalla bacheca del tuo sito.
2. Modifica la pagina o il template contenente il blocco che desideri modificare.
3. Apri la visualizzazione in modalità elenco e seleziona il blocco.
4. Nelle impostazioni del blocco, attiva o disattiva “Impila sui dispositivi mobili“.

Blocchi con l’impostazione “Impila sui dispositivi mobili”:

• Colonne
• Media e testo
• Ultimi articoli su Instagram

I pulsanti e i menu sono più leggibili sui dispositivi mobili quando vengono racchiusi in più righe invece di forzare tutti i contenuti su un’unica riga. Per impostazione predefinita, l’impostazione per il ritorno a capo di più righe è disattivata.

Per attivare il ritorno a capo, segui questi passaggi:

1. Vai ad Aspetto → Editor dalla bacheca del tuo sito.
2. Modifica la pagina o il template contenente il blocco che desideri modificare.
3. Apri la visualizzazione in modalità elenco e seleziona il blocco.
4. Nelle impostazioni del blocco, attiva o disattiva “Consenti il ritorno a capo su più righe“.

Blocchi con l’impostazione “Consenti il ritorno a capo su più righe”:

• Pulsanti
• Pulsanti di condivisione
• Navigazione
• Icone per i social
• Commenti
• Riga e pila

Il testo ridimensionato in pixel (px) rimane bloccato a una dimensione. Il testo ridimensionato in em o rem si adatta in base alle impostazioni del visitatore e alla dimensione dello schermo, rendendo il sito più accessibile e più facile da leggere su diversi dispositivi.

Per cambiare il testo da pixel a unità relative, segui questi passaggi:

1. Fai clic sul blocco con testo che desideri ridimensionare.
2. Nelle impostazioni del blocco, trova la sezione Tipografia.
3. Sotto Dimensione font, fai clic sull’icona della dimensione personalizzata (due linee orizzontali con punti).
4. Fai clic sull’unità px per cambiarla in em o rem.
5. Inserisci un valore numerico e regola secondo necessità.

Scegliere tra em e rem:

• em: ridimensiona il testo rispetto al suo contenitore (adatto per didascalie, etichette o testo all’interno di blocchi specifici)
• rem: il testo rimane coerente su tutto il sito (adatto per il corpo del testo, i titoli e i pulsanti)

Puoi anche personalizzare la dimensione del font a livello di sito invece di regolare i singoli blocchi.

Questa sezione della guida si applica ai siti con i nostri piani WordPress.com Premium, Business e Commerce, nonché con il piano Pro legacy. Per i siti con i piani gratuito o Personal, aggiorna il tuo piano per accedere a questa funzionalità.

È possibile nascondere blocchi specifici su desktop o dispositivi mobili utilizzando le classi CSS. Per configurarle, segui questi passaggi:

1. Modifica la pagina, l’articolo o il template contenente il blocco che desideri nascondere.
2. Seleziona il blocco facendo clic su di esso o selezionandolo nella Visualizzazione in modalità elenco.
3. Nelle impostazioni del blocco, fai clic su Avanzate.
4. Nella casella “Classi CSS aggiuntive“, immetti hide-desktop o hide-mobile:

5. Vai alle impostazioni CSS personalizzate del tuo sito:
   • Temi a blocchi: Aspetto → Editor → Stili → ⋮ → CSS aggiuntivo
   • Temi classici: Aspetto → Personalizza → CSS aggiuntivo
6. Incolla il seguente codice e fai clic su Salva:

/* nascondi elementi su mobile */
@media (max-width: 768px) {
 .hide-mobile { display: none !important; }
}
/* nascondi elementi su desktop*/
@media (min-width: 769px) {
 .hide-desktop { display: none !important; }
}

Aggiungi il codice CSS al tuo sito una volta. Successivamente, puoi aggiungere la classe hide-mobile o hide-desktop a qualsiasi blocco e il CSS lo nasconderà automaticamente sul dispositivo specificato.