Nawigacja jest istotnym aspektem dobrej witryny WordPress o świetnym projekcie. W związku z tym warto poświęcić trochę czasu na zastanowienie się, w jaki sposób odwiedzający Twoją witrynę wchodzą w interakcję ze stronami za pośrednictwem nawigacji. Jednym ze sposobów, w jaki możesz to zrobić, jest użycie stałego nagłówka.
To miejsce, w którym sekcja nagłówka Twojej witryny pozostaje na górze ekranu, gdy użytkownik przewija. Zapewnia to niezliczone korzyści, ale jedną z głównych zalet jest to, że Twoje elementy nawigacyjne pozostają w polu widzenia użytkownika, niezależnie od tego, gdzie znajdują się na stronie. Już z tego powodu stały nagłówek jest mile widzianym elementem interfejsu użytkownika (UI).
W tym samouczku pokażemy Ci, jak utworzyć sticky header w WordPressie. Obejmuje on wiele aspektów, takich jak przykłady w sieci, wtyczki WordPress, które mogą Ci pomóc, oraz przewodnik, jak opracować własny sticky header. Najpierw jednak omówmy bardziej szczegółowo, czym jest sticky header.
Czym jest Sticky Header
Część nagłówka Twojej witryny jest czymś w rodzaju biurka informacyjnego Twojej witryny. Będzie to coś, co większość użytkowników zauważy jako pierwsze i zawsze będzie to miejsce, w którym będą sprawdzać, aby znaleźć kilka kluczowych informacji i wykonać pewne czynności:
- Na przykład, Twoje logo lub nazwa witryny będzie tutaj, co służy jako punkt uziemienia dla Twoich użytkowników. Będą oni mogli powrócić do strony głównej, klikając logo w większości przypadków.
- Jeśli na swojej witrynie prowadzisz konta użytkowników, w nagłówku zazwyczaj znajdziesz link umożliwiający zalogowanie się do tych kont i stron profilowych.
- Może tu być dostępna funkcja wyszukiwania, zwłaszcza jeśli masz dużą witrynę z dużą ilością treści z różnych obszarów.
- Oczywiście, nawigacja Twojej witryny jest również integralną częścią nagłówka.
Ogólnie rzecz biorąc, nagłówek jest punktem styku dla użytkowników. Zauważysz, że często jest to „pasek” dla Wzory czytania w kształcie litery Fdzięki czemu przyciąga uwagę użytkowników na poziomie intuicyjnym.
Prawdopodobnie już wiesz, czym jest sticky header, nawet w intuicyjnym sensie. To miejsce, w którym sekcja nagłówka Twojej witryny „przykleja się” do górnej części ekranu podczas przewijania. W przeciwieństwie do statycznego nagłówka, który pozostaje na swoim miejscu i znika podczas przewijania, sticky header jest zawsze widocznym elementem.
Podczas gdy typowe podejście do sticky header polega na przyklejeniu jego statycznej wersji do górnej części ekranu, istnieje kilka różnych sposobów, aby uczynić go bardziej użytecznym, wydajnym na ekranie i dynamicznym. Następnie przyjrzymy się kilku przykładom z prawdziwego świata.
Przykłady nagłówków lepkich w sieci
Znajdziesz przyklejone nagłówki w całej sieci i dobrym pomysłem jest sprawdzenie kilku z nich, aby zobaczyć zakres tego, co możesz osiągnąć. Jednym z najbardziej podstawowych przykładów jest MłotowatyTa strona używa „menu wysuwanego” i stałego nagłówka, a także jest prosta: jest zobowiązana do przyklejenia się do górnej części strony w swoim statycznym układzie:
Inną prostą implementacją jest Krewny. Używa typowego przyklejonego nagłówka, ale tym razem z kilkoma fajnymi elementami projektowymi.
Zauważysz, że kontrast zmienia się w zależności od tego, po której części witryny się przewijasz. Dostępne są także ciekawe efekty przejść:
Nie możemy zakończyć tej sekcji bez wspomnienia o Kinsta sticky header. To również upraszcza rzeczy w odniesieniu do elementów nagłówka, ale zawiera schludny akcent użyteczności, który oferuje wartość odwiedzającemu:
Tym razem zobaczysz, że nagłówek znika, gdy przewijasz stronę w dół. Jednak pojawi się ponownie, gdy przewijasz z powrotem w górę – możesz nazwać go „częściowo trwałym nagłówkiem”.
Założenie jest takie, że przewijanie w dół oznacza, że inwestujesz swój czas w samą stronę, więc prawdopodobnie nie będziesz potrzebować nawigacji, stron logowania ani przechodzenia gdzie indziej. Jednak w momencie przewijania w górę bardziej prawdopodobne jest, że będziesz chciał przejść do innej strony w witrynie. Tutaj pojawi się stały nagłówek, aby uratować sytuację.
To właśnie te drobne elementy doświadczenia użytkownika (UX) sprawiają, że odwiedzający będą chcieli wracać do witryny. W przypadku własnych projektów sticky header należy zastanowić się, co można zrobić, aby stworzyć UX i UI, które skupiają się na potrzebach odwiedzających.
Dlaczego warto używać stałego nagłówka na swojej stronie
Wiele witryn używa stałych nagłówków i istnieje wiele dobrych powodów, dla których tak się dzieje. Mogą być kluczowymi częściami ogólnego doświadczenia witryny i mieć duży wpływ na UX i UI.
Biorąc pod uwagę, że elementy, które umieścisz w nagłówku, to te, do których użytkownik zawsze będzie chciał mieć dostęp, ma sens, aby zawsze były wyświetlane. Dotyczy to zwłaszcza urządzeń i formatów o mniejszych ekranach.
Choć może się wydawać, że posiadanie nagłówka „zawsze włączonego” jest sprzeczne z intuicją, gdy przestrzeń w polu widzenia jest ograniczona, jest to jedynie niewielka ofiara. Prawdziwą korzyścią jest danie użytkownikowi mobilnemu mniejszej liczby powodów do przewijania – konieczności na mniejszych urządzeniach. Jeśli możesz zapewnić nawigację w witrynie bez konieczności przewijania, użytkownik może poruszać się po witrynie z większą łatwością.
Zalety i wady nagłówków lepkich
Omówiliśmy kilka zalet stosowania stałych nagłówków, więc podsumujmy je pokrótce:
- Możesz udostępnić użytkownikowi nawigację, do której będzie on miał stały dostęp, co pomoże zachować naturalny sposób czytania Twojej witryny.
- Możesz dostosować nagłówek do różnych potrzeb, takich jak kontrasty, schematy kolorów, a nawet intencje użytkownika.
- Istnieje możliwość zaoferowania użytkownikowi czegoś wartościowego zarówno na komputerach stacjonarnych, jak i na mniejszych ekranach.
Jednak stały nagłówek nie jest panaceum na poprawę UX i jego stosowanie wiąże się z kilkoma wadami:
- Omówimy to pokrótce, ale niezależnie od rozmiaru ekranu, konieczne będzie przeznaczyć miejsce na nagłówek.
- Stały nagłówek naturalnie odciągnie uwagę od reszty treści, ponieważ jego własne elementy odciągną uwagę od treści strony.
- Stworzenie dobrego, stałego nagłówka wymaga więcej pracy, ponieważ trzeba go zaimplementować, upewnić się, że działa w różnych przeglądarkach, a także sprawdzić, czy nie ma błędów na mniejszych ekranach.
Jeśli jednak pomyślisz o swoich wyborach projektowych, potrzebach użytkowników i celach witryny, możesz złagodzić lub usunąć wszystkie te wady, zachowując jednocześnie dobre strony. Jednym ze sposobów, w jaki możesz to zrobić, są wtyczki WordPress.
3 wtyczki, które pomogą Ci tworzyć lepkie nagłówki
W kolejnych sekcjach zaprezentujemy niektóre z wiodących wtyczek sticky header dla WordPressa. Później omówimy, czy ten typ rozwiązania jest dla Ciebie odpowiedni. Niezależnie od tego, wtyczka może pomóc Ci wdrożyć funkcjonalność bez potrzeby kodu, co jest cenne, jeśli Twój motyw jej nie zawiera.
Co więcej, możesz wykorzystać doświadczenie eksperta w projektowaniu i rozwoju za pośrednictwem wtyczki. Deweloperzy podejmą niektóre z ważniejszych wyborów technicznych za Ciebie i opakują je w intuicyjny i łatwy w użyciu interfejs użytkownika.
1. Menu stałe i nagłówek stały
Fabryka Webfactory Przyklejone menu i przyklejony nagłówek wtyczka jest dobrym pierwszym wyborem ze względu na bogactwo funkcji, przydatną elastyczność i przystępną cenę.
Wadą jest to, że możesz sprawić, aby dowolny element na Twojej stronie przykleił się do ekranu. Może to być pomocne na wiele sposobów, ale oznacza to, że wdrożenie przyklejonego nagłówka jest bułką z masłem.
Wtyczka oferuje również szereg zaawansowanych opcji ułatwiających wdrożenie stałego nagłówka:
- Możesz ustawić pożądany poziom pozycjonowania „góry”. Oznacza to, że możesz dodać przestrzeń do obszaru nad nagłówkiem, aby dopasować ją do swoich celów projektowych.
- Istnieją również inne opcje pozycjonowania, takie jak użycie właściwość CSS z-index aby zaprojektować całą witrynę „od przodu do tyłu”.
- Możesz włączyć stały nagłówek tylko na wybranych stronach, co może okazać się przydatne, jeśli masz strony docelowe lub inną nieodpowiednią treść.
Sticky Menu & Sticky Header zawiera również tryb debugowania, który pomoże Ci naprawić wszelkie „nieprzylepne” elementy. Tryb dynamiczny pomoże również rozwiązać problemy z responsywnymi projektami.
Najlepszą wiadomością jest to, że Sticky Menu i Sticky Header można pobrać i używać bezpłatnie. Co więcej, istnieje wersja premium co pozbawia Cię większej wiedzy technicznej, której potrzebujesz.
W przypadku bezpłatnej wersji wtyczki musisz znać selektor elementu, aby określić go w opcjach. Jednak wersja premium (49–199 USD rocznie) oferuje wizualny selektor elementów, aby to ominąć.
2. Opcje dla Twenty Twenty-One
Mimo że nie polecamy domyślnego motywu WordPress dla większości witryn nastawionych na klienta, oferują one wystarczająco dużo funkcji dla blogów i podobnych typów witryn.
Twenty Twenty-One jest naszym zdaniem jednym z wyróżniających się domyślnych motywów, ale brakuje mu funkcjonalności sticky header. Jeśli chcesz dodać tę funkcję, Opcje dla Twenty Twenty-One wtyczka może spełnić Twoje potrzeby.
Ta edycja wtyczki jest jedną z wielu. Każdy ostatni domyślny motyw ma swoją wersję, ale nie ma jeszcze żadnej dla Twenty Twenty-Two. Niezależnie od tego, podstawowa funkcjonalność wtyczki zapewnia wiele dodatków:
- Jest Pełna edycja witryny (FSE) narzędzie gotowe do całkowitego wdrożenia.
- Możesz zmienić rozmiar czcionki w treści, usunąć podkreślenia hiperłączy i dokonać innych prostych zmian.
- Można pracować z maksymalnymi szerokościami kontenerów i elementów bez konieczności pisania kodu.
Istnieje wiele innych opcji dla nawigacji, treści, stopki i nagłówka. W przypadku tego ostatniego możesz ukryć go przed widokiem, ustawić na pełną szerokość, dodać obraz tła i kolor oraz wiele innych zmian.
Podczas gdy podstawowa wtyczka jest darmowapotrzebujesz ulepszenie premium (25–50 USD) aby uzyskać dostęp do opcji sticky header. Umożliwia to dostosowanie ustawień zarówno dla nagłówków mobilnych, jak i desktopowych z poziomu WordPress Customizer:
Biorąc pod uwagę nazwę, nie spodziewaj się, że ta wtyczka będzie działać z innym motywem niż Twenty Twenty-One (lub innym wybranym przez Ciebie). Jeśli jednak używasz tego domyślnego motywu i nie chcesz pisać kodu, idealnie sprawdzi się ona przy dodawaniu stałego nagłówka do Twojej witryny.
3. Pływający pasek powiadomień, przyklejone menu podczas przewijania i przyklejony nagłówek dla dowolnego motywu – myStickymenu
Oto wtyczka, która wykłada karty na stół. Premio wtyczka myStickymenu oferuje niemal wszystko, co chcesz umieścić w swoim stałym nagłówku, i zawiera ogromną ilość funkcjonalności.
Ma zadziwiająco dużo pozytywnych recenzji na Katalog wtyczek WordPress – 799 pięciogwiazdkowych recenzji przy średniej ocenie 4,9. Częściowo jest to zasługą kompleksowego zestawu funkcji, który masz do dyspozycji:
- Oferuje elastyczność użytkowania. Na przykład możesz utworzyć pasek powitalny, a także menu przyklejone i nagłówek.
- Wtyczka dostosowuje się do tego, jak responsywna jest Twoja witryna. Oznacza to, że nie musisz implementować żadnych dodatkowych funkcji za pomocą kodu.
- W rzeczywistości, aby w pełni korzystać z tej wtyczki, nie musisz znać kodu.
- Wtyczka myStickymenu jest kompatybilna z wieloma wiodącymi wtyczkami do tworzenia stron, takimi jak Elementor, Beaver Builder, natywny edytor bloków, Divi Builder i wiele innych.
Masz również szereg opcji dostosowywania, aby Twój stały nagłówek działał tak, jak chcesz. Na przykład możesz wybrać, aby utworzyć częściowo trwały nagłówek, zmienić proste aspekty, takie jak kolory tła, wybory typografii i inne.
Ponadto, ponieważ istnieją różne sposoby prezentacji stałego nagłówka (np. w menu lub na pasku powitalnym), możesz wybrać sposób jego wyświetlania i miejsce na swojej stronie.
Mimo że darmowa wersja myStickymenu może spełnić Twoje potrzeby, istnieje również wersja premium (w cenie 25–99 USD rocznie). Oferuje ona więcej sposobów na wyłączenie stałego nagłówka w określonych warunkach, liczniki czasu, możliwość dodania wielu pasków powitalnych i kilka dodatkowych opcji dostosowywania.
Jak utworzyć stały nagłówek w WordPressie
W dalszej części tego samouczka pokażemy Ci, jak utworzyć przyklejony nagłówek w WordPressie. Istnieje kilka podejść, które możesz tutaj zastosować, a my omówimy oba. Jednak nasz pierwszy krok pomoże Ci podjąć tę decyzję.
Następnie, korzystając z preferowanej metody, stworzysz własny stały nagłówek, a następnie zastosujesz niektóre z naszych wskazówek, aby w przyszłości uczynić go bardziej wydajnym i użytecznym.
1. Zdecyduj, jak utworzysz swój stały nagłówek
Jednym z powodów, dla których WordPress jest tak elastyczny dla wszystkich użytkowników, jest jego ekosystem wtyczek i rozszerzalność open-source. W związku z tym możesz wybrać gotowe rozwiązanie lub „zrobić własne”.
Twoim pierwszym zadaniem jest podjęcie decyzji, czy chcesz użyć wtyczki, czy zagłębić się w kod, aby zaimplementować swój sticky header. Rozłóżmy te dwa rozwiązania:
- Wtyczki. Będzie to metoda zatwierdzona przez WordPress, zwłaszcza jeśli nie masz pod ręką wiedzy technicznej. Zapewni elastyczność, ale jesteś zdany na łaskę tego, co programista uważa za ważne i jego umiejętności kodowania.
- Kodowanie. Jeśli masz jasną wizję, możesz chcieć zakodować stały nagłówek dla swojej witryny. Oczywiście, będziesz potrzebować technicznej wiedzy, aby to zrobić (głównie CSS), ale wyniki będą dokładnie takie, jakich chcesz. Będziesz jednak mieć więcej potencjalnych prac konserwacyjnych do wykonania, a jego sukces będzie zależał od Twoich umiejętności kodowania.
Powiedzielibyśmy, że dla większości użytkowników WordPressa wtyczka będzie idealnym rozwiązaniem do tworzenia stałego nagłówka. Będzie dobrze współpracować z platformą i łatwiej będzie rozwiązywać problemy, jeśli je napotkasz. Jednak w kolejnych krokach omówimy rozwiązanie kodowania, a także opcję wtyczki.
2. Wybierz, czy chcesz zmodyfikować swój obecny motyw, czy wybrać dedykowany
Następnym aspektem, który powinieneś rozważyć, jest to, czy zmodyfikujesz swój obecny motyw, czy wybierzesz taki, który ma już funkcjonalność sticky header w swoim zestawie funkcji. Będzie to ważne, jeśli twój motyw nie ma funkcjonalności do obsługi sticky header.
Wiele motywów i wtyczek do tworzenia stron będzie zawierać opcję sticky header, ze względu na korzyści i aby zapewnić Ci elastyczność projektowania. Odkryjesz, że niektóre większe, uniwersalne motywy i wtyczki oferują to standardowo, takie jak Elementor, Astra, Divi, Avada i niezliczone inne.
Aby podjąć tę decyzję, musisz wziąć pod uwagę kilka kwestii dotyczących bieżącego motywu i witryny:
- Czy Twoja witryna wygląda już tak, jak chcesz, czy może potrzebuje odświeżenia?
- Czy Twój obecny motyw jest łatwy do dostosowania pod maską? Informacje na ten temat można znaleźć w dokumentacji dla programistów.
- Czy wolisz złożoną implementację preferowanego stałego nagłówka czy prostszą?
Na podstawie odpowiedzi, które tutaj podasz, wybierzesz jedną lub drugą opcję. Jeśli potrzebujesz nowego motywu, możesz wybrać taki, który oferuje implementację sticky header. Jeśli jednak chcesz pozostać przy obecnym motywie, a nie ma on jeszcze funkcji sticky header, musisz zakasać rękawy i wykonać jeden z poniższych podkroków.
2a. Użyj wtyczki o określonym motywie
Jeśli nie masz doświadczenia w programowaniu, zalecamy wybranie wtyczki, aby dodać funkcjonalność sticky header do swojej witryny. Jest zbyt wiele zmiennych, które musisz wziąć pod uwagę, zbudować i utrzymać. W przeciwieństwie do tego wtyczka będzie już miała bazę kodu, która daje ukłon tym elementom, więc będzie oferować niemal idealną opcję w większości przypadków.
W tej części samouczka użyjemy wtyczki myStickymenu, ponieważ oferuje ona wszechstronny i bogaty zestaw funkcji dla większości przypadków użycia. Jednak ogólne użycie będzie takie samo dla większości wtyczek, których będziesz używać.
Po zainstalowaniu i aktywowaniu wtyczki musisz przejść do opcji motywu. W przypadku niektórych wtyczek będzie to w programie WordPress Customizer; w przypadku innych będzie to dedykowany panel administracyjny. Tutaj użyjesz niestandardowego panelu administracyjnego w myStickymenu > Panel sterowania w WordPressie:
Jednak domyślny ekran pokazuje ustawienia paska powitalnego, którego w tym samouczku nie chcemy. W związku z tym kliknij przycisk przełączania, aby wyłączyć pasek, i kliknij, aby przejść do Ustawienia menu stałego ekran:
Choć opcji jest tu wiele, potrzebujesz tylko Klasa lepka panel. Po przełączeniu stałego nagłówka na „Wł.” wprowadź odpowiedni znacznik HTML dla swojego nagłówka w odpowiednim polu, który pokrywa się z Inna klasa lub identyfikator menu rozwijane:
Po zapisaniu zmian zostaną one zastosowane w witrynie. Stamtąd możesz przejrzeć niektóre funkcje stylizacyjne. Na przykład możesz ustawić efekt przejścia zanikania lub slajdu, ustawić indeks zpracuj z kryciem, kolorami i czasami przejść – a także z całą masą innych opcji.
2b. Napisz kod, aby utworzyć swój stały nagłówek
Niemal samo przez się rozumie się, że ta sekcja jest przeznaczona dla osób z doświadczeniem w programowaniu. Później zobaczysz, że sam kod jest tak prosty, że trudno w to uwierzyć. Jednak biorąc pod uwagę dodatkową pracę, konserwację i ogólne utrzymanie, aby utworzyć niestandardowy stały nagłówek, będziesz musiał wykorzystać również inne aspekty swojego doświadczenia.
Zanim jednak zaczniesz, będziesz potrzebować następujących rzeczy:
Warto powtórzyć, że nie chcesz pracować nad plikami swojej aktywnej witryny. Zamiast tego pracuj w środowisku przejściowym lub lokalnej konfiguracji, a następnie prześlij pliki z powrotem na swój aktywny serwer po przetestowaniu.
Będziesz także chciał użyć motywu potomnego, ponieważ wprowadzasz niestandardowe zmiany w motywie nadrzędnym. Pomaga to zorganizować kod i upewnić się, że wszelkie zmiany (dosłownie) zostaną zachowane, jeśli motyw otrzyma aktualizację.
Implementacja stałego nagłówka za pomocą kodu: Znajdowanie prawidłowych tagów nagłówka
Mając to wszystko na uwadze, możesz zacząć. Pierwszym zadaniem jest odkrycie właściwych tagów HTML dla nawigacji. Wynik tutaj będzie zależał od tego, jakiego motywu używasz, chociaż chodnikowiec tag jest bezpiecznym zakładem w większości przypadków. Najlepszym sposobem, aby się dowiedzieć, jest użycie narzędzi programistycznych przeglądarki i wybranie nagłówka:
Prawdopodobnie okaże się, że nie jest to tak proste jak przypisanie jednego tagu, dlatego sugerujemy zapoznanie się z dokumentacją motywu (lub bezpośrednią rozmowę z programistą), aby dowiedzieć się, jakie tagi będą Ci potrzebne, jeśli będziesz mieć problemy.
Implementacja stałego nagłówka za pomocą kodu: praca z arkuszami stylów
Następnie należy utworzyć lub otworzyć styl.css plik w katalogu dla motywu potomnego. Spowoduje to dodanie Twojego CSS do CSS instalacji rdzenia, a tam, gdzie powtarzają się tagi, nadpisze go.
W tym pliku dodaj typowe metadane potrzebne do zarejestrowania motywu potomnego:
Następnie musisz dodać kod, aby włączyć swój sticky header. Będzie to wymagało pewnej wiedzy na temat dziedziczenia CSS i w zależności od używanego motywu może to być irytujące doświadczenie.
Na przykład motyw Twenty Twenty-Two używa dwóch tagów nagłówka i znalezienie odpowiedniej mieszanki CSS, aby kod działał na właściwym elemencie, może być trudne. Dzieje się tak nawet w przypadku okna dialogowego klasy szablonu w Edytorze bloków (jeśli używasz funkcjonalności FSE):
Niezależnie od tego, kod, którego potrzebujesz, będzie taki sam:
Akhil Arjun oferuje dwutorowe rozwiązanie tego problemu:
header {
position: sticky; top: 0;
}
Możesz jednak rozważyć również użycie pozycja: stała właściwość, która wykorzystuje kilka dodatkowych linii kodu:
header {
position: fixed;
z-index: 99;
right: 0;
left: 0;
}
To wykorzystuje indeks z aby umieścić nagłówek na początku stosu, a następnie stały atrybut, aby pozostał na górze ekranu.
Zauważ, że może być konieczne dodanie nowej klasy tutaj, aby zastosować sticky header. Tak czy inaczej, powinno to zaimplementować szkielet sticky header. Gdy już to opanujesz, będziesz chciał dalej pracować nad projektem, aby działał z resztą Twojej witryny.
Wskazówki, jak zwiększyć skuteczność lepkich nagłówków
Gdy już masz metodę tworzenia stałego nagłówka, musisz dowiedzieć się, jak go udoskonalić. Istnieje wiele sposobów na ulepszenie podstawowego projektu i upewnienie się, że spełnia on potrzeby odwiedzających Twoją witrynę.
Dobrą analogią dla twojego własnego sticky header jest upewnienie się, że jest jak dobry sędzia sportowy. W większości przypadków nie będziesz wiedział, że tam są. Jednak gdy gracz lub trener ich potrzebuje, podejmą decyzję i staną się obecni.
Twój sticky header powinien robić to samo – pozostawać w cieniu lub poza umysłem, dopóki użytkownik go nie potrzebuje. Możesz to osiągnąć za pomocą kilku praktycznych zasad, które (jak zawsze) możesz zerwać, jeśli wymaga tego projekt:
- Zachowaj kompaktowość. Przestrzeń ekranowa będzie na wagę złota, więc postaraj się, aby nagłówek był mały. Możesz wdrożyć rozwiązanie, w którym nagłówek będzie skalowany dynamicznie, w zależności od obszaru witryny, w którym się znajduje.
- Na małych ekranach stosuj ukryte nagłówki i menu. Rozszerzając, możesz wybrać ukrycie menu, podobnie jak we wcześniejszym przykładzie Hammerhead. Pomaga to zachować zwartość nagłówka i łączy się z następnym punktem.
- Upewnij się, że nie wprowadzasz żadnych rozpraszaczy. Im więcej elementów na ekranie, tym bardziej rywalizują o uwagę. Jeśli przyklejony nagłówek nie musi pokazywać elementu, usuń go – Twoja treść body to doceni, podobnie jak Twoje metryki.
- Zaproponuj kontrast. To sztuczka z podręcznika wezwania do działania (CTA). Jeśli użyjesz kontrastu dla całego nagłówka sticky header i jego poszczególnych elementów, możesz przyciągnąć wzrok tam, gdzie go potrzebujesz – lub skierować go gdzie indziej.
Ogólnie rzecz biorąc, Twój przyklejony nagłówek zrobi tylko to, czego potrzebujesz, i nic więcej. Czasami będziesz musiał ograniczyć się do minimum, innym razem wypełnisz go linkami, logotypami i formularzami rejestracyjnymi. Tak czy inaczej, jeśli będziesz mieć na uwadze UX i UI, zawsze podejmiesz decyzję skoncentrowaną na użytkowniku.
Streszczenie
Użyteczność i UX Twojej witryny są tak ważne, że powinny być pierwszą, drugą i trzecią rzeczą, którą ustalasz, projektując i budując witrynę. Nawigacja witryny to tylko jeden aspekt, ale musisz znaleźć najlepszy sposób, aby użytkownik poruszał się po witrynie bezproblemowo. Dobrym sposobem na osiągnięcie tego jest przyklejony nagłówek.
Jeśli przypniesz nagłówek do górnej części ekranu, użytkownik zawsze będzie miał pod ręką elementy nawigacyjne. Jest to szczególnie pomocne na urządzeniach, które wymagają przewijania, aby poruszać się po treści, ale oferuje korzyści niezależnie od współczynnika kształtu. Jeśli jesteś użytkownikiem WordPressa, możesz wybrać wtyczkę lub kod, aby zaimplementować stały nagłówek. Możesz jednak zauważyć funkcjonalność w swoim ulubionym motywie, w takim przypadku możesz go użyć i ponieść straty w zakresie elastyczności.
Czy uważasz, że sticky header jest niezbędnym elementem UX i UI witryny, a jeśli nie, to co nim jest? Daj nam znać w sekcji komentarzy poniżej!
Oszczędź czas i koszty, a także zmaksymalizuj wydajność witryny dzięki integracjom na poziomie przedsiębiorstwa o wartości ponad 300 USD zawartym w każdym planie Managed WordPress. Obejmuje to wysokowydajną sieć CDN, ochronę przed atakami DDoS, ochronę przed złośliwym oprogramowaniem i hakowaniem, buforowanie brzegowe i najszybsze maszyny CPU Google. Zacznij bez długoterminowych umów, wspomaganych migracji i 30-dniowej gwarancji zwrotu pieniędzy.
Zapoznaj się z naszymi planami lub porozmawiaj z przedstawicielem handlowym, aby znaleźć plan odpowiedni dla siebie.
Jeremy Holcombe Kinsta
Starszy redaktor w Kinsta, programista stron internetowych WordPress i autor treści. Poza wszystkim, co dotyczy WordPressa, lubię plażę, golfa i filmy. Mam też problemy z wysokimi ludźmi.
