W krajobrazie zdominowanym przez przewijanie, nagłówki sticky są pomocne dla użytkowników, dzięki czemu nawigacja jest zawsze widoczna i łatwo dostępna.

Jeśli nie używasz frameworka, najprostszym sposobem na dodanie lepkiej nawigacji jest wtyczka. W dzisiejszym poście przyjrzymy się zaletom i wadom dodawania tego rodzaju funkcji do twojej witryny i fantastycznym wtyczkom, które pomogą Ci się tam dostać.

Plusy i minusy lepkich nagłówków

Sticky headers stają się coraz bardziej popularne w ostatnich latach, ale ich użycie nie jest po prostu wynikiem przemijającej mody projektowej. Szybki dostęp do nawigacji po witrynie staje się coraz ważniejszy niż kiedykolwiek w kontekście rozprzestrzeniania się mniejszych urządzeń i nieskończonego przewijania stron internetowych.

We use sticky navigation on our own website to help users quickly access other parts of our website.
Używamy sticky navigation na naszej własnej stronie internetowej, aby pomóc użytkownikom szybko uzyskać dostęp do innych części naszej strony internetowej.

To powiedziawszy, nie każdy jest fanem lepkich nagłówków i istnieją przyzwoite argumenty zarówno za, jak i przeciw ich użyciu.

Zacznijmy od pozytywów:

Doświadczenie Użytkownika

Jest to krzykliwie oczywiste – natychmiastowy dostęp do głównych sekcji witryny przyspiesza nawigację i oznacza, że użytkownicy zawsze mają opcję, bez względu na to, jak głęboko w określonym fragmencie treści mogą się znajdować. W kontekście mobilnym jest to jeszcze ważniejsze.

Branding

Dzięki gustownie ustawionej i odpowiednio dobranej wersji logo zawartej w nagłówku, przez cały czas zachowujesz podstawową część brandingu witryny. Oczywiście nie jest to coś, na co chcesz jechać, ale z czasem będzie się trzymać użytkowników i zwiększy świadomość marki.

Lepsze Wskaźniki Analityczne

W wyniku łatwiejszego zarządzania nawigacją prawdopodobnie zauważysz obniżenie współczynnika odrzuceń i wzrost odsłon strony na wizytę. Nie jest to oczywiście gwarantowane, ale z pewnością działało w kontekście moich własnych witryn.

Ale każda róża ma swój kolec, a jeśli chodzi o lepkie nagłówki, głównym ryzykiem jest po prostu bałagan w implementacji. Najbardziej oczywistym sposobem na to jest uczynienie nagłówka zbyt dużym lub natrętnym dla mniejszych ekranów.

Uzyskanie tego prawa jest po prostu kwestią eksperymentów i testów terenowych przy użyciu kombinacji prawdziwych urządzeń i narzędzi. Tryb urządzenia Google i emulacja mobilna, wtyczki przeglądarki i opcje podglądu w narzędziu w wybranym pakiecie projektowym to doskonałe sposoby na zapewnienie wszystkim użytkownikom shipshape.

Wygląd nagłówka sticky może być również inteligentnie obsługiwany w odpowiedzi na rzeczywiste działania użytkownika, aby ograniczyć natrętność do minimum. Obecna implementacja Medium to dobry przykład-wyszukiwanie, rejestracja i opcje nawigacji znikają całkowicie podczas przewijania strony w dół, ale znikają gustownie z powrotem, gdy przewijasz w górę, aby dać Ci natychmiastowe opcje w czasie, gdy prawdopodobnie ich szukasz. Jest to mały akcent, ale rozkosznie uważany za jeden pod względem ogólnej użyteczności.

Subtle sticky header options at Medium.
Subtelne przewijanie-wyzwalane opcje sticky header na Medium.

Drugim poważnym ryzykiem jest to, że w jakiś sposób całkowicie spartaczysz implementację od strony technicznej i skończysz z jakimś Frankenheaderem, który całkowicie zasłania treść lub jest niepotrzebnie buggy i irytujący. Mój wybór sześciu poniższych wtyczek ma na celu pomóc ci uniknąć tej pułapki, w szczególności poprzez całkowite usunięcie potrzeby niestandardowego kodowania.

Zanim przejdziemy do naszych wtyczek WordPress, rzućmy okiem na kilka przykładów w dziczy, podkreślając wspólne wzorce implementacji.

Wysokie witryny z lepką nawigacją

Jak pokazano powyżej w średnim przykładzie, istnieje więcej niż jeden sposób na skórkę kota sticky header.

Strona internetowa Oasis jest solidnym przykładem standardowej nawigacji top w akcji. Przewiń do zawartości serca na dowolnym rozmiarze ekranu, a nigdy nie będziesz więcej niż jednym kliknięciem lub dotknięciem od głównej zawartości, której szukasz jako fan.

Sticky header in action on the full-width Oasis site.
Sticky header w akcji na stronie Oasis o pełnej szerokości.

Zobacz stronę w przeglądarce na pulpicie, a zobaczysz pełny zakres opcji menu ułożonych dla ciebie. Zmień rozmiar przeglądarki lub przełącz się na urządzenie mobilne, a zobaczysz opcje sprytnie przycięte do podstawowych elementów z menu hamburgera, aby obsługiwać podstawową nawigację za pomocą poziomego odsłonięcia.

Mobile version of Oasis sticky header.
Strona Oasis na komórkę.

Witryna Gareth Emery pokazuje subtelną wariację na ten temat z wymiarami nagłówka animowanymi do mniejszego rozmiaru podczas przewijania w dół, aby zająć mniej miejsca i umożliwić przezroczystość pod spodem.

Sticky header in action on the Gareth emery site.
Sticky header w akcji na stronie Gareth Emery.

Przełącz się na mobilny widok witryny, a masz kolejny doskonały przykład tego, jak lepkie nagłówki pomagają w brandingu – opcje użytkownika są ograniczone do logo witryny i menu hamburgera.

Jedna z definiujących cech wczesnych stron internetowych, podstawowa nawigacja po stronie może również nadawać się do lepkiego podejścia, choć w dzisiejszych czasach rzadziej spotykasz się z nią online. Strona internetowa Squid Compression jest solidnym przykładem tego podejścia w działaniu na pulpicie i powraca do górnej nawigacji z menu hamburgera, gdy wyświetla się w mniejszych rozmiarach.

Fixed side navigation on the Squid Compression site.
Poprawiono nawigację boczną na stronie kompresji Squid.

Teraz, gdy ogólnie rozważyliśmy zalety lepkich nagłówków i przyjrzeliśmy się kilku przykładom z prawdziwego świata, przejdźmy do narzędzi do tworzenia tego wszystkiego na własnych stronach WordPress.

Wtyczki sticky Header dla WordPress

  • 1. Sticky Header by ThematoSoup

    Wtyczka Sticky Header by thematosoup to prosta opcja dla właścicieli witryn, którzy chcą dodać funkcjonalność sticky header do swojej oferty online.

    Oferuje on ograniczony, ale rozsądny zestaw opcji wdrażania, z których większość jest dostępna za pośrednictwem dostosowywania. Jesteś ograniczony do jednego poziomu nawigacji z tą wtyczką i masz proste ustawienia do kontrolowania koloru tła, koloru tekstu i maksymalnej szerokości nagłówka.

    Dostępne są również inne ustawienia, aby ustawić odległość od góry strony, po której powinien być widoczny nagłówek. Jeśli martwisz się o nieruchomości ekranu w mniejszych rozmiarach, masz również możliwość ukrycia nagłówka całkowicie pod konfigurowalną szerokością ekranu.

    Zainteresowany 1. Sticky Header by ThematoSoup?

    Szczegóły
  • 2. Sticky Menu (lub cokolwiek!) na zwoju

    Lepkie Menu (lub cokolwiek!) on Scroll plugin nie jest nazwą, która wypada z języka, ale nie można jej obwiniać za dokładność jej opisu.

    Ta wtyczka daje Ci trochę więcej swobody w tym, co można uczynić lepkim, umożliwiając uczynienie dowolnego elementu o unikalnej nazwie, klasie lub identyfikatorze przyklejonym do góry strony. Otwiera to drzwi do kreatywnych zastosowań z banerami i wezwaniami do działania oprócz nagłówków menu, ale oczywiście będziesz chciał uważać, aby niepotrzebnie nie zrujnować doświadczenia użytkownika z Twoją implementacją.

    Będziesz również potrzebował trochę doświadczenia w HTML/CSS, aby faktycznie wdrożyć, ponieważ będziesz odpowiedzialny za prawidłowe kierowanie selektora na stronie, której szukasz. Jednak w większości przypadków powinno to być stosunkowo trywialne.

    Masz opcje sterowania pozycjonowaniem od góry ekranu i możesz włączyć dla niektórych rozmiarów ekranu tylko wtedy, gdy martwisz się wyglądem na mniejszych urządzeniach.

    Istnieją również ustawienia określające Indeks z elementu sticky, aby upewnić się, że jest on zawsze widoczny, a poręczny tryb debugowania wykorzystuje konsolę przeglądarki do wyświetlania komunikatów o błędach podczas debugowania.

    Zainteresowany 2. Sticky Menu (lub cokolwiek!) na zwoju?

    Szczegóły
  • 3. myStickymenu

    Wtyczka myStickymenu została pierwotnie zaprojektowana do pracy z motywem Twenty Thirteen WordPress, ale powinna również dobrze grać z większością nowoczesnych, responsywnych motywów.

    Wtyczka jest w pełni przygotowana do lokalizacji, reaguje po wyjęciu z pudełka, a także zawiera proste opcje dodawania niestandardowego kodu CSS, aby dostosować jego wygląd.

    Autorzy wtyczki przygotowali również poręczną stronę demonstracyjną, na której można zobaczyć ją w akcji przed podjęciem decyzji o pobraniu. Z ponad aktywnymi instalacjami 10,000 i solidną pięciogwiazdkową oceną, oczywiście wykonuje zadanie dla znacznej liczby właścicieli witryn.

    Zainteresowany 3. myStickymenu?

    DetailsDemo
  • 4. Pasek Powiadomień WordPress

    Opcje, które omówiliśmy do tej pory, mają na celu przede wszystkim zapewnienie opcji nawigacji w lepkim nagłówku, ale czasami wszystko, czego potrzebujesz, to proste powiadomienie lub przycisk wezwania do działania. Klasyczne przypadki użycia obejmują podkreślanie ofert specjalnych na stronie lub zachęcanie użytkowników do zapisania się do newslettera.

    Pasek powiadomień WordPress od SeedProd (twórcy popularnej wtyczki do uruchamiania witryny premium) to narzędzie, do którego należy się zwrócić, jeśli to wszystko, czego szukasz. Konfiguracja jest prosta, zawiera proste ustawienia dostosowywania kolorów i jest gotowa do tłumaczenia (obecnie dostępnych jest osiem tłumaczeń) i kompatybilna z instalacjami Wielostanowiskowymi.

    Zainteresowany 4. Pasek Powiadomień WordPress?

    Szczegóły
  • 5. Pasek Powiadomień WPFront

    Pasek powiadomień WPFront jest również, jak sama nazwa wskazuje, bardzo ukierunkowany na powiadamianie, a nie nawigację.

    Opcje dostępne z tą wtyczką są nieco bardziej zaawansowane niż nasza poprzednia oferta i masz znacznie więcej miejsca na poprawki.

    Możesz dostosować wysokość, wybrać, czy chcesz wyświetlać na przewijaniu, przykleić nagłówek do górnej lub dolnej części ekranu i mieć pełną kontrolę nad dostosowywaniem kolorów.

    Możesz również ustawić daty rozpoczęcia i zakończenia wyglądu nagłówka (przydatna funkcja w kontekście wrażliwych na czas promocji) i ograniczyć jego wygląd do konkretnych postów, stron i ról użytkowników.

    Twórcy stworzyli stronę z prostymi pomysłami z przykładowymi przypadkami użycia, aby cię zainspirować, a bardziej szczegółowy przewodnik po pełnym zakresie ustawień jest również dostępny.

    Zainteresowany 5. Pasek Powiadomień WPFront?

    Szczegóły
  • 6. Hero Menu-Responsywna Wtyczka WordPress Mega Menu

    Hero Menu – Responsive WordPress Mega menu plugin to jedyna wtyczka premium na naszej liście i jest dostępna za $19.

    Umożliwia użytkownikom tworzenie wszelkiego rodzaju menu w ciągu kilku minut, od bogatych w funkcje mega menu po najprostsze opcje rozwijane.

    Wtyczka Menu bohatera jest w pełni kompatybilna z WooCommerce i została dokładnie przetestowana z różnymi wiodącymi motywami premium WordPress, takimi jak Enfold, Avada i Divi – wraz ze wszystkimi najnowszymi wersjami domyślnych motywów WordPress od dwudziestu jedenaście do dwudziestu piętnastu. Pełne szczegóły konfiguracji z tymi popularnymi motywami znajdują się w przewodniku integracji wtyczki.

    Po stronie lepkiego nagłówka rzeczy, proste kliknięcie w ustawieniach wtyczki to wszystko, czego potrzebujesz, aby włączyć stałą nawigację i masz opcję oddzielnych ustawień dla koloru, przezroczystości i logo, jeśli chcesz, aby lepki nagłówek wyróżniał się od głównego menu.

    Pełna dokumentacja i wsparcie dostępne są również na stronie dewelopera. Jeśli szukasz uniwersalnego menu i lepkiego rozwiązania nagłówka, ta wtyczka ma wiele do zaoferowania w cenie.

    Zainteresowany 6. Hero Menu-Responsywna Wtyczka WordPress Mega Menu?

    DetailsDemo

Dodawanie Sticky Navigation do Twojej witryny

Niezależnie od tego, czy chodzi o umieszczenie swojego najbardziej widocznego wezwania do działania na pierwszym planie, czy o zapewnienie użytkownikom witryny zawsze odpowiedniej opcji nawigacyjnej, lepkie nagłówki mają strasznie dużo sensu zarówno z punktu widzenia właściciela witryny, jak i użytkownika.

Wtyczki, które podkreśliłem, powinny obejmować większość przypadków użycia, ale oczywiście nowe opcje pojawiają się co tydzień. Jeśli masz ulubione lepkie narzędzie nawigacyjne let nas znać w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…