Un Gruppo è un contenitore che raccoglie altri blocchi e li dispone. Usalo per affiancare elementi, creare colonne o dare a una parte di una sezione il suo sfondo e il suo bordo.
Dove puoi usare i gruppi
Molte sezioni accettano un blocco Gruppo: il footer, la newsletter, la copertina, le slide dello slideshow, le FAQ, prima e dopo, le recensioni, i contatti, la pagina 404, la conferma d'ordine, le righe comprimibili e l'area di testo degli elenchi di prodotti come prodotti in evidenza e collezioni. Ogni sezione decide quali blocchi possono andare dentro i suoi gruppi, e quanti gruppi accetta.
Per aggiungerne uno nel builder, seleziona la sezione, fai clic su Aggiungi nuovo blocco e scegli Gruppo. Poi trascinaci dentro altri blocchi. Alcune sezioni (footer, newsletter, recensioni) permettono anche di mettere un gruppo dentro un gruppo.
Layout
- Larghezza: Riempi occupa lo spazio libero e lo divide in parti uguali con gli altri gruppi Riempi accanto. Adatta è largo solo quanto il suo contenuto. Personalizzato imposta una Larghezza personalizzata in percentuale.
- Direzione: Verticale impila i blocchi, Orizzontale li affianca. I blocchi affiancati vanno a capo quando non c'è abbastanza spazio.
- Impila verticalmente su mobile (solo Orizzontale): sui telefoni i blocchi vengono invece impilati.
- Posizione: dispone i blocchi dall'alto in basso (Superiore, Centro, Inferiore).
- Allineamento: dispone i blocchi da sinistra a destra (Sinistra, Centro, Destra).
- Spazio tra: distribuisce i blocchi con lo stesso spazio tra l'uno e l'altro. È offerto nella direzione in cui scorrono i blocchi: in Posizione per un gruppo verticale, in Allineamento per un gruppo orizzontale.
Aspetto
- Usa lo schema colori del genitore: attivo per impostazione predefinita, così il gruppo usa i colori della sezione. Disattivalo e scegli uno Schema di colori per dare al gruppo i suoi colori di sfondo e di testo.
- Bordo: Nessuno o Solido. Solido aggiunge Spessore del bordo (da 1 a 20 pixel) e Opacità del bordo. Il colore è quello del bordo dello schema.
- Raggio dell'angolo: arrotonda gli angoli, da 0 a 100 pixel.
- Sovrapposizione sfondo: aggiunge uno strato di colore sopra lo sfondo. Imposta Colore di sovrapposizione e Stile di sovrapposizione: Solido, oppure Sfumatura che svanisce fino al trasparente, con una Direzione della sfumaturaSu o Giù. Utile per rendere leggibile il testo sopra l'immagine della copertina.
Spaziatura
Spazio è lo spazio tra i blocchi dentro il gruppo (da 0 a 100 pixel). Spaziatura interna è lo spazio tra il bordo del gruppo e i suoi blocchi, su ogni lato.
Ricette
- Due pulsanti affiancati nella copertina: mettili entrambi in un gruppo Orizzontale con uno spazio piccolo.
- Tre colonne nel footer: un gruppo Orizzontale con tre elementi Riempi dentro, e Impila verticalmente su mobile attivo.
- Una scheda: un gruppo Verticale con il suo schema di colori, un bordo Solido, un raggio dell'angolo e la spaziatura interna.
- Testo a sinistra, pulsante a destra: un gruppo Orizzontale con Allineamento impostato su Spazio tra.
Da sapere
- Una colonna è più larga di quanto vorresti: due gruppi Riempi si dividono lo spazio in parti uguali. Imposta uno dei due su Personalizzato e dagli una percentuale.
- Il gruppo non compare: un gruppo senza blocchi, o con solo blocchi nascosti, non viene mostrato nel negozio.
- Gruppo non presente nell'elenco dei blocchi: quella sezione non accetta gruppi, oppure ha raggiunto il limite di gruppi.
- Le impostazioni di Testo, Pulsante e Separatore sono in Blocchi Gruppo, Testo, Pulsante e Separatore: come funzionano le impostazioni dei componenti di layout?.