Editor Studio: posizionare gli elementi
Tempo di lettura: 6 min.
In un mondo di dispositivi in continua evoluzione, è importante controllare la posizione degli elementi in modo che si presentino esattamente come desideri su tutte le dimensioni di schermo. Nell'Editor Studio, gli elementi vengono agganciati automaticamente per assicurarti che ciò avvenga.
Questo ti dà la libertà di spostare gli elementi, senza doverti preoccupare del posizionamento tra i punti di interruzione. Tuttavia, puoi sempre impostare autonomamente la posizione, l'aggancio e i margini dal pannello Ispezione.
In questo articolo, scopri di più su come:
Posizionare gli elementi nell'area di lavoro
Trascina e rilascia gli elementi per impostarne la posizione direttamente nell'area di lavoro, separatamente per ogni punto di interruzione. Ciò ti consente di assicurarti che l'elemento appaia davvero dove vuoi su ogni schermo.
Finché l'elemento rimane all'interno dello stesso parent (ad esempio sezione, cella), puoi spostarlo, e farlo non influisce sugli altri punti di interruzione. Se sposti un elemento su un parent diverso (reparent), questo si applica a tutti i punti di interruzione.
Coordinate X e Y nel pannello Ispezione
Puoi controllare le coordinate X e Y del tuo elemento per vedere la sua posizione esatta in base alle dimensioni dell'area di lavoro corrente.
- X: il piano orizzontale, dal bordo sinistro al bordo destro dell'elemento parent (ad esempio sezione, contenitore, pila)
- Y: il piano verticale, dalla parte superiore alla parte inferiore dell'elemento parent
Nell'esempio seguente, puoi vedere il valore px* diventare negativo mentre spostiamo l'elemento di testo all'esterno del suo elemento parent: la cella.
Che cos'è px*?
px* è un'unità di misura nell'Editor Studio, che mostra i "pixel sull'area di lavoro". Il valore in px* che vedi è l'equivalente in pixel, rilevante per le dimensioni attuali dell'area di lavoro. Passa a un punto di interruzione diverso per vedere come il valore in px* cambia automaticamente.
Aggancio automatico
Quando aggiungi un nuovo elemento, questo viene agganciato automaticamente a:
- La parte superiore dell'elemento parent (ad esempio sezione, contenitore, pila)
- Il bordo sinistro o destro dell'elemento parent, a seconda di quale sia il più vicino
L'aggancio automatico assicura che l'elemento rimanga al suo posto su tutti gli schermi e dispositivi. Puoi spostare liberamente gli elementi e i punti di aggancio si adattano automaticamente, senza bisogno di "agganciarli di nuovo".
La posizione di aggancio è indicata dalle linee tratteggiate sull'elemento e dai punti di aggancio nel pannello Ispezione (sotto Posizione). Nell'esempio seguente, l'elemento di testo viene automaticamente agganciato ai lati superiore e destro della cella.
Suggerimento:
Per impostazione predefinita, la casella di spunta Aggancio automatico elemento è selezionata. Puoi sempre deselezionarla e regolare manualmente l'aggancio.
Regolare manualmente l'aggancio dell'elemento
Puoi ignorare l'aggancio automatico e impostarlo manualmente dal pannello Ispezione. Questo è utile, ad esempio, quando vuoi agganciare un elemento in basso anziché in alto.
Aggancia un elemento a qualsiasi lato: in alto, in basso, a sinistra, a destra o anche al centro della sezione, del contenitore o della cella in cui si trova.
Per agganciare manualmente un elemento:
- Seleziona l'elemento pertinente
- Clicca sulla freccia Apri Ispezione
in alto a destra dell'Editor - Scorri verso il basso fino a Posizione
- Clicca sui punti di aggancio pertinenti (in alto, in basso, a destra o a sinistra). In alternativa, clicca sull'icona Allinea al centro
in modo che l'elemento sia sempre al centro
Nota:
Questo deseleziona automaticamente la casella di spunta Aggancio automatico elemento.
Usare i margini quando si agganciano gli elementi
Quando un elemento è agganciato, i margini aiutano a mantenere una distanza impostata tra l'elemento e i bordi del suo elemento parent. Puoi aggiungere margini anche ai lati non agganciati. I margini fungono da buffer, impedendo sovrapposizioni con altri elementi.
Nell'esempio seguente, l'elemento di testo è agganciato ai lati superiore e destro della cella. Passando il mouse sui margini nel pannello Ispezione, li si evidenzia nell'area di lavoro:
Per creare o modificare un margine:
- Seleziona l'elemento pertinente
- Clicca sulla freccia Apri Ispezione in alto a destra dell'Editor
- Scorri verso il basso fino a Posizione
- Clicca su un margine (ad esempio in alto, a sinistra) sotto Agganci, margini, spaz. interna
- Inserisci un valore per il margine
Suggerimento: clicca sulla misura (ad esempio px, %) per modificarla. Ti consigliamo di utilizzare la percentuale (%) per posizionare gli elementi in modo coerente su schermi di tutte le dimensioni - (Facoltativo) Clicca sull'icona Applica a tutti i lati
per impostare lo stesso margine su tutti i lati
Unità di margine:
I margini possono essere impostati in pixel (px), percentuale (%), altezza di viewport (vh) e larghezza di viewport (vw). Ogni unità ha un risultato diverso quando lo schermo viene ridimensionato. Scopri la differenza nel comportamento delle unità, trascinando l'area di lavoro per ridimensionarla.
Impedire la sovrapposizione degli elementi
Quando si posizionano gli elementi, è importante assicurarsi che non si sovrappongano sui punti di interruzione più piccoli. Per evitare che ciò accada, dai un'occhiata ai nostri suggerimenti qui sotto.
Aggancia in alto
In genere è consigliabile agganciare gli elementi alla parte superiore del contenitore, della sezione o della cella della griglia in cui si trovano. Ciò garantisce che ci sia sempre uno spazio definito tra l'elemento e il contenitore/sezione quando si aggiungono altri contenuti alla pagina.
Aggiungi celle per organizzare il layout
Per layout più complessi, aggiungi delle celle per organizzare la sezione. Posiziona gli elementi all'interno delle celle e ancorali a una linea della griglia in modo che siano posizionati perfettamente su schermi di tutte le dimensioni.
Applica una pila
Mettere un gruppo di elementi in una pila orizzontale o verticale assicura che non si sovrappongano. Una pila è un contenitore flessibile che si adatta automaticamente alle diverse dimensioni dello schermo: devi solo impostare i margini tra gli elementi.
Utilizzando i margini negativi, puoi sovrapporre gli elementi in una pila. Ciò ti consente di posizionare gli elementi davanti agli altri, creando un design più intricato.
Hai trovato utile questo articolo?
|