Jak już wiemy, bloki stanowią podstawę budowania twojej przestrzeni online.
Można je traktować jako dosłowne elementy składowe twojej witryny internetowej.
W tej lekcji będziemy rozwijać naszą wiedzę na temat bloków,
zapoznamy się z różnymi typami bloków,
a także nauczymy się je zagnieżdżać i grupować, aby tworzyć różne układy.
Bloki zagnieżdżone pomagają tworzyć bardziej złożone układy poprzez dodawanie wielu bloków jeden w drugim.
Zazwyczaj używamy bloków kontenerowych, takich jak blok „Grupa”, blok „Kolumny”, blok „Okładka”,
blok „Media i tekst” lub blok „Wiersz”, aby grupować treści.
Przypominamy, że po otwarciu widoku listy
można poruszać się między warstwami treści i zagnieżdżonymi blokami.
Przyjrzyjmy się drugiej sekcji tej strony głównej, aby zobaczyć to w praktyce.
Wybiorę blok „Kolumny”.
Po rozwinięciu bloku „Kolumny” zobaczymy wszystkie bloki znajdujące się w środku.
W lewej kolumnie zauważymy blok „Nagłówek”, blok „Separator” i blok „Akapit”.
W prawej kolumnie zobaczymy blok „Galeria” z czterema obrazkami.
Przejdźmy dalej i stwórzmy razem kilka przykładów.
Najpierw zgrupuję kilka bloków za pomocą bloku „Grupa”.
Ale najpierw dodam blok „Nagłówek”
i nadam mu odpowiednią nazwę.
W tym przypadku śmiech jest najlepszym lekarstwem.
Następnie nacisnę „Enter” i dodam blok „Kolumny”,
wybieram dwie równe kolumny,
a następnie dodaję tekst w lewej
i prawej kolumnie.
Następnie zaznaczę oba te bloki w widoku listy, przytrzymując klawisz „Shift”
i klikając myszką, co pozwoli mi zaznaczyć wiele bloków, a następnie użyć paska narzędzi bloków,
aby zgrupować je w bloku „Grupa”.
Następnie chciałbym zmienić szerokość bloku „Grupa” na szeroką.
Zanim jednak będę mógł to zrobić, muszę odznaczyć opcję „Bloki wewnętrzne uwzględniają szerokość treści”.
Dopiero po odznaczeniu tej opcji zagnieżdżone bloki będą mogły korzystać
z opcji szerokości treści i zwiększonej szerokości.
Jeśli nie odznaczę tej opcji, nie będę mógł zmienić wyrównania na pełną
szerokość.
Jak widać, nic się nie dzieje.
Po odznaczeniu opcji mogę wrócić do paska narzędzi bloku i zmienić szerokość na zwiększoną
bez ograniczeń narzuconych przez motyw.
Następnie możemy otworzyć zakładkę „Style”, aby dalej stylizować nasz blok.
Pierwszą rzeczą, którą chcę zrobić, jest zmiana koloru tła bloku „Grupa”.
Pamiętaj też, że jeśli chcesz, możesz dodać obrazek tła do bloku „Grupa”.
Kliknij trzy pionowe kropki obok opcji „Typografia”, aby wyświetlić wszystkie dostępne opcje.
Następnie dodam trochę dopełnienia, aby stworzyć więcej miejsca wokół zawartości mojego
bloku.
Możesz zdecydować się na dalszą stylizację bloku „Grupa”.
Jeśli na stronie znajduje się wiele warstw treści, można użyć bloku „Grupa”, aby zmienić nazwy
sekcji.
W powyższym przykładzie widzimy, że pierwsza sekcja nosi nazwę „Nasza historia”. Teraz mogę zaznaczyć
blok „Grupa” poniżej i zmienić jego nazwę.
W tym przypadku na „Referencje”.
Ta funkcja bloku „Grupa” pozwala uporządkować i zorganizować treść.
W następnym przykładzie użyjemy bloku „Media” i „Tekst”, aby zgrupować bloki.
Dodajmy więc blok „Media” i „Tekst”.
Następnie po lewej stronie możemy dodać obrazek z naszej biblioteki multimediów.
Po prawej stronie możemy zacząć dodawać treść.
U góry dodam nagłówek i nazwę go „Sushi to sztuka”.
Naciśnij klawisz „Enter”, a następnie dodaj tekst.
Na dole chcę dodać wezwanie do działania lub, w tym przypadku, blok „Przyciski”.
Następnie wpiszę „Dowiedz się więcej”
i użyję paska narzędzi bloku, aby pogrubić tekst, a także dodać odpowiedni adres URL.
Następnie zaznaczę blok nadrzędny w widoku listy i zmienię wyrównanie na
szerokie.
Możesz również użyć paska narzędzi bloku, jeśli chcesz zmienić i wyświetlić obrazek
po prawej stronie.
W sekcji „Ustawienia” zmienię szerokość mediów na 40.
Następnie otworzę kartę „Style” i dodam wypełnienie wokół treści.
Na koniec zmienię pionowe wyrównanie obrazka, aby wyrównać go do dołu.
I to wszystko.
Nasz blok „Media i tekst” jest gotowy.
W następnym przykładzie użyjemy bloku „Kolumny”.
Blok „Kolumny” jest jednym z najskuteczniejszych bloków do tworzenia złożonych
układów lub projektów.
Dodajmy więc blok „Kolumny”, a następnie wybierzmy trzy równe kolumny.
W lewej kolumnie dodam tekst i nazwę go „Półmiski”,
nacisnę „Enter”, a następnie dodam akapit.
Poniżej dodam blok „Obrazek” i wybiorę obrazek z mojej biblioteki multimediów.
Następnie zaznaczę tekst u góry, pogrubiam go i powiększam,
a następnie wyśrodkuję tekst obu akapitów.
Po wyrównaniu do środka zaznaczę blok „Obrazek” i zmienię proporcje
na kwadratowe.
Następnie zaznaczę główny blok „Kolumny” lub blok nadrzędny i zmienię wyrównanie
na szerokie.
Następnie przejdę do stylu i dodam wypełnienie wokół zawartości bloku,
a także odstępy między trzema kolumnami.
Po zakończeniu stylizacji bloku zaznaczę lewą kolumnę i powielę ją
dwukrotnie.
Po powieleniu możemy usunąć puste kolumny.
Następnie możemy przystąpić do modyfikacji zawartości według własnego uznania.
W ostatnim przykładzie użyjemy bloku „Okładka”.
Blok „Okładka” pozwala wyświetlać tekst i inne treści na obrazku lub filmie.
Jest to świetny blok do stosowania w nagłówkach i wyświetlaczach typu baner.
Dodajmy więc nasz blok „Okładka”.
Następnie zobaczysz, że możesz wybrać nakładkę koloru.
Ja jednak dodam obrazek z mojej biblioteki multimediów jako tło.
Następnie dodam tekst, a po nim blok „Przyciski”.
Napiszę „Zamów” i zmienię kolory tła oraz tekstu
wezwania do działania.
Następnie zaznaczę oba bloki i ułożę je jeden na drugim za pomocą bloku „Stos”.
Dzięki temu mogę dostosować oba bloki jednocześnie.
Następnie wyrównam blok „Stos” do środka, zaznaczę blok „Okładka” i zmienię
wyrównanie na szerokie.
Nie zapomnij odznaczyć opcji „Bloki wewnętrzne używają szerokości treści”.
Teraz możemy wprowadzić dalsze modyfikacje.
Powiększę tekst „Ciesz się 20% zniżką” oraz blok przycisków.
Chcę również pogrubić tekst bloku przycisków i nie zapomnij dodać swojego adresu URL.
Następnie zaznaczę blok okładki i pamiętaj, że na pasku narzędzi bloku
możesz przełączyć blok na pełną wysokość.
Możemy jednak również ręcznie zmniejszyć lub zwiększyć rozmiar.
Następnie otworzę kartę „Style” i zmienię krycie nakładki na 30, aby była jaśniejsza.
Teraz mój blok okładki jest gotowy.
Jestem przekonany, że czujesz się teraz pewniej, jeśli chodzi o zagnieżdżanie i grupowanie bloków.