I breakpoint sono intervalli di pixel che corrispondono alla larghezza di diversi dispositivi desktop, ad esempio tablet e dispositivi mobili. Quando la larghezza di un dispositivo si trova all'interno dell'intervallo di pixel predefinito di un breakpoint, il layout del sito viene regolato in modo che il contenuto e il design siano ottimizzati per le dimensioni e l'orientamento di tale dispositivo. Ad esempio, se sto visualizzando un sito da un computer desktop, posso visualizzare il menu completo del sito, ma quando lo visualizzo sul mio dispositivo mobile, vedrò invece un menu hamburger.
Di seguito sono riportati i punti di interruzione offerti nell'editor:
-
desktop (1025px-1399px). Questo è il punto di interruzione predefinito.
-
Ampio desktop (1400px e oltre). Questa opzione è disponibile solo in modalità flex nell'editor classico.
-
Tablet (768px-1024px)
-
Dispositivi mobili (767px e inferiori). È sempre consigliabile controllare le modifiche dei punti di interruzione per dispositivi mobili su un dispositivo mobile, anziché ridimensionare lo schermo di un desktop.
-
Orizzontale mobile (468px-767px). Questa opzione è disponibile solo in modalità flex nell'editor classico.
Se si apportano modifiche al design, al layout o al contenuto al punto di interruzione predefinito del desktop, le modifiche vengono applicate automaticamente agli altri punti di interruzione. Se modifichi il contenuto, ad esempio l'aggiunta di un widget, la modifica del testo o l'aggiunta o l'eliminazione di una sezione, la modifica viene applicata automaticamente a tutti gli altri punti di interruzione, indipendentemente dal punto di interruzione in cui è stata apportata la modifica. Ad esempio, se si aggiunge un widget al punto di interruzione del tablet, il widget verrà aggiunto anche a tutti gli altri punti di interruzione.
Tuttavia, se si apportano modifiche alla posizione o alle dimensioni di un elemento in punti di interruzione specifici, le modifiche non verranno applicate ad altri punti di interruzione. Ad esempio, se si modificano le dimensioni di un elemento nel punto di interruzione per dispositivi mobili, la modifica verrà applicata solo ai punti di interruzione per dispositivi mobili e orizzontali per dispositivi mobili e a nessun altro punto di interruzione.
Nota
Questo contenuto è rilevante sia per la modalità Flex nell'editor classico che nell'editor 2.0. Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
In alcuni casi è necessario eseguire l'override di un punto di interruzione. Ad esempio, sul punto di interruzione principale un'immagine si trova a destra di un paragrafo, ma sui dispositivi mobili è necessario che l'immagine sia in alto e il paragrafo in basso.
Di seguito sono riportate le modifiche che è possibile apportare a un elemento per sostituire il breakpoint principale:
-
Allineamento
-
Posizione
-
Dimensione
-
Spaziatura
Una volta sostituito un breakpoint, non è possibile invertire la modifica cambiando lo stile nel breakpoint principale dello stesso oggetto.
Nota
Questo contenuto è rilevante sia per la modalità Flex nell'editor classico che nell'editor 2.0. Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
Puoi nascondere determinati elementi in specifici breakpoint dal riquadro dei layer o dal menu mobile dell'elemento. Ad esempio, puoi nascondere un'immagine sui dispositivi mobili senza che ciò influisca sugli altri breakpoint.
Nota
Se nascondi un elemento che contiene altri elementi nidificati, anche tutti gli elementi nidificati verranno nascosti per quel breakpoint. Ad esempio, se nascondi una colonna flex, verranno nascosti anche i widget al suo interno.
Per nascondere un elemento in un dato breakpoint:
-
Passa al breakpoint nel quale intendi nascondere l'elemento cliccando la vista nella barra di navigazione superiore.
-
Fai clic sull'elemento da nascondere.
-
Fare clic sull'icona dei tre punti orizzontali (
) nel menu mobile e selezionare Nascondi in questo punto di interruzione. In alternativa, nel pannello dei livelli, fare clic su Nascondi in corrispondenza di questo punto di interruzione accanto all'elemento.
Nota
Queste informazioni sono specifiche dell'editor classico e non sono rilevanti per l'editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
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 il dispositivo. Fare clic con il pulsante destro del mouse sul widget, fare clic su copia, quindi fare clic su incolla.
-
Fare clic con il pulsante destro del mouse su una delle widget, selezionare Nascondi sul dispositivo, quindi selezionare il dispositivo in cui si desidera nascondere il widget. Ad esempio, l'impostazione di un pulsante su Nascondi su desktop rimuove il pulsante dal desktop, ma visualizza il pulsante nei tablet e nei siti per dispositivi mobili.
-
Fare clic sul contenuto originale e selezionare Nascondi sul dispositivo, quindi nascondere il contenuto sul dispositivo o sui dispositivi su cui non si desidera modificare questo contenuto. Ad esempio, se si imposta il pulsante di copia su Nascondi sul desktop, si imposterà il pulsante originale su Nascondi su tablet e Nascondi su dispositivo mobile. In questo modo, avrai due pulsanti diversi; Uno visualizzato sul desktop e uno diverso visualizzato su tablet e cellulare.
-
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.
I contenuti nascosti possono ancora essere visualizzati nel codice del sito pubblicato (dopo la pubblicazione/ripubblicazione). Questo è previsto e dovuto alla tecnologia utilizzata. Quando nascondi un widget, una sezione o qualsiasi contenuto nell'editor su un dispositivo specifico, lo nascondiamo utilizzando le Media Query CSS. Ciò significa che l'HTML (anche se nascosto sul sito web) esiste ancora all'interno della pagina web quando uno spettatore guarda il contenuto. Questo a volte può causare un problema in cui un tool di controllo che scansiona il sito Web identificherà questo contenuto nascosto, anche se pensavi che fosse stato rimosso dalla pagina.
I siti web reattivi funzionano su desktop, tablet e dispositivi mobili. Il nostro editor reattivo consente di visualizzare in anteprima ciascuna delle varie visuali del sito durante la modifica, per verificare l'aspetto che avrà sui diversi dispositivi prima di pubblicarlo, in modo che i tuoi clienti abbiano un'esperienza positiva indipendentemente dal dispositivo che usano per visualizzare il sito.
Per cambiare visuale, fai clic su uno dei pulsanti dei dispositivi nella barra di navigazione in alto:
Le diverse visuali dei dispositivi non sono versioni separate del sito, per cui l'eliminazione di un elemento in una visuale (es. mobile), rimuove quell'elemento da tutto il sito (desktop, tablet e mobile). Invece di eliminarlo, fai clic con il pulsante destro del mouse sull'elemento che ti interessa e seleziona l'opzione per nasconderlo su un dispositivo specifico.
Le anteprime dei dispositivi non rispecchiano sempre esattamente ciò che si vede su un dispositivo reale. Caratteristiche come caratteri, dimensioni della finestra del dispositivo, interfaccia utente e comportamento del browser possono rendere più o meno imprecise queste anteprime. Per una versione più accurata, visualizza il sito da un dispositivo in uso.
Nota
Queste informazioni sono specifiche dell'editor classico e non sono rilevanti per l'editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
Le modifiche apportate a un dispositivo vengono visualizzate su tutti i dispositivi. Ad esempio, quando una riga viene eliminata nella visualizzazione tablet del sito, la riga non sarà presente anche nelle visualizzazioni desktop e mobile del sito. Questo perché i contenuti possono essere condivisi su tutti i dispositivi. Tuttavia, è possibile distinguere i contenuti visualizzati su quali dispositivi. Puoi utilizzare le nostre funzionalità di modifica per dispositivo per raggiungere questo obiettivo e offrire ai tuoi visitatori contenuti appropriati per il dispositivo da cui accedono al tuo sito.
Quando si apportano modifiche a un dispositivo specifico, è spesso necessario cambiare visualizzazione. Per ulteriori informazioni, vedere Passare da una visualizzazione all'altra.
Molte impostazioni indicheranno quali dispositivi interessano. Ad esempio, un'impostazione potrebbe indicare che la modifica interessa desktop e tablet insieme a un'icona che rappresenta i 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 all'intestazione e al piè di pagina nella visualizzazione tablet non influiscono sulla visualizzazione desktop e mobile
Ogni altra modifica apportata nella visualizzazione di ciascun dispositivo influenzerà gli altri dispositivi.
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
A causa delle drastiche differenze nelle proporzioni tra i dispositivi, è importante prestare particolare attenzione al modo in cui si progettano le immagini nel sito web. Ad esempio, uno sfondo a pagina intera su una riga potrebbe sembrare fantastico su un dispositivo desktop, ma orribile su un dispositivo mobile. Ciò potrebbe essere dovuto al fatto che i dispositivi desktop sono più adatti a immagini di larghezza maggiore, mentre i dispositivi mobili sono l'esatto opposto. Puoi impostare uno sfondo della pagina diverso per dispositivo nelle impostazioni del tema del sito. Si consiglia di utilizzare un'immagine di sfondo ampia per desktop e una stretta per dispositivi mobili 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.
Immagini e widgeticone
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.
hover Effetti su cellulare o tablet
Rispetto ai dispositivi desktop, i tablet e i dispositivi mobili non hanno affatto un effetto hover. Qualsiasi layout o opzione hover è disabilitato su tablet/dispositivi mobili.
Widget Mappe
Il widget Mappa ha opzioni specifiche per il dispositivo per quando verrà visualizzato come pulsante o mappa.
Modulo di contatto widget
I moduli di contatto appariranno sempre un input per riga sui dispositivi mobili.
Widget vCita
Il widget di pianificazione online vCita ha un'opzione per mostrare solo un pulsante, sul dispositivo di tua scelta.
Nota
Queste informazioni sono specifiche dell'editor classico e non sono rilevanti per l'editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
A causa del rilascio di Apple per iPad (iPadOS), gli iPad visualizzano la stessa visualizzazione del desktop. Tuttavia, puoi passare al layout desktop-tablet reattivo per assicurarti che tutte le personalizzazioni siano visibili sui siti live.
Il layout reattivo mostra l'intestazione di navigazione superiore sui desktop più grandi e passa automaticamente all'intestazione con menu hamburger se le dimensioni dello schermo non superano i 1024 pixel. Volendo, il layout dello schermo più piccolo può essere personalizzato.
Nota
-
La maggior parte dei siti avrà automaticamente questa funzione abilitata e l'opzione indicata di seguito non sarà disponibile.
-
Alcuni siti offrono una funzionalità che può essere attivata ma non disattivata. In pratica, se l'attivi, non potrai più tornare indietro.
-
La visualizzazione per dispositivi mobili di un sito creato nell'editor classico, inclusa l'intestazione, è determinata dal dispositivo utilizzato, non dalle dimensioni di una finestra del browser. Di conseguenza, il ridimensionamento del browser desktop per simulare un viewport mobile non rappresenterà accuratamente l'aspetto del sito o dell'intestazione sui dispositivi mobili reali. Per vedere la vera presentazione mobile del sito, compresa l'intestazione, è meglio visualizzarli direttamente su un dispositivo mobile.
Per utilizzare layout del sito reattivi:
-
Nel pannello laterale dell'editor fare clic su Tema, quindi su Layout del sito.
-
In desktop fai clic sull'interruttore Layout reattivo. Sono disponibili le seguenti opzioni:
-
Seleziona un layout del sito per schermi con risoluzione maggiore di 1024 pixel.
-
Seleziona un layout del sito per schermi con risoluzione fino a 1024 pixel.
-
Dopo essere passato ai layout del sito adattabili, puoi passare da una visualizzazione all'altra nella barra di navigazione superiore per mostrare desktop grandi (superiori a 1024 px), desktoppiccole/tablet (1024 px e inferiori) e dispositivi mobili. Per ulteriori informazioni, vedere Passare da una visualizzazione all'altra.
Di seguito sono riportate ulteriori informazioni sul tablet reattivo:
-
Il CSS è lo stesso sia per i breakpoint di desktop grandi sia per desktop piccoli/tablet, per cui non vedrai un CSS apposito per i tablet.
-
Le transizioni sono più uniformi e non si basano sugli user agent.
-
In caso di elementi nascosti sul tuo sito, assicurati che siano visibili prima di attivare il Layout reattivo. Se hai attivato l'opzione mentre gli elementi erano nascosti, disattiva il Layout reattivo e rendi visibili gli elementi nascosti. Quindi puoi attivare il Layout reattivo e nascondere nuovamente gli elementi.
-
La sezione di personalizzazione non mostra più l'opzione per tablet. Selezionando desktop si interverrà anche sulla visualizzazione sui tablet.
-
Tieni presente che le seguenti personalizzazioni per tablet mostrano automaticamente il layout desktop e non richiedono modifiche:
-
Layout galleria fotografica
-
Regole di personalizzazione per i tablet
-
Animazioni
-