Prezentare generală
Trei componente reutilizabile de layout apar în aproape fiecare secțiune din builder: Group, Text și Divider. Împreună, acestea îți permit să creezi orice layout fără să scrii CSS. Selectează un bloc pentru a-i deschide setările.
Group
Un Group este un container flexibil de layout. Adaugă blocuri copil în interiorul său (text, butoane, imagini, câmpuri de newsletter, chiar și grupuri imbricate) și controlează modul în care sunt aranjate.
Direcție
- Vertical: copiii se suprapun de sus în jos.
- Orizontal: copiii sunt așezați unul lângă altul, pe un rând.
Comutatorul Stack vertical pe mobil apare doar când Direcția este Orizontal. Activează-l pentru a transforma un rând orizontal într-o stivă verticală pe ecrane mici.
Poziție și aliniere
Acestea distribuie copiii de-a lungul axelor principale și secundare. Sensul lor se schimbă în funcție de direcție, iar opțiunea Între (spațiu egal între copii) există doar pe axa principală:
- Direcție verticală: Poziție este axa principală (verticală): sus, centru, jos sau între. Aliniere este axa secundară (orizontală): stânga, centru sau dreapta.
- Direcție orizontală: Aliniere este axa principală (orizontală): stânga, centru, dreapta sau între. Poziție este axa secundară (verticală): sus, centru sau jos.
Lățime
- Fill: se extinde pentru a ocupa tot spațiul disponibil în părinte. Folosește această opțiune pentru grupuri care trebuie să împartă spațiul în mod egal într-un părinte orizontal.
- Fit: se restrânge la dimensiunea naturală a conținutului.
- Custom: afișează un slider Custom width setat ca procent (0 la 100%). Grupul păstrează această dimensiune fără să crească sau să scadă.
Spațiere
Distanța în pixeli între elementele copil (0 la 100 px, implicit 20 px).
Schemă de culori
Folosește schema de culori a părintelui este activată implicit, astfel grupul moștenește schema părintelui. Dezactiveaz-o pentru a afișa selectorul Color scheme și a alege una dintre schemele globale. Astfel poți crea zone de culoare distincte într-o secțiune.
Bordură
Bordura poate fi None sau Solid. Solid afișează două slidere: Grosime bordură (1 la 20 px, implicit 1) și Opacitate bordură (0 la 100%, implicit 100). Culoarea provine din culoarea de bordură a schemei active.
Raza colțurilor
Rotunjirea colțurilor în pixeli (0 la 100), independentă de bordură. Folosește pentru containere de tip card.
Overlay de fundal
Comutatorul Background overlay adaugă un strat colorat peste fundalul grupului. Când este activ, setează Overlay color (inclusiv transparența prin sliderul de opacitate), Overlay style (Solid umplere plată sau Gradient care se estompează spre transparent), iar pentru gradient Gradient direction (Sus sau Jos). Folosit frecvent pentru a colora un fundal media.
Padding
Spațiere internă pe fiecare latură, în pixeli, fiecare între 0 și 100 px. Padding-ul este în interiorul bordurii, între aceasta și copii.
Text
Un bloc de text afișează titluri, paragrafe și conținut formatat. Editorul de text suportă bold, italic, subliniat, tăiat și text colorat.
Presetare
Presetarea de tipografie setează familia de font, greutatea implicită și tag-ul HTML semantic (rolul pe pagină):
- Default: moștenește stilul de bază al secțiunii.
- Paragraph: stil pentru text de corp.
- Heading 1 până la Heading 6: stiluri pentru titluri, folosind fonturile de heading și subheading.
Dimensiune
O dimensiune personalizată a fontului în pixeli (10 la 30 px, implicit 16). Aceasta este dimensiunea la care blocul este afișat efectiv.
Lățime și aliniere
- Fit: blocul este doar cât conținutul său.
- Fill: blocul se extinde la 100% din lățimea containerului.
Alinierea (Stânga, Centru, Dreapta) apare doar când Lățimea este setată pe Fill, deoarece alinierea are sens doar când blocul umple containerul.
Înălțime linie și spațiere litere
Line height setează ritmul vertical: Normal (implicit), Tight sau Loose. Letter spacing setează spațierea dintre caractere cu aceleași trei opțiuni.
Schemă de culori
Într-un grup, Folosește schema de culori a părintelui este activată implicit. Dezactiveaz-o pentru a afișa selectorul Color scheme. Presetările de heading folosesc culoarea de heading a schemei, iar paragraph și default folosesc culoarea de text principal. Ca secțiune independentă, selectorul apare fără opțiunea de moștenire.
Padding
Spațiere internă pe fiecare latură, în pixeli, fiecare între 0 și 100 px.
Divider
O linie de separare care se adaptează la părinte. Într-un layout vertical (coloană) este o linie orizontală; într-un grup orizontal devine o linie verticală.
Lățime
- Fit: containerul este doar cât linia.
- Fill: containerul se extinde pentru a umple spațiul disponibil.
Grosime
Grosimea liniei în pixeli (1 la 10 px, implicit 1). Pentru un divider orizontal aceasta este înălțimea, iar pentru unul vertical este lățimea.
Lungime
Întinderea liniei ca procent din container (5 la 100%, implicit 100). Setează sub 100% pentru o linie parțială, retrasă.
Aliniere
Pozitionează linia când lungimea este sub 100%: Start, Center (implicit) sau End. Acest control este ascuns când Lungimea este 100%.
Raza colțurilor
- Sharp: capete drepte.
- Rounded: capete rotunjite, tip pastilă.
Schemă de culori
Opțional poți alege o Color scheme. Divider-ul folosește culoarea de bordură din acea schemă. Dacă nu este setată, moștenește culoarea de la secțiunea sau grupul părinte.
Padding
Spațiere pe fiecare latură, în pixeli. Ca bloc, intervalul este 0 la 100 px. Când divider-ul este adăugat ca secțiune de nivel superior, padding-ul poate ajunge la 200 px (implicit 20) pentru mai mult spațiu vertical.
Capcane frecvente
- Două grupuri fill într-un părinte orizontal: fiecare ocupă 50% din spațiu, ceea ce de obicei este dorit. Pentru a face o parte mai lată, setează lățimea acelui grup pe Custom.
- Divider vertical care nu apare: un divider devine vertical doar când este copil direct al unui grup cu direcție Orizontală. Verifică direcția grupului părinte.
- Lipsă opțiune Între: Între apare doar pe axa pe care curg copiii, deci pe Poziție la grupuri verticale și pe Aliniere la grupuri orizontale.
- Text cu culoare greșită: probabil moștenește de la un grup părinte cu altă schemă. Dezactivează Folosește schema de culori a părintelui pe blocul de text și alege explicit schema dorită.
Pentru unde pot fi plasate aceste componente, vezi Sections and blocks.