Progettare con la tecnologia Flexbox

Nota: questo contenuto vale sia per la modalità flex dell'Editor classico sia per l'Editor 2.0. Per sapere quale versione dell'editor usi, consulta «Editor Versions».

La tecnologia flexbox (in breve «flex») è un modulo di layout CSS per disporre gli elementi in sezioni e colonne, così che si adattino (crescano o si riducano) e si allineino alla perfezione dentro un contenitore. Così puoi progettare sezioni responsive e precise al pixel che si adattano a qualsiasi dimensione dello schermo. Se usi l'Editor classico, entra in modalità flex per progettare con la tecnologia flexbox. Se usi l'Editor 2.0, la tecnologia flexbox è attiva di base.

Pannello di design flex

Il pannello di design compare sul lato destro della modalità flex e contiene le proprietà di design dell'elemento selezionato (sezione, colonna, widget, Inner Column o griglia avanzata). Ogni elemento ha proprietà diverse regolabili nel pannello, quindi le opzioni cambiano a seconda di ciò che hai selezionato. Tra queste ci sono l'allineamento, il layout, lo spazio, le dimensioni e altro, a seconda dell'elemento.

Per aprire il pannello di design, fai clic su un elemento mentre sei in modalità flex e poi su Modifica design (devi essere in modalità flex solo se usi l'Editor classico). Il pannello si apre sul lato destro della modalità flex per non ostacolarti mentre visualizzi e modifichi il tuo design. Dopo averlo chiuso, puoi riaprirlo con l'icona del pannello di design nell'angolo in alto a destra.

Sezioni del pannello di design

Il pannello di design è composto da 5 sezioni: Allinea, Layout, Spaziatura, Dimensione e Animazione e sfondi. Ecco una descrizione di ognuna e di ciò che puoi farci.

Align

Disponibile per gli elementi singoli dentro una colonna o una Inner Column. Gli elementi singoli in una colonna o in una Inner Column verticale con disposizione automatica verticale si possono allineare a sinistra, al centro o a destra, oppure allargare in orizzontale fino a occupare il 100% della larghezza del contenitore.

Puoi allineare gli elementi anche dal menu fluttuante, facendo clic sull'icona Allinea.

Layout

Impostazioni predefinite. Scegli un layout predefinito per gli elementi dentro una sezione. Le opzioni includono l'allineamento verticale od orizzontale.

Elementi per riga. Se il tuo contenuto occupa più di una riga, usa il menu a discesa per scegliere quanti elementi appaiono per riga.

Adatta articoli. Compare quando hai righe di contenuto e ti permette di definire come gli elementi si adattano dentro le righe. Utile se hai un numero dispari di elementi.

Larghezza piena. Prima si chiamava «full bleed». La larghezza piena è disponibile solo per le sezioni e si può cambiare solo dal breakpoint principale desktop. Su On, il contenuto occupa tutta la larghezza dello schermo. Su Spento, la larghezza del contenuto arriva al massimo a 1920 pixel. Di base, la larghezza piena è su Spento. Per saperne di più sui breakpoint, consulta «Dimensioni dello schermo e dispositivi».

Allineamento dei contenuti. Ti permette di allineare in verticale o in orizzontale più elementi di una colonna o Inner Column in una volta sola. Nell'Editor classico, gli elementi si possono allineare solo uno alla volta e in orizzontale. Per maggiori informazioni, vedi la sezione «Allineamento e spazio in flex» più in basso.

Allinea le righe. Ti permette di impostare l'allineamento delle righe dentro una colonna o Inner Column. Questa impostazione non incide sull'allineamento degli elementi dentro le righe, ma solo sulle righe stesse.

Spacing

Spazio tra gli elementi. Ti permette di impostare una sola volta lo spazio tra le colonne o tra i widget, e si applica a tutte le colonne di una sezione o a tutti i widget di una colonna. Per le colonne, se la disposizione automatica è verticale, lo spazio tra i widget si misura in pixel; se è orizzontale, si misura in percentuale. Questa proprietà non si applica agli elementi dentro Inner Column o griglie avanzate.

Imposta margini e spaziatura interna. I margini sono lo spazio tra il bordo dell'elemento e il bordo della sezione, colonna, Inner Column o griglia avanzata che lo contiene. Di base, i valori orizzontali di margine e padding sono collegati: se cambi il valore sinistro, quello destro si aggiorna in automatico per corrispondere. Se non vuoi che siano collegati, fai clic sull'icona a catena.

Tieni presente che i margini inline degli elementi dentro colonne o Inner Column si possono regolare direttamente sul canvas. Per saperne di più, consulta «Outer and Inner Spacing».

Il padding è lo spazio interno dell'elemento. Fai clic sul numero del margine o del padding per scrivere un valore nuovo e usa il menu a discesa per scegliere l'unità di misura (px, %, vh, vw o A). Di base, lo spazio orizzontale si misura in percentuale e quello verticale in pixel.

Ad esempio, se selezioni una colonna e imposti il padding sinistro su 5 px, aggiungi 5 px di spazio tra il bordo sinistro della colonna e il bordo esterno degli elementi al suo interno. Se, per la stessa colonna, imposti il margine sinistro su 5 px, aggiungi 5 px di spazio tra il bordo della colonna e il bordo della sezione che la contiene.

Reimposta spaziatura interna e margine. Quando lo fai clic nel pannello di design o nel menu fluttuante, azzera il padding o i margini dell'elemento selezionato.

Dimensioni

A seconda dell'elemento selezionato, puoi regolare l'altezza e la larghezza, e i valori massimo e minimo. In modalità flex, l'altezza si può misurare in px, vh, percentuale e A. L'altezza delle colonne flex e lo spazio tra le colonne, però, si possono misurare solo in percentuale. Per saperne di più sulle unità di dimensione, vedi la sezione «Unità di dimensione» più in basso.

Le unità di dimensione predefinite cambiano per ogni elemento. Ad esempio, di base le caselle di testo hanno una larghezza del 100% e i pulsanti di 280px.

Nelle sezioni puoi cambiare solo l'altezza. La larghezza della sezione la definisce il dispositivo, mentre la larghezza del contenuto della sezione la definisce l'impostazione Content Width in Site Theme. Nelle colonne puoi cambiare solo la larghezza; l'altezza la definisce l'altezza della sezione o i suoi elementi interni. Nelle Inner Column e nei widget puoi impostare altezza e larghezza, insieme ai valori minimo e massimo di ciascuna. Puoi usare qualsiasi unità di dimensione.

Animazione e sfondi

Le proprietà di animazione e sfondo in modalità flex sono simili a quelle dell'Editor classico.

Ecco l'elenco dei trigger e delle animazioni disponibili:

• Animazioni per il trigger Scroll:
  • Fade
  • Slide
  • Bounce
  • Roll
  • Rotate
  • Zoom
  • Flip
• Animazioni per il trigger Entrance:
  • Fade in
  • Slide in
  • Bounce in
  • Rotate in
  • Roll in
  • Zoom in
  • Flip in
  • Flash
  • Pulse
  • Rubber band
  • Shake
  • Swing
  • Tada
  • Wobble

Nota: il parallax è disponibile per tutti i widget e i contenitori e si può applicare su tutte le dimensioni dello schermo. Per attivarlo, fai clic sull'immagine, scegli Modifica design, scorri fino alla sezione Sfondo del pannello di design e apri il menu Posizione dell'immagine.

L'opzione per mantenere statica un'immagine di sfondo non è disponibile su tablet, mobile e Mac OS per una limitazione di iOS.

Pannello di design per le griglie avanzate

Le griglie avanzate hanno proprietà del pannello di design che non sono disponibili per altri tipi di elemento, perché permettono di creare composizioni libere ed elementi sovrapposti. Ti consigliamo di controllare il tuo design a diversi breakpoint.

Allinea. Gli elementi singoli di una griglia avanzata si possono allineare e allargare in qualsiasi direzione, perché non sono vincolati dalla disposizione automatica.

Ordine. Nella sezione Organizzazione del pannello di design, questa proprietà si può usare solo quando ci sono più elementi dentro una griglia avanzata. Ti permette di portare un elemento selezionato davanti, avanti, dietro o indietro. Per maggiori informazioni, vedi la sezione «Creare elementi sovrapposti in flex» più in basso.

Riorganizza il layout. Ti permette di scegliere come sono disposte le colonne e le righe dentro la griglia avanzata per creare un layout.

Personalizza il layout. Ti permette di scegliere come sono disposte le colonne e le righe dentro la griglia avanzata per creare un layout.

Pin. Ti permette di definire la posizione dell'elemento dentro la griglia. Una volta impostata, l'elemento resta nella stessa posizione anche se cambia la dimensione della griglia.

Posizione sulla griglia. Disponibile per gli elementi dentro griglie avanzate divise in colonne o righe per creare un layout. Mostra dove si trova l'elemento nella griglia.

Mantieni le proporzioni. Su On, fa sì che gli elementi dentro una griglia avanzata mantengano le proporzioni anche se cambia la dimensione della griglia.

Anche il widget Image ha un'opzione Mantieni le proporzioni, che ne conserva le proporzioni originali.

Unità di dimensione

Nota: questo contenuto vale sia per la modalità flex dell'Editor classico sia per l'Editor 2.0. Per sapere quale versione dell'editor usi, consulta «Editor Versions».

Capire e usare bene le unità di dimensione è fondamentale per creare layout non solo belli da vedere, ma anche responsive su vari dispositivi e dimensioni dello schermo. Il pannello di design, che si trova sul lato destro dell'editor canvas nell'Editor 2.0 o quando sei in modalità flex nell'Editor classico, è il centro di controllo delle proprietà di design degli elementi selezionati, tra cui sezioni, colonne, widget, Inner Column e griglie avanzate. Questo articolo passa in rassegna le unità di dimensione disponibili nel pannello di design e offre esempi pratici del loro uso.

Inoltre, l'Editor 2.0 ti permette di configurare le unità di dimensione dal breakpoint principale (desktop), così da garantire la scalabilità su tutte le dimensioni dello schermo. Puoi regolare le unità di dimensione sui breakpoint tablet e mobile senza influire sugli altri. Per maggiori informazioni, consulta «Dimensioni dello schermo e dispositivi».

Percentuale (%) per uno scaling flessibile e proporzionale

La percentuale (%) è un'unità di dimensione dinamica che determina quale proporzione del contenitore (sezione, colonna, Inner Column o griglia avanzata) occupa l'elemento sulle varie dimensioni dello schermo. Di solito, la larghezza degli elementi flex è espressa in percentuale di base. Conviene usare le percentuali quando vuoi mantenere un design coerente tra le dimensioni dello schermo senza dover regolare i pixel a mano su ogni breakpoint.

Ad esempio, se imposti entrambe le colonne di un layout a due colonne al 50% di larghezza, si adattano in automatico al 50% su tutte le dimensioni dello schermo.

Le percentuali sono utili per conservare le dimensioni relative degli elementi su diverse dimensioni dello schermo. In pratica, gli elementi si adattano in proporzione al loro contenitore principale (sezione o colonna), il che garantisce un aspetto uniforme del layout.

Ad esempio, un'immagine con una larghezza del 50% dentro una colonna occuperà sempre metà della larghezza di quella colonna, a prescindere dalla dimensione dello schermo. Così, anche se su mobile la colonna e l'immagine appaiono più strette rispetto al desktop, l'immagine conserva la sua larghezza proporzionale. Allo stesso modo, impostare il padding tra le colonne al 4% garantisce uno spazio coerente rispetto alle colonne e agli altri elementi dello schermo, adattandosi alle diverse dimensioni.

Pixel (px) per dimensioni fisse e stabili

I pixel (px) sono un'unità di misura fissa a cui non incidono le variazioni di dimensione dei dispositivi. Ad esempio, un pulsante impostato su 250px mantiene la sua dimensione su mobile, tablet e desktop.

Tuttavia, affidarsi solo ai pixel per le dimensioni può ostacolare l'adattabilità e obbligarti a regolazioni manuali su ogni breakpoint. Per questo, anche se i pixel garantiscono una dimensione costante, è preferibile usare le percentuali per favorire un design responsive. Così riduci le regolazioni dei pixel una a una sui breakpoint, snellisci il processo di design e migliori l'adattabilità generale.

Larghezza della viewport (vw) per uno scaling responsive in base alla larghezza dello schermo

La larghezza della viewport (vw) regola gli elementi in modo dinamico in base alla larghezza dello schermo (viewport), garantendo uno scaling proporzionale su dispositivi diversi. Ad esempio, assegnare 50 vw a un elemento gli riserva metà della larghezza dello schermo.

Altezza della viewport (vh) per uno scaling responsive in base all'altezza dello schermo

L'altezza della viewport (vh) adatta gli elementi in modo dinamico in relazione all'altezza dello schermo (viewport). Ad esempio, assegnare 25 vh a un elemento gli riserva un quarto dell'altezza dello schermo. È particolarmente utile per gli sfondi a tutto schermo (100% vh) o per gli elementi che devono sincronizzarsi con l'altezza dello schermo.

Automatico (A) per un adattamento in base al contenuto

L'unità automatica si adatta in modo dinamico all'altezza del contenuto, il che la rende adatta ai blocchi di testo e alle altezze delle colonne: le fa ridimensionare in base al loro contenuto. Di solito, i blocchi di testo usano unità automatiche di base. Così gli elementi si espandono o si contraggono senza problemi e il layout mantiene le sue proporzioni.

Capire il concetto di padre-figlio negli elementi annidati

Il concetto di padre-figlio regola l'organizzazione degli elementi: gli elementi principali come header, body, menu e footer contengono almeno una sezione. Ogni sezione, a sua volta, ospita almeno una colonna, che fa da contenitore per vari elementi come testo, immagini o widget come le Inner Column e le Advanced Grid.

Gli elementi padre conservano le loro impostazioni di design, il che permette di controllarne l'aspetto in modo centralizzato. Se però una sezione dentro un elemento padre ha impostazioni proprie di colore di sfondo, il fondo dell'elemento padre potrebbe non riflettere quella personalizzazione. Questa struttura gerarchica dà un approccio sistematico all'organizzazione del sito, favorisce flussi di lavoro di design efficienti e rende coerente la presentazione dei contenuti.

Selezionare e spostarsi tra gli elementi flex sul canvas

La gerarchia degli elementi segue una struttura predefinita: le sezioni contengono colonne e le colonne contengono widget. Per questa disposizione, non puoi aggiungere un widget direttamente a una sezione senza che sia annidato dentro una colonna. Ci sono vari modi per selezionare un elemento (sezione, colonna o widget):

• Selezione diretta degli oggetti sull'editor canvas: puoi interagire direttamente con gli elementi sull'editor canvas, il che rende più facile individuare e modificare i singoli componenti senza dover navigare a lungo tra pannelli o menu. Quando selezioni un oggetto, il pannello di design con tutte le opzioni di design di quell'elemento compare sulla destra.
• Breadcrumb del menu fluttuante: puoi tornare ai contenitori padre usando i breadcrumb del menu fluttuante. Quando selezioni un elemento specifico, ti basta fare clic sui breadcrumb blu in cima all'elemento per tornare al suo contenitore padre.
• Breadcrumb in cima al pannello di design: anche il pannello di design include, in alto, opzioni di navigazione sotto forma di breadcrumb. Con questi puoi saltare rapidamente tra le diverse sezioni o gli elementi del canvas.
• Pannello dei livelli: quando selezioni un elemento, il pannello dei livelli evidenzia i livelli associati a quell'elemento. Allo stesso tempo, l'editor dà un riscontro visivo che aiuta a spostarsi nel canvas.

Sezioni flex

Le sezioni flex sono righe con due colonne flex predefinite che formano un layout di base. Una volta aggiunta una sezione, puoi aggiungere, rimuovere o riorganizzare altre colonne, Inner Column o griglie avanzate per creare il layout che vuoi. Poi puoi aggiungere widget a quel layout.

Aggiungere una sezione flex

Per aggiungere una sezione:

1. Passa il mouse tra due righe e fai clic su Aggiungi sezione. Oppure fai clic destro per aprire il menu contestuale, fai clic su Aggiungi e scegli Sezione flessibile.
2. Nel pannello laterale, fai clic su Sezione flessibile.
3. Scegli la sezione flex che vuoi.
4. Fai clic su Salva.

Nota: l'opzione per mantenere statica un'immagine di sfondo non è disponibile su tablet e mobile per una limitazione di iOS.

Salvare una sezione flex

Per salvare una sezione:

1. Passa il mouse sulla sezione che vuoi e fai clic su Flex Section, nell'angolo in alto a sinistra della sezione.
2. Fai clic su Salva come sezione e poi su Seleziona solo questa riga.
3. Scrivi un nome per la sezione, scegli la categoria in cui salvarla e definisci le sue autorizzazioni.
4. Fai clic su Inizia a creare.
5. Fai clic su Fine.

Eliminare una sezione flex

Per eliminare una sezione, fai clic destro per aprire il menu contestuale e scegli Elimina. Oppure fai clic sull'icona di eliminazione nel menu fluttuante.

Colonne flex

Una volta aggiunta una sezione al tuo sito, puoi aggiungere colonne per contenere i widget dentro la sezione. Tutte le sezioni contengono colonne di base, ma puoi comunque aggiungerne altre.

Tieni presente che il numero massimo di colonne è 8.

Nota: quando aggiungi un elemento a una colonna, la posizione la determinano le impostazioni di disposizione automatica. Per cambiare la direzione della disposizione automatica, apri il pannello di design e nella sezione Layout scegli orizzontale o verticale.

Aggiungere una colonna flex

Per aggiungere una colonna:

1. Fai clic per selezionare una colonna esistente.
2. Nel menu fluttuante, fai clic sull'icona dei tre puntini orizzontali e scegli Aggiungi colonna. Oppure fai clic sull'icona più sul bordo sinistro o destro della colonna.

Duplicare una colonna flex

Puoi duplicare una colonna, e viene aggiunta a destra dell'originale. Non puoi aggiungere colonne che superano il 100% della larghezza.

Per duplicare una colonna:

1. Fai clic per selezionare una colonna.
2. Nel menu fluttuante, fai clic sull'icona Duplica. Oppure fai clic destro sulla colonna per aprire il menu contestuale e scegli Duplica.

Eliminare una colonna flex

Puoi eliminare una colonna per toglierla dalla sezione. Ogni sezione, però, deve contenere almeno una colonna, quindi non puoi eliminare l'ultima colonna di una sezione.

Per eliminare una colonna:

1. Fai clic per selezionare la colonna.
2. Nel menu fluttuante, fai clic sull'icona Elimina. Oppure fai clic destro sulla colonna per aprire il menu contestuale e scegli Elimina.

Aggiungere widget in flex

Puoi aggiungere widget a colonne, Inner Column o griglie avanzate in diversi modi. Se sei già in modalità flex, puoi aggiungerli direttamente dal pannello laterale: fai clic su Widgets e scegli il widget che vuoi.

Nota: se usi la modalità flex nell'Editor classico, non puoi trascinare e rilasciare un widget in una colonna flex dal pannello laterale.

Per aggiungere un widget:

1. Fai clic su una colonna, una Inner Column o una griglia avanzata per selezionarla.
2. Fai clic sull'icona più al centro della colonna, della Inner Column o della griglia avanzata. Oppure fai clic sull'icona più nel menu fluttuante.
3. Scegli un widget.

Puoi aggiungere widget anche dal pannello dei livelli.

Per aggiungere un widget dal pannello dei livelli:

1. Fai clic per selezionare una colonna.
2. Nel pannello laterale, fai clic su Livelli.
3. Nel pannello dei livelli, passa il mouse sulla colonna, sulla Inner Column o sulla griglia avanzata a cui vuoi aggiungere un widget e fai clic sull'icona più.
4. Scegli un widget.

Allineamento e spazio in flex

Puoi combinare allineamento e spazio per ottenere i tuoi design.

Allineare più elementi

Quando progetti con Flex, risparmi tempo allineando più elementi contemporaneamente dentro la stessa sezione, colonna o Inner Column.

Per allineare più elementi:

1. Seleziona la sezione, la colonna o la Inner Column e fai clic sull'icona di allineamento nel menu fluttuante.
2. Scegli l'allineamento che vuoi.

Il pannello di design offre altre opzioni di allineamento, come cambiare la direzione della disposizione automatica, allargare gli elementi e altro.

Per allineare gli elementi dal pannello di design:

1. Fai clic destro sulla sezione, sulla colonna o sulla Inner Column che vuoi e scegli Modifica design.
2. Nella sezione Layout del pannello di design, sotto Allineamento dei contenuti, scegli l'allineamento verticale e orizzontale del contenuto.

Quando allinei il testo dal menu fluttuante o dal pannello di design, si allineano sia il testo sia il tag div.

Allineare un solo elemento

Anche se puoi allineare più elementi in una volta, a volte ti serve solo cambiare l'allineamento di un elemento dentro una colonna flex senza toccare gli altri.

Per allineare un solo elemento:

1. Seleziona l'elemento che vuoi.
2. Nel menu fluttuante, fai clic sull'icona di allineamento e scegli l'allineamento che vuoi. Oppure fai clic destro sull'elemento e scegli Modifica design. Si apre il pannello di design, dove puoi scegliere l'allineamento nella sezione Allinea.

Spazio tra gli elementi

Puoi impostare la quantità di spazio orizzontale o verticale tra le colonne della stessa sezione flex o tra i widget dentro una colonna, una Inner Column o una griglia avanzata.

Per impostare lo spazio tra gli elementi:

1. Fai clic destro sulla sezione, sulla colonna, sulla Inner Column o sulla griglia avanzata che vuoi e scegli Modifica design.
2. Nella sezione Spaziatura del pannello di design, sotto Spaziatura tra elementi, scrivi il valore o usa il cursore per impostare la percentuale di spazio orizzontale o il valore in pixel di spazio verticale che vuoi tra gli elementi, nel campo Spaziatura tra gli articoli.

Puoi azzerare il padding sia delle sezioni sia delle colonne facendo clic sull'icona Reimposta la spaziatura interna nel menu fluttuante.

Creare elementi sovrapposti in flex

Le sezioni flex creano un layout e allineano gli oggetti in automatico, il che ti aiuta a progettare sezioni belle in modo facile e veloce. Quando però hai un design più complesso con oggetti sovrapposti o una composizione libera, ti serve una griglia avanzata. Le griglie avanzate ti permettono di collocare gli elementi in una composizione libera, senza disposizione automatica. Per questo, ti consigliamo di controllare il tuo design su tutti i breakpoint.

Per creare elementi sovrapposti:

1. Fai clic per selezionare una colonna flex.
2. Nel menu fluttuante o nella colonna flex, fai clic sull'icona più.
3. Nella sezione degli elementi flex, scegli Griglia avanzata (prima chiamato containers). Per seguire le buone pratiche, trascina i bordi della griglia avanzata così che occupi tutta la larghezza della colonna flex.
4. Nella sezione Layout del pannello di design, scegli una griglia già pronta in Riorganizza il layout. Se invece vuoi creare la tua, usa i menu a discesa Colonne e Righe in Personalizza il layout per aggiungere colonne o righe.
5. Nel menu fluttuante, fai clic sull'icona più, scegli i widget che vuoi e disponili nella griglia avanzata.
6. Fai clic per selezionare un elemento e, nella sezione Organizza del pannello di design, scegli Porta avanti, Porta avanti, Invia nuovamente o Invia in secondo piano.

Ti consigliamo di controllare il tuo design a ogni breakpoint quando usi le griglie avanzate. Con elementi sovrapposti, potresti dover regolare il design su alcuni breakpoint.

Widget Inner Column e Advanced Grid

Nel web design, scegliere il sistema di layout giusto influisce molto sull'esperienza utente, soprattutto quando integri in un sito elementi di layout come la Inner Column e l'Advanced Grid.

Il widget Inner Column è consigliato per:

• Layout modulari: perfetti per creare layout modulari in cui il contenuto scorre in modo lineare, ideali per menu di navigazione, schede o layout a lista.
• Design responsive: eccelle nel creare design responsive che si adattano senza problemi a varie dimensioni dello schermo e dispositivi, con allineamento e leggibilità ottimali.
• Contenuto dinamico: adatto a gestire contenuti dinamici che possono variare in lunghezza o dimensione, perché permette di controllare in modo dinamico il comportamento e la dimensione degli elementi dentro un contenitore.
• Layout annidati: la capacità di annidamento della Inner Column la rende adatta a creare layout annidati complessi. Puoi annidare altre Inner Column dentro il contenitore esterno quando ti serve, con flessibilità e adattabilità nell'organizzare le gerarchie dei contenuti. Allo stesso modo, l'Advanced Grid permette di annidare widget, Inner Column e persino altre Advanced Grid dentro la sua struttura.

Il widget Advanced Grid è consigliato per:

• Strutture di layout complesse: indispensabile per creare layout intricati con più righe e colonne, con un controllo preciso della collocazione e della dimensione degli elementi.
• Design non lineari: perfetta per progettare layout non lineari in cui gli elementi devono essere collocati a prescindere dal loro ordine di origine, per composizioni creative e disposizioni asimmetriche. In pratica, gli elementi si possono collocare e disporre in base alle esigenze del design.
• Web design responsive: pur richiedendo una pianificazione attenta, l'Advanced Grid offre strumenti potenti per creare design responsive. Puoi definire regolazioni precise del layout, come riordinare le colonne, far occupare agli elementi più celle o modificare gli spazi della griglia a diverse dimensioni della viewport, per una presentazione ottimale su vari dispositivi.

Quando conviene usare un widget Inner Column e quando un widget Advanced Grid?

Le Inner Column sono più adatte ai layout modulari, soprattutto quando ti serve un controllo preciso dei singoli elementi dentro una sezione o quando vuoi una disposizione automatica. Tieni presente, però, che anche se le Inner Column mantengono l'integrità della sezione, spostare i widget al loro interno è meno flessibile rispetto alle Advanced Grid.

Le Inner Column permettono di controllare righe o colonne separatamente, ideali per i layout monodimensionali. Le Advanced Grid permettono di gestire righe e colonne insieme, con un controllo completo di tutta la struttura del layout, ideale per i layout bidimensionali.

L'Advanced Grid (CSS Grid) può avere un leggero vantaggio nel gestire layout complessi, perché ottimizza la struttura del DOM, l'efficienza di rendering, il caricamento delle risorse, l'adattabilità e riduce le richieste HTTP. Le Inner Column, pur essendo efficaci, possono comportare più elementi HTML annidati, con tempi di rendering un po' più lenti rispetto alle Advanced Grid.

Puoi anche usare il widget Inner Column e il widget Advanced Grid nella stessa sezione e in tutto il sito per ottenere i design che vuoi. Si tratta di trovare l'equilibrio tra la struttura generale del layout e i dettagli più fini dell'organizzazione dei contenuti.

Relazioni padre-figlio tra gli elementi widget

Capire le relazioni padre-figlio è fondamentale per sfruttare bene le Inner Column e le Advanced Grid. In questi sistemi di layout, la colonna che ospita gli elementi fa da padre, mentre gli elementi al suo interno, come i widget aggiuntivi, sono considerati figli. Questa relazione stabilisce come gli elementi vengono collocati e allineati dentro il layout, il che dà coerenza e integrità strutturale al tuo web design.

Tieni presente che non serve sempre aggiungere Inner Column. Spesso, una sola colonna basta per molti casi. La Inner Column facilita la collocazione degli elementi in orizzontale o in verticale. Servono una sezione che faccia da contenitore flex e una colonna che ospiti le Inner Column: entrambi i tipi di colonna funzionano come elementi flex e rappresentano rispettivamente l'elemento padre e quello figlio.

L'Advanced Grid permette di collocare gli elementi in direzione verticale e orizzontale. Servono una sezione che faccia da contenitore e un'Advanced Grid che dichiari il layout a griglia sull'elemento padre o contenitore, così che tutti i suoi figli diventino elementi della griglia.