Nagłówek to pierwszy element który użytkownik widzi na każdej stronie serwisu. I jeden z tych elementów które w Divi 5 można zbudować dokładnie tak jak się chce — bez kompromisów wymuszonych przez gotowe moduły i bez linijki własnego kodu.
W tym artykule budujesz nagłówek od zera w Theme Builderze. Logo po lewej, menu po prawej, wersja mobilna z hamburgerem. Prosty, działający, gotowy do użycia w realnym projekcie.
Zanim zaczniesz — dwie rzeczy do przygotowania
Menu w WordPressie — zanim wejdziesz do Divi, stwórz menu w panelu WordPress. Wygląd → Menu → utwórz nowe menu, dodaj strony, zapisz. Divi pobierze to menu automatycznie. Bez tego modułu menu nie będzie miał czego wyświetlać.
Menu w WordPress
Logo — plik PNG lub SVG z logotypem, najlepiej w wersji na jasne tło. Jeśli masz też wersję na ciemne tło — przygotuj obie, przyda się jeśli nagłówek będzie miał ciemne tło.
Masz oba? Jedziemy.
Dodawanie nagłówka
Zbuduj nagłówek
Krok 1 — otwórz Theme Builder
W panelu WordPress wejdź w Divi → Theme Builder.
Zobaczysz listę szablonów. Kliknij „Add New Template” albo edytuj istniejący szablon globalny jeśli już masz.
Theme Builder
W szablonie kliknij „Add Header” — Divi zapyta czy chcesz użyć gotowego layoutu czy zacząć od zera. Wybierz „Build Header From Scratch”.
Otworzy się builder w trybie nagłówka. Wygląda dokładnie jak normalny builder stron — te same moduły, te same ustawienia, te sama logika sekcji, wierszy i kolumn.
Krok 2 — zbuduj strukturę nagłówka
Dodaj nową sekcję. Zmień jej typ na „Regular” jeśli nie jest już ustawiony.
Wewnątrz sekcji dodaj wiersz z dwoma kolumnami — układ 1/4 + 3/4 albo 1/3 + 2/3 w zależności od tego jak duże jest logo. Logo zazwyczaj potrzebuje mniej miejsca niż menu.
W ustawieniach sekcji ustaw kolor tła — możesz użyć zmiennej koloru którą masz w Design Variables, albo wpisać wartość bezpośrednio. Ustaw też padding — zazwyczaj 15–20px góra i dół wystarczy dla typowego nagłówka.
Nowa sekcja
Krok 3 — dodaj logo
W lewej kolumnie dodaj moduł Image.
Wgraj lub wybierz plik logo. W ustawieniach modułu Image:
Ustaw link na adres strony głównej — kliknięcie w logo powinno wracać do home. W polu URL wpisz / albo pełny adres domeny.
Ogranicz szerokość logo żeby nie zajmowało całej kolumny. W zakładce Design → Size ustaw Max Width na wartość odpowiednią dla Twojego logo — zazwyczaj 150–200px dla typowego logotypu.
Ustaw wyrównanie pionowe kolumny na środek żeby logo było wycentrowane względem menu. W ustawieniach wiersza → Design → Column 1 → Vertical Alignment → Center.
Dodanie menu
Krok 4 — dodaj menu
W prawej kolumnie dodaj moduł Menu.
W ustawieniach modułu Menu zakładka Content:
Wybierz menu które stworzyłeś w WordPressie — pojawi się na liście „Menu”.
Logo w module Menu zostaw puste — logo masz już w osobnym module co daje Ci pełną kontrolę nad jego wyglądem.
W zakładce Design ustaw wyrównanie menu na prawo — Alignment → Right. Ustaw kolor linków menu korzystając ze zmiennej koloru tekstu z Design Variables. Ustaw font zgodnie z typografią globalną projektu.
Sprawdź zakładkę Advanced → Dropdown Menu i ustaw kolory dla podmenu jeśli Twoje menu ma zagnieżdżone poziomy.
Krok 5 — ustaw sticky header
Nagłówek który zostaje na górze ekranu podczas scrollowania to standard w większości projektów.
Kliknij na sekcję nagłówka. W zakładce Advanced znajdź opcję „Sticky Position” — ustaw na „Stick to Top”.
Dwie dodatkowe opcje które warto ustawić:
„Sticky Style” — możesz zmienić wygląd nagłówka gdy jest przyklejony. Popularne rozwiązanie to nagłówek który przy scrollowaniu staje się niższy i zmienia kolor tła na półprzezroczysty. Ustaw osobny kolor tła dla trybu sticky jeśli chcesz ten efekt.
„Fade Effect” — płynne pojawienie się nagłówka sticky. Subtelny efekt który wygląda profesjonalnie.
Krok 6 — wersja mobilna
Masz desktop gotowy. Teraz telefon — i to jest krok którego nie można pominąć.
Przełącz builder na widok mobilny przez ikonę telefonu w lewym panelu.
Widok telefon
Kilka rzeczy do sprawdzenia i ustawienia:
Rozmiar logo na telefonie — często za duże w stosunku do ekranu. W ustawieniach modułu Image przełącz na widok mobilny i ustaw mniejszy Max Width — zazwyczaj 120–140px wystarczy.
Menu mobilne — moduł Menu w Divi 5 automatycznie zamienia się w hamburger menu na małych ekranach. Sprawdź jak wygląda ikona hamburgera i czy kolor jest poprawny — czasem wymaga ręcznej korekty w ustawieniach Design → Mobile Menu.
Kolor tła nagłówka na mobilnym — sprawdź czy tło nagłówka wygląda poprawnie na telefonie. Szczególnie jeśli masz ustawiony sticky style.
Układ kolumn — dwukolumnowy układ na telefonie może wyglądać źle jeśli kolumny są za wąskie. W ustawieniach wiersza przełącz na widok mobilny i sprawdź czy nie trzeba zmienić układu na jednokolumnowy.
Krok 7 — zapisz i przypisz szablon
Kliknij Save w prawym górnym rogu buildera nagłówka.
Wróć do Theme Buildera. Upewnij się że szablon jest przypisany do odpowiednich stron — zazwyczaj „All Pages” dla globalnego nagłówka który ma pojawiać się wszędzie.
Zapisz cały Theme Builder.
Sprawdź efekt końcowy
Wejdź na stronę wylogowany z WordPressa — albo w trybie incognito. To ważne bo zalogowany użytkownik widzi pasek administracyjny który przesuwa layout.
Sprawdź desktop — czy logo i menu są poprawnie wyrównane, czy hover na linkach menu działa, czy podmenu otwiera się poprawnie.
Sprawdź tablet i telefon — czy hamburger menu się pojawia, czy po kliknięciu otwiera się lista linków, czy logo ma dobry rozmiar.
Sprawdź scrollowanie — czy sticky header działa, czy nie zasłania treści strony, czy wysokość sticky nagłówka jest odpowiednia.
Kilka typowych problemów
Menu nie pokazuje się — sprawdź czy w panelu WordPress masz zapisane menu i czy jest przypisane do lokalizacji „Primary Menu” albo tej którą wybrałeś w module.
Logo jest za duże na telefonie — pamiętaj żeby ustawić Max Width osobno dla widoku mobilnego w ustawieniach modułu Image.
Podmenu wychodzi poza ekran — w ustawieniach Dropdown Menu zmień wyrównanie podmenu dla pozycji menu które są po prawej stronie.
Sticky header zasłania kotwice — jeśli masz linki do sekcji na stronie przez ID, sticky header może zasłaniać górną część sekcji po przewinięciu. Rozwiązanie to CSS scroll-margin-top na sekcjach albo odpowiednie ustawienie paddingu.
Hamburger nie zmienia się w X po kliknięciu — to domyślne zachowanie modułu Menu. Jeśli chcesz animację zmiany ikony, wymaga to Interactions albo krótkiego snippetu CSS.