Le modifiche apportate su un dispositivo si rifletteranno su tutti gli altri. Ad esempio, quando elimini una riga dalla visualizzazione per tablet del sito, questa sarà rimossa anche dalle visualizzazioni per desktop e dispositivi mobili. Il sito è infatti reattivo, ossia condivide il contenuto tra tutti i dispositivi. Tuttavia, è possibile differenziare i contenuti visualizzati su ciascun dispositivo. Per farlo, utilizza le funzioni di modifica per dispositivo, con cui proporre ai visitatori contenuti adatti al dispositivo utilizzato per accedere al sito.
Quando apporti modifiche a un dispositivo specifico, spesso è necessario cambiare le visualizzazioni. Per maggiori informazioni, vedi Cambiare le visualizzazioni.
Visualizzare le barre delle informazioni
Alcuni e funzioni potrebbero apparire solo su determinati dispositivi. Per cambiare lo stile di un su un determinato dispositivo, fai clic sulla visualizzazione dei dispositivi nella parte alta della barra di navigazione per passare alla visualizzazione di quel dispositivo e poi apporta le modifiche.
Funzione Nascondi su dispositivo
Quasi ogni elemento nell'editor, fatta eccezione per intestazioni e piè di pagina, può essere modificato in base al dispositivo rendendo i contenuti specifici per tale dispositivo.
Per modificare contenuti in base al dispositivo:
- Copia il contenuto che desideri sia specifico per un dispositivo. Fai clic con il tasto destro del mouse sul , fai clic su Copia, quindi su Incolla.
- Fai clic con il tasto destro del mouse su uno dei , seleziona Nascondi su dispositivo, quindi seleziona il dispositivo per il quale desideri nascondere il . Ad esempio, se imposti un pulsante su Nascondi su desktop, l'elemento viene rimosso dalla versione desktop ma non dalle visualizzazioni del sito su tablet e mobile.
- Fai clic sul contenuto originale e seleziona Nascondi su dispositivo, quindi nascondi il contenuto sui dispositivi per i quali non desideri modificare questo contenuto. Ad esempio, se imposti la copia del pulsante su Nascondi su desktop, dovrai impostare il pulsante originale su Nascondi su tablet e Nascondi su dispositivi mobili. In questo modo avrai due pulsanti diversi: uno visualizzato su desktop e uno diverso visualizzato su tablet e dispositivi mobili.
- Se il contenuto deve essere diverso su tutti e tre i dispositivi, è possibile copiarlo di nuovo (per un totale di tre copie dello stesso contenuto) e visualizzare un pulsante diverso su ciascun dispositivo.
- Adesso hai un totale di due (o tre) contenuti identici ma diversi, ciascuno dei quali viene visualizzato su un certo dispositivo. Ogni altra modifica apportata a questo contenuto riguarderà solo il dispositivo per il quale è impostata la visualizzazione.
Modifiche che non interessano altri dispositivi
Esistono svariate modifiche che puoi apportare nell'editor e che non interessano i dispositivi mobili. Ovvero:
- Spaziatura (margini e spaziatura interna)
- Posizione
- Larghezza
- Altezza
- Sfondo del sito o della pagina
- Dimensione del font (non interesserà il testo precedentemente modificato su mobile)
- Le modifiche apportate all'intestazione e al piè di pagina nella visualizzazione tablet non influiscono sulle visualizzazioni desktop e mobile
Ogni altra modifica che fai nella visualizzazione di ciascun dispositivo avrà un impatto anche sugli altri.
Oltre a quelle elencate sopra, esistono altre modifiche alle impostazioni che non interessano gli altri dispositivi, indicate nell'editor con un'icona Le modifiche interessano solo questo dispositivo.
Modifiche specifiche per widget
Sebbene alcuni widget funzionino correttamente su tutti i dispositivi, ne esistono altri che presentano notevoli differenze tra un dispositivo e l'altro e che richiedono caratteristiche o preferenze di design diverse in base al dispositivo.
Ecco un elenco di widget corredato da suggerimenti e note sulla personalizzazione per determinati dispositivi.
Immagini di sfondo
Per via delle notevoli differenze di proporzioni tra dispositivi, è importante non trascurare il design delle immagini sul sito.
Ad esempio, uno sfondo a pagina intera su una riga potrebbe fare un bellissimo effetto su desktop, ma non altrettanto su un dispositivo mobile. La ragione potrebbe essere che i dispositivi desktop sono più adatti alle immagini di grandi dimensioni, mentre per i dispositivi mobili vale l'esatto contrario.
Puoi impostare sfondi pagina diversi in base al dispositivo dalle impostazioni generali del tema del sito. È consigliabile usare un'immagine di sfondo ampia per i desktop e una stretta per mobile o tablet.
Widget Slider
Come per le immagini di sfondo, le immagini che selezioni per la versione desktop del widget Slider potrebbero non fare lo stesso effetto su tablet o mobile. È quindi consigliabile:
- Regolare le dimensioni della cornice dello slider per adattarlo al dispositivo mobile oppure
- Nascondere lo slider su desktop e crearne una versione specifica per mobile.
Widget Immagini e Icone
Le dimensioni del widget Immagine non vengono regolate in automatico nella versione per dispositivi mobili. È importante verificare il widget sui propri dispositivi mobili per regolarlo correttamente.
Effetti hover su tablet e dispositivi mobili
Rispetto ai desktop, tablet e dispositivi mobili non presentano un effetto hover. Eventuali opzioni o layout di hover sono disattivati su tablet e dispositivi mobili.
Widget Mappe
Il widget Mappa dispone di opzioni specifiche se visualizzato come pulsante o mappa.
Widget Moduli di contatto
I moduli di contatto conterranno sempre un'informazione per riga sui dispositivi mobili.
Widget vCita
Il widget di programmazione online vCita presenta un'opzione per mostrare solo un pulsante su un dispositivo a scelta.
Considerazioni
Quando si modificano i widget specifici per dispositivo, è importante controllare tutte le visualizzazioni prima di pubblicare il sito web. L'opzione "Nascondi su dispositivo", infatti, spesso comporta errori nel posizionamento dei widget.
Per maggiori informazioni sul passaggio da una visualizzazione a un'altra, leggi questo articolo.