Editor Studio: personalizzare una griglia di sezione

Tempo di lettura: 8 min.
Nell'Editor Studio, le sezioni sono dotati di una griglia integrata contenente una singola cella (che ospita l'intera sezione). Dividi la sezione in più celle per dare una struttura responsiva al contenuto. Ci sono vari layout personalizzabili tra cui scegliere. 
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, scoprirai come:

Aggiungere celle a una sezione

Aggiungi le celle a una sezione per creare un layout responsivo e strutturato. Mantenere gli elementi in celle separate garantisce che rimangano al loro posto su tutti gli schermi. Scegli un layout, quindi sposta gli elementi nelle celle: puoi sempre dividere le celle o aggiungerne di nuove in un secondo momento. 
Vuoi aggiungere celle a un contenitore?

Per aggiungere celle a una sezione:

  1. Seleziona la sezione pertinente
  2. Clicca sul menu a tendina Vuoto nella parte superiore della sezione 
Screenshot della barra degli strumenti che si apre quando si seleziona una sezione, con il menu a tendina dei layout disponibili
  1. Scegli un layout: Righe, Colonne, Collage, ecc.
    Suggerimento: puoi modificare il layout dal menu a tendina in qualsiasi momento: gli elementi non verranno spostati
  2. Trascina gli elementi nelle celle pertinenti
Screenshot di una sezione vuota nell'Editor Studio, subito dopo aver applicato il layout Collage, evidenziando le nuove celle
Le celle della griglia si sovrappongono sui dispositivi mobile?
Ti consigliamo di passare a un layout verticale (come Righe) per risolvere questo problema. 

Personalizzare la griglia di sezione

Rendi la griglia esattamente come vuoi. Puoi dividere o unire le celle esistenti, aggiungerne di nuove e trascinare le linee della griglia per regolarne le dimensioni. Puoi anche aggiungere spazi vuoti per creare uno spazio tra le celle.

Per personalizzare la griglia di sezione:

  1. Seleziona la sezione pertinente
  2. Scegli come vuoi personalizzare la griglia:
Nota:
Al momento, non è possibile duplicare una cella. 

Scambiare e capovolgere le celle nella griglia

Riorganizza la griglia delle sezioni in modo rapido ed efficiente scambiando le celle. Usando il trascinamento, puoi scambiare istantaneamente le 2 celle: prendono istantaneamente l'una il posto dell'altra sulla griglia. 
In alternativa, puoi capovolgere l'intera griglia orizzontalmente o verticalmente per esplorare diverse opzioni di presentazione dei contenuti del cliente. 

Per scambiare le celle:

  1. Seleziona la sezione pertinente
  2. Scegli cosa fare dopo:

Passare a una griglia CSS avanzata

Passare a una griglia CSS avanzata offre un controllo più preciso del layout per punto di interruzione. Puoi scegliere il numero di righe e colonne che desideri e impostarne le dimensioni utilizzando misurazioni responsive (es. min/max, %).

Per passare dalla griglia di sezione a una griglia CSS:

  1. Seleziona la sezione pertinente
  2. Clicca sull'icona Apri Ispezione  in alto a destra dell'Editor


  3. Scorri verso il basso fino a Layout
  4. Clicca su Cambia accanto a Griglia CSS avanzata
  5. Clicca su Passa a griglia CSS
Screenshot che mostra l'opzione per passare alla griglia avanzata nel pannello Ispezione
Hai degli elementi sovrapposti?
Consulta il nostro video sulla risoluzione dei problemi (contenuti in inglese) per scoprire cosa controllare e risolvere questo problema.

Hai trovato utile questo articolo?

|