Come ottimizzare un sito Web per la visualizzazione su dispositivi mobili

Impostare la visualizzazione della pagina su vari dispositivi nell'area visualizzabile
Area visibile è un'impostazione che determina quali blocchi possono o non possono essere visualizzati su determinati tipi di dispositivi. Puoi regolare questo parametro nel pannello Impostazioni di qualsiasi blocco.
Perché potresti averne bisogno e come funziona

Se un blocco ha un bell'aspetto sul desktop ma non altrettanto buono sui dispositivi mobili, è possibile impostare la visibilità del blocco su 980 px o più. In questo modo, il blocco diventerà orientato al desktop e non apparirà sui dispositivi mobili.

Successivamente, copia il blocco e ottimizzalo per la visualizzazione su dispositivi mobili regolando le sue impostazioni (che potrebbero comportare la modifica dell'immagine, del carattere, ecc.). Imposta la visibilità del blocco su "0-980px". Di conseguenza, otterrai una versione mobile del blocco.

Alla fine, coloro che accedono al tuo sito Web da un PC vedranno la versione desktop e gli utenti mobili la versione mobile.

La visibilità del blocco è un parametro che puoi trovare nel pannello Impostazioni di qualsiasi blocco e regolare per far apparire o meno il blocco su dispositivi con una particolare risoluzione dello schermo. Ad esempio, alcuni blocchi non hanno un bell'aspetto sui tablet e altri sui telefoni cellulari.
Esempio
Abbiamo una copertina che sta benissimo sul desktop, il testo allineato a sinistra e l'oggetto principale a destra. Ora, regoliamolo in modo che abbia un bell'aspetto anche sui dispositivi mobili.
Come vediamo, la copertina viene ritagliata sul cellulare e non ha un bell'aspetto.
Per evitare che appaia sui dispositivi mobili, vai al pannello Impostazioni del blocco di copertina e imposta la visibilità del blocco su "> 980px". Ora, gli utenti mobili non lo vedranno più.
Copia il blocco.
Regola il blocco per la versione mobile: modifica l'allineamento della foto e del testo.
Ora che abbiamo impostato la visibilità del blocco su "≤ 980px", non apparirà sui dispositivi con schermi più larghi di 980px.
Fatto! Ora la copertina viene visualizzata in modo diverso a seconda della larghezza dello schermo.
Esempi di larghezza dello schermo per vari dispositivi:
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
Fatto su
Tilda