W tej lekcji stworzymy i dostosujemy nagłówek oraz stopkę.
Motywy blokowe pozwalają nam budować całą witrynę przy użyciu bloków,
w tym stron, wpisów, szablonów i fragmentów szablonów.
Omówiliśmy już zagnieżdżanie bloków i korzystanie z wzorców bloków.
W tej sesji utworzę i dostosuję nagłówek i stopkę mojej witryny,
korzystając z wzorców dostarczonych wraz z moim motywem.
Wzorce nagłówków i stopek stanowią solidną podstawę do pracy,
a większość układu została już przygotowana.
Zanim zaczniemy, chciałbym zaznaczyć, że używam motywu blokowego Twenty Twenty-Four,
a jeśli przejdę do „Ustawienia”, a następnie „Czytanie”, zauważysz, że ustawiłem
statyczną stronę główną i stronę wpisów.
Dzięki temu, jeśli przejdziemy do stron i otworzymy naszą stronę główną,
zauważymy, że została ona przypisana do domyślnego szablonu strony,
takiego samego jak inne strony w moim menu nawigacyjnym.
Zacznijmy więc.
Przejdziemy do edytora witryny, gdzie możemy edytować i aktualizować nasze szablony.
Należy pamiętać, że na tym etapie wszystkie nasze szablony mają ten sam nagłówek i stopkę.
Jeśli więc otworzymy na przykład szablon stron,
zauważymy, że jest on taki sam jak szablon 404 i szablon pojedynczych wpisów.
Co to oznacza?
Oznacza to, że jeśli dostosujemy aktualny fragment szablonu nagłówka i stopki, automatycznie
zaktualizuje się on we wszystkich szablonach, w których się znajduje.
Jeśli jednak zastąpię nagłówek lub stopkę w jednym szablonie, będę musiał ręcznie zastąpić je
we wszystkich innych szablonach, w których zamierzam ich używać.
Bez dalszych wstępów otworzę szablon strony i zacznę dostosowywać
nagłówek i stopkę.
Zacznijmy od nagłówka i otwórzmy widok listy.
Chcę zastąpić nagłówek, więc kliknę trzy pionowe kropki, a następnie wybieram opcję
„Zastąp nagłówek”.
Teraz mogę wybierać spośród wielu wzorców dostępnych w moim motywie.
Wybiorę nagłówek wewnątrz obrazka tła o pełnej szerokości.
Po wybraniu zacznę modyfikować.
Upewnię się, że zaznaczyłem blok „Okładka”, a następnie zastąpię obrazek tła obrazkiem,
który już przesłałem do mojej biblioteki multimediów.
Następnie zaznaczę blok „Logo witryny” i prześlę przezroczysty obrazek, który zapisałem
jako logo w mojej bibliotece multimediów.
Następnie ponownie wybieram blok „Okładka”, otwieram „Style” i zmieniam krycie na zero,
ponieważ wybrałem jasny obrazek.
Po zakończeniu wybieram blok „Tytuł witryny” i wybieram ciemniejszy kolor tekstu.
Następnie klikam trzy pionowe kropki obok opcji „Typografia”, wybieram „Fonty”
i wybieram nowy krój pisma.
Chcę również powiększyć tytuł witryny, więc ustawiam niestandardowy rozmiar.
Następnie możemy przejść do bloku „Nawigacja”.
Po wybraniu bloku „Nawigacja” otworzę „Style”, zmienię kolor tekstu,
zmienię rodzinę kroju pisma i powiększę menu nawigacyjne,
ustawiając niestandardowy rozmiar.
Ostatnim krokiem jest dodanie wypełnienia wokół bloku „Wiersz”.
Otworzę więc style i wymiary poniżej i dodam więcej wypełnienia, aby stworzyć
więcej miejsca wokół tekstu.
I gotowe, nasz nowy nagłówek jest gotowy.
Następnym krokiem jest zapisanie, a następnie aktualizacja innych szablonów za pomocą nowego
nagłówka, który utworzyłem przy użyciu wzorców.
Na przykład otwórzmy szablon 404 i zastąpmy nagłówek.
Teraz zobaczysz to poniżej „fragmenty szablonu”.
Możemy zapisać, a następnie wykonać tę samą procedurę dla wszystkich innych odpowiednich szablonów.
Teraz możemy wrócić do naszego szablonu strony i przejść do stopki.
W tym przypadku nie zamierzam zastępować stopki; zamierzam jedynie zaktualizować istniejący
wzorzec, a następnie zostanie on automatycznie zaktualizowany we wszystkich innych szablonach.
Najpierw powiększę blok „Logo witryny” i dodam slogan mojej witryny do
bloku „Slogan witryny” poniżej tytułu witryny.
Teraz możemy przejść do trzech kolumn po prawej stronie.
Wybiorę tytuł środkowego bloku i zmienię go na „Szybkie odnośniki”.
Następnie wybiorę blok „Nawigacja”, który został dodany z treścią zastępczą.
W ustawieniach paska bocznego obok menu kliknę trzy pionowe kropki i wybiorę
nawigację nagłówka.
Otworzę również zakładkę ustawień i sprawdzę, czy orientacja jest pionowa.
Teraz możemy przejść do następnej kolumny; tym razem zastąpię treść zastępczą
nowym menu nawigacyjnym.
Kliknę więc opcję „Utwórz nowe menu”, a następnie wybiorę stronę z polityką prywatności,
którą już utworzyłem, oraz stronę z warunkami użytkowania.
W ostatniej kolumnie upewnię się, że zaktualizowałem odnośniki do moich platform społecznościowych.
Obecnie znajduje się tam zawartość zastępcza, dlatego zastąpię hashtag
prawidłowym odnośnikiem.
Teraz moja stopka jest gotowa, ale oczywiście mogę wprowadzić dalsze modyfikacje.
Po zapisaniu możemy przejść do innych szablonów, na przykład szablonu 404,
i zobaczymy, że stopka została automatycznie zaktualizowana.
Oto widok interfejsu użytkownika, gdy odwiedzam moją stronę kontaktową.
Wierzę, że wzorce nagłówków i stopek będą dla ciebie inspiracją i zapewnią solidną
podstawę do projektowania nagłówków i stopek.