Editor Studio: impostare le dimensioni dei tuoi elementi
Tempo di lettura: 8 min.
Durante la progettazione di un sito, vuoi assicurarti che gli elementi si adattino perfettamente agli schermi di tutte le dimensioni. Nell'Editor Studio, tu modifichi le dimensioni in pixel e il comportamento responsivo si occupa di tutto il resto.
Ogni elemento ha un comportamento predefinito (es. Ridimensiona in proporzione), che controlla il modo in cui viene ridimensionato sui diversi schermi. Dal pannello Ispezione, puoi modificare il comportamento responsivo di un elemento in modo che soddisfi al meglio le tue esigenze.
Vai alla nostra Wix Studio Academy (contenuti in inglese) per dare un'occhiata a webinar, tutorial e corsi aggiuntivi su Wix Studio.
In questo articolo, scopri come funziona il ridimensionamento nell'Editor Studio:
Suggerimento:
Puoi impostare le dimensioni dell'elemento e il comportamento responsivo per ogni punto di interruzione.
Ridimensionare un elemento
Seleziona un elemento sull'area di lavoro e trascina le maniglie laterali per ingrandirlo o rimpicciolirlo. Imposta l'aspetto dell'elemento nel punto di interruzione corrente.
Nel pannello Ispezione, puoi controllare la larghezza e l'altezza esatte in pixel dell'elemento. Se necessario, puoi inserire valori di larghezza e altezza personalizzati.
Lascia che l'Ispezione faccia i calcoli per te:
Per comodità, puoi utilizzare l'addizione (+), la sottrazione (-), la moltiplicazione (*) e la divisione (/) durante la digitazione dei valori delle dimensioni. Ad esempio, ingrandisci un elemento 3 volte aggiungendo *3 accanto alla larghezza corrente.
Ridimensionare gli elementi multimediali
Quando ridimensioni un elemento multimediale, come un'immagine o un video, puoi bloccare le proporzioni in modo che la larghezza e l'altezza rimangano sempre proporzionali tra loro.
Quali elementi multimediali includono questa opzione?
Ciò significa che quando modifichi la larghezza, l'altezza si regola automaticamente (e viceversa) per mantenere la forma originale dell'elemento.
Per bloccare le proporzioni:
- Seleziona l'elemento multimediale pertinente
- Clicca sulla freccia Apri Ispezione
in alto a destra
- Clicca sull'icona Blocca proporzioni
sotto Dimensioni
- Ridimensiona l'elemento:
- Inserendo il valore di larghezza/altezza nel pannello Ispezione (l'altro valore si regola automaticamente)
- Trascinando le maniglie attorno all'elemento nell'area di lavoro
Nota:
Questa opzione non è disponibile nella modalità Dimensioni avanzate.
Impostare la dimensione in px*
px* è un'unità di misura nell'Editor Studio. Ti consente di modificare le dimensioni utilizzando una misurazione familiare (pixel), mentre la misurazione effettiva dietro le quinte è responsiva.
In altre parole, progetti in pixel che rappresentano le dimensioni sull'area di lavoro e l'elemento rimane responsivo. I valori specifici e le unità dimensionali dipendono dal comportamento responsivo che hai scelto. Passa il mouse su px* per visualizzare il calcolo e l'unità di misura responsiva utilizzata.
Nell'esempio seguente, la larghezza del contenitore nell'area di lavoro corrente è 1000 px*. L'unità effettiva è la percentuale, quindi la larghezza è relativa a ogni schermata (79,1%).
Qual è la differenza tra px* e px?
Entrambe le unità ti consentono di modificare in pixel:
- px* significa che le dimensioni che vedi sono rilevanti per il punto di interruzione su cui stai lavorando
- px significa che la dimensione è fissa tra i punti di interruzione
Scegliere il comportamento responsivo di un elemento
Quando aggiungi un elemento alla pagina, questo si presenta già con un comportamento responsivo integrato. Ciò significa che non devi preoccuparti dell'aspetto dell'elemento sui diversi schermi: il comportamento responsivo garantisce che venga ridimensionato.
Tuttavia, potresti voler cambiare il comportamento responsivo, se ne vedi uno più adatto al tuo design.
Qual è la differenza tra i comportamenti disponibili?
Nota:
Il comportamento responsivo selezionato influisce sulle unità di misura in uso. Ad esempio, selezionando il comportamento responsivo Fisso, la misura viene modificata da px* a px.
Per scegliere un comportamento responsivo diverso:
- Seleziona il punto di interruzione pertinente nell'Editor
- Seleziona l'elemento
- Clicca sulla freccia Apri Ispezione in alto a destra
- Seleziona un'opzione dal menu a tendina Comportamento responsivo
Utilizzare le dimensioni avanzate
Le dimensioni avanzate consentono una personalizzazione più approfondita delle dimensioni dell'elemento per punto di interruzione. Quando abiliti le dimensioni avanzate per un elemento, vedrai le misure che utilizziamo e le potrai regolare in base alle tue esigenze.
Ciò significa che puoi lavorare con unità responsive anziché con pixel, aprendo una gamma completamente nuova di possibilità.
Quali sono le misure disponibili?
Le dimensioni avanzate si applicano all'elemento specifico selezionato, su tutti i punti di interruzione. La modalità dimensioni avanzate rimane abilitata per quell'elemento, per un facile accesso, ma puoi disabilitarla in qualsiasi momento.
Per accedere alle dimensioni avanzate e modificarle:
- Seleziona il punto di interruzione pertinente nell'Editor
- Seleziona l'elemento
- Clicca sulla freccia Apri Ispezione in alto a destra
- Clicca sull'icona Altre azioni
accanto a Dimensioni - Abilita l'interruttore Dimensioni avanzate
- Modifica le dimensioni in base alle tue esigenze: larghezza, altezza e valori minimo e massimo
Suggerimento: passa a un'unità diversa (es. da px a %) cliccandoci sopra nel pannello Ispezione. Si apre un elenco delle misure disponibili per l'elemento
Impostare le preferenze per le dimensioni
Scegli le dimensioni che preferisci per il sito che stai progettando. Se ti piace lavorare con misure CSS avanzate, puoi abilitare le dimensioni avanzate nell'Editor. In alternativa, se preferisci scegliere la modalità di ridimensionamento per elemento, puoi mantenerla così.
Per impostare il ridimensionamento che preferisci per un sito:
- Clicca sull'icona Wix Studio
in alto a sinistra - Passa il mouse su Visualizza
- Passa il mouse su Preferenze dimensioni
- Scegli la tua preferenza:
- Mostra sempre avanzate: le dimensioni nel pannello Ispezione sono sempre impostate su avanzate
Nota: questa modalità disabilita l'opzione per ripristinare le dimensioni avanzate di elementi specifici - Imposta per elemento: imposta le preferenze di ridimensionamento per ogni elemento
- Mostra sempre avanzate: le dimensioni nel pannello Ispezione sono sempre impostate su avanzate
