Come ottimizzare un sito web per la visualizzazione su dispositivi mobili
Impostare la visualizzazione della pagina su vari dispositivi
Tilda adatta automaticamente il sito web per la visualizzazione su tablet, smartphone, netbook, laptop e computer.
Inoltre, è possibile modificare le dimensioni dei padding tra i blocchi per i dispositivi mobili, regolare la visibilità dei blocchi su dispositivi diversi, costruire la propria versione adattiva utilizzando l'editor Zero Block o disattivare l'adattività del sito web.
Come creare versioni di blocco diverse per computer e dispositivi mobili
Come modificare i valori dei padding per i dispositivi mobili
Come modificare la dimensione dei caratteri, l'interlinea, il raggio dei bordi delle immagini e i padding esterni delle copertine per i dispositivi mobili
Come modificare la versione mobile e visualizzare le modifiche in una sola volta
Come creare la versione del proprio sito web per i dispositivi mobili utilizzando l'editor Zero Block
Come disattivare l'adattabilità del sito web per schermi diversi
Blocco della visibilità sui dispositivi
Questa impostazione determina quali blocchi possono o non possono essere visualizzati su determinati tipi di dispositivi. È possibile regolare questa funzione nelle impostazioni di qualsiasi blocco.
Perché può servire e come funziona
Se un blocco appare bene su desktop ma non altrettanto bene su mobile, si consiglia di impostare la visibilità del blocco a 980px o più. In questo modo, il blocco diventerà orientato al desktop e non apparirà sui dispositivi mobili.
È quindi necessario copiare questo blocco e ottimizzarlo per la visualizzazione su mobile, modificandone le impostazioni (ad esempio, cambiando l'immagine, la dimensione del carattere, ecc.) Impostare la visibilità del blocco su "0-980px". Si otterrà una versione mobile del blocco.
Così chi accede al sito da un PC vedrà la versione desktop e gli utenti mobili la versione mobile.
La visibilità del blocco (diversi valori dei parametri) è utile per poter regolare l'aspetto del blocco per un dispositivo specifico, selezionando la risoluzione, se necessario. Ad esempio, se alcuni blocchi non si vedono bene sui tablet o su determinati telefoni cellulari.
Se un blocco appare bene su desktop ma non altrettanto bene su mobile, si consiglia di impostare la visibilità del blocco a 980px o più. In questo modo, il blocco diventerà orientato al desktop e non apparirà sui dispositivi mobili.
È quindi necessario copiare questo blocco e ottimizzarlo per la visualizzazione su mobile, modificandone le impostazioni (ad esempio, cambiando l'immagine, la dimensione del carattere, ecc.) Impostare la visibilità del blocco su "0-980px". Si otterrà una versione mobile del blocco.
Così chi accede al sito da un PC vedrà la versione desktop e gli utenti mobili la versione mobile.
La visibilità del blocco (diversi valori dei parametri) è utile per poter regolare l'aspetto del blocco per un dispositivo specifico, selezionando la risoluzione, se necessario. Ad esempio, se alcuni blocchi non si vedono bene sui tablet o su determinati telefoni cellulari.
Non è necessario modificare l'impostazione della visibilità del blocco per tutti i blocchi. È possibile modificarla per quei blocchi in cui una foto non è ritagliata bene o se il blocco selezionato non è adatto alla versione mobile.
Esempio
Abbiamo una copertina che si presenta bene su desktop, con il testo allineato a sinistra e l'oggetto principale a destra. Ora, regoliamo la copertina in modo che risulti buona anche sui dispositivi mobili.
Come vediamo, la foto viene ritagliata su un telefono cellulare e non ha un bell'aspetto.
Impostare la visibilità del blocco su "> 980px". Ora gli utenti mobili non lo vedranno più.
Copiare il blocco.
Adattare il blocco per la versione mobile: modificare l'allineamento della foto e del testo.
Impostiamo la visibilità di questo blocco su "≤ 980px", in modo che non appaia sui dispositivi con schermi più larghi di 980px.
Fatto! Ora la copertina viene visualizzata in modo diverso sui vari dispositivi, 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
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
Impostazione dei padding per i dispositivi mobili
In qualsiasi blocco, aprire le impostazioni, fare clic sull'icona accanto all'opzione "Padding superiore" e "Padding inferiore" e impostare la spaziatura per il dispositivo mobile.
Impostazioni aggiuntive per i dispositivi mobili
In qualsiasi blocco, è possibile modificare la dimensione dei caratteri e l'interlinea per i dispositivi mobili e impostare separatamente gli angoli arrotondati per le immagini.
Modifica della dimensione dei caratteri e dell'interlinea per i dispositivi mobili
A tale scopo, fare clic sul pulsante "Impostazioni" del blocco e individuare la scheda "Tipografia". In questa scheda, fare clic sull'icona del computer accanto al campo. Apparirà un campo in cui è possibile specificare la dimensione del carattere per la versione mobile.
Lo stesso ordine di azioni viene applicato per modificare l'interlinea.
Lo stesso ordine di azioni viene applicato per modificare l'interlinea.
Modifica del raggio del bordo dell'immagine e del padding di copertura per i dispositivi mobili
È possibile impostare il proprio valore del raggio del bordo o del padding esterno per le copertine specifiche per i dispositivi mobili in tutti i blocchi delle categorie "Copertina" e "Immagine".
Per modificare il raggio o il padding, fare clic sul pulsante "Impostazioni" e individuare il campo corrispondente. Fare clic sull'icona del computer accanto al campo e digitare il nuovo valore nel nuovo campo.
Per modificare il raggio o il padding, fare clic sul pulsante "Impostazioni" e individuare il campo corrispondente. Fare clic sull'icona del computer accanto al campo e digitare il nuovo valore nel nuovo campo.
Visualizzazione della versione mobile dei blocchi nell'editor
Questa funzione è disponibile solo in modalità di test. Per accedervi, selezionare la casella "Opt-in per diventare beta-tester e provare le nuove funzioni prima che vengano rilasciate" nel proprio profilo.
Per modificare la versione mobile di un blocco, passare alla versione mobile nell'editor. Per farlo, fare clic sull'icona del telefono nel menu in alto e selezionare l'orientamento del dispositivo desiderato o la sua dimensione.
Per impostazione predefinita, sono disponibili 4 dimensioni di schermo: 360px e 480px per uno smartphone, 640px e 960px per un tablet.
Per selezionare un dispositivo mobile di dimensioni diverse, fare clic su "Dispositivi" nell'elenco. Nel sottomenu, selezionare il dispositivo desiderato. Tutti i dispositivi mobili e i tablet aggiornati sono già stati aggiunti all'elenco.
Dopo aver cambiato la modalità di visualizzazione del blocco nell'editor, fare clic sul pulsante "Impostazioni" del blocco. Ora è possibile configurare la versione mobile e le modifiche verranno visualizzate subito nell'anteprima.
Impostazione dell'adattività in Zero Block
È possibile regolare l'adattabilità del blocco per vari dispositivi, convertendolo in Zero Block tramite un'opzione nelle impostazioni del blocco. Questa opzione è attualmente disponibile nella maggior parte dei blocchi.
Una volta convertito il blocco, è possibile regolarne manualmente l'aspetto per cinque versioni di larghezza dello schermo. Per saperne di più sull'impostazione dell'adattabilità in Zero Block , consultate le sezioni "Zero Block: Come creare un blocco personalizzato" e "Zero Block: Design reattivo".
Disattivare l'adattività della pagina
Se si disattiva l'adattività, la pagina verrà visualizzata sui dispositivi mobili come su un computer. A tal fine, selezionare la casella di controllo Disattiva visualizzazione mobile in Impostazioni pagina → Aggiuntivo e ripubblicare la pagina.
La versione del sito web adattata ai dispositivi mobili è a sinistra, quella con l'adattabilità disattivata è a destra.
