Punti di interruzione (chiamate anche dimensioni dello schermo) sono intervalli di pixel che corrispondono alla larghezza di diversi dispositivi, ad esempio desktop, tablet e dispositivi mobili. Quando la larghezza di un dispositivo rientra in un intervallo di pixel predefinito per i punti di interruzione, il layout del sito viene modificato in modo che il contenuto e il design siano ottimizzati per le dimensioni e l'orientamento del dispositivo. Ad esempio, se sto visualizzando un sito su un computer desktop, posso visualizzare il menu completo del sito, ma quando visualizzo il sito sul mio dispositivo mobile, vedo invece un menu a forma di hamburger
Suggerimento
Prendi la Duda Academy Dimensioni dello schermo per un design reattivo corso per conoscere le dimensioni dello schermo, come manipolare il layout e l'ordine in cui gli elementi vengono visualizzati nelle versioni tablet e mobile del sito.
Di seguito sono riportati i punti di interruzione offerti nell'editor:
-
Scrivania (1025 px-1299 px). Questo è il punto di interruzione predefinito.
-
Desktop ampio (1400 px e oltre). È disponibile solo in modalità flex in Classic Editor.
-
Tablet (768px-1024 px)
-
Cellulare (767 px e inferiori). Consigliamo sempre di controllare le modifiche ai punti di interruzione mobili su un dispositivo mobile, anziché ridimensionare lo schermo del
-
Paesaggio mobile (468px-767px). Questo è disponibile solo in modalità flex in Classic Editor.
Se lo fai design, layout o contenuto modifiche al punto di interruzione predefinito sul desktop, le modifiche vengono applicate automaticamente agli altri punti di interruzione. Se modificate il contenuto, ad esempio aggiungendo un widget, modificando il testo o aggiungendo o eliminando una sezione, la modifica si applica automaticamente a tutti gli altri punti di interruzione, indipendentemente dal punto di interruzione su cui è stata apportata la modifica. Ad esempio, se aggiungi un widget sul punto di interruzione del tablet, il widget verrà aggiunto anche su tutti gli altri
Tuttavia, se si apportano modifiche al posizione o taglia di un elemento su punti di interruzione specifici, le modifiche non si applicheranno ad altri punti di interruzione. Ad esempio, se modifichi la dimensione di un elemento sul punto di interruzione mobile, la modifica verrà applicata solo ai punti di interruzione mobili e mobili orizzontali e a nessun altro punto di interruzione
Nota
Questo contenuto è rilevante sia per la modalità Flex in Classic Editor che per Editor 2.0. Per identificare la versione attuale dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Ci sono momenti in cui è necessario sovrascrivere un punto di interruzione. Ad esempio, nel 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
Di seguito sono riportate le modifiche che è possibile apportare a un elemento e sovrascrivere il punto di interruzione principale:
-
Allineamento
-
Posizione
-
Taglia
-
Spaziatura
Una volta sovrascritto un punto di interruzione, non è possibile annullare la modifica modificando lo stile nel punto di interruzione principale sullo stesso oggetto.
Nota
Questo contenuto è rilevante sia per la modalità Flex in Classic Editor che per Editor 2.0. Per identificare la versione attuale dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Puoi nascondere determinati elementi su punti di interruzione specifici dal pannello dei livelli o dal menu mobile dell'elemento. Ad esempio, puoi nascondere un'immagine sui dispositivi mobili e ciò non influirà sugli altri punti di interruzione
Nota
Se nascondi un elemento che contiene altri elementi annidati, anche tutti gli elementi annidati verranno nascosti in quel punto di interruzione. Ad esempio, se nascondi una colonna flessibile, nasconderanno anche i widget all'
Per nascondere un elemento su un punto di interruzione specifico:
-
Passa al punto di interruzione in cui desideri nascondere l'elemento facendo clic sulla vista nella barra di navigazione in alto.
-
Fai clic sull'elemento che desideri nascondere.
-
Fai clic sull'icona con tre puntini orizzontali (
) nel menu mobile e seleziona Nascondi su questo punto di interruzione. Oppure, nel pannello dei livelli, fai clicNascondi su questo punto di interruzioneaccanto all'elemento.
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Quasi tutto nell'editor, ad eccezione dell'intestazione e del piè di pagina, può essere modificato per dispositivo rendendo il contenuto specifico per quel dispositivo.
Per modificare il contenuto per dispositivo:
-
Copia il contenuto che desideri sia specifico per il dispositivo. Fai clic con il pulsante destro del mouse sul widget, fai cliccopia, quindi fai clic suincolla.
-
Fai clic con il pulsante destro del mouse su uno dei widget, selezionaNascondi sul dispositivo, quindi seleziona il dispositivo in cui desideri nascondere il widget. Ad esempio, impostando un pulsante suNascondi sul desktoprimuove il pulsante dal desktop, ma lo visualizza nei siti per tablet e dispositivi mobili.
-
Fai clic sul contenuto originale e selezionaNascondi sul dispositivo, quindi nascondi il contenuto sui dispositivi su cui non desideri modificare questo contenuto. Ad esempio, se imposti il pulsante di copia suNascondi sul desktop, dovresti impostare il pulsante originale suNascondi su TableteNascondi su cellulare. In questo modo, avrai due pulsanti diversi; uno visualizzato sul desktop e uno diverso sul tablet e sul cellulare.
-
Se desideri che il contenuto sia diverso su tutti e tre i dispositivi, puoi copiarlo nuovamente (in modo da avere un totale di tre copie dello stesso contenuto) e visualizzare un pulsante diverso su ogni dispositivo.
-
Ora hai due (o tre) contenuti identici ma diversi, ciascuno visualizzato su un dispositivo diverso. Qualsiasi ulteriore modifica apportata a questo contenuto avrà effetto solo sul dispositivo su cui è impostato per la visualizzazione.
I contenuti nascosti possono ancora essere visualizzati nel codice del sito live (dopo la pubblicazione/ripubblicazione). Ciò è previsto e dovuto alla tecnologia utilizzata. Quando nascondi un widget, una sezione o qualsiasi contenuto nell'editor su un dispositivo specifico, lo nascondiamo utilizzando CSS Media Queries. Ciò significa che l'HTML (sebbene nascosto nel sito Web) esiste ancora all'interno della pagina Web quando uno spettatore ne guarda il contenuto. Questo a volte può causare un problema: uno strumento di controllo che analizza il sito Web identificherà questo contenuto nascosto, anche se pensavi che fosse stato rimosso dalla pagina
I siti web responsive funzionano su desktop, tablet e dispositivi mobili. Per questo motivo, il nostro editor reattivo ti consente di visualizzare in anteprima il sito in ciascuna di queste visualizzazioni durante la modifica. Ciò ti consente di verificare l'aspetto del tuo sito su diversi dispositivi prima della pubblicazione, assicurando che i tuoi clienti abbiano un'esperienza positiva indipendentemente dal dispositivo utilizzato per visualizzare il sito.
Per cambiare visualizzazione del dispositivo, fai clic su uno dei pulsanti del dispositivo nella barra di navigazione in alto:
Le diverse visualizzazioni dei dispositivi non sono versioni separate del tuo sito. L'eliminazione di un elemento in una visualizzazione (ad esempio, mobile), rimuove tale elemento dall'intero sito (desktop, tablet e dispositivi mobili). Invece di eliminarlo, fai clic con il pulsante destro del mouse sull'elemento e seleziona per nascondere un elemento su un dispositivo specifico
Le anteprime dei dispositivi non sempre riflettono esattamente ciò che si vede su un dispositivo reale. Caratteristiche come i caratteri, le dimensioni della finestra del dispositivo, l'interfaccia utente e il comportamento del browser possono rendere queste anteprime imprecise in vari gradi. Per la versione più accurata del sito, controllate su un dispositivo reale
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo 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, potresti voler differenziare quali contenuti vengono visualizzati su quali dispositivi. A tale scopo, puoi utilizzare le nostre funzionalità di modifica in base al dispositivo 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, vedereCambia visualizzazione.
Molte impostazioni indicheranno quali dispositivi sono interessati. Ad esempio, un'impostazione potrebbe indicare che la modifica influisce su desktop e tablet insieme a un'icona che rappresenta i dispositivi.
Ci sono diverse modifiche nell'editor che possono essere modificate senza influire sui dispositivi mobili. Queste sono:
-
Spaziatura (margini e spaziatura interna)
-
Posizionamento
-
larghezza
-
Altezza
-
Sfondo del sito/pagina
-
Dimensione del carattere (non influirà sul testo che è stato modificato in precedenza su dispositivi mobili)
-
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 influirà sugli altri dispositivi.
Sebbene alcuni widget funzionino correttamente su tutti i dispositivi, ci sono alcune differenze drastiche tra i dispositivi, il che rende necessario un diverso set di funzionalità o preferenze di progettazione per dispositivo.
Di seguito è riportato un elenco di widget con suggerimenti di progettazione e note per personalizzare determinati widget su 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 avere un aspetto 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 contrario. 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 il desktop e una stretta per dispositivi mobili o tablet.
Widget Slider
Come per l'immagine di sfondo, le immagini selezionate per la versione desktop del widget slider potrebbero non essere altrettanto perfette per tablet o desktop. Si consiglia di:
-
Regola le dimensioni della cornice per adattare il cursore al cellulare, oppure
-
Nascondi il cursore sul desktop e crea invece una versione specifica per dispositivi mobili.
Widget di immagini e icone
Le dimensioni del widget immagine non vengono regolate automaticamente nella versione mobile. È importante controllare i dispositivi mobili su cui viene utilizzato il widget di immagine per apportare le modifiche necessarie per adattarlo
Effetti al passaggio del mouse su cellulare o tablet
Rispetto ai dispositivi desktop, tablet e dispositivi mobili non hanno affatto un effetto hover. Qualsiasi layout o opzione al passaggio del mouse è disabilitato su tablet/dispositivi
Widget Mappe
Il widget Mappa ha opzioni specifiche del dispositivo per quando verrà visualizzato come pulsante o mappa.
Widget del modulo di contatto
I moduli di contatto appariranno sempre un input per riga sui dispositivi mobili.
Widget vcita
Il widget di pianificazione online di vcita ha un'opzione per mostrare solo un pulsante, sul dispositivo di tua scelta.
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
A causa diVersione di Apple per iPad (iPadOS), gli iPad hanno la stessa visualizzazione del desktop. Tuttavia, puoi passare al layout responsive desktop-tablet per assicurarti che tutte le personalizzazioni siano visibili
layout reattivo mostra l'intestazione di navigazione superiore sui desktop più grandi e passa automaticamente all'intestazione del menu a forma di hamburger quando la dimensione dello schermo è pari o inferiore a 1024 px. Il layout dello schermo piccolo può essere
Nota
-
La maggior parte dei siti avrà questa funzione abilitata automaticamente e l'interruttore indicato di seguito non sarà disponibile.
-
Per i siti in cui questa opzione non è stata attivata, una volta attivata, l'opzione per disattivarla verrà rimossa.
-
La visualizzazione mobile 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 una visualizzazione mobile non rappresenterà con precisione l'aspetto del sito o dell'intestazione sui dispositivi mobili effettivi. Per vedere la vera presentazione mobile del sito, inclusa l'intestazione, è meglio visualizzarli
Per utilizzare layout di sito reattivi:
-
Fare clic Layout del sito.
-
In Desktop, fai clic suLayout reattivoattiva/disattiva. Sono disponibili le seguenti opzioni:
-
Seleziona un layout del sito superiore a 1024 px.
-
Seleziona un layout del sito per 1024 px e inferiore.
-
Dopo essere passati ai layout responsive del sito, puoi cambiare visualizzazione nella barra di navigazione in alto per mostrare Desktop grande (sopra 1024 px), Desktop/Tablet piccolo (1024 px e sotto) e Mobile.Cambia visualizzazione.
Di seguito sono riportate ulteriori informazioni sul tablet reattivo:
-
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 layout reattivo. Per risolvere il problema, disattiva il Responsive Layout e mostra tutti gli elementi nascosti. Quindi puoi attivare Responsive Layout e nascondere nuovamente tutti gli elementi nascosti
-
La personalizzazione non mostra più un dispositivo tablet. La selezione del desktop influisce anche sulle visualizzazioni dei tablet
-
Nota che le seguenti personalizzazioni dei tablet visualizzano automaticamente il layout del desktop e non è necessario personalizzarle:
-
Layout della galleria fotografica
-
Regole di personalizzazione dei tablet
-
Animazioni
-