Un Group este o casetă care ține alte blocuri și le aranjează. Folosește-l ca să pui lucruri unul lângă altul, să faci coloane sau să dai unei părți dintr-o secțiune propriul fundal și chenar.
Unde poți folosi grupuri
Multe secțiuni acceptă un bloc Group: subsolul, newsletterul, hero-ul, slide-urile slideshow-ului, FAQ, înainte și după, recenziile, contactul, 404, confirmarea comenzii, rândurile pliabile și zona de text a listelor de produse, cum ar fi produsele recomandate și colecțiile. Fiecare secțiune decide ce blocuri pot intra în grupurile ei și câte grupuri acceptă.
Ca să adaugi unul în the builder, selectează secțiunea, apasă Add new block și alege Group. Apoi trage alte blocuri în el. Unele secțiuni (subsolul, newsletterul, recenziile) îți permit să pui și un grup într-un grup.
Aranjare
- Width: Fill ocupă spațiul liber și îl împarte egal cu celelalte grupuri Fill de alături. Fit este doar cât conținutul lui. Custom setează un Custom width în procente.
- Direction: Vertical pune blocurile unul sub altul, Horizontal unul lângă altul. Blocurile puse unul lângă altul trec pe un rând nou când nu mai au loc.
- Stack vertically on mobile (doar Horizontal): pe telefoane, blocurile se așază în schimb unul sub altul.
- Position: așază blocurile pe verticală (Top, Center, Bottom).
- Alignment: așază blocurile de la stânga la dreapta (Left, Center, Right).
- Space between: întinde blocurile cu spații egale între ele. Este oferit pe direcția în care curg blocurile: în Position pentru un grup vertical, în Alignment pentru un grup orizontal.
Aspect
- Use parent color scheme: pornit implicit, așa că grupul folosește culorile secțiunii. Oprește-l și alege o Color scheme ca să dai grupului propriul fundal și propriile culori de text.
- Border: None sau Solid. Solid adaugă Border thickness (de la 1 la 20 de pixeli) și Border opacity. Culoarea este cea a chenarului din schemă.
- Corner radius: rotunjește colțurile, de la 0 la 100 de pixeli.
- Background overlay: adaugă un strat de culoare peste fundal. Setează Overlay color și Overlay style: Solid sau Gradient, care se estompează până la transparent, cu Gradient direction pe Up sau Down. Util ca textul să se citească bine peste o imagine hero.
Spațiere
Gap este spațiul dintre blocurile din grup (de la 0 la 100 de pixeli). Padding este spațiul dintre marginea grupului și blocurile lui, pe fiecare parte.
Rețete
- Două butoane unul lângă altul într-un hero: pune-le pe amândouă într-un grup Horizontal cu un gap mic.
- Trei coloane în subsol: un grup Horizontal cu trei elemente Fill în el și Stack vertically on mobile pornit.
- Un card: un grup Vertical cu propria schemă de culori, un chenar Solid, colțuri rotunjite și padding.
- Text în stânga, buton în dreapta: un grup Horizontal cu Alignment setat pe Space between.
Bine de știut
- O coloană este mai lată decât vrei: două grupuri Fill împart spațiul egal. Setează unul pe Custom și dă-i un procent.
- Grupul nu apare: un grup fără blocuri sau doar cu blocuri ascunse nu este afișat în magazin.
- Group nu este în lista de blocuri: acea secțiune nu acceptă grupuri sau limita ei de grupuri a fost atinsă.
- Setările pentru Text, Button și Divider sunt în Blocurile Group, Text, Button și Divider: cum funcționează setările componentelor de aranjare?.