Progetta le tue colonne

È possibile utilizzare le colonne per organizzare i contenuti in layout strutturati, rendendo il sito visivamente accattivante e facile da navigare. In questa guida imparerai come personalizzare gli aspetti del design delle colonne, come i colori, l’allineamento e l’aspetto sui dispositivi mobili.

Per aggiungere o modificare il colore di sfondo delle colonne, eseguire la procedura seguente:

1. Seleziona Visualizzazione a elenco nell’angolo superiore sinistro dell’editor. È l’icona avente tre linee orizzontali una sopra l’altra.
2. Trova il Blocco delle colonne e fai clic:

3. Nelle impostazioni del blocco Colonne sul lato destro dello schermo, fai clic sulla scheda Stili (l’icona appare come un cerchio bianco e nero):

4. Nelle impostazioni del colore, fare clic su “Sfondo” e selezionare un colore di sfondo.
5. Fai clic sul pulsante “Salva” per salvare le modifiche.

Se si desidera selezionare colori diversi per ogni colonna, seguire gli stessi passaggi ma selezionare un singolo blocco Colonna nella Visualizzazione a elenco, invece del blocco Colonne generale.

Quando aggiungi contenuto a una nuova colonna, per impostazione predefinita verrà allineato alla parte superiore del contenitore della colonna. È possibile modificare l’allineamento del contenuto all’interno delle colonne eseguendo la procedura seguente:

1. Seleziona Visualizzazione a elenco nell’angolo superiore sinistro dell’editor. È l’icona avente tre linee orizzontali una sopra l’altra.
2. Trova il Blocco delle colonne e fai clic:

3. Nella barra degli strumenti visualizzata sopra o sotto le colonne selezionate, fare clic sull’opzione di allineamento verticale:

4. Scegliere tra “allinea in alto“, “allinea al centro” o “allinea in basso” in modo che tutto il contenuto all’interno delle colonne si trovi nella parte superiore, centrale o inferiore del contenitore della colonna.

Se si desidera selezionare diversi allineamenti per ogni colonna, seguire gli stessi passaggi ma selezionare una singola colonna nella Visualizzazione a lista, invece delle colonnegenerali. In questo modo, è possibile creare un layout distribuito come questo:

Quando si utilizza un layout a colonne, è importante considerare come verranno visualizzate le colonne per i visitatori del sito web che utilizzano dispositivi mobili. I telefoni hanno schermi più piccoli, quindi non tutte le colonne si adattano perfettamente a una singola riga mantenendo i contenuti leggibili.

È possibile scegliere di “impilare” le colonne sugli schermi dei dispositivi mobili in modo che appaiano una sopra l’altra, invece di tutte su una singola riga:

1. Seleziona il blocco Colonne utilizzando Vista elenco o la barra degli strumenti del blocco.
2. Nelle impostazioni del blocco Colonne sul lato destro dello schermo, attivare o disattivare l’interruttore “Disponi in colonna su mobile“:

Questo interruttore determina se le colonne vengono visualizzate in orizzontale o impilate verticalmente quando la pagina o l’articolo viene visualizzato su un dispositivo mobile. Ecco un esempio di colonne in pila quando visualizzate sugli schermi di desktop/laptop rispetto a uno schermo mobile: