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.   
GIF che mostra come utilizzare le maniglie di trascinamento per ridimensionare un elemento sull'area di lavoro

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. 
Ciò significa che quando modifichi la larghezza, l'altezza si regola automaticamente (e viceversa) per mantenere la forma originale dell'elemento.
GIF che mostra l'aspetto del ridimensionamento di un elemento nell'area di lavoro quando si bloccano le proporzioni

Per bloccare le proporzioni:

  1. Seleziona l'elemento multimediale pertinente
  2. Clicca sulla freccia Apri Ispezione  in alto a destra
La freccia Apri Ispezione su cui clicchi nell'Editor Studio per aprire il pannello
  1. Clicca sull'icona Blocca proporzioni  sotto Dimensioni
Screenshot dell'icona lucchetto per bloccare le proporzioni su cui puoi cliccare nel pannello Ispezione per qualsiasi elemento multimediale
  1. 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%).
Screenshot che mostra come passando il mouse su px* in Ispezione si apre un pop-up con il calcolo effettivo
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. 
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:

  1. Seleziona il punto di interruzione pertinente nell'Editor
  2. Seleziona l'elemento 
  3. Clicca sulla freccia Apri Ispezione  in alto a destra
La freccia Apri Ispezione su cui clicchi nell'Editor Studio per aprire il pannello
  1. Seleziona un'opzione dal menu a tendina Comportamento responsivo
GIF del menu a tendina Comportamento responsivo quando è aperto e le opzioni disponibili

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à.
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:

  1. Seleziona il punto di interruzione pertinente nell'Editor
  2. Seleziona l'elemento 
  3. Clicca sulla freccia Apri Ispezione  in alto a destra
La freccia Apri Ispezione su cui clicchi nell'Editor Studio per aprire il pannello
  1. Clicca sull'icona Altre azioni  accanto a Dimensioni
  2. Abilita l'interruttore Dimensioni avanzate
  3. 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
GIF che mostra l'elenco delle misure che si apre quando si clicca su un elemento nel pannello Ispezione

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:

  1. Clicca sull'icona Wix Studio  in alto a sinistra
  2. Passa il mouse su Visualizza
  3. Passa il mouse su Preferenze dimensioni
  4. 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 
Screenshot del menu superiore nell'Editor Studio, dove puoi controllare le preferenze delle dimensioni

Hai trovato utile questo articolo?

|