Editor Studio: risolvere i problemi relativi alle differenze tra l'Editor e il sito online
In questo articolo:
- Abbina le dimensioni del punto di interruzione e del viewport
- Allinea le unità di margine
- Allinea i comportamenti responsivi
- Controlla la visibilità dell'elemento
Quando visualizzi la versione pubblicata di un sito Editor Studio, potresti notare che ha un aspetto diverso rispetto al tuo Editor. Queste differenze sono generalmente minime, ma possono far sì che gli elementi sembrino disallineati o tagliati.
In genere, queste differenze sono causate da alcune impostazioni dell'elemento (dimensioni, posizione e comportamenti) nei viewport. Usa i suggerimenti in questo articolo per trovare potenziali soluzioni e mantenere coerenza tra le dimensioni degli schermi.
Hai modificato il sito di recente?
Ti consigliamo di controllare di aver pubblicato tutte le modifiche e di visualizzare l'ultima versione del sito. Puoi anche utilizzare gli
strumenti del browser per controllare diversi viewport da un singolo dispositivo.
Abbina le dimensioni del punto di interruzione e del viewport
Se il sito online ha un aspetto diverso da come lo vedi nell'Editor, potrebbe essere correlato ai punti di interruzione e alle dimensioni di modifica.
I
punti di interruzione sono intervalli di dimensioni dello schermo che utilizzi per progettare un sito per dispositivi diversi (es. viewport). Puoi
impostare una dimensione di modifica specifica all'interno di questo intervallo. Ad esempio con un punto di interruzione 320-750 px, puoi impostare la dimensione di modifica su 500 px.
I viewport che non rientrano negli intervalli definiti non sono ottimizzati e potrebbero presentare problemi di allineamento e layout. Se noti un problema con un viewport specifico, ti consigliamo di impostare la dimensione di modifica in modo che corrisponda e di apportare modifiche.
Per impostare le dimensioni di modifica:
- Vai alla pagina e al punto di interruzione pertinenti nell'Editor
- Clicca sulla dimensione di modifica corrente in alto
- Inserisci il nuovo valore accanto a Dimensione di modifica
- Clicca su Ok
- (Facoltativo) Modifica il sito in modo che appaia come desideri
Hai altri problemi coi punti di interruzione?
Usa la nostra guida per risolvere i problemi relativi agli elementi disallineati, alle dimensioni del testo e altro ancora.
Allinea le unità di margine
L'utilizzo di unità di margine diverse tra
gli elementi sibling (elementi che condividono una sezione o un contenitore parent) può causare il disallineamento o la distorsione del contenuto. Ti consigliamo di utilizzare le stesse
unità di margine (%, px, px*, ecc.) per tutti gli elementi sibling in un singolo contenitore o sezione.
Per modificare le unità di margine di un elemento:
- Seleziona l'elemento pertinente
- Clicca sull'icona Apri Ispezione
in alto a destra dell'Editor 
- Scorri verso il basso fino a Posizione
- Clicca sul menu a tendina accanto a Margini
- Seleziona l'unità pertinente
Allinea i comportamenti responsivi
Gli elementi parent e child con
comportamenti responsivi contraddittori possono causare problemi con il contenuto del sito online.
Immaginiamo un tasto collegato a un contenitore. Il comportamento responsivo del tasto è
Fisso e il contenitore è impostato su
Mantieni proporzioni. Poiché il tasto è fisso, non si adatta al suo contenitore parent, causando potenzialmente spazi vuoti, elementi sovrapposti ed elementi tagliati sul sito online. Questo può accadere anche quando uno degli elementi ha il comportamento responsivo
Misto.
Per risolvere questo problema, consigliamo di allineare i comportamenti responsivi degli elementi.
Per modificare il comportamento responsivo di un elemento:
- Seleziona il punto di interruzione pertinente
- Seleziona l'elemento
- Clicca sull'icona Apri Ispezione in alto a destra dell'Editor
- Seleziona un'opzione dal menu a tendina Comportamento responsivo che si allinea con l'elemento parent o child
Nota:
Queste differenze possono anche influire sull'altezza degli elementi, causando spazi vuoti indesiderati sul sito.
Scopri di più sulla risoluzione dei problemi relativi agli spazi vuoti.
Controlla la visibilità dell'elemento
Potresti notare che puoi vedere un elemento su alcune dimensioni di schermo, ma non su altre. Questo è generalmente dovuto al fatto che l'elemento è stato nascosto da determinati punti di interruzione. Puoi utilizzare il pannello Livelli per individuare l'elemento e mostrarlo nei viewport che desideri.
Per controllare la visibilità di un elemento:
- Vai al tuo Editor e apri la pagina pertinente
- Seleziona un punto di interruzione dalla parte superiore dell'Editor
- Clicca su Livelli
sul lato sinistro - Individua l'elemento nascosto nell'elenco
- (Facoltativo) Clicca sull'icona Mostra
Nota:
Modifiche come l'eliminazione di un elemento o lo spostamento in una sezione/contenitore diversi
si applicano a tutti i punti di interruzione, indipendentemente da quello su cui stai lavorando. Se vuoi mostrare un elemento solo su determinati punti di interruzione, puoi
nasconderlo tramite il menu di scelta rapida.