Prezentare generală
Trei componente de aspect reutilizabile apar în aproape fiecare secțiune din constructor: Grup, Text și Separator. Înțelegerea lor vă permite să construiți orice aspect aveți nevoie fără a scrie CSS.
Grup
Un Grup este un container de aspect flexibil. Adăugați blocuri copil în interiorul acestuia (text, butoane, imagini, intrări pentru newsletter și chiar grupuri imbricate) și controlați exact cum sunt aranjate.
Direcție
- Verticală: copiii se stivuiesc de sus în jos (implicit pentru cele mai multe secțiuni).
- Orizontală: copiii stau alături într-un rând.
Activați Stivuiți pe mobil pentru a comuta automat un grup orizontal la o stivă verticală pe ecrane mici.
Aliniere și poziție
Aceste două setări controlează cum sunt distribuite copiii de-a lungul axelor principale și încrucișate. Semnificația lor se schimbă în funcție de direcția grupului:
- Direcție verticală: Poziția controlează distribuția verticală (sus, centru, jos sau între). Alinierea controlează plasarea orizontală (stânga, centru, dreapta sau între).
- Direcție orizontală: Alinierea controlează distribuția orizontală (stânga, centru, dreapta sau între). Poziția controlează plasarea verticală (sus, centru, jos sau între).
Între distribuie copiii uniform cu spațiu egal între ei, ceea ce este util pentru a întinde articolele pe un rând cu lățime completă.
Spațiu
Spațierea în pixeli între elementele copil (0-100 px, implicit 20 px).
Lățime
- Umplere: se extinde pentru a ocupa tot spațiul disponibil în părintele. Utilizați aceasta pentru grupurile care ar trebui să împartă spațiu egal în interiorul unui părinte orizontal.
- Potrivire: se micșorează la dimensiunea naturală a conținutului său. Utilizați aceasta pentru grupurile care ar trebui să fie doar atât de late cât este conținutul din interior.
- Personalizat: setați un procent specific (0-100%). Grupul va menține acea dimensiune fără să crească sau să se micșoreze.
Schema de culori și moștenirea
Implicit, un grup moștenește schema de culori a secțiunii sale părintești. Dezactivați Moștenire schemă pentru a atribui o schemă de culori explicită (1-9) din setările globale de culori. Aceasta vă permite să creați zone distincte de culoare a fundalului sau textului în interiorul unei secțiuni fără a adăuga o nouă secțiune.
Bordură
Adăugați o bordură în jurul grupului. Opțiuni: Niciuna sau Solidă. Când este selectată solidă, setați grosimea bordurii (1-20 px); culoarea provine din culoarea bordurii schemei active.
Rază
Rotunjirea colțurilor în pixeli (0-100). Utilizați aceasta pentru a crea containere de grup asemănătoare cardurilor.
Opacitate
Opacitatea generală a grupului (0-100%, implicit 100%).
Suprapunere
Adaugă un strat colorat în interiorul grupului. Când este activat, setați Culoarea suprapunerii (inclusiv transparența folosind glisorul de opacitate al selectorului de culori), Stilul (umplere plată solidă sau un gradient care se estompează la transparent) și pentru gradient Direcția (sus sau jos). Aceasta este utilizată în mod obișnuit pentru a crea un strat colorat semi-transparent pe un fundal media într-o secțiune hero.
Padding
Spațierea pe fiecare parte în pixeli (sus, stânga, dreapta și jos), fiecare de la 0 la 100 px. Padding-ul este aplicat în interiorul bordurii grupului, creând spațiu de respirație între bordură și copiii grupului.
Text
Un bloc de text redă conținut de text îmbogățit (titluri, paragrafe și text formatat) în interiorul unei secțiuni sau grup. Editorul suportă bold, italic, subliniere, tăiere și text colorat.
Presetare
Presetarea tipografiei controlează dimensiunea fontului, greutatea fontului și rolul semantic al textului. Presetările disponibile:
- Implicit: moștenește stilizarea de bază a textului secțiunii.
- Paragraf: stilul textului corpului.
- Titlu 1 până la Titlu 6: dimensiuni descrescătoare de la cel mai mare la cel mai mic, folosind fontul de titlu definit în setările tipografiei dvs.
Dimensiune
O dimensiune personalizată a fontului în pixeli (10-30 px) care suprascrie dimensiunea presetării. Lăsați la implicit pentru a lăsa presetarea să determine dimensiunea.
Lățime
- Potrivire: blocul de text este doar atât de lat cât conținutul său.
- Umplere: blocul de text se extinde la 100% din lățimea disponibilă a containerului.
Aliniere
Alinierea orizontală a textului: Stânga, Centru sau Dreapta.
Înălțimea rândului
Controlează ritmul vertical: Strâns (rânduri compacte), Normal (implicit) sau Lejer (rânduri spațioase).
Spațierea literelor
Controlează spațierea caracterelor: Strâns (caractere mai aproape), Normal (implicit) sau Lejer (caractere mai departe).
Schema de culori și moștenirea
Implicit, un bloc de text moștenește culoarea sa din secțiunea părintească. Dezactivați Moștenire schemă pentru a utiliza o schemă de culori specifică. Presetările de titlu utilizează culoarea de titlu a schemei; presetările de paragraf și implicit utilizează culoarea textului corpului schemei.
Padding
Spațierea interioară pe fiecare parte în pixeli (sus, stânga, dreapta și jos), fiecare de la 0 la 100 px.
Separator
O linie separatoare vizuală. Într-un aspect vertical apare ca o linie orizontală. În interiorul unui grup orizontal apare ca o linie verticală. Separatorul se adaptează automat la direcția containerului său părintesc.
Grosime
Grosimea liniei în pixeli (1-10 px, implicit 1 px).
Lungime
Lungimea liniei ca procent al containerului său (5-100%, implicit 100%). Setați aceasta la mai puțin de 100% și combinați cu alinierea pentru a crea o linie decorativă centrată sau retrasă.
Stilul capătului
- Ascuțit: capete dreptunghiulare.
- Rotunjit: capete în formă de pastilă.
Aliniere
Cum este poziționată linia când lungimea sa este mai mică de 100%: Început, Centru (implicit) sau Sfârșit.
Lățime
- Potrivire: containerul separatorului este doar atât de lat cât linia în sine.
- Umplere: containerul separatorului se extinde pentru a umple spațiul disponibil în părintele său.
Schema de culori
Opțional, setați o schemă de culori (1-9). Separatorul utilizează culoarea bordurii din schema selectată. Dacă nu este setată nicio schemă, moștenește culoarea din secțiunea sau grupul părintesc.
Padding
Spațierea pe fiecare parte în pixeli. Când separatorul este utilizat ca o secțiune de nivel superior, valorile de padding ajung la 200 px pentru mai mult spațiu de respirație vertical generos.
Capcane comune
- Două grupuri de umplere în interiorul unui părinte orizontal: fiecare va ocupa 50% din spațiul disponibil, ceea ce este de obicei ceea ce doriți. Dacă aveți nevoie ca una dintre laturi să fie mai lată decât cealaltă, utilizați lățimea Personalizată pe una dintre ele.
- Separatorul vertical nu apare: un separator devine vertical numai când este un copil direct al unui grup setat la direcție Orizontală. Asigurați-vă că direcția grupului părintesc este setată la orizontal.
- Text care afișează o culoare neașteptată: dacă un bloc de text apare în culoarea greșită, probabil moștenește de la un grup părintesc care are o schemă de culori diferită. Dezactivați Moștenire schemă pe blocul de text și atribuiți explicit schema corectă.