Przegląd
Trzy wielokrotnego użytku komponenty układu pojawiają się w prawie każdej sekcji w kreatorze: Group, Text i Divider. Razem pozwalają budować dowolny układ bez pisania CSS. Wybierz blok, aby otworzyć jego ustawienia.
Group
Group to elastyczny kontener układu. Dodaj do niego bloki potomne (tekst, przyciski, obrazy, pola newslettera, a nawet zagnieżdżone grupy) i kontroluj ich rozmieszczenie.
Kierunek
- Pionowy: elementy potomne układają się od góry do dołu.
- Poziomy: elementy potomne są obok siebie w jednym rzędzie.
Przełącznik Stack vertically on mobile pojawia się tylko, gdy Kierunek to Poziomy. Włącz go, aby zamienić poziomy rząd na pionowy stos na małych ekranach.
Pozycja i wyrównanie
Te opcje rozkładają elementy potomne wzdłuż głównej i poprzecznej osi. Ich znaczenie zmienia się w zależności od kierunku, a opcja Between (równa przestrzeń między elementami) istnieje tylko na głównej osi:
- Kierunek pionowy: Pozycja to główna (pionowa) oś: góra, środek, dół lub between. Wyrównanie to oś poprzeczna (pozioma): lewo, środek lub prawo.
- Kierunek poziomy: Wyrównanie to główna (pozioma) oś: lewo, środek, prawo lub between. Pozycja to oś poprzeczna (pionowa): góra, środek lub dół.
Szerokość
- Fill: rozszerza się, aby zająć całą dostępną przestrzeń w rodzicu. Użyj tego dla grup, które mają dzielić przestrzeń po równo w poziomym rodzicu.
- Fit: dopasowuje się do naturalnego rozmiaru swojej zawartości.
- Custom: pokazuje suwak Custom width ustawiany w procentach (0 do 100%). Grupa zachowuje ten rozmiar bez rozciągania ani kurczenia.
Odstęp
Odstęp w pikselach między elementami potomnymi (0 do 100 px, domyślnie 20 px).
Schemat kolorów
Opcja Use parent color scheme jest domyślnie włączona, więc grupa dziedziczy schemat rodzica. Wyłącz ją, aby wybrać Color scheme i ustawić jeden z globalnych schematów kolorów. Pozwala to tworzyć wyróżniające się strefy kolorystyczne w sekcji.
Obramowanie
Border to None lub Solid. Solid pokazuje dwa suwaki: Border thickness (1 do 20 px, domyślnie 1) i Border opacity (0 do 100%, domyślnie 100). Kolor pochodzi z aktywnego schematu (border color).
Zaokrąglenie rogów
Zaokrąglenie rogów w pikselach (0 do 100), niezależnie od obramowania. Użyj do kontenerów w stylu kart.
Nakładka tła
Przełącznik Background overlay dodaje kolorową warstwę na tło grupy. Po włączeniu ustaw Overlay color (w tym przezroczystość suwakiem opacity), Overlay style (Solid - jednolite wypełnienie lub Gradient - przejście do przezroczystości) oraz dla gradientu Gradient direction (Up lub Down). Najczęściej używane do przyciemnienia tła multimedialnego.
Padding
Wewnętrzny odstęp z każdej strony w pikselach, każdy od 0 do 100 px. Padding znajduje się wewnątrz obramowania, między nim a elementami potomnymi.
Text
Blok tekstowy wyświetla nagłówki, akapity i sformatowaną treść. Edytor tekstu obsługuje pogrubienie, kursywę, podkreślenie, przekreślenie i kolorowanie tekstu.
Preset
Preset typografii ustawia rodzinę czcionki, domyślną grubość i semantyczny tag HTML (rolę na stronie):
- Default: dziedziczy podstawowy styl tekstu sekcji.
- Paragraph: styl tekstu głównego.
- Heading 1 do Heading 6: style nagłówków, używające czcionek nagłówka i podnagłówka.
Rozmiar
Własny rozmiar czcionki w pikselach (10 do 30 px, domyślnie 16). To faktyczny rozmiar, w jakim blok jest wyświetlany.
Szerokość i wyrównanie
- Fit: blok jest tylko tak szeroki, jak jego zawartość.
- Fill: blok rozszerza się do 100% szerokości kontenera.
Alignment (Left, Center, Right) pojawia się tylko, gdy Szerokość to Fill, ponieważ wyrównanie ma sens tylko wtedy, gdy blok wypełnia kontener.
Wysokość linii i odstęp między literami
Line height ustawia rytm pionowy: Normal (domyślnie), Tight lub Loose. Letter spacing ustawia odstęp między znakami, również z trzema opcjami.
Schemat kolorów
Wewnątrz grupy Use parent color scheme jest domyślnie włączone. Wyłącz, aby wybrać Color scheme. Presety nagłówków używają koloru nagłówka ze schematu, akapit i domyślny korzystają z koloru tekstu głównego. Jako samodzielna sekcja, picker działa niezależnie, bez przełącznika dziedziczenia.
Padding
Wewnętrzny odstęp z każdej strony w pikselach, każdy od 0 do 100 px.
Divider
Linia oddzielająca, która dostosowuje się do rodzica. W układzie pionowym (kolumnowym) jest linią poziomą, w grupie poziomej staje się linią pionową.
Szerokość
- Fit: kontener jest tylko tak szeroki, jak linia.
- Fill: kontener rozszerza się, aby wypełnić dostępną przestrzeń.
Grubość
Grubość linii w pikselach (1 do 10 px, domyślnie 1). Dla poziomego dividera to wysokość, dla pionowego - szerokość.
Długość
Długość linii jako procent kontenera (5 do 100%, domyślnie 100). Ustaw poniżej 100%, aby uzyskać częściową, cofniętą linię.
Wyrównanie
Pozycjonuje linię, gdy długość jest poniżej 100%: Start, Center (domyślnie) lub End. To ustawienie jest ukryte, gdy długość wynosi 100%.
Zaokrąglenie rogów
- Sharp: prostokątne zakończenia.
- Rounded: zakończenia w kształcie pigułki.
Schemat kolorów
Opcjonalnie wybierz Color scheme. Divider używa koloru obramowania z tego schematu. Jeśli nie ustawisz, dziedziczy kolor z sekcji lub grupy nadrzędnej.
Padding
Odstęp z każdej strony w pikselach. Jako blok zakres to 0 do 100 px. Gdy divider jest dodany jako sekcja najwyższego poziomu, padding sięga do 200 px (domyślnie 20), zapewniając większy oddech pionowy.
Typowe pułapki
- Dwie grupy fill w poziomym rodzicu: każda zajmuje 50% przestrzeni, co zwykle jest pożądane. Aby jedna strona była szersza, ustaw dla tej grupy Szerokość na Custom.
- Pionowy divider nie pojawia się: divider staje się pionowy tylko, gdy jest bezpośrednim potomkiem grupy z kierunkiem Horizontal. Sprawdź kierunek grupy nadrzędnej.
- Brak opcji Between: Between pojawia się tylko na osi, wzdłuż której płyną elementy potomne, więc jest w Position dla grup pionowych i w Alignment dla grup poziomych.
- Tekst w złym kolorze: prawdopodobnie dziedziczy po grupie nadrzędnej z innym schematem. Wyłącz Use parent color scheme w bloku tekstowym i wybierz schemat ręcznie.
Aby dowiedzieć się, gdzie można umieszczać te komponenty, zobacz Sections and blocks.