# Jak zbudować nagłówek w WordPressie bez wtyczki URL: https://canvaswp.com/pl/guides/build-a-wordpress-header-without-a-plugin/ Updated: 2026-11-03 Przewodnik Nagłówek to jedyna część witryny, którą widzi każdy odwiedzający, a motywy zwykle chowają ją za ekranem ustawień z dziewięcioma opcjami. W Canvas nagłówek to rekord, który budujesz z bloków w edytorze, więc ten przewodnik jest raczej budowaniem niż wycieczką po polach wyboru. Opublikowano 5 września 2026 Zaktualizowano 3 listopada 2026 Napisane przez zespół Canvas w SemiColonWeb ## Krok 1: Czym jest nagłówek w Canvas Nagłówek to rekord, widoczny w panelu administracyjnym WordPress na liście jak strona i edytowany w tym samym edytorze blokowym. Ta jedna decyzja sprawia, że wtyczka do nagłówków przestaje być potrzebna. Inne motywy budują nagłówek w innym miejscu. Blocksy i Astra trzymają swoje kreatory nagłówka w Customizerze, panelu ustawień obok witryny, z dala od edytora, w którym piszesz strony. [Nasze porównanie z Blocksy](https://canvaswp.com/pl/compare/blocksy/) zestawia obie metody obok siebie. ### Zagnieżdżanie Rekord nagłówka zawiera **Header Root**. Root zawiera **Header Container**, który decyduje, czy nagłówek jest ograniczony do szerokości treści, na pełną szerokość, czy jedna wersja obowiązuje przy jednym punkcie przełamania, a druga poza nim. Kontener zawiera **Header Zones**, a strefa to komórka w wierszu nagłówka. Logo umieszcza się w pierwszej, nawigację w następnej, a ikonę wyszukiwania i koszyk w ostatniej. W rodzinie nagłówka jest łącznie 22 bloki, a na typowej witrynie zwykle wystarczają cztery lub pięć z nich. Reszta przydaje się wtedy, gdy zachodzi potrzeba wyszukiwarki sklepu, linku do innego języka albo bloku z godzinami otwarcia w rogu strony. Nie ma tu osobnego edytora. Nagłówek można edytować w WordPress tak jak strony, a obowiązują te same funkcje cofania, ustawienia bloków i skróty klawiszowe. ## Krok 2: Utwórz rekord nagłówka Otwórz listę Nagłówków w menu Canvas i dodaj nowy rekord. Masz dwa uczciwe punkty wyjścia. ### Zacznij od wzorca Wstaw wzorzec nagłówka, a otrzymasz zwykłe bloki, ułożone automatycznie, gotowe do przestawienia, przemianowania lub usunięcia. Nagłówki to największa kategoria wzorców w produkcie, spośród 183 wzorców łącznie, więc zwykle znajdzie się coś zbliżonego do pożądanego kształtu. To najszybsza droga i ta, którą warto wybrać przy pierwszym budowaniu. ### Zacznij od dema Jeśli zaimportowano jedną z 88 witryn demo, jej nagłówek jest już rekordem w witrynie. Otwórz go i zmień albo zduplikuj go i eksperymentuj na kopii. Edycja działającego nagłówka szybciej pokazuje strukturę niż pusty obszar roboczy. Nadaj rekordowi nazwę, która mówi, do czego służy, na przykład Główny nagłówek lub Nagłówek landing page. W ciągu miesiąca będziesz mieć ich trzy, a same nazwy są jedynym sposobem, by je od siebie odróżnić. ## Krok 3: Rozmieść strefy Strefy odpowiadają za układ, więc prawie nigdy nie trzeba walczyć z klasami wyrównania. - **Przesuń strefę do krawędzi.** Lewa strefa na logo, środkowa na menu, prawa na przyciski akcji to układ, do którego najczęściej dochodzą witryny. - **Grupuj elementy, które do siebie należą.** Ikona wyszukiwania, koszyk i przycisk umieszczone w jednej strefie tworzą skupisko i są rozmieszczone jako jedna grupa. - **Zmiana kolejności dla każdego breakpointu.** Strefa, która na komputerze znajduje się na trzecim miejscu, może na telefonie znaleźć się na pierwszym, bez drugiego rekordu nagłówka. - **Ogranicz strefę do kategorii urządzeń.** Ustaw strefę tak, by pomijała urządzenia bez miejsca na nią, dzięki czemu nic nie trzeba później ukrywać w CSS. - **Dodaj własne klasy** do strefy, gdy chcesz się do niej odwołać z własnego arkusza stylów. Najpierw zbuduj układ na komputerze i nie ruszaj go, dopóki nie pojawią się wszystkie elementy. Decyzje o układzie są znacznie łatwiejsze, gdy prawdziwa treść jest już w wierszu. **Nagłówek w edytorze.** Strefy zawierają części; każda część to blok z własnym panelem ustawień. ## Krok 4: Dodaj elementy Teraz wypełnij strefy. Każda z nich to blok, a każdy blok ma panel ustawień z opcjami, które dany blok obsługuje. - **Header Logo.** Logo z osobnymi plikami dla stanu przyklejonego i ciemnego stanu, dzięki czemu przezroczysty nagłówek nad ciemnym zdjęciem nie wymaga obejścia. - **Header Navigation.** Menu główne z listami rozwijanymi i panelami mega menu. Wyświetla menu WordPress, więc samo menu nadal zarządzasz tam, gdzie zwykle. - **Header Search.** Ikona, która otwiera pole, albo pole zawsze otwarte, zależnie od tego, co lepiej pasuje do projektu. - **Header Button.** Wezwanie do działania z typowymi ustawieniami rozmiaru, stylu i linku. Jeden przekonuje, trzy tylko przeszkadzają. - **Header Cart.** Koszyk WooCommerce z liczbą produktów i rozwijanym podsumowaniem, dla sklepów. - **Header Icon Link, Header Social i Header Info.** Numer telefonu, rząd profili społecznościowych, krótki blok danych kontaktowych, adres lub godziny otwarcia. ### Mega menu, gdy lista nie wystarcza Mega menu to osobny rekord, zaprojektowany z bloków i renderowany przez blok Mega menu, dzięki czemu element menu otwiera panel na pełną szerokość z kolumnami, obrazami i przyciskami. Mega Menu Column utrzymuje panel na siatce. Stosuj ją, gdy kategoria rzeczywiście ma strukturę, a nie po to, by mała witryna wyglądała na przeładowaną. ## Kroków 5: Lepki, przezroczysty nagłówek i gotowe układy Zachowanie wynika z presetów, czyli zestawów ustawień układu, które stosuje się jednym kliknięciem, a następnie dostosowuje. Wybierz pożądane zachowanie i zmień później dowolne ustawienia. - **Przezroczysty.** Bez tła, więc to, co znajduje się za nagłówkiem, prześwituje. Połącz go z ciemnym lub jasnym wariantem logo, aby logotyp tekstowy pozostał czytelny. - **Półprzezroczyste.** Tło, które pozwala zobaczyć obraz za nim i zachować czytelność tekstu. Zwykle bezpieczniejszy wybór niż zatłoczone zdjęcie. - **Pływający,** oraz **pływający półprzezroczysty** lub **pływający mały**, gdy nagłówek znajduje się wewnątrz strony z odstępem wokół, z dala od krawędzi okna. - **Pełna szerokość, przyklejony.** Obejmuje cały widok i pozostaje na miejscu podczas przewijania strony. - **Przyklejony przy przewijaniu w górę.** Znika z góry, gdy odwiedzający przewija w dół, i wraca, gdy przewija z powrotem w górę, dzięki czemu długie strony odzyskują miejsce. ### Ustawienia dla całej witryny, które za nimi stoją Opcje nagłówka to największa sekcja w Opcjach motywu: obejmuje 94 z 533 pól i odpowiada za rzeczy, których żaden pojedynczy rekord nie powinien posiadać: domyślny nagłówek, zachowanie przyklejonego nagłówka, wysokość, odstępy i punkt przełamania dla urządzeń mobilnych. Import dema wypełnia je wszystkie, a te, na których zależy, można zmienić. **Opcje motywu, Nagłówek.** Domyślne ustawienia witryny, na których opierają się wszystkie rekordy nagłówka. ## Krok 6: Nagłówek na telefonie Większość ruchu pochodzi z telefonu, więc sprawdź to przed wszystkim innym. Dobra wiadomość jest taka, że to ten sam rekord. - **Zmień kolejność zamiast budować od nowa.** Przesuń logo na środek, umieść przełącznik po lewej, a przycisk Zadzwoń po prawej. Wszystko zrobisz, ustawiając kolejność stref. - **Usuń to, co się nie mieści.** Ogranicz wyświetlanie danych kontaktowych lub rzędu ikon mediów społecznościowych do większych ekranów. Upychanie ich na telefonie nikomu nie pomaga. - **Zadbaj o duże obszary dotyku.** Przełącznik menu i ikona telefonu to dwa elementy, w które ludzie celują w ruchu. - **Ustaw breakpoint celowo.** Szerokość, przy której menu się zwija, jest ustawieniem, więc długie menu może zwinąć się wcześniej niż krótkie. - **Rozważ panel boczny** dla menu mobilnego. Panel boczny to element, który wysuwa się od krawędzi ekranu i mieści pełne menu, pole wyszukiwania oraz przycisk. Sprawdź to w edytorze, zanim opublikujesz. Canvas wyświetla nagłówek w obszarze edycji tym samym kodem, którym wyświetla go odwiedzającym, więc układ na telefonie możesz oglądać już podczas budowania. ## Krok 7: Przypisz go do całej witryny lub poszczególnych stron Rekord nic nie robi, dopóki coś na niego nie wskazuje. Są dwa poziomy, a działają one tak samo dla każdego elementu nagłówka i stopki. ### Ustawienie domyślne dla całej witryny Ustaw domyślny nagłówek w Opcjach motywu, a każda strona z niego skorzysta. Zrób to samo w przypadku górnego paska, wyglądu tytułu strony i stopki. To ustawienie sprawia, że nowa strona od razu wygląda dobrze po jej opublikowaniu. ### Nadpisanie dla pojedynczej strony Każda strona może nadpisać dowolne z tych ustawień we własnych ustawieniach. Landing page kampanii ma przezroczysty nagłówek i nie ma paska górnego; strona kontaktowa zachowuje standardowy. Nic nie jest powielane, a nic nie trzeba pamiętać później, ponieważ nadpisanie obowiązuje na stronie, której dotyczy. ### Górne paski Pasek górny to osobny rekord z własnymi blokami: numer telefonu, godziny otwarcia, przełącznik języka, ogłoszenie. Blok Header Topbar umieszcza go nad wierszem nagłówka. Ponieważ jest oddzielny, komunikat na czas świąt zmienia się w całej witrynie bez otwierania nagłówka. ## Krok 8: A stopka, w ten sam sposób Stopka to ten sam system, zastosowany na drugim końcu strony, więc wszystko z ostatnich siedmiu kroków przenosi się bez zmian. ### Dwa rekordy, nie jeden Rekord stopki przechowuje kolumny, a osobny rekord Copyrights przechowuje cienki pasek na dole. Przy takim podziale wiersz z informacją prawną lub rok zmieniają się w całej witrynie bez ingerowania w układ powyżej. ### Bloki Footer About do opisu firmy, Footer Contacts do adresu i numeru telefonu, Footer Instagram do kanału, Footer Widget Area do wszystkiego, co może zrobić widżet, Widget Links do uporządkowanej kolumny linków, a Copyrights do dolnego paska. Wzorce stopki dają gotowy układ startowy, a stopka ma za nimi własne opcje dla całej witryny. ### Co umieścić w nagłówku Stopki to miejsce, w którym ludzie szukają dowodów i adresu. Dane kontaktowe, godziny otwarcia, strony prawne, jedno zdanie o tym, kim jesteś, oraz linki, które nie zasłużyły na miejsce w nagłówku. Przypisz stopkę globalnie, zastąp ją na stronach wymagających czegoś spokojniejszego, a w tym projekcie masz z głowy stałe elementy witryny. [Wszystkie bloki i opcje kreatora](https://canvaswp.com/pl/header-builder/) ## Źródła Tam, gdzie ten przewodnik opisuje coś spoza samego Canvas, poniżej znajdziesz oficjalne strony, na których to udokumentowano. - [Ekran Menu (Wygląd)](https://wordpress.org/documentation/article/appearance-menus-screen/) wordpress.org · Miejsce, w którym tworzy się menu WordPress i przypisuje je do lokalizacji oferowanych przez motyw - [Zrozumienie kryterium sukcesu 2.5.8: Rozmiar celu (minimalny)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) w3.org · Dlaczego elementy dotykowe muszą mieć minimalny rozmiar 24 na 24 piksele CSS Co zrobić dalej ## Co dalej Dwa przewodniki o tym, dlaczego nagłówek decyduje o szerszej kwestii, oraz sam kreator nagłówka. [Przewodnik **Motyw blokowy czy kreator stron** Dlaczego nagłówek najczęściej decyduje o całej sprawie.](https://canvaswp.com/pl/guides/block-theme-vs-page-builder/) [Przewodnik **Zaimportuj witrynę demo WordPress** Najszybszy sposób, żeby od środka zobaczyć gotową witrynę zbudowaną z bloków.](https://canvaswp.com/pl/guides/import-a-wordpress-demo-website/) [Produkt **Kreator nagłówka** Strefy, wiersze i nagłówki dla poszczególnych stron, wraz z ekranami, które je pokazują.](https://canvaswp.com/pl/header-builder/) Pytania ## Najczęstsze pytania Pozostałe pytania znajdziesz w [pełnym FAQ](https://canvaswp.com/pl/faq/), a każde ustawienie szczegółowo opisuje [dokumentacja](https://docs.canvaswp.com/). **Czy potrzebuję osobnego nagłówka na urządzenia mobilne?** Zazwyczaj nie, ponieważ jeden rekord nagłówka Canvas sam dostosowuje się do telefonu. Strefy zmieniają kolejność dla każdego punktu przerwania, a każdą z nich można ograniczyć do wybranego poziomu urządzenia, dzięki czemu jeden rekord może wycentrować logo na telefonie, ukryć dane kontaktowe i schować menu za przełącznikiem. Utwórz drugi rekord tylko wtedy, gdy naprawdę chcesz innego projektu, a nie naprawiać układ. **Czy jedna strona może mieć inny nagłówek?** Tak, każda strona Canvas może mieć własny nagłówek. Nagłówki, górne paski, tytuły stron i stopki mają każdy domyślne ustawienie dla całej witryny oraz nadpisanie dla pojedynczej strony, więc strona docelowa kampanii może mieć przezroczysty nagłówek nad zdjęciem, podczas gdy każda inna strona zachowuje standardowy. **Czy to obszar widżetów, czy menu?** Nagłówek Canvas nie jest ani jednym, ani drugim: to rekord, który edytuje się w edytorze bloków, dokładnie jak stronę, a logo, nawigacja, wyszukiwarka, koszyk i przyciski znajdujące się w nim są blokami z własnymi panelami ustawień. Menu WordPress pozostają menu WordPress; blok Header Navigation wyświetla jedno z nich. **Co się stanie z moim nagłówkiem, gdy licencja wygaśnie?** Twoja witryna nadal wyświetla się dokładnie tak jak dziś. Wstrzymane zostają: aktualizacje, importy dem, CanvasAI Engine i edycja bloków premium do czasu odnowienia licencji. Jeśli sprawdzenie licencji nie może połączyć się z naszymi serwerami, obowiązuje 14-dniowy okres karencji.