MODUŁ 0 - Przygotowanie do startu! 3... 2... 1...
MODUŁ 1 – Czy WordPress jest w ogóle dla mnie?
MODUŁ 2 - MYŚLENIE, czyli szykujemy się do starcia! ;)
MODUŁ 3 – Ogarniamy DZIAŁKĘ i tabliczkę z adresem
MODUŁ 4 – Działka jest. Czas na DOM, drzewo i…
MODUŁ 5 – Dodajemy TREŚCI, czyli niech wreszcie coś zacznie się dziać
MODUŁ 6 - BACKUPUJEMY, ZANIM ZEZPSUJEMY ;)
MODUŁ 7 - MOTYWY, CZYLI PEŁEN MAKE-UP DLA STRONY
MODUŁ 8 - WTYCZKI, CZYLI CO JESZCZE MOŻEMY ODPICOWAĆ
MODUŁ 9 – MY SIĘ WŁAMU NIE BOIMY! CZYLI ZABEZPIECZAMY CHATĘ
MODUŁ 10 – ZAMIATAMY PRZED SAMĄ METĄ IIII…. ŚWIĘTUJEMY FINISZ!
MODUŁ 11 – HOUSTON! MAMY PROBLEM! ROZWIĄZYWANIE PROBLEMÓW Z WORDPRESSEM

5.8. Przykładowa podstrona w Gutenbergu na wypasie, czyli włączamy wyobraźnię

zaawansowany gutenberg strona wordpress z blokow

No dobra, z tym wypasem to może trochę przesadziłam, bo wielkich fajerwerków tu nie będzie, ale będzie trochę ciekawiej 🙂

Pamiętacie stronę O nas z poprzedniej lekcji?
Trochę tekstu przetkanego zdjęciami… Może być, ale szału nie robi, no nie oszukujmy się 😉

Da się lepiej no i lepiej ją sobie wymyśliłam, więc teraz będę chciała zrobić ją wg planu. Bo przecież mamy plany swoich stron po module drugim, c’nie? 😉

Szkic podstrony, czyli plan to podstawa

Kto drugi moduł przeskoczył i odłożył na później, bo nudy i w ogóle… cóż… 😎 Teraz zostanie kopnięty przez tę sprawę w tyłas i będzie się musiał tak czy siak do modułu 2 wrócić, wziąć kartkę w dłoń i zaplanować swoje podstrony 😇

Mój szkic na kartce dla strony O nas wygląda tak:

Prosty plan podstrony na blog na WordPressie

Jak widać, nie jest to nic szczególnie artystycznego, bo nie o tworzenie dzieła sztuki tu chodzi, a o plan, który potem można po prostu już tylko odtworzyć operując blokami Gutenberga 🙂 Więc śmiało można porzucić zwyczajowe Ale ja nie umiem ładnie rysować!, bo jak widać – rowery z mojego szkicu równie dobrze mogłyby uchodzić za stado pędzących bizonów z przepukliną, ale na powodzenie tworzenia strony to nie wpływa 😉

Finalnie moja strona wykonana wg powyższego planu będzie wyglądać tak:

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga - wersja z tłem

Jak do tego doszło?

Pokażę Wam właśnie w tym lekcjo-tutorialu, który ma pierdylion zrzutów ekranu właśnie po to, żebyście mogli w celach naukowo-ćwiczebnych odtworzyć sobie taką lub podobną stronę, a potem popuścić wodze wyobraźni na własnych 🙂

Zanim to jednak zrobię – jedna podpowiedź 🙂

Jest rzecz, na którą warto zwrócić uwagę nawet na tak marnym szkicu, jak ten mój u góry. Jeśli się przyjrzycie, zobaczycie, że stronę dałoby się na nim pokroić na takie poziome plasterki, rzędy.

Kojarzycie te lekcje geografii, na których wpajali nam profil ziem w północnym Kazachstanie albo uczyli budowy Ziemi i jej warstw? No to wreszcie się to przyda! 😀

Prosty plan podstrony na blog na WordPressie - podział na rzędy

Bo tak od góry lecąc, moja fota z rowero-bizonami to warstwa pierwsza, jakby pierwszy rząd, litosfera ;), zaraz poniżej jest drugi rząd z krótkim tekstem w ramce i pustym miejscem po prawej – to ziemski płaszcz zewnętrzy, dalej wskakuje płaszcz wewnętrzny, czyli rząd z nagłówkiem, że Niedaleko pada jabłko… i tekstem po prawej. Niżej z naszego wycieczkowego meleksa widzimy strefę nieciągłości Gutenberga (cóż za miły zbieg nazw ;)), czyli rządek trzech zdjęć, po czym leci rząd pod tytułem obrazek z tekstem – jądro zewnętrzne i znów rząd trzech fot – jądro wewnętrzne 😉

Jeśli się o stronie i jej projekcie pomyśli w ten sposób, to znacznie łatwiej będzie ją potem budować, bo budować będziemy właśnie rzędami, po warstewce, jak torcik, z tą różnicą, że najpierw będzie lecieć polewa czekoladowa na górze, a dopiero potem przyjdzie nam robić biszkopt, bo lecimy od góry do dołu 😉

W życiu to ciężko tak, ale w WordPressie wszystko jest możliwe 😉

Od zera do bohatera!

To lecimy z praktyką!

Jak każdy z nas – startuję z poziomu, kiedy przede mną pusta strona i nawet tytułu nie ma 🙂

Jak dodać podstronę (zakładkę) w WordPressie - kurs WordPress - dodawanie całkiem nowej strony

Dodaję więc ów tytuł, po czym klikam na mały plusik po prawej, aby dodać pierwszy blok. Jaki?

Kurs WordPress: Gutenberg w WordPressie - dodawanie bloku na podstronie

Zerkam na mój plan (a zarazem ściągawkę) i widzę, że miała tam wylądować fota. No to wybieram blok: Obrazek:

Kurs WordPress: Gutenberg w WordPressie - dodawanie obrazu na podstronie

Pojawia się miejsce na obraz (po poprzedniej lekcji nie jest to już dla nas zaskoczeniem) i klikam w Bibliotekę mediów, żeby wybrać odpowiedni:

Kurs WordPress: Gutenberg w WordPressie - dodawanie obrazu z biblioteki mediów na podstronie

Ponieważ w Bibliotece mediów nie ma go wgranego z wcześniej, wybieram zakładkę Prześlij plik i tam klikam przycisk Wybierz pliki. Bo to, że wybrałam Bibliotekę mediów, to nie jest jakaś droga bez powrotu – jeśli jednak potrzebuję plik załadować, to zawsze mam taką opcję, także z poziomu biblioteki 🙂

Kurs WordPress: Gutenberg w WordPressie - wybieranie obrazu z biblioteki mediów na podstronie

Teraz pozostaje wybrać plik z dysku i zatwierdzić wybór przyciskiem Otwórz:

Kurs WordPress: Gutenberg w WordPressie - wybieranie obrazu z biblioteki mediów na podstronie

Zdjęcie zostanie załadowane do Biblioteki mediów i tam wystarczyłoby już tylko kliknąć Wybierz, aby wstawić je do posta, ale warto pochylić się jeszcze wcześniej nad dwoma polami w szczegółach tego zdjęcia i odpowiednio je uzupełnić. To nam zaprocentuje, gdy kiedyś przyjdzie nam się zatroszczyć o SEO – trochę roboty będziemy już mieć z głowy 😉

Bo te dwa pola to coś, co Google widzi, gdy analizuje stronę, i bierze pod uwagę przy ustalaniu o czym ta strona jest i czy będzie dobrze odpowiadać na zapytania użytkownika. Innymi słowy – czy warto ją zatem wyświetlić wysoko w wynikach wyszukiwania 🙂

  • Tekst alternatywny – tu wpisujemy, co to jest za obrazek, co przedstawia.
    Opowiedzenie o tym Google’owi to jest przy tym tylko jeden powód, dla którego nie warto miejsca na tekst alternatywny zostawiać pustego. Tekst alternatywny to jest bowiem coś, co wyświetla się zamiast obrazu, jeśli obraz z jakiegoś powodu się nie załaduje (np. mamy słabiutkie łącze).
    Co więcej – jest to tekst, który zostanie przeczytany przez przeglądarki, z których korzystają osoby niewidome i niedowidzące. Taka przeglądarka nie opowie oczywiście o obrazku, którego użytkownik nie może zobaczyć, ale może przeczytać to, jak my o nim opowiemy – właśnie w tym miejscu, w tekście alternatywnym. Dlatego nie wpisujemy tam miliona słów kluczowych po przecinku, tylko faktycznie piszemy, co się na obrazie znajduje, a jeśli nie jest to nic ważnego, bo obraz to tylko dekoracja (na przykład jakiś zawijasek), to nie piszemy nic 🙂
  • Tytuł – tu wpisujemy tytuł, który chcemy obrazkowi nadać. W niektórych motywach będzie się on wyświetlał po powiększeniu obrazu, w innych nie, ale zawsze warto go podać, bo Google go widzi i może wykorzystać jako tytuł zdjęcia w wynikach wyszukiwania grafiki zamiast jakichś losowych słów, które sobie na naszej stronie przeczyta 🙂

W obu przypadkach pola te uzupełniamy normalnym cywilizowanym tekstem 😉 – z małymi i dużymi literami, spacjami, przecinkami (jeśli trzeba), polskimi znakami i całą tą resztą. Nie trzeba tu żadnych kombinacji stosować (tak jak trzeba było na przykład przy nazwie pliku :))

Kurs WordPress: Gutenberg w WordPressie - dodawanie tekstu alternatywnego oraz tytułu zdjęcia dla SEO

Obrazek z gracją ląduje na stronie, a żeby dostał full punktów od jury, ja sobie go jeszcze wyśrodkuję, co by nie był taki kopnięty w lewą. Klikam w podręcznym przyborniku ikonkę wyśrodkowania i wybieram Wyrównaj do środka:

Kurs WordPress: Gutenberg w WordPressie - wyrównanie obrazu na podstronie

Pierwsza warstwa, rządek na stronie, na litosfera – gotowa 🙂

Teraz czas na kolejny rząd.

Klikam plusik z prawej strony, aby dodać nowy blok. Tym blokiem będą Kolumny, bo wg planu potrzebuję teraz w lewej kolumnie wrzucić nagłówek z tekstem, a prawą zostawić pustą.

W najczęściej używanych blokach nie widzę kolumn, więc rozwijam listę klikając Przeglądaj wszystko:

Kurs WordPress: Gutenberg w WordPressie - dodanie bloku Kolumny na stronie internetowej

Tu znajduję blok Kolumny już bez problemu i naklikuję gościa:

Kurs WordPress: Gutenberg w WordPressie - dodanie bloku Kolumny na stronie internetowej

Wstawia się sekcja, w której zapytają mnie, ile właściwie ja chcę mieć tych kolumn i jakie. Te liczby, które są pod ikonkami, mówią o procentowym podziale miejsca w kolumnach, czyli zapis 30/70 oznacza, że wstawiłabym dwie kolumny, z których pierwsza będzie zajmowała 30% dostępnego miejsca, a druga – 70%.

Ja chcę dwie równe kolumny, więc wybieram 50/50:

Kurs WordPress: Gutenberg w WordPressie - dodanie dwóch kolumn na stronie internetowej

I teraz pokazuje się puste miejsce na treść, ale już podzieloną na właśnie dwie kolumny:

Kurs WordPress: Gutenberg w WordPressie - dodanie dwóch kolumn na stronie internetowej

Do każdej z tych kolumn mogę teraz dodać treści wybierając odpowiednie bloki Gutkowe po kliknięciu w plusik.

Ja na początek w lewej kolumnie pragnę nagłówka, więc właśnie blok Nagłówek wybieram:

Kurs WordPress: Gutenberg w WordPressie - dodanie nagłówka na stronie internetowej

Pojawia się miejsce przeznaczone na nagłówek, więc wstukuję go na klawiaturze:

Kurs WordPress: Gutenberg w WordPressie - dodanie nagłówka na stronie internetowej

W tej samej kolumnie, zaraz pod nagłówkiem, będę chciała dodać kawalątek tekstu, więc korzystając z plusa wewnątrz kolumny

Kurs WordPress: Gutenberg w WordPressie - dodanie tekstu w kolumnie na stronie internetowej

dodaję kolejny blok – Akapit:

Kurs WordPress: Gutenberg w WordPressie - dodanie tekstu w kolumnie pod nagłówkiem

Pojawi się osobliwa notatka Wciśnij / aby wybrać blok, ale wiemy doskonale, że tak właśnie wygląda blok Akapit, więc znów stukam w klawiaturę, żeby wpisać w tym miejscu tekst, jaki planowałam:

Kurs WordPress: Gutenberg w WordPressie - dodanie tekstu w kolumnie pod nagłówkiem

I gotowe, nagłówek z tekstem w lewej kolumnie i pusta prawa kolumna – zgodnie z planem wykonane 🙂

Po rozwinięciu widoku listy bloków da się doskonale zauważyć taką właśnie strukturę tego rzędu – ogólny blok Kolumny, a w nim dwie pojedyncze kolumny. W pierwszej nagłówek (O nas) i akapit tekstu (Baby grubo wkręcone w odblaski), a druga kolumna całkiem pusta:

Kurs WordPress: Gutenberg w WordPressie - struktura bloku kolumna na stronie internetowej

Drugi plasterek wykrojony ze strony wykonany, więc można przejść do trzeciego.

Zerkam na szkic strony i widzę, że trzecia warstewka, rządek, to znów kolumny, choć już nie równej wielkości. Po raz kolejny klikam więc w plusik dla dodania nowego bloku, a potem wybieram blok – Kolumny:

Kurs WordPress: Gutenberg w WordPressie - dodawanie kolumn

Tym razem chcę, aby pierwsza kolumna była węższa, wiec wybieram model 30/70:

Kurs WordPress: Gutenberg w WordPressie - dodawanie nierównych kolumn

Na stronie, podobnie jak wcześniej, pojawia się miejsce na elementy w dwóch kolumnach:

Kurs WordPress: Gutenberg w WordPressie - dodawanie nierównych kolumn

Dodaję je analogicznie jak wcześniej, wrzucając plusikami odpowiednie bloki (Nagłówek, Akapity) do kolumn:

Kurs WordPress: Gutenberg w WordPressie - dodawanie tekstu i nagłówka w kolumnach

I znów w widoku listy bloków świetnie czytelne jest, jak to się jedno w drugim zagnieżdża: mamy ogólne Kolumny, w nich dwa pojedyncze bloki Kolumna, a w każdej kolumnie coś kolejnego: w pierwszej nagłówek, a w drugiej kilka akapitów tekstu:

Kurs WordPress: Gutenberg w WordPressie - struktura rozbudowanych kolumn na blogu

I kolejna warstwa strony zbudowana. Nasz tort ma już trzy biszkopty, jupi!

Ale na tym nie poprzestaję – pora na kolejny rządek! Wg szkicu mają się w nim znajdować trzy równego rozmiaru obrazki, więc znów jako kolejny blok wybieram Kolumny:

Kurs WordPress: Gutenberg w WordPressie - dodawanie rzędu kolumn na blogu

Tym razem decyduję się na układ 33/33/33, czyli na trzy równe kolumny:

Kurs WordPress: Gutenberg w WordPressie - dodawanie rzędu z kolumnami na blogu

Widzę podgląd kolumn na stronie i w każdej kolumnie plusik do dodawania bloków:

Kurs WordPress: Gutenberg w WordPressie - dodawanie treści do trzech kolumn

No to dodaję – do każdej kolumny po obrazku, dokładnie tak, jak na początku, czyli wybierając blok Obrazek:

Kurs WordPress: Gutenberg w WordPressie - dodawanie obrazków do trzech kolumn

i ładując fotkę (z odpowiednim tytułem i tekstem alternatywnym) z Biblioteki mediów:

Kurs WordPress: Gutenberg w WordPressie - tekst alternatywny i tytuł zdjęcia - działania SEO

I rządek trzech fotek już jest!

Łatwizna!

Kurs WordPress: Gutenberg w WordPressie - trzy kolumny z fotografiami

Teraz mój plan krzyczy, że dodajemy kolejny rząd: obrazek, a obok niego tekst. Gicik. Znamy już ten temat 😉

Podobnie robiłam to wcześniej, dodaję więc bez trwogi na ten kolejny rząd strony blok Kolumny i wybieram układ 50/50, czyli po połowie:

Kurs WordPress: Gutenberg w WordPressie - dodawanie bloku dwóch kolumn

Korzystając z plusików dodaję w pierwszej kolumnie Obraz (i wybieram odpowiedni z Biblioteki mediów), a w drugiej Akapit (i wklejam do niego tekst z Notatnika):

Kurs WordPress: Gutenberg w WordPressie - dodawanie tekstu obok obrazu

Tym sposobem zostaje mi do zrobienia jeszcze tylko jeden, ostatni rządek na stronie. Ostatnia warstwa! 🙂

Mają się w niej znaleźć trzy fotki równej wielkości, więc tę melodię znamy już doskonale i po pierwszej nutce możemy odgadnąć, jak to się robi 😉

Znów dodaję blok Kolumny, układ 33/33/33 i plusikami w każdej kolumnie umieszczam blok Obrazek:

Kurs WordPress: Gutenberg w WordPressie - dodawanie trzech kolumn na obrazy

Ładuję obrazki z Biblioteki mediów i gotowe!

Cała treść na stronie – dorzucona!

Kurs WordPress: Gutenberg w WordPressie - dodawanie obrazów w trzech kolumnach

Klikam Podgląd podstrony w prawym górnym rogu i napawam się widokiem tego, co powstało! 🙂

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga

Nie jest źle! Naprawdę nie jest źle, choć mam ochotę dorzucić tam parę smaczków – drobiazgów, które uprzyjemnią odbiór podstrony.

Chciałabym żeby pierwszy nagłówek z tekstem był na białym tle, a to na tle całego rządku w delikatnej szarości.

I żeby na tle tej samej szarości wylądowały ostatnie dwa rzędy – od Odblaskowa zajawka w dół.

Chodzi mi w tym o to, żeby wizualnie nieco oddzielić sekcje tematyczne na podstronie i urozmaicić ją nieco, aby nie była taka całkiem biała 🙂

Wracam więc do góry podstrony i w miejscu, w którym chcę, aby zaczynało się kolorowe tło, klikam plusik, który doda mi nowy blok:

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga - dodawanie okładki jako tło dla strony

Wybieram blok Okładka i odcień szarości z palety barw motywu, który chciałabym mieć w tle:

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga - dodawanie okładki jako tło dla strony: wybór koloru

Tło już jest!

Teraz trzeba tylko przenieść na niego tę treść 😀

Mogłabym ją faktycznie dosłownie przenieść (i później pokażę Wam jak to zrobić), ale tu treści jest tak naprawdę niewiele, raptem dwa równoważniki zdania w kolumnie, dlatego zwyczajnie dodam to wszystko od nowa, bo to równie dobra metoda 🙂

Klikam zatem plusik w środku okładki i wybieram blok Kolumny:

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga - dodawanie kolumn na tle okładki

Postępuję analogicznie jak za pierwszym razem, czyli wybieram podział kolumn 50/50:

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga - dodawanie kolumn na tle okładki

a potem w pierwszej kolumnie wstawiam nagłówek i tekst. Zmieniam im też kolor, bo – jak pamiętamy – na tle okładki kolor tekstu będzie biały, więc nic nie byłoby widać 🙂

Z ciekawości możemy zajrzeć w listę bloków, żeby zobaczyć, jak to wszystko wygląda pod kuchni. W widoku listy widać pięknie, że mamy blok Okładka, a w jego środku dopiero Kolumny, jedna z nagłówkiem i akapitem, a druga pusta.

Dokładnie to, co mieliśmy, ale wewnątrz okładki, która robi za tło. No i bardzo pięknie 🙂

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga - dodawanie tekstu w kolumnach na tle okładki

Od frontu, po wyjściu z kokpitu, będzie to wyglądać tak:

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga - tekst w kolumnach na tle okładki

Oczywiście teraz mam dwie takie same sekcje z nagłówkiem O nas, tylko jedną na szarym tle, a drugą bez tła (czyli na białym). Tę drugą muszę więc usunąć 🙂

I tu właśnie widok listy bloków sprawdzi mi się jak złoto, bo normalnie w edycji bardzo trudno jest zaznaczyć cały blok Kolumny (a to właśnie jego chcemy usunąć). Zwykle klikając myszką zaznaczymy którąś pojedynczą kolumnę albo element wewnątrz (nagłówek lub tekst). Widok listy pozwala nam ominąć ten problem i bardzo precyzyjnie wybrać właśnie caluteńki blok Kolumny, a potem po kliknięciu w trzy kropeczki z opcjami, usunąć go ze strony:

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga - usuwanie kolumn

I już dubelek zniknął 🙂

Biorę się zatem za wprowadzenie drugiej części zmian na tych kolumnach, to znaczy – będę chciała pokolorować tło tej jednej kolumny z nagłówkiem i tekstem na biało, aby wyróżniało się na szarym tle.

Znów wspomagam się widokiem listy bloków, żeby precyzyjnie zaznaczyć pierwszą kolumnę, po czym w ustawieniach bloku po prawej stronie klikam Tło i wybieram tło kolumny białe:

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga - struktura kolumny w widoku listy bloków

Ta-dam!

Jakże miłe są drobne sukcesy 😉

Teraz finisz w tej części podstrony, czyli zmiana koloru nagłówka i powiększenie fontu – robię to także w ustawieniach poszczególnych bloków (najpierw Nagłówka, potem Akapitu) po prawej stronie:

Kurs WordPress: Gutenberg w WordPressie - zmiana koloru tekstu i nagłówków

I voilà! Wygląda to tak właśnie, jak chciałam 🙂

Kurs WordPress: Gutenberg w WordPressie - podgląd tekstu w kolumnie na kolorowym tle

To teraz, zachęcona wstępnym sukcesem, dodam sobie tło do tej części na samym dole.

Znów wskakuje w miejsce, w którym kolorowe tło ma się zacząć, klikam plusik aby dodać nowy blok i wybieram Okładkę.

A okładce nadaję popielaty kolor z palety:

Kurs WordPress: Gutenberg w WordPressie - dodawanie okładki jako kolorowego tła dla sekcji na stronie

I w tym miejscu mogłabym postępować dokładnie tak, jak ostatnio, czyli po prostu od nowa dodać na okładce kolumny, do pierwszej wrzucić zdjęcie, a do drugiej tekst, po czym w następnym kolumnowym bloku umieścić trzy zdjęcia, ale pokażę Wam inny, szybszy sposób, choć może się wydawać z instrukcji mało… łatwy 😀

Ale zapewniam Was, że dużo łatwiej to w praktyce zrobić, niż na obrazku lekcyjnym pokazać 🙂

Otwieram widok listy bloków (a nie mówiłam, że go lubię?) i będę tam widziała w strukturze tej podstrony ten dolny blok Okładka, a pod nim dwa bloki Kolumny (robiące za dwa rzędy – jeden z obrazem i tekstem obok, a drugi z trzema zdjęciami koło siebie).

Ponieważ te dwa rzędy z kolumnami chcę wrzucić do wewnątrz okładki, łapię myszką za pierwszy pod Okładką blok Kolumny i przeciągając do góry wsadzam do środka okładki. Na czas przenoszenia myszakiem sam napis Kolumny zniknie (będzie widać tylko czarną ikonkę kolumn), ale tym się nie przejmujemy 🙂 Patrzymy tylko na cieniutką niebieską linię, która pokazuje nam, gdzie wylądują te Kolumny, jeśli puścimy je w danym momencie.

Nam zależy, żeby znalazły się w okładce, czyli poniżej napisu Okładka, ale przesunięte lekko do prawej (=zagnieżdżone), czyli dokładnie tak, jak na obrazku poniżej:

Kurs WordPress: Gutenberg w WordPressie - przenoszenie kolumn na tło okładki

Puszczam więc w tym miejscu i już rząd kolumn z obrazkiem i tekstem obok mam w środku okładki, czyli na popielatym tle.

Teraz to samo muszę zrobić dla ostatniego rzędu, czyli ostatniego bloku Kolumny:

Kurs WordPress: Gutenberg w WordPressie - przenoszenie kolumn na tło okładki

Znów więc łapie go myszką i wsadzam w okładkę:

Kurs WordPress: Gutenberg w WordPressie - przenoszenie kolumn na tło okładki

Tak naprawdę najtrudniejsze w tym wszystkim jest to, żeby wykazać się uwagą i wylądować tymi kolumnami faktycznie w okładce, a nie na przykład w drugiej kolumnie poprzedniej tabelki, bo się zrobi kipisz 🙂

Acz tym też nie ma się co stresować, bo jeśli lądowanie nie pójdzie jak z płatka, to zawsze mamy przycisk Cofnij – można go użyć, a potem spróbować jeszcze raz. Fartownie – mamy tu dowolną liczbę prób i nikt na tym nie ucierpi 😉

Gdy już lądowanie we właściwym miejscu zakończymy, zobaczymy, że tekst znów – jak to na okładce – zrobił się biały, więc trzeba mu nadać odpowiedni kolor, bo w ogóle go na tym popielu nie widać:

Kurs WordPress: Gutenberg w WordPressie - jasny tekst na jasnym tle: zmiana

Czy to oznacza, że teraz żmudnie, blok po bloku, będziemy musieli każdemu akapitowi z osobna zmieniać kolor?

Bynajmniej!

Korzystając z widoku listy bloków można zaznaczyć kilka akapitów na raz i zmienić im kolor hurtem 🙂

Żeby zaznaczyć więcej bloków, klikamy pierwszy, a potem trzymając klawisz Shift na klawiaturze – ostatni. W ten sposób zaznaczy się blok pierwszy, ostatni i wszystkie pomiędzy nimi.

Zostanie im już tylko wybrać kolor tekstu z ustawień po prawej stronie:

Kurs WordPress: Gutenberg w WordPressie - zmiana koloru tekstu na jasnym tle

I załatwione! Strona z mojego szkico-planu gotowa, a dla czytelników prezentuje się tak:

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga - wersja z tłem

I to jest to, o co mi wstępnie chodziło.

Docelowo, kilkoma linijkami zmian w CSS, przesunę sobie jeszcze tę białą kolumienkę do góry, dodam jej zielony daszek i delikatny cień, ale to już detale, na które pewnie i dla Was przyjdzie kiedyś pora, o ile w CSSową magię przyjdzie Wam chęć się zagłębiać.

CSS jest przydatny, gdy chce się wyjść z marzeniami ponad to, co oferują gotowe rozwiązania (czy to Gutenberg, czy WordPressowe motywy i wtyczki), ale nie jest niezbędny do tego, żeby stworzyć godną stronę 🙂

Jak widzicie – z samym Gutenbergiem też można ogarnąć całkiem w porzo rezultat 🙂

Kurs WordPress: Gutenberg w WordPressie - gotowa podstrona zbudowana blokami Gutenberga - efekt finalny

I co?

Która strona O nas podoba Wam się bardziej? Wersja z poprzedniej lekcji czy ta?

Dajcie znać w komentarzu w grupie 🙂

Kawa dla WordPressa

Ten kurs jest i zawsze będzie dla Was DARMOWY,
bo wierzę wiem, że warto sobie pomagać ❤

Totalnie nie musisz za nic płacić, ale jeśli masz chęć, możesz postawić mi kawę
Wypiję ją za sukces Twojej strony!

Pytania, odpowiedzi i komentarze
Zwiń komentarze

” czy możesz Edyto podać ten kod css ?
Docelowo, kilkoma linijkami zmian w CSS, przesunę sobie jeszcze tę białą kolumienkę do góry”

Edyta Woźniak (Administrator) 25 maja 2023 o 15:49

Hej Aga 🙂
Tak, dodajesz tej kolumnie we właściwościach bloku jakąś unikalną klasę, np. “moja-klasa” i potem w Dostosuju w Dodatkowym CSS wpisujesz:

.moja-klasa {
margin-top: -100px;
}

aby podnieść element o 100 pikseli w górę 🙂

Hej Edyta :). Użyłam tego kodu co podałaś, ale tabelka wskoczyła mi pod nakładkę, nie na nią. Może wiesz jak to zmienić, aby nałożyła się na nakładkę tak jak u Ciebie?

Cześć! A jak Ty to robisz, że poszczególne bloki są od siebie oddzielone? U mnie zdjęcia w kolumnach tej samej tabeli są sklejone, tak samo kolejne bloki w pionie. Wszystko się skleja razem.
Chciałabym sobie zrobić takie eleganckie odstępy, jak u Ciebie…

Edyta Woźniak (Administrator) 5 października 2023 o 20:38

Cześć Mirosław!
Nie robię nic szczególnego, jak widzisz w lekcji – one są takie z natury 🙂 Natomiast jeśli u Ciebie tak nie jest, a używasz Astry, to sprawdź sobie w Dostosuju w sekcji Global -> Block Editor czy nie masz tam ustawionej przestrzeni między blokami jako Legacy. Jeśli tak – to właśnie taki może być efekt. Zmień sobie wtedy na Comfort albo Compact i powinno być OK 🙂

Dziękuję, to było to 🙂

Napisz pytanie lub komentarz:

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Scroll to Top