Przegląd
Trzy wielokrotnego użytku komponenty układu pojawiają się niemal w każdej sekcji kreatora: Grupa, Tekst i Separator. Zrozumienie ich pozwala budować dowolny układ bez pisania CSS.
Grupa
Grupa to elastyczny kontener układu. Dodaj wewnątrz bloki podrzędne (tekst, przyciski, obrazy, pola newslettera, a nawet zagnieżdżone grupy) i kontroluj dokładnie, jak są ułożone.
Kierunek
- Pionowy: elementy podrzędne układają się od góry do dołu (domyślny dla większości sekcji).
- Poziomy: elementy podrzędne stoją obok siebie w wierszu.
Włącz Układaj na telefonie, aby automatycznie przełączać poziomą grupę na pionowy stos na małych ekranach.
Wyrównanie i pozycja
Te dwa ustawienia kontrolują rozmieszczenie elementów podrzędnych wzdłuż głównej i poprzecznej osi. Ich znaczenie zmienia się w zależności od kierunku grupy:
- Kierunek pionowy: Pozycja kontroluje pionowy rozkład (górny, środkowy, dolny lub między). Wyrównanie kontroluje poziome umieszczenie (lewo, środek, prawo lub między).
- Kierunek poziomy: Wyrównanie kontroluje poziomy rozkład (lewo, środek, prawo lub między). Pozycja kontroluje pionowe umieszczenie (górny, środkowy, dolny lub między).
Między rozkłada elementy podrzędne równomiernie z równym odstępem między nimi, co jest przydatne do rozciągania elementów na pełnej szerokości wiersza.
Odstęp
Odstęp w pikselach między elementami podrzędnymi (0-100 px, domyślnie 20 px).
Szerokość
- Wypełnij: rozszerza się, aby zająć całą dostępną przestrzeń w rodzicu. Używaj dla grup, które powinny równo dzielić przestrzeń wewnątrz poziomego rodzica.
- Dopasuj: kurczy się do naturalnego rozmiaru treści. Używaj dla grup, które powinny być tylko tak szerokie, jak ich zawartość.
- Niestandardowa: ustaw konkretny procent (0-100%). Grupa zachowa ten rozmiar bez rozszerzania ani kurczenia.
Schemat kolorów i dziedziczenie
Domyślnie grupa dziedziczy schemat kolorów swojej nadrzędnej sekcji. Wyłącz Dziedzicz schemat, aby przypisać wyraźny schemat kolorów (1-9) z globalnych ustawień kolorów. Pozwala to tworzyć odrębne strefy tła lub koloru tekstu wewnątrz sekcji bez dodawania nowej sekcji.
Obramowanie
Dodaj obramowanie wokół grupy. Opcje: Brak lub Linia ciągła. Po wybraniu linii ciągłej ustaw grubość obramowania (1-20 px); kolor pochodzi z koloru obramowania aktywnego schematu.
Zaokrąglenie rogów
Zaokrąglenie rogów w pikselach (0-100). Używaj, aby tworzyć kontenery grup w stylu kart.
Krycie
Ogólne krycie grupy (0-100%, domyślnie 100%).
Nakładka
Dodaje kolorową warstwę wewnątrz grupy. Po włączeniu ustaw Kolor nakładki (w tym przezroczystość za pomocą suwaka krycia w selektorze kolorów), Styl (płaskie jednorodne wypełnienie lub gradient zanikający do przezroczystości) i dla gradientu Kierunek (w górę lub w dół). Często używane do tworzenia półprzezroczystej warstwy barwiącej nad tłem multimedialnym w sekcji hero.
Padding
Odstępy po każdej stronie w pikselach (góra, lewa, prawa i dół), każdy od 0 do 100 px. Padding jest stosowany wewnątrz obramowania grupy, tworząc przestrzeń oddechową między obramowaniem a elementami podrzędnymi grupy.
Tekst
Blok tekstu renderuje sformatowaną treść tekstową (nagłówki, akapity i sformatowany tekst) wewnątrz sekcji lub grupy. Edytor obsługuje pogrubienie, kursywę, podkreślenie, przekreślenie i kolorowy tekst.
Preset
Preset typograficzny kontroluje rozmiar czcionki, grubość czcionki i semantyczną rolę tekstu. Dostępne presety:
- Domyślny: dziedziczy podstawowy styl tekstu sekcji.
- Akapit: styl tekstu podstawowego.
- Nagłówek 1 do Nagłówek 6: malejące rozmiary od największego do najmniejszego, używające czcionki nagłówkowej zdefiniowanej w ustawieniach typografii.
Rozmiar
Niestandardowy rozmiar czcionki w pikselach (10-30 px), który nadpisuje rozmiar presetu. Pozostaw na domyślnej, aby rozmiar był określany przez preset.
Szerokość
- Dopasuj: blok tekstu ma szerokość tylko swojej treści.
- Wypełnij: blok tekstu rozszerza się do 100% dostępnej szerokości kontenera.
Wyrównanie
Poziome wyrównanie tekstu: Lewa, Środkowa lub Prawa.
Wysokość linii
Kontroluje rytm pionowy: Ciasna (zwarte linie), Normalna (domyślna) lub Luźna (przestronne linie).
Odstęp liter
Kontroluje odstęp między znakami: Ciasny (znaki bliżej siebie), Normalny (domyślny) lub Luźny (znaki dalej od siebie).
Schemat kolorów i dziedziczenie
Domyślnie blok tekstu dziedziczy kolor od nadrzędnej sekcji. Wyłącz Dziedzicz schemat, aby użyć konkretnego schematu kolorów. Presety nagłówkowe używają koloru nagłówka schematu; presety akapitu i domyślne używają koloru tekstu podstawowego schematu.
Padding
Wewnętrzne odstępy po każdej stronie w pikselach (góra, lewa, prawa i dół), każdy od 0 do 100 px.
Separator
Wizualna linia rozdzielająca. W układzie pionowym pojawia się jako linia pozioma. Wewnątrz poziomej grupy pojawia się jako linia pionowa. Separator dostosowuje się automatycznie do kierunku kontenera nadrzędnego.
Grubość
Grubość linii w pikselach (1-10 px, domyślnie 1 px).
Długość
Rozpiętość linii jako procent kontenera (5-100%, domyślnie 100%). Ustaw poniżej 100% i połącz z wyrównaniem, aby utworzyć wyśrodkowaną lub wciętą linię dekoracyjną.
Styl zakończeń
- Ostry: prostokątne końce.
- Zaokrąglony: końce w kształcie pigułki.
Wyrównanie
Jak linia jest pozycjonowana, gdy jej długość jest mniejsza niż 100%: Początek, Środek (domyślny) lub Koniec.
Szerokość
- Dopasuj: kontener separatora jest tylko tak szeroki jak sama linia.
- Wypełnij: kontener separatora rozszerza się, aby wypełnić dostępną przestrzeń w rodzicu.
Schemat kolorów
Opcjonalnie ustaw schemat kolorów (1-9). Separator używa koloru obramowania z wybranego schematu. Jeśli nie ustawiono schematu, dziedziczy kolor z nadrzędnej sekcji lub grupy.
Padding
Odstępy po każdej stronie w pikselach. Gdy separator jest używany jako sekcja najwyższego poziomu, wartości paddingu sięgają 200 px, zapewniając większy pionowy oddech.
Typowe pułapki
- Dwie grupy wypełniające wewnątrz poziomego rodzica: każda zajmie 50% dostępnej przestrzeni, co zwykle jest pożądane. Jeśli potrzebujesz jednej strony szerszej niż drugiej, użyj szerokości Niestandardowej dla jednej z nich.
- Pionowy separator nie pojawia się: separator staje się pionowy tylko wtedy, gdy jest bezpośrednim elementem podrzędnym grupy ustawionej na kierunek Poziomy. Upewnij się, że kierunek grupy nadrzędnej jest ustawiony na poziomy.
- Tekst w nieoczekiwanym kolorze: jeśli blok tekstu pojawia się w złym kolorze, prawdopodobnie dziedziczy z grupy nadrzędnej o innym schemacie kolorów. Wyłącz Dziedzicz schemat w bloku tekstu i jawnie przypisz właściwy schemat.