Hai problemi con l'aspetto del sito del tuo cliente tra i punti di interruzione? L'Editor Studio offre gli strumenti per affrontare i problemi più comuni di responsività, come elementi sovrapposti, fuori posto o disallineati su schermi di diverse dimensioni. Con le giuste modifiche, puoi creare un sito elegante e professionale che si adatta perfettamente a qualsiasi dispositivo.
Testo che appare troppo piccolo in determinati punti di interruzione
Il testo sembra troppo piccolo quando visualizzi il sito del cliente su schermi più piccoli? Utilizzando il
comportamento responsivo per ridimensionare in proporzione e l'impostazione max-min, puoi assicurarti che il tuo testo sia sempre perfetto su schermi di tutte le dimensioni.
Seleziona il testo e apri il pannello Ispezione. Innanzitutto, imposta il Comportamento responsivo su Ridimensiona in proporzione. Quindi, clicca su Max-min sotto Design per impostare le dimensioni minime e massime dei caratteri.
Elementi posizionati male tra i punti di interruzione
Se un elemento sul sito del tuo cliente cambia posizione in modo imprevisto su schermi di diverse dimensioni, è probabilmente dovuto alle impostazioni di aggancio e margini. Segui questi passaggi per risolvere il problema e assicurarti che gli elementi rimangano nella posizione prevista.
Controlla l'aggancio dell'elemento
Seleziona l'elemento pertinente e controlla i suoi punti di aggancio (es. in alto, a sinistra, ecc.) nel pannello Ispezione. Se l'aggancio non corrisponde alla posizione desiderata (es. l'elemento è agganciato in alto ma lo vuoi agganciato in basso), l'elemento potrebbe spostarsi quando le dimensioni dello schermo cambiano.
La posizione di aggancio è indicata dalle linee tratteggiate sull'elemento e dai punti di aggancio nel pannello Ispezione (sotto Posizione). Puoi cliccare sui punti di aggancio sul pannello Ispezione per selezionarli o rimuoverli.
Regola i margini dell'elemento
I
margini definiscono la distanza tra l'elemento e i suoi lati agganciati. Quando le dimensioni dello schermo cambiano, i margini potrebbero "spingere" l'elemento in diverse direzioni.
Ad esempio, se un elemento è agganciato in alto con un margine del 60%, si sposterà automaticamente verso l'alto quando la sezione si restringe (per mantenere il valore del margine impostato). Puoi provare a ridurre i margini e testare i risultati.
Quando si impostano i margini in percentuale, si regolano dinamicamente in base alle dimensioni dello schermo, ma allo stesso tempo ciò può causare spostamenti imprevisti. Puoi considerare di passare a un'unità di dimensioni fisse (es. pixel) per un posizionamento più coerente.
(Sezione comportamento fisso) Cambia i margini degli elementi in pixel
Se imposti il
comportamento responsivo della tua sezione su
"Fisso", è importante garantire che anche i margini degli elementi child siano basati sui pixel.
L'utilizzo di unità di margine fluide come la percentuale significa che i margini aumentano o diminuiscono in base alle dimensioni dello schermo, causando lo spostamento dell'elemento. Il passaggio ai margini in pixel garantisce che l'elemento mantenga sempre la stessa distanza dai lati, invece di calcolare la distanza in base alla larghezza della pagina.
Elementi disallineati tra i punti di interruzione
Se gli elementi della sezione non si allineano o interrompono il loro layout quando cambiano le dimensioni dello schermo, è spesso dovuto ad agganci incoerenti o impostazioni dei margini.
Segui questi passaggi per identificare e risolvere il problema, assicurandoti che gli elementi siano allineati correttamente su schermi di tutte le dimensioni.
Assicurati che gli elementi siano ancorati sullo stesso lato
Se gli elementi hanno impostazioni di aggancio in conflitto, potrebbero non essere allineati correttamente man mano che lo schermo si ridimensiona.
Controlla se gli elementi nella stessa sezione hanno impostazioni di aggancio diverse. Ad esempio, un elemento può essere ancorato in alto, mentre un altro in basso. Ti consigliamo di ancorare tutti gli elementi correlati allo stesso lato del contenitore parent (es. in alto, in basso).
La posizione di aggancio è indicata dalle linee tratteggiate sull'elemento e dai punti di aggancio nel pannello Ispezione (sotto Posizione). Puoi cliccare sui punti di aggancio sul pannello Ispezione per selezionarli o rimuoverli.
Standardizza le unità di margine
I margini definiscono lo spazio tra un elemento e il suo lato agganciato. Utilizzando unità diverse (es. percentuale o pixel) per i margini può causare il disallineamento degli elementi quando le dimensioni dello schermo cambiano.
Apri il pannello Ispezione e scorri verso il basso fino a Posizione per vedere i margini correnti dell'elemento. Per passare a un'unità di margine diversa, seleziona il margine pertinente e clicca sull'unità corrente (es. px*, %).
Controlla la relazione tra gli elementi
Innanzitutto, controlla il
pannello Livelli per confermare che gli elementi si trovino nello stesso contenitore parent (es. sezione, cella, ecc.). Se lo sono, ma non è definita alcuna relazione tra loro, gli elementi agiranno in modo indipendente e potrebbero sovrapporsi.
Impilare gli elementi verticalmente o orizzontalmente può risolvere questo problema, poiché la pila garantisce un allineamento coerente tra le dimensioni dello schermo.
Elementi sovrapposti tra i punti di interruzione
Quando organizzi gli elementi, potrebbero essere distanziati nell'Editor, ma sovrapporsi quando sul sito live su diversi viewport. La sovrapposizione di solito si verifica a causa del modo in cui sono posizionati gli elementi o il loro comportamento responsivo.
Se gli elementi sul sito del tuo cliente si sovrappongono su schermi di dimensioni diverse, segui questi passaggi per identificare e risolvere il problema.
Controlla il posizionamento e l'aggancio degli elementi
Quando gli elementi sono posizionati in modo indipendente all'interno dello stesso contenitore parent, potrebbero sovrapporsi al variare delle dimensioni dello schermo. Controlla le impostazioni di aggancio e le unità di posizionamento per assicurarti che siano coerenti.
Clicca su ogni elemento (es. titolo, paragrafo, tasto) e controlla come è ancorato nel pannello Ispezione. Cerca le differenze negli agganci e nei margini degli elementi (ad esempio mescolando percentuali e pixel).
Se un elemento utilizza un margine percentuale e un altro utilizza un margine in pixel fisso, le loro posizioni si sposteranno in modo diverso man mano che il contenitore parent si ridimensiona.
Regola il comportamento responsivo degli elementi
La sovrapposizione può verificarsi anche se gli elementi si comportano in modo diverso durante il ridimensionamento dello schermo. Ad esempio, un elemento può ridimensionarsi in proporzione, un altro può andare a capo e un terzo può rimanere fisso.
Seleziona ogni elemento e controlla il suo
comportamento responsivo nel pannello Ispezione. Cerca gli elementi con comportamenti non corrispondenti in quanto potrebbero causare la sovrapposizione.
Controlla la relazione tra gli elementi
Innanzitutto, controlla il
pannello Livelli per confermare che gli elementi si trovino nello stesso contenitore parent (es. sezione, cella, ecc.). Se lo sono, ma non è definita alcuna relazione tra loro, gli elementi agiranno in modo indipendente e potrebbero sovrapporsi.
Impilare gli elementi verticalmente o orizzontalmente può risolvere questo problema, poiché la pila mantiene una spaziatura coerente tra gli elementi.
