Dimensioni dello schermo e dispositivi

I breakpoint (chiamati anche dimensioni dello schermo) sono intervalli di pixel che corrispondono alla larghezza dei diversi dispositivi, come desktop, tablet e mobile. Quando la larghezza di un dispositivo rientra nell'intervallo di pixel di un breakpoint, il layout del sito si adatta per ottimizzare contenuti e design per quella dimensione e orientamento. Ad esempio, su un computer desktop vedi il menu completo del sito, mentre su un dispositivo mobile vedi invece un menu hamburger.

Ecco i breakpoint offerti dall'editor:

• Desktop (1025px-1399px). È il breakpoint predefinito.
• Wide desktop (1400px e oltre). Disponibile solo in flex mode nell'Editor classico.
• Tablet (768px-1024px)
• Mobile (767px e inferiori). Ti consigliamo sempre di controllare le modifiche al breakpoint mobile su un dispositivo mobile reale, invece di ridimensionare lo schermo del desktop.
• Mobile landscape (468px-767px). Disponibile solo in flex mode nell'Editor classico.

Se apporti modifiche di design, layout o contenuto al breakpoint desktop predefinito, le modifiche vengono applicate automaticamente agli altri breakpoint. Se cambi un contenuto, ad esempio aggiungendo un widget, modificando del testo o aggiungendo o eliminando una sezione, la modifica si applica automaticamente a tutti gli altri breakpoint, indipendentemente dal breakpoint su cui l'hai fatta. Ad esempio, se aggiungi un widget sul breakpoint tablet, il widget viene aggiunto anche su tutti gli altri breakpoint.

Se invece modifichi la posizione o la dimensione di un elemento su breakpoint specifici, le modifiche non si applicano agli altri breakpoint. Ad esempio, se cambi la dimensione di un elemento sul breakpoint mobile, la modifica vale solo per i breakpoint mobile e mobile landscape e per nessun altro.

Sostituzioni per dimensione dello schermo (Flex Mode ed Editor 2.0)

Nota: questo contenuto vale sia per la Flex mode nell'Editor classico sia per Editor 2.0.

A volte è necessario sovrascrivere un breakpoint. Ad esempio, sul breakpoint principale un'immagine è alla destra di un paragrafo, ma su mobile ti serve l'immagine sopra e il paragrafo sotto.

Ecco le modifiche che puoi apportare a un elemento per sovrascrivere il breakpoint principale:

• Allineamento
• Posizione
• Dimensione
• Spaziatura

Una volta sovrascritto un breakpoint, non puoi annullare la modifica cambiando lo stile nel breakpoint principale sullo stesso oggetto.

Nascondere un elemento su una determinata dimensione dello schermo (Flex Mode ed Editor 2.0)

Nota: questo contenuto vale sia per la Flex mode nell'Editor classico sia per Editor 2.0.

Puoi nascondere determinati elementi su breakpoint specifici dal layers panel o dal menu fluttuante dell'elemento. Ad esempio, puoi nascondere un'immagine sui dispositivi mobili senza che questo influisca sugli altri breakpoint.

Nota: se nascondi un elemento che ne contiene altri annidati, anche tutti gli elementi annidati vengono nascosti su quel breakpoint. Ad esempio, se nascondi una colonna flex, nascondi anche i widget al suo interno.

Per nascondere un elemento su un breakpoint specifico:

1. Passa al breakpoint su cui vuoi nascondere l'elemento cliccando la vista nella barra di navigazione in alto.
2. Clicca sull'elemento che vuoi nascondere.
3. Clicca sull'icona dei tre puntini orizzontali nel menu fluttuante e seleziona Nascondi su questo breakpoint. In alternativa, nel layers panel clicca su Nascondi su questo breakpoint accanto all'elemento.

Nascondere un elemento su una determinata dimensione dello schermo (Editor classico)

Quasi tutto nell'editor, tranne l'header e il footer, può essere modificato per singolo dispositivo rendendo il contenuto specifico per quel dispositivo.

Per modificare i contenuti per dispositivo:

1. Copia il contenuto che vuoi rendere specifico per un dispositivo. Fai clic con il tasto destro sul widget, clicca su copia, poi clicca su incolla.
2. Fai clic con il tasto destro su uno dei widget, seleziona l'opzione per nascondere in base al dispositivo, poi seleziona il dispositivo su cui vuoi nascondere il widget. Ad esempio, nascondendo un pulsante sul desktop, il pulsante viene rimosso dal desktop ma resta visibile sui siti tablet e mobile.
3. Clicca sul contenuto originale e seleziona l'opzione per nascondere in base al dispositivo, poi nascondi il contenuto sui dispositivi su cui non vuoi modificarlo. Ad esempio, se nascondi il pulsante copiato sul desktop, imposti il pulsante originale su Nascondi sul tablet e Nascondi sul mobile. Così avrai due pulsanti diversi: uno mostrato sul desktop e un altro mostrato su tablet e mobile.
4. Se vuoi che il contenuto sia diverso su tutti e tre i dispositivi, puoi copiarlo di nuovo (così avrai tre copie dello stesso contenuto) e mostrare un pulsante diverso su ciascun dispositivo.
5. Ora hai due (o tre) contenuti identici ma distinti, ciascuno mostrato su un dispositivo diverso. Qualsiasi altra modifica a questo contenuto influirà solo sul dispositivo su cui è impostato per essere mostrato.

I contenuti nascosti possono comunque comparire nel codice del sito pubblicato (dopo la pubblicazione o ripubblicazione). È un comportamento previsto, dovuto alla tecnologia usata. Quando nascondi un widget, una sezione o un contenuto qualsiasi nell'editor su un dispositivo specifico, viene nascosto tramite le CSS Media Queries. Questo significa che l'HTML (anche se nascosto sul sito) esiste ancora all'interno della pagina web quando qualcuno ne osserva il contenuto. A volte questo può creare un problema, perché uno strumento di audit che analizza il sito può individuare questo contenuto nascosto, anche se pensavi di averlo rimosso dalla pagina.

Passare da una vista dispositivo all'altra

I siti responsive funzionano su desktop, tablet e mobile. Per questo l'editor responsive ti permette di vedere l'anteprima del sito in ciascuna di queste viste mentre lavori. Così puoi controllare come appare il tuo sito sui diversi dispositivi prima di pubblicarlo, garantendo un'esperienza positiva ai tuoi clienti su qualsiasi dispositivo.

Per cambiare vista dispositivo, clicca su uno dei pulsanti dei dispositivi nella barra di navigazione in alto.

Le diverse viste dispositivo non sono versioni separate del tuo sito. Se elimini un elemento in una vista (ad esempio mobile), lo rimuovi dall'intero sito (desktop, tablet e mobile). Invece di eliminarlo, fai clic con il tasto destro sull'elemento e scegli di nasconderlo su un dispositivo specifico.

Le anteprime dei dispositivi non riflettono sempre esattamente ciò che vedi su un dispositivo reale. Fattori come i font, la dimensione della finestra del dispositivo, l'interfaccia e il comportamento del browser possono rendere queste anteprime più o meno imprecise. Per la versione più fedele del sito, controlla su un dispositivo reale.

Modificare per dispositivo (Editor classico)

Le modifiche fatte su un dispositivo compaiono su tutti i dispositivi. Ad esempio, quando elimini una riga nella vista tablet del tuo sito, la riga sparisce anche dalle viste desktop e mobile. Questo perché i contenuti possono essere condivisi tra tutti i dispositivi. Tuttavia, potresti voler differenziare quali contenuti compaiono su quali dispositivi. Puoi usare le funzioni di modifica per dispositivo per farlo e offrire ai visitatori contenuti adatti al dispositivo da cui accedono al tuo sito.

Quando modifichi un dispositivo specifico, spesso è necessario cambiare vista. Per maggiori informazioni, vedi sopra Passare da una vista dispositivo all'altra.

Modifiche che non influiscono sugli altri dispositivi

Molte impostazioni indicano quali dispositivi interessano. Ad esempio, un'impostazione può indicare Change affects desktop and tablet, insieme a un'icona che rappresenta i dispositivi.

Ci sono diverse modifiche nell'editor che puoi fare senza influire su mobile. Sono:

• Spaziatura (margini e padding)
• Posizionamento
• Larghezza
• Altezza
• Sfondo del sito o della pagina
• Dimensione del font (non influisce sul testo già modificato in mobile)
• Le modifiche a header e footer nella vista tablet non influiscono sulle viste desktop e mobile

Qualsiasi altra modifica fatta in ciascuna vista dispositivo influirà sugli altri dispositivi.

Modifiche specifiche per widget

Alcuni widget funzionano bene su tutti i dispositivi, ma tra un dispositivo e l'altro ci sono differenze notevoli che rendono necessario un diverso insieme di funzioni o preferenze di design per ogni dispositivo.

Di seguito trovi un elenco di widget con suggerimenti di design e note per adattare determinati widget a determinati dispositivi.

Immagini di sfondo

Per via delle grandi differenze nelle proporzioni tra i dispositivi, è importante fare attenzione a come progetti le immagini del tuo sito. Ad esempio, uno sfondo a piena pagina su una riga può risultare ottimo su desktop ma pessimo su mobile. Questo perché i dispositivi desktop sono più adatti a immagini di larghezza maggiore, mentre per mobile vale l'esatto contrario. Puoi impostare uno sfondo di pagina diverso per ogni dispositivo nelle impostazioni del tema del sito. Ti consigliamo di usare un'immagine di sfondo larga per il desktop e una stretta per mobile o tablet.

Widget Slider

Come per l'immagine di sfondo, le immagini che hai scelto per la versione desktop del widget Slider potrebbero non risultare altrettanto belle su tablet o desktop. Ti consigliamo di:

• adattare la dimensione della cornice dello slider perché stia bene su mobile, oppure
• nascondere lo slider su desktop e crearne una versione specifica per mobile.

Widget Immagine e icona

La dimensione del widget immagine non si adatta automaticamente nella versione mobile. È importante controllare i tuoi dispositivi mobili dove usi il widget immagine per fare gli aggiustamenti necessari.

Effetti hover su dispositivi mobili o tablet

A differenza dei desktop, i dispositivi tablet e mobili non hanno alcun effetto hover. Qualsiasi layout o opzione hover è disattivato sui dispositivi tablet e mobili.

Widget Mappa

Il widget Mappa ha opzioni specifiche per dispositivo per scegliere se mostrarsi come pulsante o come mappa.

Widget Modulo di contatto

Sui dispositivi mobili i moduli di contatto mostrano sempre un campo per riga.

Widget vcita

Il widget di prenotazione online vcita ha un'opzione per mostrare solo un pulsante, sul dispositivo che scegli tu.

Tablet responsive (Editor classico)

Per via del rilascio di Apple per gli iPad (iPadOS), gli iPad mostrano la stessa vista del desktop. Tuttavia, puoi passare al layout Responsive desktop-tablet per assicurarti che tutte le personalizzazioni siano visibili sui siti pubblicati.

Il layout responsive mostra l'header di navigazione in alto sui desktop più grandi e passa automaticamente all'header con menu hamburger quando lo schermo è di 1024px o meno. Se serve, il layout per schermi piccoli può essere personalizzato.

Nota:

• La maggior parte dei siti avrà questa funzione già attiva e l'opzione indicata sotto non sarà disponibile.
• Per i siti su cui non è stata attivata, una volta attivata, l'opzione per disattivarla sarà rimossa.
• La vista mobile di un sito creato nell'Editor classico, header compreso, dipende dal dispositivo usato, non dalla dimensione della finestra del browser. Di conseguenza, ridimensionare il browser desktop per simulare un viewport mobile non rappresenta fedelmente l'aspetto del sito o dell'header sui dispositivi mobili reali. Per vedere la vera resa mobile del sito, header compreso, è meglio guardarli direttamente su un dispositivo mobile.

Per usare i layout responsive del sito:

1. Nel pannello laterale, clicca su Theme.
2. Clicca su Site Layout.
3. Sotto Desktop, clicca sull'opzione Responsive Layout. Hai a disposizione queste opzioni:
   • Seleziona un layout del sito per larghezze superiori a 1024 px.
   • Seleziona un layout del sito per 1024px e inferiori.

Dopo essere passato ai layout responsive del sito, puoi cambiare vista nella barra di navigazione in alto per mostrare Large Desktop (oltre 1024px), Small Desktop/Tablet (1024px e inferiori) e Mobile. Per maggiori informazioni, vedi sopra Passare da una vista dispositivo all'altra.

Note importanti sul tablet responsive

Ecco alcune informazioni aggiuntive sul tablet responsive:

• Il CSS è lo stesso per i breakpoint Large Desktop e Small Desktop/Tablet, e non vedrai un CSS per Tablet.
• Le transizioni sono più fluide e non si basano sugli User Agent.
• Se hai elementi nascosti sul tuo sito, assicurati che siano visibili prima di attivare il Responsive Layout. Per farlo, disattiva il Responsive Layout, mostra tutti gli elementi nascosti, poi attiva il Responsive Layout e nascondi di nuovo gli elementi che vuoi.
• La personalizzazione non mostra più un dispositivo tablet. Selezionando desktop influisci anche sulle viste tablet.
• Nota che le seguenti personalizzazioni per tablet mostrano automaticamente il layout desktop e non è necessario personalizzarle:
  • Layout della galleria fotografica
  • Regole di personalizzazione per tablet
  • Animazioni