Transkrypcja
Wprowadzenie
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
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.
Blok „Grupa”
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ć obraz 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ść.
Blok „Media i tekst”
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.
Blok kolumny
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ę obraz 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.
Blok okładki
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.
Praktyczne
Przejdź do WordPress Playground i odtwórz poniższe przykłady, aby sprawdzić swoją wiedzę.
Przykład 1:
Przykład 2:
- Odtwórz pierwszy przykład
- Krok 1: Dodaj blok nagłówka
- Krok 2: Dodaj blok „Kolumny” z dwiema równymi kolumnami i dodaj tekst po lewej i prawej stronie.
- Użyty tekst zastępczy: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Krok 3: Wybierz bloki „Nagłówek” i „Kolumny” i zgrupuj je. Następnie zmień szerokość bloku „Grupa” na „Zwiększona szerokość”.
- Krok 4: Zmień kolor tła bloku „Grupa” na wybrany kolor.
- Krok 5: Dostosuj wypełnienie grupy zgodnie z własnymi preferencjami.
- Odtwórz drugi przykład
- Krok 1: Dodaj blok okładki i obrazka tła. Jeśli nie masz obrazka na swoim komputerze, możesz skorzystać z serwisu https://unsplash.com/.
- Krok 2: Zmień szerokość bloku na „Pełna szerokość”.
- Krok 3: Zmień kolor nakładki (użyłem #2C3066) i ustaw krycie nakładki na 80%.
- Krok 4: Zmień dopełnienie na 4 po każdej stronie bloku.
- Krok 5: Dodaj blok „Grupa”, wpisz „enjoy”, naciśnij „Enter” i wpisz „20% off”. Zmień wielkość liter na majuskuły (upper case), powiększ tekst do 160 pikseli i pogrub go.
- Krok 6: Dodaj blok „Odstęp” o rozmiarze 50 pikseli.
- Krok 7: Dodaj blok „Przyciski”, zmień kolor tła na biały, a tekst na czarny.
- Krok 8: Blok przycisków: Zmień wielkość liter na majuskuły (upper case), a rozmiar liter na 20 pikseli. Na koniec dodaj dopełnienie, aby spełnić wymagania projektowe.