Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Modificare il layout di pagine e blocchi su dispositivi mobili

I browser per dispositivi mobili sono più piccoli (e in genere più stretti) rispetto alle finestre dei PC fissi. Per far sì che il sito sia leggibile ed evitare ai visitatori di dover pizzicare, ingrandire e scorrere per visualizzare i contenuti, il responsive design di Squarespace impila automaticamente i blocchi in senso verticale sui dispositivi mobili.

Se i blocchi non sono allineati nel modo desiderato sui dispositivi mobili, è possibile spostare i blocchi utilizzando gli scenari contenuti in questa guida e nel video.

Guarda un video

Per vedere come funziona e per suggerimenti su come modificare il layout per ottenere la visualizzazione migliore per dispositivi mobili, guarda questo video:

Test con Vista dispositivo

Ti consigliamo di modificare il tuo sito in Vista dispositivo e di testarne l'effetto sul tuo dispositivo.

Dal momento che il layout è diverso, sperimentare e visualizzare in anteprima il tuo sito è il modo migliore per perfezionare il layout finché non ottieni un design che ti piace e che si visualizza in modo ottimale su tutti i dispositivi. 

Layout a singola colonna nella vista dispositivo mobile

Quando i blocchi occupano l'intera larghezza di una pagina (senza blocchi su entrambi i lati), i blocchi si impilano verticalmente sui dispositivi mobili, mantenendo il layout desktop della pagina.

Più colonne pari nella vista dispositivo mobile

L'aggiunta di blocchi a sinistra o a destra di altri blocchi crea colonne in una pagina.

Le pagine con più colonne sono ottime sui browser desktop, ma possono essere difficili da leggere sui dispositivi mobili. Per rendere il contenuto più accessibile, Squarespace sposterà la seconda, la terza e le colonne aggiuntive sotto la prima sui dispositivi mobili. In altre parole, le colonne si spostano da orizzontali a verticali sul dispositivo mobile.

Ad esempio:

  • Se sono presenti tre blocchi immagine su una riga orizzontale, questi si impilano uno sopra l'altro da sinistra a destra sul dispositivo mobile.
  • Se sono presenti tre blocchi immagine su una riga con blocchi di testo sotto ciascuno di essi che descrivono ciascuna immagine, ciascun blocco immagine avrà il proprio blocco di testo associato impilato sotto di esso nella vista per dispositivi mobili seguito dall'immagine successiva. Per vedere come funziona guarda il video qui sopra.

Layout più complessi nella vista dispositivo mobile

Con layout più complessi in cui alcune aree hanno dimensioni di colonna diverse rispetto ad altre, hai pur sempre il controllo su come i blocchi vengono ordinati sul dispositivo mobile.

Quando si aggiungono blocchi, esistono linee guida che mostrano come i blocchi si ordineranno. Se una linea guida prosegue per tutta la lunghezza di un blocco accanto a essa, questo dice a Squarespace che i due blocchi devono essere raggruppati su tutte le schermate.

Per mantenere un blocco impilato con un altro blocco, trascinarlo e rilasciarlo quando la linea guida (la linea orizzontale) corre per tutta la lunghezza dell'altro blocco.

Per vedere come funziona, guarda il video qui sopra.

Blocchi mobili nella vista dispositivo mobile

I blocchi mobili in un blocco di testo (ad esempio, le immagini racchiuse nel testo) si visualizzano sopra il blocco di testo nella vista dispositivo mobile.

Per ulteriori informazioni sui blocchi mobili nel testo, visita Spostamento di blocchi.

Nota: se il testo non è sufficiente per racchiudere il blocco, il blocco apparirà accanto al testo. Se i blocchi appaiono erroneamente sopra il testo nella vista dispositivo mobile, puoi risolvere questo problema spostando il blocco per assicurarti che non sia mobile nel testo.

Blocchi spazio

I Blocchi Spazio sono automaticamente nascosti su dispositivo mobile per la maggior parte dei template,

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 56 su 339
Modificare il layout di pagine e blocchi su dispositivi mobili