Přehled
Tři znovupoužitelné rozvrhové komponenty se objevují téměř v každé sekci editoru: Skupina, Text a Oddělovač. Umožňují ti vytvořit jakékoli rozvržení bez psaní CSS. Vyber blok pro otevření jeho nastavení.
Skupina
Skupina je flexibilní kontejner rozvržení. Přidej do ní vnořené bloky (text, tlačítka, obrázky, pole pro newsletter, dokonce i další skupiny) a ovládej jejich uspořádání.
Směr
- Svisle: vnořené bloky jsou pod sebou.
- Vodorovně: vnořené bloky jsou vedle sebe v řadě.
Přepínač Skládat svisle na mobilu se objeví jen když je směr nastaven na Vodorovně. Zapni jej pro změnu vodorovné řady na svislý sloupec na malých obrazovkách.
Pozice a zarovnání
Tyto možnosti rozdělují vnořené bloky podél hlavní a vedlejší osy. Jejich význam se mění podle směru a možnost Mezi (stejný rozestup mezi bloky) existuje jen na hlavní ose:
- Svislý směr: Pozice je hlavní (svislá) osa: nahoře, střed, dole nebo mezi. Zarovnání je vedlejší (vodorovná) osa: vlevo, střed nebo vpravo.
- Vodorovný směr: Zarovnání je hlavní (vodorovná) osa: vlevo, střed, vpravo nebo mezi. Pozice je vedlejší (svislá) osa: nahoře, střed nebo dole.
Šířka
- Vyplnit: rozšíří se na veškerý dostupný prostor v rodiči. Použij pro skupiny, které mají sdílet prostor rovnoměrně ve vodorovném rodiči.
- Přizpůsobit: zmenší se na přirozenou velikost svého obsahu.
- Vlastní: zobrazí posuvník Vlastní šířka v procentech (0 až 100 %). Skupina si drží tuto velikost bez zvětšování či zmenšování.
Mezera
Odstup v pixelech mezi vnořenými bloky (0 až 100 px, výchozí 20 px).
Barevné schéma
Použít barevné schéma rodiče je zapnuté ve výchozím stavu, takže skupina dědí schéma svého rodiče. Vypni jej pro zobrazení výběru Barevné schéma a zvol jedno ze svých globálních schémat. To ti umožní vytvořit odlišné barevné zóny v rámci sekce.
Ohraničení
Ohraničení je buď Žádné nebo Pevné. Pevné zobrazí dva posuvníky: Tloušťka ohraničení (1 až 20 px, výchozí 1) a Neprůhlednost ohraničení (0 až 100 %, výchozí 100). Barva vychází z aktivního schématu (barva ohraničení).
Zaoblení rohů
Zaoblení rohů v pixelech (0 až 100), nezávisle na ohraničení. Použij pro kontejnery ve stylu karet.
Překrytí pozadí
Přepínač Překrytí pozadí přidá barevnou vrstvu nad pozadí skupiny. Když je zapnutý, nastav Barvu překrytí (včetně průhlednosti pomocí posuvníku neprůhlednosti), Styl překrytí (Pevná výplň nebo Gradient přecházející do průhledna) a u gradientu Směr gradientu (Nahoru nebo Dolů). Často se používá pro tónování obrázkového pozadí.
Vnitřní okraj (padding)
Vnitřní odsazení na každé straně v pixelech, každé 0 až 100 px. Padding je uvnitř ohraničení, mezi ním a vnořenými bloky.
Text
Textový blok zobrazuje nadpisy, odstavce a formátovaný text. Editor podporuje tučné, kurzívu, podtržení, přeškrtnutí a barevný text.
Předvolba
Typografická předvolba nastavuje rodinu písma, výchozí tloušťku a sémantický HTML tag (jeho roli na stránce):
- Výchozí: dědí základní styl textu sekce.
- Odstavec: styl běžného textu.
- Nadpis 1 až Nadpis 6: styly nadpisů, využívající tvé písmo pro nadpisy a podnadpisy.
Velikost
Vlastní velikost písma v pixelech (10 až 30 px, výchozí 16). Toto je skutečná velikost, ve které se blok vykreslí.
Šířka a zarovnání
- Přizpůsobit: blok je široký jen podle svého obsahu.
- Vyplnit: blok se roztáhne na 100 % šířky kontejneru.
Zarovnání (Vlevo, Střed, Vpravo) se objeví jen když je šířka nastavena na Vyplnit, protože zarovnání má smysl jen když blok vyplňuje kontejner.
Výška řádku a mezera mezi písmeny
Výška řádku nastavuje vertikální rytmus: Normální (výchozí), Těsné nebo Volné. Mezera mezi písmeny nastavuje rozestup znaků se stejnými třemi možnostmi.
Barevné schéma
Uvnitř skupiny je Použít barevné schéma rodiče zapnuté ve výchozím stavu. Vypni jej pro zobrazení výběru Barevné schéma. Nadpisy používají barvu nadpisu ze schématu, odstavce a výchozí používají barvu těla textu. Jako samostatná sekce má výběr schématu bez možnosti dědění.
Vnitřní okraj (padding)
Vnitřní odsazení na každé straně v pixelech, každé 0 až 100 px.
Oddělovač
Oddělovací čára, která se přizpůsobuje rodiči. Ve svislém (sloupcovém) rozvržení je to vodorovná čára, ve vodorovné skupině se změní na svislou čáru.
Šířka
- Přizpůsobit: kontejner je široký jen podle čáry.
- Vyplnit: kontejner se roztáhne na dostupný prostor.
Tloušťka
Tloušťka čáry v pixelech (1 až 10 px, výchozí 1). U vodorovného oddělovače je to výška, u svislého šířka.
Délka
Délka čáry jako procento kontejneru (5 až 100 %, výchozí 100). Nastav pod 100 % pro čáru, která je kratší a odsazená.
Zarovnání
Umístění čáry, když je délka pod 100 %: Začátek, Střed (výchozí) nebo Konec. Toto nastavení je skryté, pokud je délka 100 %.
Zaoblení rohů
- Ostré: obdélníkové konce.
- Zaoblené: konce ve tvaru pilulky.
Barevné schéma
Můžeš zvolit Barevné schéma. Oddělovač použije barvu ohraničení z tohoto schématu. Pokud není nastaveno, dědí barvu z rodičovské sekce nebo skupiny.
Vnitřní okraj (padding)
Odsazení na každé straně v pixelech. Jako blok je rozsah 0 až 100 px. Pokud je oddělovač přidán jako samostatná sekce, padding může být až 200 px (výchozí 20) pro větší svislé rozestupy.
Časté potíže
- Dvě skupiny s vyplněním ve vodorovném rodiči: každá zabere 50 % prostoru, což je většinou žádoucí. Pokud chceš jednu stranu širší, nastav u této skupiny šířku na Vlastní.
- Svislý oddělovač se nezobrazuje: oddělovač se změní na svislý jen pokud je přímým potomkem skupiny se směrem Vodorovně. Zkontroluj směr rodičovské skupiny.
- Chybějící možnost Mezi: Mezi se objeví jen na ose, podle které bloky plynou, tedy u Pozice u svislých skupin a u Zarovnání u vodorovných skupin.
- Text ve špatné barvě: pravděpodobně dědí barvu z rodičovské skupiny s jiným schématem. Vypni Použít barevné schéma rodiče u textového bloku a vyber schéma ručně.
Kde lze tyto komponenty umístit, najdeš v článku Sekce a bloky.