Wprowadzenie
Header (nagłówek) i footer (stopka) to dwa główne elementy strony, które najczęściej powtarzają się na każdej podstronie. Nagłówek to zwykle widoczny jest jako pierwszy na górze strony i zawiera wszystko co może okazać się przydatne dla użytkownika na początek. Przede wszystkim są to: logo strony (z odnośnikiem do strony głównej), menu nawigacji oraz czasami przycisk CTA (np. ZGŁOŚ SIĘ, ZAPISZ SIĘ, POPROŚ O KONTAKT). Stopka natomiast znajduje się na końcu i przewiduje miejsce na dodatkowe informacje: poboczne menu nawigacji (np. do dodatkowych podstron polityki prywatności), listę usług, dane kontaktowe i informacje o copyright, odnośniki do mediów społecznościowych. W tym poradniku dowiesz się, jak zrobić header i footer w Elementorze za pomocą Kreatora motywów (Theme Builder).
Kreator motywów w Elementorze – czym się różni od „Edytuj w Elementorze”
Nawigując między wpisami i stronami w WordPressie pewnie nie raz zobaczysz przycisk „Edytuj w Elementorze”. Używając go na stronie lub wpisie, pracujesz tak na prawdę nad jedną konkretną podstroną. Zmiany, które wprowadzisz, zostaną zachowane tylko dla wskazanej podstrony i nie będą wyświetlane w innych miejscach. Projektując nagłówek wewnątrz strony „Strona główna”, nie sprawisz, aby wyświetlał się również na stronach „O nas”, „Oferta” i „Kontakt”.
Kreator motywów (Theme Builder) działa inaczej. Z jego pomocą zbudujesz elementy szablonu (templates), m.in.: nagłówek, stopkę, szablon wpisu, archiwum bloga. W Theme Builderze nie wystarczy „zbudować i zapisać” – trzeba jeszcze wskazać Elementorowi gdzie dany szablon ma się wyświetlać. Do tego służą warunki wyświetlania. To właśnie one decydują, czy nagłówek ma być na całej stronie, tylko na blogu, tylko na stronie głównej itd.
Tworzenie headera w Elementorze krok po kroku
Zanim zaczniesz, przygotuj sobie logo i upewnij się, że stworzone jest przynajmniej jedno menu w WordPressie („Wygląd” -> „Menu”). W tym poradniku zakładam klasyczny układ: logo po lewej, menu po prawej, a opcjonalnie przycisk CTA. Aby rozpocząć tworzenie znajdź zakładkę „Szablony” w menu głównym panelu WordPressa, a w nim pozycję „Theme Builder”. Z dostępnych pozycji wybierz „Nagłówek”, a następnie „Add New”. Elementor zasugeruje Ci użycie gotowych układów, ale na potrzeby tego poradnika kliknij „X” w prawym górnym rogu, aby przejść do czystego edytora.
Struktura i układ nagłówka Elementor
Zacznijmy od początku: za pomocą Elementora dodaj pierwszy kontener, w którym umieścisz pozostałe elementy. Jeśli Elementor zapyta Cię o rodzaj układu, wybierz „Elastyczne pole”, a w przypadku struktury „Kierunek wiersza” (obrazek ze strzałką w prawą stronę). W tej samej zakładce, upewnij się, że zaznaczone są opcje „Wyjustuj treść” -> „Odstęp pomiędzy” oraz „Wyrównaj elementy” -> „Wyśrodkowanie”. Zapewni to poprawne wyrównanie elementów w pionie i w poziomie wewnątrz nagłówka.
Logo i menu główne w Elementorze
Najpierw dodaj logo: możesz użyć widżetu typu „Logo strony” albo zwykłego obrazka. W zakładce „Styl” ustaw wysokość obrazka na 70px – to wystarczająca wartość, żeby zachować czytelność, ale też nie za duża, aby logo nie dominowało w nagłówku. Jeśli Twoje logo ma nietypowe wymiary lub jest bardzo wysokie, może być konieczne dopasowanie tej wartości. Pamiętaj, że nagłówek nie powinien być zbyt wysoki. W innym wypadku będzie zajmował za dużo miejsca, szczególnie na widoku mobilnym. Staraj się zachować wysokość nagłówka poniżej 90px.
Obok logo wstaw utworzone wcześniej menu używając widżetu „Wordpress Menu”. W zakładce „Treść” wybierz odpowiednie menu oraz wyrównaj menu do prawej strony. Resztę opcji, szczególnie w zakładce „Styl” dostosuj wedle uznania – nie poruszam stylizacji w tym poradniku, jako kwestii indywidualnej dla każdej strony.
Sticky header – jak „przykleić” nagłówek do górnej krawędzi strony?
Są dwa główne podejścia do tworzenia nagłówków: standardowy i przyklejony. Typowo, nagłówek wyświetli się na górze każdej strony w Twojej witrynie. Gdy zjedziesz niżej, zniknie z ekranu, zostając na samej górze poza widokiem. Jeśli chcesz, aby nagłówek (tj. logo i menu) był widoczny dla odwiedzających cały czas (tj. cały czas był na górze ekranu, nawet podczas przewijania w dół), wybierz główny kontener i w zakładce „Zaawansowane” -> „Efekty ruchu” -> „Sticky” wybierz „góra”.
Warunki wyświetlania – gdzie nagłówek ma się pojawiać
Na tym etapie możesz opublikować szablon nagłówka. Po publikacji Elementor poprosi o warunki wyświetlania. Jeśli to Twój pierwszy header na stronie, najbezpieczniej ustaw „Add condition” -> „Uwzględnij” -> „Entire site”. Dzięki temu od razu widzisz efekt na różnych podstronach i masz pewność, że to „główny” nagłówek serwisu widoczny na każdej z nich.
Tworzenie footera w Elementorze krok po kroku
Aby rozpocząć tworzenie, z dostępnych pozycji w Theme Builder wybierz „Stopka”, a następnie „Add New”. Elementor zasugeruje Ci użycie gotowych układów, ale na potrzeby tego poradnika kliknij „X” w prawym górnym rogu, aby przejść do czystego edytora, tak samo jak w przypadku nagłówka.
Struktura i układ stopki w Elementorze
Podobnie jak w przypadku nagłówka, za pomocą Elementora dodaj pierwszy kontener, w którym umieścisz pozostałe elementy. Jeśli Elementor zapyta Cię o rodzaj układu, wybierz „Elastyczne pole”, a w przypadku struktury „Kierunek wiersza” (obrazek ze strzałką w prawą stronę). Na potrzeby poradnika stworzymy stopkę zawierającą 3 kolumny. Aby to osiągnąć, dodaj w kontenerze 3 kolejne kontenery. Dzięki „kierunkowi wiersza” na kontenerze nadrzędnym, każdy z wewnętrznych kontenerów ułoży się obok siebie w idealnych proporcjach szerokości (każdy z nich będzie 1/3 szerokości ekranu).
Zawartość stopki
Stopka to trochę „ostatni przystanek” na stronie. Użytkownik przewija na dół zwykle wtedy, gdy albo już przeczytał treść i szuka kolejnego kroku, albo nie znalazł czegoś w menu i liczy, że w znajdzie to w stopce. Dlatego footer powinien być przewidywalny: ma gromadzić najprzydatniejsze informacje, a nie wyglądać jak losowy zbiór linków „pod SEO”.
Za pomocą widżetów stwórz stopkę wg potrzeb Twojej witryny.
Warunki wyświetlania – gdzie wyświetlać stopkę?
Po skończeniu projektu stopki kliknij „Opublikuj”. Elementor pokaże okno z warunkami. Podobnie jak w przypadku nagłówka, jeśli to Twoja pierwsza stopka na stronie, najbezpieczniej ustaw „Add condition” -> „Uwzględnij” -> „Entire site”. Dzięki temu odwiedzający zobaczą szablon stopki wszędzie: na stronie głównej, na stronach, na wpisach, na archiwach kategorii itd.
Kilka wersji nagłówka lub stopki (warunkowe wyświetlanie)
W Elementorze możesz mieć więcej niż jeden szablon headera i stopki. Możesz zbudować kilka wariantów i sterować tym, gdzie który ma się wyświetlać, używając warunków wyświetlania w Theme Builder. Dzięki temu możesz dopasować nawigację i wygląd do kontekstu konkretnej podstrony, bez przerabiania całej witryny lub każdej strony osobno.
Warto jednak podejść do tego z głową, bo to obszar, w którym najłatwiej zrobić sobie bałagan: po miesiącu wracasz do projektu i nagle okazuje się, że na różnych podstronach są różne nagłówki „nie wiadomo czemu”.
Kilka wersji headera i stopki to świetne narzędzie, jeśli chcesz świadomie różnicować doświadczenie użytkownika w różnych częściach serwisu (strona główna, blog, landing). Jeśli jednak Twoja strona jest prosta i zależy Ci na łatwej obsłudze, w większości przypadków lepiej zacząć od jednej wersji i dopiero później, gdy pojawi się realna potrzeba, dodawać warianty.
