Przezroczysty nagłówek – w których motywach najłatwiej to zrobić

Przezroczysty nagłówek w WordPressie

Przezroczysty nagłówek (ang. transparent header), to taki efekt, że spod logo i menu prześwituje duży obrazek i ten obrazek jest jednocześnie fragmentem pierwszej sekcji na stronie. Czasami zamiast obrazka jest jednolite tło, filmik albo nawet slider (patrz player.pl).

Strony z przezroczystym nagłówkiem wyglądają nowocześnie i profesjonalnie.

W tym wpisie znajdziesz przykłady takich stron oraz listę najpopularniejszych darmowych motywów WordPressa, które pozwalają to dobrze wykonać.

Dowiesz się też, jak w WordPressie ustawić stronę z przezroczystym nagłówkiem.

Przezroczysty nagłówek – przykłady stron

Zacznijmy od przykładów.

Przykład 1 – przezroczysty nagłówek na jednolitym tle

Przezroczysty nagłówek na jednokolorowym tle
Przezroczysty nagłówek na jednokolorowym tle – strona https://kadence-theme.com/starter-templates/

Przezroczysty nagłówek na jednokolorowym tle zobaczymy na niektórych podstronach witryny motywu Kadence. W tym przykładzie logo i większość przycisków w nagłówku ma biały kolor, co bardzo dobrze się sprawdza na jednolitym ciemnym tle.

Przykład 2 – przezroczysty nagłówek ze zdjęciem w tle

Przezroczysty nagłówek ze zdjęciem w tle
Przezroczysty nagłówek ze zdjęciem w tle – strona: https://websitedemos.net/windows-and-doors-08/

Kolejny przykład pochodzi z kolekcji gotowych stron dla motywu Astra. Tym razem na stronie demo zostało wykorzystane duże zdjęcie w tle.

Zwróćmy uwagę, że w takich przypadkach obrazek dodatkowo pokrywa ciemna warstwa (tzw. opacity), która powoduje że białe napisy są bardziej czytelne.

Przykład 3 – przezroczysty nagłówek z obrazkiem w tle, który zamienia się w sticky header

Przezroczysty nagłówek ze zdjęciem w tle
Przezroczysty nagłówek ze zdjęciem w tle – strona https://demo.creativethemes.com/blocksy/business/
Przezroczysty nagłówek zamienia się w sticky header podczas przewijania strony w dół
Przezroczysty nagłówek zamienia się w sticky header podczas przewijania strony w dół

Przezroczysty nagłówek można nawet połączyć z tzw. efektem „Sticky header”.

W tym przykładzie widzimy jak przezroczysty nagłówek zamienia się w tzw. sticky header. A zatem podczas przewijania w strony w dół nasz nagłówek „przyklei się” do górnej części i dodatkowo zmieni tło na białe. Przykład pochodzi ze strony demo motywu Blocksy.

Przykład 4 – przezroczysty nagłówek na tle slidera

Przezroczysty nagłówek na tle slidera
Przezroczysty nagłówek na tle slidera – strona https://gutenslider.org/

Pierwszą sekcją na naszej stronie może być nawet slider ze zmieniającymi się obrazkami. Taki przykład połączenia przezroczystego nagłówka ze slajderem pod spodem możemy zobaczyć na stronie twórców bloku Gutenslider.

Najpopularniejsze darmowe motywy WordPressa, które dobrze wspierają przezroczysty nagłówek

Abyś mógł ustawić przezroczysty nagłówek, Twój motyw musi to umożliwiać.

Oto lista najpopularniejszych motywów WordPressa, które pozwalają ustawić przezroczysty nagłówek i mają ten temat dobrze przemyślany:

Motywów, które pozwalają ustawić przezroczysty nagłówek jest w WordPressie więcej, ale tutaj skupiam się na tych trzech, bo dokładnie te trzy motywy wzięły sobie ten temat na poważnie do serca.

Jak się niebawem przekonamy, ustawienie przezroczystego nagłówka, to nieco szerszy temat niż można by przypuszczać.

Przezroczysty nagłówek – czy wystarczy kliknąć i włączyć?

Wydawałoby się – prosta sprawa:

  1. Otwieramy stronę do edycji.
  2. Włączamy opcję „Przezroczysty nagłówek” (ang. transparent header) i gotowe! Treść strony elegancko podjeżdża do góry i mamy to!

Przykładowo, w motywie Astra włączenie transparentnego nagłówka dla pojedynczej strony wygląda tak, że trzeba otworzyć stronę do edycji i w pasku bocznym w sekcji Customizer Settings -> Transparent Header kliknąć Enable.

Włączenie nagłówka na stronie wykorzystującej motyw Astra
Włączenie nagłówka na stronie wykorzystującej motyw Astra

Więc rzeczywiście to kilka kliknięć…

Niby tak…

Ale zwróćmy uwagę, że ta strona jest już przygotowana pod współpracę z przezroczystym nagłówkiem.

A zatem spełnia następujące warunki:

  • Strona nie posiada żadnego paska bocznego.
  • Strona ma włączony układ (ang. layout) pozwalający na rozciąganie jej elementów na pełną szerokość ekranu (full width/stretch).
  • Strona ma wyłączony tytuł.
  • Pierwszym elementem na tej stronie jest blok, który ma ustawione tło.
  • Blok ten rozpościera się na pełną szerokość strony.

Niestety, nie każdy motyw WordPress umożliwia spełnienie tych wszystkich warunków.

Poza tym, w powyższym przykładzie ciemny kolor elementów menu i logo pozostają widoczne na zielonym tle i nie trzeba z nimi nic więcej robić.

A teraz przykład nieco bardziej złożony

Często samo włączenie przezroczystego nagłówka nie wystarczy.

Dodatkowo będziemy musieli wszystkie elementy nagłówka (logo, kolory menu, …) dostosować do jego przezroczystej wersji.

A to dlatego, że często przezroczysty nagłówek potrzebujemy tylko na niektórych podstronach, a na pozostałych już nie.

Różna kolorystyka elementów nagłówka domyślnego i przezroczystego
Różna kolorystyka elementów nagłówka domyślnego i przezroczystego (logo, kolory w menu)

W przykładzie wyżej przełączamy się na podstronę, która przezroczystego nagłówka nie ma. Ta strona nie może mieć tych samy kolorów logo i menu, co strona z przezroczystym nagłówkiem z prostego powodu – na białym tle nie będzie widać białych napisów. Albo na odwrót: gdybyśmy na stronie z przezroczystym nagłówkiem zostawili domyślne ciemne kolory, byłyby one ledwo widoczne.

Dlatego tak ważne jest, aby nasz motyw pozwolił nam dostosować wszystkie elementy nagłówka pod jego przezroczystą wersję.

Motywy Astra, Kadence i Blocksy to umożliwiają.

Jak motywy Astra, Kadence i Blocksy wpierają współpracę z przezroczystym nagłówkiem

W opcjach personalizacji motywów Astra, Kadence i Blocksy (Wygląd -> Dostosuj) znajdziemy specjalne sekcje, które pozwalają wybrać nam alternatywne logo oraz kolory dla elementów przezroczystej wersji nagłówka.

Jak ustawiać alternatywne kolory dla przezroczystego nagłówka w motywach Astra i Kadence
Jak ustawiać alternatywne kolory dla przezroczystego nagłówka w motywach Astra i Kadence

W motywie Blocksy kontrola kolorów dla przezroczystego nagłówka jest nieco bardziej rozproszona. Część rzeczy ustawiamy w sekcji Header -> Global Header, część w Header -> Menu

Zarządzanie przezroczystym nagłówkiem w motywie Blocksy
Zarządzanie przezroczystym nagłówkiem w motywie Blocksy

W tabelce niżej podsumowuję najważniejsze cechy motywu w temacie dobrego wsparcia przezroczystych nagłówków.


AstraKadenceBlocksy
Przezroczysty nagłówek na wybranych stronachtaktaktak
Inne logo dla przezroczystego nagłówkataktaktak
Inne kolory w menu dla przezroczystego nagłówkataktaktak
Włączenie/wyłączenie przezroczystego nagłówka na urządzeniach mobilnychtaktaktak
Kontrola wyglądu innych elementów p. nagłówka (np. przycisk, ikony społecznościowe, ikonka wyszukiwania)taktaktak
Tabela: wsparcie dla przezroczystego nagłówkach w popularnych motywach WordPressa

Bloki dobrze współpracujące z przezroczystym nagłówkiem

Bloki edytora WordPressa

  • Blok Okładka z obrazkiem w tle
  • Blok Okładka z jednokolorowym tłem
  • Blok Okładka z gradientem w tle
  • Blok Okładka z filmikiem w tle
  • Blok Grupa z tłem

Pamiętajmy, że do bloku Okładka można można wstawiać inne bloki (np. blok Kolumny i tworzyć w ten sposób dowolnie skomplikowane treści)

Blok Okładka dobrze dobrze sprawdzi się na stronach z przezroczystym nagłówkiem
Blok Okładka dobrze dobrze sprawdzi się na stronach z przezroczystym nagłówkiem

Przykładowe bloki z wtyczek

Jeśli korzystasz z wtyczek oferujących kolekcje bloków, to z przezroczystym nagłówkiem dobrze sprawdzą się bloki stanowiące alternatywę dla bloku Kolumny, oto kilka przykładów:

Pamiętajmy, ze dla wzmocnienia efektu dobrze jest rozciągnąć blok na pełną szerokość ekranu:

Blok Row z wtyczki Qubely jako przykład innego bloku, który dobrze współpracuje z przezroczystym nagłówkiem
Blok Row z wtyczki Qubely jako przykład innego bloku, który dobrze współpracuje z przezroczystym nagłówkiem

Jak ustawić stronę, żeby efekt przezroczystego nagłówka był skuteczny

Przezroczysty nagłówek najlepiej prezentuje się na stronach typu fullwidth, z wyłączonym domyślnym tytułem strony.

Poniższe wskazówki pomogą Ci ustawić daną stronę, tak aby dobrze współgrała z przezroczystym nagłówkiem.

Ustawienia pojedynczej strony w motywach Astra i Kadence, aby strona dobrze współgrała z przezroczystym nagłówkiem
Ustawienia pojedynczej strony w motywach Astra i Kadence, aby strona dobrze współgrała z przezroczystym nagłówkiem
Ustawienia w motywie Blocksy, aby strona dobrze współpracowała z przezroczystym nagłówkiem.
Ustawienia w motywie Blocksy, aby strona dobrze współpracowała z przezroczystym nagłówkiem.

W motywie Blocksy jest nieco inaczej.

Wprawdzie układ strony i wyłączanie tytułu ustawiamy bezpośrednio w edycji konkretnej strony, ale o tym na której stronie ma się pojawić przezroczysty nagłówek decydujemy w innym miejscu – w ustawieniach motywu (Wygląd -> Dostosuj – Header – > Global Header) dodając odpowiedni warunek (ang. condition)

Jak to wszystko połączyć

No trochę się tych zasad nazbierało… A zatem na koniec małe podsumowanie.

Aby w WordPressie ustawić stronę z przezroczystym nagłówkiem:

  1. Wybierz motyw, który dobrze wspiera przezroczyste nagłówki. Astra, Kadence i Blocksy są idealnymi kandydatami.
  2. Utwórz w WordPressie nową stronę.
  3. W ustawieniach strony (prawy pasek boczny):
    • wybierz układ typu fullwidth
    • wyłącz tytuł strony
    • włącz przezroczysty nagłówek
  4. Wstaw blok z tłem lub obrazkiem tła, rozciągnij go na pełną szerokość.
  5. Wewnątrz bloku dodaj treści według uznania.
  6. Jeśli dla strony z przezroczystym nagłówkiem potrzebujesz innego logo, innych kolorów linków w menu itp. niż dla pozostałych stron, przejdź do ustawień motywu i skonfiguruj alternatywną wersję tych elementów dla przezroczystego nagłówka.

Szczegóły będą zależeć od motywu.

Zapraszam na mój kanał na YouTubie, gdzie już wkrótce planuję wrzucić filmik pokazujący cały ten proces krok po kroku.

A co Ty sądzisz o przezroczystych nagłówkach?

Czy Tobie też podobają się strony z przezroczystym nagłówkiem?

Korzystasz z opcji transparent header na swoich stronach? Jak sobie z tym radzisz? Podziel się swoimi doświadczeniami w komentarzach.

10 myśli w temacie “Przezroczysty nagłówek – w których motywach najłatwiej to zrobić”

  1. Często zaglądam na Twojego bloga odkąd zaczęłam działać na WordPressie. Zawsze znajduję tu rozwiązania moich problemów czy też odpowiedzi na pytania. Zawsze wszystko jest w przemyślany i jasny sposób opisane. Temat przezroczystego nagłówka też jest dla mnie nowy, ale z pewnością wykorzystam go przy tworzeniu stron w WordPressie 🙂

    1. Ania, dziękuję! Zawsze mnie krzepią takie komentarze i dodają motywacji, żeby mi się chciało pisać kolejne artykuły, zwłaszcza kiedy mam motywacyjne dołki. Odnośnie przezroczystego nagłówka, to niedawno wrzuciłam filmik jak to zrobić krok po kroku: https://youtu.be/mDAdpTW8E14

    1. Anna, tak, motyw Kadence to jeden z najlepszych motywów WordPressa. Na pewno zyska jeszcze bardziej na popularności teraz w dobie bloków. Jego autorzy tworzą też gotowe strony startowe, które można zainstalować jednym kliknięciem.

    1. Racja, ale na szczęście motywy takie jakie jak Kadence, Blocky i Astra to tak zwane motywy startery, które nadadzą się do tysiąca zastosowań i mnóstwo ludzi, którzy tworzy strony internetowe zawodowo właśnie je traktuje jako bazę.

  2. Dzień dobry! Super wszystko opisane, szkoda, że dopiero teraz tu trafiłam. Na pewno będę zaglądać częściej:) Czy mogę gdzieś sprawdzić czy mój motyw ma taką funkcję? Korzystam z Ashe.

    1. Julia, ciekawe pytanie zadałaś, jak sprawdzić, czy Twój motyw pozwala ustawić przezroczysty nagłówek!

      Myślę, że można to szybko sprawdzić na stronach demo motywu. Ta funkcja jest na tyle ciekawa, że autorzy lubią się nią chwalić. Jeśli żadna ze stron nie ma takiego efektu, to raczej małe szanse, że motyw wpiera transparent header. Można też sprawdzić w sekcji Dostosuj i szukać elementów z tą nazwą. Z tego co widzę, Ashe nie ma takiej możliwości. Ale pozwala ustawić szeroko obrazek nagłówka i wyłączyć nad nim tzw. Top Bar i w ten sposób też uzyskać ciekawy efekt, ale menu będzie pod obrazkiem.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *