Přehled
Tři opakovaně použitelné komponenty rozvržení se objevují v téměř každé sekci nástroje pro tvorbu: Skupina, Text a Oddělovač. Jejich porozumění vám umožní sestavit libovolné rozvržení bez psaní CSS.
Skupina
Skupina je flexibilní kontejner rozvržení. Uvnitř přidejte podřízené bloky (text, tlačítka, obrázky, vstupy newsletteru a dokonce vnořené skupiny) a přesně ovládejte, jak jsou uspořádány.
Směr
- Svislý: podřízené prvky se skládají shora dolů (výchozí pro většinu sekcí).
- Vodorovný: podřízené prvky sedí vedle sebe v řadě.
Aktivujte Sklopit na mobilu pro automatické přepnutí vodorovné skupiny na svislý zásobník na malých obrazovkách.
Zarovnání a pozice
Tato dvě nastavení ovládají, jak jsou podřízené prvky rozmístěny podél hlavní a křížové osy. Jejich smysl se mění v závislosti na směru skupiny:
- Svislý směr: Pozice ovládá svislé rozložení (nahoře, na střed, dole nebo rozmístit). Zarovnání ovládá vodorovné umístění (vlevo, na střed, vpravo nebo rozmístit).
- Vodorovný směr: Zarovnání ovládá vodorovné rozložení (vlevo, na střed, vpravo nebo rozmístit). Pozice ovládá svislé umístění (nahoře, na střed, dole nebo rozmístit).
Rozmístit rozloží podřízené prvky rovnoměrně s rovnými mezerami mezi nimi, což je užitečné pro roztažení položek přes řadu na celou šířku.
Mezera
Mezery v pixelech mezi podřízenými prvky (0 až 100 px, výchozí 20 px).
Šířka
- Vyplnit: rozbalí se a zabere veškerý dostupný prostor v rodiči. Použijte pro skupiny, které by měly sdílet prostor rovnoměrně uvnitř vodorovného rodiče.
- Přizpůsobit: zmenší se na přirozenou velikost svého obsahu. Použijte pro skupiny, které by měly být jen tak široké, jaký je jejich obsah.
- Vlastní: nastavte konkrétní procento (0 až 100 %). Skupina si tuto velikost udrží bez zvětšování nebo zmenšování.
Barevné schéma a dědičnost
Ve výchozím nastavení skupina dědí barevné schéma své nadřazené sekce. Vypněte Zdědit schéma pro přiřazení explicitního barevného schématu (1 až 9) z globálního nastavení barev. To umožňuje vytvářet odlišné zóny barev pozadí nebo textu uvnitř sekce bez přidávání nové sekce.
Ohraničení
Přidejte ohraničení kolem skupiny. Možnosti: Žádné nebo Plné. Je-li vybráno plné, nastavte tloušťku ohraničení (1 až 20 px); barva pochází z barvy ohraničení aktivního schématu.
Zaoblení rohů
Zaoblení rohů v pixelech (0 až 100). Pomocí toho lze vytvářet kartové kontejnery skupin.
Průhlednost
Celková průhlednost skupiny (0 až 100 %, výchozí 100 %).
Překrytí
Přidá barevnou vrstvu uvnitř skupiny. Je-li aktivní, nastavte Barvu překrytí (včetně průhlednosti pomocí posuvníku průhlednosti výběru barvy), Styl (plná rovná výplň nebo přechod, který mizí do průhlednosti) a pro přechod Směr (nahoru nebo dolů). Toto se běžně používá pro vytvoření poloprůhledné barevné vrstvy přes mediální pozadí v hero sekci.
Odsazení
Mezery na každé straně v pixelech (nahoře, vlevo, vpravo a dole), každá 0 až 100 px. Odsazení se aplikuje uvnitř ohraničení skupiny a vytváří dýchací prostor mezi ohraničením a podřízenými prvky skupiny.
Text
Textový blok zobrazuje bohatý textový obsah (nadpisy, odstavce a formátovaný text) uvnitř sekce nebo skupiny. Editor podporuje tučné písmo, kurzívu, podtržení, přeškrtnutí a barevný text.
Přednastavení
Typografické přednastavení ovládá velikost písma, tloušťku písma a sémantickou roli textu. Dostupná přednastavení:
- Výchozí: dědí základní textový styl sekce.
- Odstavec: styl textu těla.
- Nadpis 1 až Nadpis 6: klesající velikosti od největšího po nejmenší, s použitím nadpisového písma definovaného v nastavení typografie.
Velikost
Vlastní velikost písma v pixelech (10 až 30 px), která přepíše velikost přednastavení. Ponechte výchozí hodnotu, aby velikost určilo přednastavení.
Šířka
- Přizpůsobit: textový blok je jen tak široký, jak je jeho obsah.
- Vyplnit: textový blok se rozbalí na 100 % dostupné šířky kontejneru.
Zarovnání
Vodorovné zarovnání textu: Vlevo, Na střed nebo Vpravo.
Výška řádku
Ovládá svislý rytmus: Těsný (kompaktní řádky), Normální (výchozí) nebo Volný (prostorné řádky).
Meziznakové mezery
Ovládá mezery mezi znaky: Těsné (znaky blíže k sobě), Normální (výchozí) nebo Volné (znaky dál od sebe).
Barevné schéma a dědičnost
Ve výchozím nastavení textový blok dědí barvu z nadřazené sekce. Vypněte Zdědit schéma pro použití konkrétního barevného schématu. Přednastavení nadpisů používají barvu nadpisu schématu; odstavec a výchozí přednastavení používají barvu textu těla schématu.
Odsazení
Vnitřní mezery na každé straně v pixelech (nahoře, vlevo, vpravo a dole), každá 0 až 100 px.
Oddělovač
Vizuální oddělovací čára. Ve svislém rozvržení se zobrazuje jako vodorovná čára. Uvnitř vodorovné skupiny se zobrazuje jako svislá čára. Oddělovač se automaticky přizpůsobuje směru svého nadřazeného kontejneru.
Tloušťka
Tloušťka čáry v pixelech (1 až 10 px, výchozí 1 px).
Délka
Rozsah čáry jako procento kontejneru (5 až 100 %, výchozí 100 %). Nastavte na méně než 100 % a zkombinujte se zarovnáním pro vytvoření centrované nebo vložené dekorativní čáry.
Styl zakončení
- Ostrý: obdélníkové konce.
- Zaoblený: pilulkové konce.
Zarovnání
Jak je čára umístěna, pokud je její délka menší než 100 %: Začátek, Na střed (výchozí) nebo Konec.
Šířka
- Přizpůsobit: kontejner oddělovače je jen tak široký jako samotná čára.
- Vyplnit: kontejner oddělovače se rozbalí a zaplní dostupný prostor v rodiči.
Barevné schéma
Nepovinně nastavte barevné schéma (1 až 9). Oddělovač používá barvu ohraničení z vybraného schématu. Není-li žádné schéma nastaveno, dědí barvu z nadřazené sekce nebo skupiny.
Odsazení
Mezery na každé straně v pixelech. Při použití oddělovače jako sekce nejvyšší úrovně mohou hodnoty odsazení dosahovat až 200 px pro velkorysejší svislý dýchací prostor.
Běžné problémy
- Dvě skupiny "vyplnit" uvnitř vodorovného rodiče: každá zabere 50 % dostupného prostoru, což je obvykle žádoucí. Pokud potřebujete jednu stranu širší než druhou, použijte na jedné z nich šířku Vlastní.
- Svislý oddělovač se nezobrazuje: oddělovač se stane svislým pouze tehdy, je-li přímým potomkem skupiny nastavené na Vodorovný směr. Ujistěte se, že směr nadřazené skupiny je nastaven na vodorovný.
- Text zobrazuje neočekávanou barvu: pokud se textový blok zobrazuje ve špatné barvě, pravděpodobně dědí od nadřazené skupiny s jiným barevným schématem. Vypněte Zdědit schéma na textovém bloku a explicitně přiřaďte správné schéma.