Adattamento della versione mobile di un sito web
Come configurare ulteriormente la visualizzazione della pagina su diversi dispositivi
Tilda adatta automaticamente i siti web ai diversi dispositivi: smartphone, tablet, laptop e computer fissi. Se necessario, puoi configurare in modo flessibile la versione mobile dei blocchi standard oppure creare la tua versione responsive del sito web utilizzando Zero Block.

Leggi questa guida dettagliata per scoprire come configurare la versione mobile di un sito web su Tilda.
Di più
Di più
Di più
Di più
Di più
Di più
Di più
Modalità di modifica della versione mobile
Dopo aver aggiunto e configurato i blocchi standard, è possibile modificare anche la loro versione mobile. Per farlo, clicca sull’icona del dispositivo mobile al centro del pannello di modifica della pagina.

Nel menu a tendina, seleziona la dimensione dello schermo desiderata. Se devi verificare come appare la pagina su un dispositivo specifico, selezionalo oppure scegli l’opzione più simile nella sezione “Dispositivi”.
L'editor passerà alla modalità mobile, facilitando la modifica dei blocchi.
Importante: la visualizzazione a blocchi nell'editor non costituisce un'anteprima completa del sito web progettato. In questa modalità, le animazioni non funzionano e alcuni blocchi potrebbero essere visualizzati in modo diverso rispetto a come appariranno nella pagina pubblicata. Per vedere come apparirà il sito web dopo la pubblicazione, clicca su Anteprima.
Modalità anteprima
In modalità anteprima, clicca sull'icona del dispositivo mobile e seleziona le dimensioni dello schermo desiderate.
Importante: non è possibile modificare le impostazioni del blocco in modalità anteprima. Questa modalità serve solo a verificare come viene visualizzata la pagina.
Per nascondere l'interfaccia dell'editor, clicca sull'icona con le frecce nell'angolo in basso a sinistra o accanto alla voce "Torna alla modifica".
Per modificare la scala dell'anteprima, clicca sull'icona 100% e seleziona il valore desiderato dal menu a tendina.
Clicca sull'icona a forma di matita per tornare all'editor e apportare modifiche ai blocchi.
Modifica delle impostazioni dei blocchi per la versione mobile
Ogni blocco dispone di impostazioni separate relative alla spaziatura e alla tipografia per la versione mobile. A seconda del blocco, potrebbero essere disponibili anche impostazioni aggiuntive per singoli elementi sui dispositivi mobili. Queste impostazioni sono solitamente contrassegnate da suggerimenti nel pannello delle impostazioni.

Ad esempio, un blocco menu potrebbe avere una scheda delle impostazioni dedicata a questo scopo.
Nei blocchi di copertina, le impostazioni della versione mobile possono essere contrassegnate da un'icona a forma di telefono.
Per aprire le impostazioni specifiche per un dispositivo mobile, clicca sull'icona del desktop accanto al campo desiderato. Apparirà un campo aggiuntivo con l'icona di uno smartphone.
Modifica della dimensione dei caratteri e dell'interlinea per i dispositivi mobili. Nelle impostazioni del blocco, apri la sezione "Tipografia", clicca sull'icona del desktop e inserisci la dimensione dei caratteri per la versione mobile nel campo contrassegnato dall'icona del dispositivo mobile.

L'interlinea si configura allo stesso modo.
Modifica del raggio degli angoli e del margine delle immagini di copertina sui dispositivi mobili. È possibile impostare un valore separato per il raggio degli angoli o il margine per i dispositivi mobili nei blocchi delle categorie “Copertina” e “Immagine”.

Per modificare il raggio o il margine, fare clic su “Impostazioni” e individuare il campo desiderato. Quindi fare clic sull’icona del desktop accanto al campo e inserire il valore per la versione mobile.
Modifica della posizione dell'immagine di sfondo. Nei blocchi di copertina e in altri blocchi in cui è disponibile questa impostazione, è possibile selezionare la parte dell'immagine che verrà visualizzata nel blocco.

Per impostare la posizione automatica, selezionare il valore appropriato dal menu a tendina, ad esempio "Al centro".
Per impostare manualmente la posizione, clicca sull'icona accanto al campo.
Si aprirà l'immagine con i punti di posizionamento. È possibile selezionare uno dei punti già disponibili oppure inserire un proprio punto dove necessario.
Il posizionamento consente di regolare la visualizzazione dell'immagine di sfondo nella versione mobile, in modo che la stessa immagine risulti ben visibile su schermi di diverse dimensioni.
Configurazione del padding per i dispositivi mobili
In qualsiasi blocco, apri le impostazioni, fai clic sull'icona accanto ai campi "Rientro superiore" o "Rientro inferiore" e inserisci il valore relativo al dispositivo mobile.
Campo di visibilità su diversi dispositivi
Se desideri che determinati blocchi vengano visualizzati sugli smartphone e sui computer desktop, configura l'intervallo di visibilità.

Apri le impostazioni del blocco e scorri verso il basso fino all'opzione "Visibilità del blocco sui dispositivi". Specifica su quali dispositivi deve essere visualizzato il blocco. Quindi salva le impostazioni e ripubblica la pagina.
Configurazione del responsive design in Zero Block
È possibile configurare la reattività dei blocchi per diversi dispositivi convertendo il blocco in " Zero Block " tramite l'opzione presente nelle impostazioni del blocco. Questa opzione è attualmente disponibile nella maggior parte dei blocchi.
Una volta convertito un blocco in un “ Zero Block ”, il contenuto e il design torneranno alle impostazioni predefinite. Sarà necessario aggiungere nuovamente testo e immagini al blocco.
Dopo la conversione, potrai configurare manualmente l'aspetto del blocco in cinque fasce di larghezza dello schermo oppure aggiungere fasce personalizzate. Per ulteriori informazioni sulla configurazione del design reattivo in “ Zero Block ”, consulta gli articoli “Zero Block: Come creare un blocco personalizzato ” e “Zero Block: Design reattivo ”.
Disattivazione della reattività della pagina
Se disattivi la versione responsive, la pagina per i dispositivi mobili avrà lo stesso aspetto di quella per i computer desktop.

Per disattivare la versione responsive, vai su Impostazioni pagina → Ulteriori, seleziona la casella di controllo Disattiva visualizzazione mobile e ripubblica la pagina.
Realizzato su
Tilda