Jak zrobić lepkie menu w WordPressie

Nawigacja w witrynie jest jedną z podstawowych zasad UX, które kształtują sposób, w jaki odwiedzający postrzegają Twoją witrynę. Współcześni internauci nie mają absolutnie żadnego zamiaru marnować czasu na stronie, która nie dostarcza szybko i bez wysiłku pożądanej treści. Menu nawigacyjne jest tradycyjnie pierwszym miejscem, w którym odwiedzający szukają orientacji. Jeśli menu nie jest odpowiednio zaprojektowane, a nawigacja nie przebiega tak płynnie i szybko, jak to możliwe, odwiedzający zaczynają wychodzić, a strona zaczyna umierać powolną i bolesną śmiercią w Internecie.

Lepkie menu stanowi ważną część nawigacji w witrynie, ponieważ „przykleja się” do użytkowników podczas przewijania, zamiast pozostawać na górze strony, upewniając się, że nawigacja nigdy nie jest poza zasięgiem. Dlatego postanowiliśmy zagłębić się w koncepcję, przeanalizować zalety i wady tej funkcji i pokazać, jak ją skonfigurować za pomocą jednej z dostępnych wtyczek WordPress.

Z drugiej strony, jeśli nie chcesz używać wtyczki WordPress, powinieneś wiedzieć, że większość naszych motywów WordPress premium ma funkcję przyklejonego menu. Możesz ustawić, aby pojawiał się w całej witrynie lub na poszczególnych stronach, ale za chwilę do tego dojdziemy.

Co to jest lepkie menu

Przede wszystkim wyjaśnijmy, czym jest lepkie menu i jak działa. W większości witryn główna nawigacja znajduje się w nagłówku, który jest najwyższą częścią strony. Zazwyczaj elementy na stronie znikają (przesuwają się w górę), gdy użytkownik przewija w dół. Przyklejone menu to menu, które pozostaje („przykleja się”) u góry ekranu, gdy użytkownicy przewijają stronę. W ten sposób, jeśli użytkownik chce dotrzeć do czegoś w menu w połowie strony, nie musi przewijać do końca, aby znaleźć nawigację, ponieważ będzie ona tam, na górze rzutni.

„Lepkość” zwykle dotyczy całego nagłówka, nie tylko menu. Obejmuje inne elementy nagłówka, takie jak przyciski społecznościowe, logo, pasek wyszukiwania i tak dalej.

Sticky Menu Plusy i minusy

Wydaje się, że nie ma ogólnego konsensusu wśród projektantów UX, co do tego, czy przyklejone menu są dobre, czy złe dla stron internetowych, ponieważ są zarówno mocne wady, jak i znaczące zalety, więc zobaczmy, jakie one są.

Plusy:

Cons:

Czy Twoja witryna potrzebuje przyklejonego menu?

Mówimy „Tak” we wszystkich poniższych przypadkach:

Tworzenie lepkiego menu z motywami Qode

Jak wspomnieliśmy wcześniej, aby dodać lepkie menu do swojej witryny, użyjesz wbudowanej funkcji motywu lub zainstalujesz wtyczkę WordPress.

Jeśli kupiłeś motyw od Qode Interactive, nie potrzebujesz wtyczki – większość naszych motywów jest dostarczana z tą funkcjonalnością po wyjęciu z pudełka.

Jeśli chodzi o włączanie i konfigurowanie go, jeśli chcesz mieć przyklejone menu w całej witrynie (na wszystkich stronach), przejdź do ogólnych ustawień motywu (są one oznaczone nazwą motywu lub autora motywu, a następnie słowo „Opcje”) i kliknij nagłówek.

Tutaj znajdziesz opcje lepkiego menu. Pamiętaj, że opcje mogą się różnić w zależności od motywu.

Po wybraniu z menu „Przyklejony” otworzy się zestaw opcji dostosowywania.

Ponownie, ustawienia mogą się różnić w zależności od motywu.

Możesz także ustawić przyklejone menu tylko dla jednej lub więcej pojedynczych stron, a nie dla całej witryny. Odbywa się to w poszczególnych opcjach strony. Po prostu przejdź do strony, dla której chcesz ją skonfigurować, i ustaw zachowanie nagłówka zgodnie z własnymi preferencjami.

Jak dodać lepkie menu za pomocą wtyczki?

Jeśli Twój motyw nie zawiera funkcji lepkiego menu, a nie jesteś programistą i/lub nie wiesz, jak użyć CSS, aby dodać lepki nagłówek, najlepszym rozwiązaniem jest użycie wtyczki.

W tym celu zalecamy użycie My Sticky Menu – Sticky Menu on Scroll, Sticky Header for Any Theme, który, jak sama nazwa wskazuje, może współpracować z dowolnym motywem, umożliwiając łatwe dodanie przyklejonego nagłówka, a nawet paska powitalnego. Wtyczka nie wymaga znajomości kodowania ani CSS, jest lekka i kompatybilna ze wszystkimi głównymi kreatorami i edytorami WordPress, w tym Gutenbergiem i WPBakery. Opiera się na klasie elementu („Sticky Class” lub ID), która zasadniczo określa, która część witryny ma być przyklejona.

Ta wtyczka umożliwia tworzenie lepkiego nagłówka przy przewijaniu w górę iw dół, dodawanie efektów (zanikanie lub slajd), zmianę krycia i koloru tła, a także decydowanie, kiedy i na jakich stronach ma się pojawiać lepkie menu. Darmowa wersja powinna załatwić sprawę większości użytkowników, podczas gdy wersja pro umożliwia zmianę stylu CSS, a także wyłączenie funkcji przewijania lub na niektórych stronach. Wreszcie, ta wtyczka WordPress obsługuje wiele języków i jest kompatybilna ze wszystkimi głównymi programami do tworzenia stron.

Po zainstalowaniu i aktywacji wtyczki przejdź do Ustawienia > myStickymenu.

Pierwszą rzeczą, którą musisz ustawić, jest menu, które chcesz wyświetlać jako przyklejone. Możesz wybrać dowolne menu, które masz w swoim motywie.

Jeśli chodzi o ustawienia, pierwszą rzeczą, o którą zostaniesz poproszony, jest ustawienie Przyklejony indeks Z. Z-index określa kolejność stosu nagłówka, tzn. czy będzie on wyświetlany przed, czy za innymi elementami na stronie. Element o większej kolejności stosu jest zawsze wyświetlany przed wszystkimi elementami o niższym porządku stosu. Ponieważ prawdopodobnie chcesz, aby Twój przyklejony nagłówek był zawsze widoczny, sugerujemy wpisanie większej liczby w tym polu.

Następnie zdecyduj, czy chcesz, aby Twoje menu samoprzylepne wyświetlanie na ekranach telefonów komórkowych albo nie. Ogólnie dobrym pomysłem jest wyłączenie go na telefonie komórkowym, ponieważ najprawdopodobniej zajmie zbyt dużo ekranu i wypchnie zawartość.

Następna opcja, Udostępnij na Przewiń na stronie głównej, pozwala ustawić po ilu pikselach ma się pojawić lepkie menu na swojej stronie głównej. Możesz także ustawić Lepki czas przejścia poniżej.

Wtyczka pozwala również na pewne dostosowanie projektu. Możesz ustawić lepki kolor tła, krycie i wybrać efekt przejścia. W tym miejscu możesz również zdefiniować ogólne ustawienie (dla wszystkich stron w witrynie, a nie strony głównej), które określają, po ilu pikselach ma się wyświetlać menu.

Dodatkowe opcje są dostępne w wersji pro wtyczki. Ale jeśli potrzebujesz tylko podstawowego lepkiego menu, darmowa wersja powinna działać dobrze.

Końcowe przemyślenia

Jeśli uważasz, że dodanie lepkiego menu poprawiłoby nawigację w witrynie i wygodę użytkowników, mówimy – idź! O ile Twoja witryna nie jest tak ciasna, jak jest, prawdopodobnie będzie to świetny dodatek i główny czynnik użyteczności. Niezależnie od tego, czy Twój motyw ma już wymaganą funkcjonalność, czy wybierzesz wtyczkę, jesteśmy pewni, że utworzysz lepkie menu, które będzie pasować do Twoich stron jak ulał.