Editor Studio: personalizzare una griglia di sezione

Tempo di lettura: 5 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. 
In questo articolo, scoprirai come:
Vuoi aggiungere celle a un contenitore?

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. 

Per aggiungere celle a una sezione:

  1. Seleziona la sezione pertinente nell'Editor
  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. (Facoltativo) Trascina gli elementi nelle celle pertinenti

Scambiare 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. 

Per scambiare le celle:

  1. Seleziona la sezione pertinente nell'Editor
  2. Seleziona la prima cella
  3. Tieni premuta l'icona di trascinamento  nella parte superiore della cella mentre la trascini sull'altra cella
    Suggerimento: quando vedi l'indicazione Scambia contenuto, significa che puoi rilasciare la cella
Usa il trascinamento per scambiare 2 celle nella griglia della sezione

Personalizzare la griglia di sezione

Rendi le celle e la griglia esattamente come desideri. 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 nell'Editor
  2. Scegli come vuoi personalizzare la griglia:
Nota:
Al momento, non è possibile duplicare una cella. 

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 nell'Editor
  2. Clicca sulla freccia 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 trovato utile questo articolo?

|