Prehľad
Tri opakovane použiteľné komponenty rozloženia sa vyskytujú takmer v každej sekcii tvorcu: Skupina, Text a Oddeľovač. Ich pochopenie vám umožní vybudovať akékoľvek rozloženie bez písania CSS.
Skupina
Skupina je flexibilný kontajner rozloženia. Pridajte do nej podradené bloky (text, tlačidlá, obrázky, vstupy newslettera a dokonca vnorené skupiny) a presne ovládajte, ako sú usporiadané.
Smer
- Vertikálny: podriadené prvky sa ukladajú zhora nadol (predvolené pre väčšinu sekcií).
- Horizontálny: podriadené prvky sedia vedľa seba v riadku.
Povolte Zásobníkové zobrazenie na mobile, aby sa horizontálna skupina automaticky prepla na vertikálny zásobník na malých obrazovkách.
Zarovnanie a poloha
Tieto dve nastavenia ovládajú, ako sú podriadené prvky distribuované pozdĺž hlavných a vedľajších osí. Ich význam sa mení v závislosti od smeru skupiny:
- Vertikálny smer: Poloha ovláda vertikálnu distribúciu (hore, v strede, dole alebo medzi). Zarovnanie ovláda horizontálne umiestnenie (vľavo, v strede, vpravo alebo medzi).
- Horizontálny smer: Zarovnanie ovláda horizontálnu distribúciu (vľavo, v strede, vpravo alebo medzi). Poloha ovláda vertikálne umiestnenie (hore, v strede, dole alebo medzi).
Medzi rovnomerne rozmiesťuje podriadené prvky s rovnakým priestorom medzi nimi, čo je užitočné na natiahnutie položiek cez riadok na celú šírku.
Medzera
Medzera v pixeloch medzi podriadenými prvkami (0 až 100 px, predvolene 20 px).
Šírka
- Vyplniť: rozširuje sa, aby zabrala všetok dostupný priestor v rodičovi. Použite to pre skupiny, ktoré by mali rovnako zdieľať priestor vo vnútri horizontálneho rodiča.
- Prispôsobiť: scvrkne sa na prirodzenú veľkosť svojho obsahu. Použite to pre skupiny, ktoré by mali byť iba také široké, aký je ich obsah.
- Vlastná: nastavte konkrétne percento (0 až 100 %). Skupina si zachová túto veľkosť bez rastu alebo scvrknutia.
Farebná schéma a dedičnosť
Skupina predvolene dedí farebnú schému svojej rodičovskej sekcie. Vypnite Zdediť schému, aby ste priradili explicitnú farebnú schému (1 až 9) z vašich globálnych nastavení farieb. Toto vám umožní vytvárať odlišné zóny farby pozadia alebo textu vo vnútri sekcie bez pridávania novej sekcie.
Ohraničenie
Pridajte ohraničenie okolo skupiny. Možnosti: Žiadne alebo Plné. Keď je vybrané plné, nastavte hrúbku ohraničenia (1 až 20 px); farba pochádza z farby ohraničenia aktívnej schémy.
Polomer
Zaoblenie rohov v pixeloch (0 až 100). Použite to na vytvorenie kontajnerov skupín podobných kartám.
Nepriehľadnosť
Celková nepriehľadnosť skupiny (0 až 100 %, predvolene 100 %).
Prekrytie
Pridáva farebná vrstvu do skupiny. Keď je povolené, nastavte Farbu prekrytia (vrátane priehľadnosti pomocou posúvača nepriehľadnosti výberu farby), Štýl (plná plochá výplň alebo gradient, ktorý mizne do priehľadnosti) a pre gradient Smer (hore alebo dole). Toto sa bežne používa na vytvorenie polopriesvitnej vrstvovej vrstvy nad mediálnym pozadím v hero sekcii.
Výplň
Medzera na každej strane v pixeloch (hore, vľavo, vpravo a dole), každá od 0 do 100 px. Výplň je aplikovaná vo vnútri ohraničenia skupiny, čím vytvára dýchací priestor medzi ohraničením a podriadenými prvkami skupiny.
Text
Textový blok renderuje bohatý textový obsah (nadpisy, odseky a formátovaný text) vo vnútri sekcie alebo skupiny. Editor podporuje tučné, kurzívu, podčiarknutie, prečiarknutie a farebný text.
Predvoľba
Typografická predvoľba ovláda veľkosť písma, váhu písma a sémantickú rolu textu. Dostupné predvoľby:
- Predvolené: dedí základný štýl textu sekcie.
- Odsek: štýl textu tela.
- Nadpis 1 až Nadpis 6: klesajúce veľkosti od najväčšej po najmenšiu, používajúce písmo nadpisu definované v nastaveniach typografie.
Veľkosť
Vlastná veľkosť písma v pixeloch (10 až 30 px), ktorá prepíše veľkosť predvoľby. Ponechajte na predvolenom, aby predvoľba určila veľkosť.
Šírka
- Prispôsobiť: textový blok je iba taký široký ako jeho obsah.
- Vyplniť: textový blok sa rozširuje na 100 % dostupnej šírky kontajnera.
Zarovnanie
Horizontálne zarovnanie textu: Vľavo, V strede alebo Vpravo.
Výška riadka
Ovláda vertikálny rytmus: Tesný (kompaktné riadky), Normálny (predvolené) alebo Voľný (priestranné riadky).
Medzera medzi písmenami
Ovláda medzeru medzi znakmi: Tesná (znaky bližšie k sebe), Normálna (predvolené) alebo Voľná (znaky ďalej od seba).
Farebná schéma a dedičnosť
Textový blok predvolene dedí farbu z rodičovskej sekcie. Vypnite Zdediť schému, aby ste použili konkrétnu farebnú schému. Predvoľby nadpisov používajú farbu nadpisu schémy; predvoľby odseku a predvolené používajú farbu textu tela schémy.
Výplň
Vnútorná medzera na každej strane v pixeloch (hore, vľavo, vpravo a dole), každá od 0 do 100 px.
Oddeľovač
Vizuálna oddeľovacia čiara. Vo vertikálnom rozložení sa zobrazuje ako horizontálna čiara. Vo vnútri horizontálnej skupiny sa zobrazuje ako vertikálna čiara. Oddeľovač sa automaticky prispôsobuje smeru svojho rodičovského kontajnera.
Hrúbka
Hrúbka čiary v pixeloch (1 až 10 px, predvolene 1 px).
Dĺžka
Rozsah čiary ako percento jej kontajnera (5 až 100 %, predvolene 100 %). Nastavením na menej ako 100 % a kombináciou so zarovnaním vytvoríte centrovanu alebo vloženú dekoratívnu čiaru.
Štýl koncov
- Ostrý: pravouhlé konce.
- Zaoblený: konce v tvare pilulky.
Zarovnanie
Ako je čiara umiestnená, keď je jej dĺžka menšia ako 100 %: Začiatok, Stred (predvolené) alebo Koniec.
Šírka
- Prispôsobiť: kontajner oddeľovača je iba taký široký ako samotná čiara.
- Vyplniť: kontajner oddeľovača sa rozširuje, aby vyplnil dostupný priestor vo svojom rodičovi.
Farebná schéma
Voliteľne nastavte farebnú schému (1 až 9). Oddeľovač používa farbu ohraničenia z vybranej schémy. Ak nie je nastavená žiadna schéma, dedí farbu z rodičovskej sekcie alebo skupiny.
Výplň
Medzera na každej strane v pixeloch. Keď sa oddeľovač používa ako sekcia na najvyššej úrovni, hodnoty výplne dosahujú až 200 px pre štedrejší vertikálny dýchací priestor.
Bežné upozornenia
- Dve skupiny vyplniť vo vnútri horizontálneho rodiča: každá zaberá 50 % dostupného priestoru, čo je zvyčajne požadovaný výsledok. Ak potrebujete, aby jedna strana bola širšia ako druhá, použite šírku Vlastná na jednej z nich.
- Vertikálny oddeľovač sa nezobrazuje: oddeľovač sa stáva vertikálnym iba vtedy, keď je priamym potomkom skupiny nastavenej na Horizontálny smer. Uistite sa, že smer rodičovskej skupiny je nastavený na horizontálny.
- Text zobrazuje neočakávanú farbu: ak sa textový blok zobrazuje v nesprávnej farbe, pravdepodobne dedí z rodičovskej skupiny, ktorá má inú farebnú schému. Vypnite Zdediť schému na textovom bloku a explicitne priraďte správnu schému.