Blocchi

Blocchi »Blocco Griglia di layout

Il blocco Griglia mira a semplificare la creazione di layout che condividono righe della griglia verticali uniformi in un articolo o in una pagina e consente di inserire contenuti nelle colonne.

Una griglia contiene da 1 a 4 colonne che possono essere adattate e collocate su 12 righe della griglia verticali. Sono disponibili opzioni per fornire layout specifici per tablet (8 righe della griglia verticali) e mobile (4 righe della griglia verticali).

È possibile aggiungere padding e colori di sfondo per mettere in risalto.

Puoi aggiungere la Griglia di layout facendo clic sul pulsante Aggiungi blocco, che si trova nella sezione del layout. Altrimenti, puoi digitare /layout per fare prima.

Qui sono disponibili istruzioni dettagliate sull’aggiunta di blocchi.

Tieni presente che, per alcune funzionalità, occorre che il tema del tuo sito supporti completamente l’editor dei blocchi.

Che cos'è una griglia di layout?

Una griglia è un meccanismo per la progettazione di un layout e contiene un numero di righe della griglia determinato dal dispositivo usato per la visualizzazione (il punto di interruzione responsivo):

  • 12 righe della griglia per dispositivi desktop
  • 8 righe della griglia per dispositivi tablet
  • 4 righe della griglia per dispositivi mobili

La griglia di layout contiene un numero (da 1 a 4) di colonne e ciascuna colonna contiene il contenuto che desideri posizionare sulla griglia.

Le colonne possono estendersi su più righe della griglia (mostrate con righe tratteggiate) e possono essere scostate tra loro. Questo è il layout della tua griglia ed è possibile usare diverse impostazioni per ciascun dispositivo di visualizzazione.

Sui dispositivi più piccoli (tablet e mobile) è comune che un layout si estenda su più righe. Questa impostazione viene automaticamente abilitata quando passi alla vista mobile o tablet, nonostante possa essere sovrascritta modificando direttamente i valori della griglia.

I punti di interruzione responsivi sono un argomento avanzato. Puoi comunque utilizzare la Griglia di layout senza preoccupartene e la griglia userà i valori predefiniti.

↑ Indice dei contenuti ↑

Configurazione della griglia

Quando aggiungi per la prima volta un blocco Griglia di layout, ti sarà chiesto di scegliere il numero di colonne:

Potrai cambiare questa impostazione in seguito dalla barra laterale Impostazioni blocco.

↑ Indice dei contenuti ↑

Aggiunta di contenuti alla griglia

Ciascuna colonna nella griglia può contenere altri blocchi. Puoi aggiungere contenuti facendo clic sull’icona + e selezionando un blocco.

↑ Indice dei contenuti ↑

Ridimensionamento della griglia

Per ridimensionare le colonne in una Griglia di layout hai a disposizione due modi:

  • Trascinare i punti di manipolazione sullo schermo
  • Usare la barra laterale Impostazioni blocco

Il punto di interruzione responsivo attualmente selezionato viene visualizzato nella parte inferiore del blocco Griglia di layout.

La barra laterale Impostazioni blocco consente di cambiare il punto di interruzione scegliendo tra desktop, tablet e mobile, facendo clic sui pulsanti appropriati.

Tieni presente che l’editor in generale non cambierà per riflettere il punto di interruzione scelto.

↑ Indice dei contenuti ↑

Ridimensionamento della griglia trascinando i punti di manipolazione

Ciascuna colonna sulla griglia avrà un cerchio blu a destra e uno a sinistra. Si tratta di punti di manipolazione: per ridimensionare il blocco, selezionali e trascinali a destra o sinistra.

La Griglia di layout ti eviterà di dover effettuare il ridimensionamento all’esterno dei limiti della griglia e potrebbe essere necessario regolare altre colonne per fare spazio.

Non è possibile utilizzare i punti di manipolazione per ridimensionare la griglia su diverse righe.

↑ Indice dei contenuti ↑

Ridimensionamento della griglia usando le impostazioni del blocco

Così come per i punti di manipolazione, puoi modificare direttamente il layout della griglia usando la barra laterale Impostazioni blocco.

Nella barra laterale dell’editor sono presenti delle opzioni specifiche per ogni blocco, in aggiunta alle opzioni che si trovano nella barra degli strumenti del blocco. Se non visualizzi la barra laterale, basta fare clic sull’icona “a forma di ingranaggio” accanto al pulsante Pubblica.

Puoi modificare direttamente i valori per ciascuna colonna:

  • Scostamento: il numero di righe della griglia che intercorre tra questa colonna e quella precedente (o l’inizio)
  • Estensione: il numero di righe della griglia sulle quali si estende questa colonna

Questi valori vengono automaticamente regolati quando si trascinano i punti di manipolazione.

↑ Indice dei contenuti ↑

Righe multiple

I layout per mobile e tablet possono avere righe multiple.

Puoi ridimensionare le colonne in ciascuna riga trascinando i punti di manipolazione. Se desideri spostare le colonne sulle righe, dovrai usare la barra laterale Impostazioni blocco.

↑ Indice dei contenuti ↑

Regole della griglia

Anche una griglia ha bisogno di regole. Fortunatamente c’è solo una regola, vale a dire che il totale dei valori di scostamento ed estensione per ciascuna colonna in una riga non deve superare il numero di righe della griglia per il dispositivo di visualizzazione.

Ad esempio, su un dispositivo desktop (12 righe della griglia), con un layout a tre colonne ciascuna colonna può estendersi su 4 righe della griglia senza scostamento o su 3 righe della griglia con 1 scostamento, altrimenti una colonna può estendersi su 10 righe della griglia e le altre due colonne su 1 riga ciascuna.

Spetta a te decidere come organizzare la griglia e la regola garantirà la corretta visualizzazione delle colonne. Ciò potrebbe significare che ti sarà impedito di ottenere determinate combinazioni di estensioni e scostamenti (in particolare quando si ha a che fare con righe multiple) e che dovrai selezionare valori che rispettino la regola della griglia.

↑ Indice dei contenuti ↑

Padding e colori

Ciascuna colonna della griglia ha le proprie impostazioni, alle quali si accede in modo simile alle impostazioni del blocco. Da qui puoi aggiungere il padding e un colore di sfondo. Questa impostazione sarà applicata soltanto alla singola colonna.