Aggiunta di una riga.
Una riga divide una sezione in colonne, così puoi mettere contenuti fianco a fianco: tre servizi, una foto accanto al suo testo, una barra laterale accanto a un articolo. Scegli la divisione tra dodici preset e puoi dare ai telefoni un layout proprio. Leggi questa pagina per aggiungere una riga; per una riga dentro una colonna, vedi Annidamento.
Aggiungi una riga
L’esempio aggiunge a una sezione una riga di tre colonne, una per ogni servizio offerto da un team.
- Fai clic su + su una sezione per aprire il selettore di elementi.
- Scegli Row dalla scheda Layout. Arriva con due colonne uguali.
- Fai clic sull’icona griglia (Column layout) sulla barra dei controlli della riga, scegli un preset di colonna come tre colonne uguali e fai clic su Save.
- Fai clic su + in una colonna per aggiungervi contenuti.
- Fai clic su Save nella barra degli strumenti per salvare la pagina.
L’icona griglia sta subito dopo la maniglia di trascinamento della riga. Un preset cambia le colonne appena fai clic; Cancel ripristina il vecchio layout.
Cosa vedi
I tre servizi stanno fianco a fianco, ogni colonna un terzo della larghezza della sezione. Sugli schermi più stretti di 768 pixel, le colonne si impilano: ognuna prende tutta la larghezza, nell’ordine che hanno nella pagina.
Le colonne sono alte solo quanto il loro contenuto, quindi una colonna corta finisce prima delle vicine. Lo noti quando le colonne hanno un colore di sfondo; Equal-height columns le pareggia.
Configura la tua riga
Layout di colonna
L’icona griglia apre un pannello per ogni dimensione di schermo con un proprio layout. Ogni pannello mostra questi dodici preset come tessere:
| Preset | Layout |
|---|---|
| 1/1 | Una colonna a tutta larghezza |
| 1/2 + 1/2 | Due colonne uguali |
| 1/3 + 1/3 + 1/3 | Tre colonne uguali |
| 1/4 + 1/4 + 1/4 + 1/4 | Quattro colonne uguali |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Sei colonne uguali |
| 1/4 + 1/2 + 1/4 | Stretta, larga, stretta |
| 1/6 + 4/6 + 1/6 | Stretta, molto larga, stretta |
| 1/4 + 3/4 | Un quarto a sinistra, tre quarti a destra |
| 3/4 + 1/4 | Tre quarti a sinistra, un quarto a destra |
| 2/3 + 1/3 | Larga a sinistra, stretta a destra |
| 1/3 + 2/3 | Stretta a sinistra, larga a destra |
| 5/12 + 7/12 | Leggermente stretta a sinistra, leggermente larga a destra |
Per qualsiasi altra divisione, fai clic su Custom Layout e digita le larghezze come
frazioni, per esempio 1/6 + 5/6. Larghezze che sommano più di 1 vanno a capo
su una nuova riga. Quando riapri la finestra, Custom Layout è marcato e
mostra il layout, per esempio Custom Layout (1/6 + 5/6).
Un layout per dimensione di schermo
Il primo pannello, Medium devices (≥ 768px), imposta il layout dai tablet in su. Per cambiare anche i telefoni, fai clic su Add screen size in cima alla finestra. Si apre un pannello per Extra small (< 576px); scegli un’altra dimensione dal suo elenco se te ne serve una, poi un preset. Remove screen size elimina di nuovo un pannello.
Impostazioni di riga e colonna
Apri More > Settings sulla barra dei controlli della riga, o su quella della colonna per l’impostazione di colonna.
| Impostazione | Elemento | Cosa fa | Valore predefinito |
|---|---|---|---|
| Equal-height columns | Row | Allunga ogni colonna all’altezza della più alta | Off |
| Mirror row | Row | Mostra le colonne in ordine inverso da 768 pixel in su; le colonne impilate conservano l’ordine della pagina | Off |
| Vertical centering | Column | Centra il contenuto in una colonna più alta di lui | Off |
Mirror row è adatto a una pagina di righe alternate: foto a sinistra, poi foto a destra, mentre i telefoni mostrano sempre prima la foto.
Spostare e rimuovere colonne
Trascina una colonna dalla sua maniglia, oppure usa More > Move Left o Move Right sulla sua barra. Le colonne non hanno Delete: scegli invece un preset con meno colonne. I contenuti non si perdono mai così; si spostano nell’ultima colonna rimasta.
Se non lo vedi
- La centratura verticale su una colonna non cambia nulla. La colonna è alta solo quanto il suo contenuto, quindi non c’è spazio in cui centrare. Attiva Equal-height columns nelle impostazioni della riga.
- Le colonne si impilano sul telefono. Sotto i 768 pixel è il comportamento predefinito. Fai clic sull’icona griglia, poi su Add screen size, e scegli un preset per Extra small (< 576px).
- Il testo è saltato in un’altra colonna. Hai scelto un preset con meno colonne e il contenuto delle colonne rimosse si è spostato nell’ultima. Premi Ctrl+Z (Cmd+Z su Mac) per annullare la modifica.
- Una colonna non ha Delete nel menu More. Le colonne si rimuovono tramite il layout. Fai clic sull’icona griglia della riga e scegli un preset con meno colonne.
E adesso?
- Annidamento: metti una riga dentro una colonna per una griglia più fine.
- Sezioni: dai alla banda intorno alle tue colonne uno sfondo proprio.
- Design reattivo: come il tuo layout si adatta a ogni dimensione di schermo.