Editor Studio Two: impostare le dimensioni dell'elemento
Questo articolo si riferisce al nuovo Editor Studio Two, rilasciato a novembre 2026. Se non sai con certezza se stai usando l'Editor Studio o l'Editor Studio Two, trovi maggiori informazioni qui.
Nell'Editor Studio Two puoi impostare le dimensioni esatte di ogni elemento, così il tuo design si adatta da solo a qualsiasi dispositivo. Ridimensiona gli elementi nell'area di lavoro o nel pannello Ispezione per definirne le misure precise.
Durante il ridimensionamento vedrai px*, un'unità espressa in pixel che si adatta a ogni punto di interruzione in base al comportamento responsivo dell'elemento. Se il comportamento predefinito non è adatto al tuo design, puoi cambiarlo oppure attivare le impostazioni avanzate per controllare direttamente larghezza e altezza.
Ridimensionare gli elementi
Scegli come ridimensionare gli elementi in base al tuo modo di progettare:
- Nell'area di lavoro: clicca sull'elemento per selezionarlo nella pagina e sposta i cursori di trascinamento laterali fino a raggiungere le dimensioni che preferisci. Mentre trascini, vedi le dimensioni esatte dell'elemento in pixel
- Nel pannello Ispezione: clicca sull'elemento e apri il pannello Ispezione per vederne (e modificarne) la larghezza e l'altezza esatte
Usare px* come unità di misura
La sezione Dimensioni del pannello Ispezione utilizza un'unità di misura relativa esclusiva dell'Editor Studio Two: px*.
L'asterisco () accanto a "px" indica che la dimensione è relativa al punto di interruzione su cui stai lavorando. Ad esempio, se passi dal punto di interruzione desktop a quello mobile, la larghezza e l'altezza dell'elemento in px diminuiscono di conseguenza.
Il valore in px* è espresso in pixel, ma la misura effettiva applicata dietro le quinte è responsiva. Passa il mouse su px* nel pannello per vedere il calcolo e l'unità di misura responsiva in uso (es. percentuale, proporzioni, ecc.).
Scegliere il comportamento responsivo
Il comportamento responsivo stabilisce se, e in che modo, un elemento si ridimensiona nei diversi punti di interruzione. Ogni elemento parte con un comportamento predefinito, ma puoi sceglierne uno più adatto al tuo design.
Per cambiare il comportamento responsivo dell'elemento:
- Vai al tuo Editor.
- Seleziona l'elemento che ti interessa.
- Clicca sull'icona Apri Ispezione in alto a destra nell'Editor.
in alto a destra nell'Editor.
- Clicca sulla scheda Design.
- Clicca sul menu a tendina Comportamento responsivo sotto Dimensioni.
- Scegli un nuovo comportamento responsivo.
Passa il mouse sopra le opzioni del menu a tendina per vedere un'animazione che ne illustra l'effetto.
Usare le impostazioni avanzate delle dimensioni
Ricorri alle impostazioni avanzate quando vuoi controllare direttamente le misure di un elemento (come px, % o vh), invece di affidarle a px* e al comportamento responsivo.
Le impostazioni avanzate si abilitano per il singolo elemento selezionato, su tutti i punti di interruzione. Per comodità, le impostazioni avanzate restano attive per quell'elemento, ma puoi disattivarle in qualsiasi momento.
Per abilitare le impostazioni avanzate:
- Vai al tuo Editor.
- Seleziona l'elemento che ti interessa.
- Clicca sull'icona Apri Ispezione in alto a destra nell'Editor.
- (Nel pannello Ispezione) Clicca sull'icona Altre azioni
in alto a destra. - Attiva l'interruttore accanto a Impostazioni avanzate.
- Modifica le dimensioni come preferisci: larghezza, altezza e valori min e max.
Suggerimento: per passare a un'altra unità (es. da px a %), clicca sull'unità nel pannello Ispezione: si apre l'elenco delle unità di misura disponibili per l'elemento.
