Strona główna
– 2 grudnia 2022 r Zastanawiasz się, jak stworzyć lepki nagłówek na swojej stronie WordPress? Lepkie nagłówki sprawiają, że nawigacja w Twojej witrynie jest łatwo dostępna dla użytkowników, nawet gdy przewijają stronę w dół. Eliminując niepotrzebne przewijanie, poprawiasz User Experience (UX) swojej witryny.
W tym poście przedstawimy Ci lepkie nagłówki. Następnie pokażemy Ci, jak stworzyć taki za pomocą Beaver Themer w czterech prostych krokach. Weźmy się za to!
Spis treści:
Zanim zagłębimy się w to, jak wygląda lepki nagłówek, przyjrzyjmy się najpierw tradycyjnemu, nieprzylepnemu nagłówkowi:
W powyższym przykładzie nagłówek witryny zawiera przejrzyste menu nawigacyjne z linkami do innych stron. Od lewej do prawej są to: Strona główna , Aktualności , Harmonogram , O nas i Kontakt .
To prosty i efektowny nagłówek, nawet z przyciągającym wzrok logo po lewej stronie. Jednak nagłówek znika całkowicie po przewinięciu ekranu w dół.
Oznacza to, że użytkownicy będą musieli przewinąć całą stronę wstecz, aby ponownie uzyskać dostęp do menu. Taki układ może stworzyć negatywny UX, zwłaszcza jeśli Twoja witryna zawiera dużo treści.
Wpisz: lepkie nagłówki. Nagłówek „lepki”, znany również jako nagłówek trwały lub stały, nie przesuwa się, gdy użytkownik przewija stronę internetową w dół (lub w górę). Jak sama nazwa wskazuje, „przykleja się” do swojego stałego miejsca na ekranie, zwykle na górze:
Zazwyczaj przekonasz się, że lepkie nagłówki są szczególnie popularne wśród sklepów e-commerce. To dlatego, że sklepy internetowe często promują wiele popularnych kategorii lub produktów na swoich stronach głównych.
W przypadku witryny e-commerce przewijanie może symulować chodzenie i przeglądanie w sklepie fizycznym. Kontynuując metaforę, lepki nagłówek umożliwia natychmiastowy powrót do określonej lokalizacji (lub znalezienie nowej) bez zawracania.
Lepkie nagłówki mogą przynieść korzyści praktycznie każdej większej stronie internetowej, od organizacji non-profit po instytucje edukacyjne. Mniejsze firmy mogą nawet chcieć wdrożyć lepkie nagłówki w swoich witrynach mobilnych. Ogólnie rzecz biorąc, lepki nagłówek może znacznie poprawić UX Twojej witryny.
Teraz, gdy wiesz już trochę więcej o nagłówkach samoprzylepnych i ich zaletach, przyjrzyjmy się, jak je utworzyć. W tym samouczku utworzymy lepki nagłówek za pomocą naszej wtyczki Beaver Builder i dodatku Beaver Themer. Pamiętaj, że aby korzystać z tej funkcji, potrzebujesz jednego z naszych planów tworzenia stron premium.
Zanim skonfigurujemy nasz lepki nagłówek w Beaver Themer, zaczniemy od stworzenia menu.
Aby dodać menu, po prostu przejdź do pulpitu nawigacyjnego WordPress i przejdź do Wygląd > Menu :
Nadaj swojemu menu nazwę i wybierz miejsce, w którym ma się znajdować. W tym przypadku wybierzemy opcję Menu główne , więc pojawi się ono w naszym nagłówku. Następnie kliknij Utwórz menu :
Teraz musisz dodać elementy menu. Wybierz strony, które chcesz uwzględnić w swoim menu z panelu Strony po lewej stronie. Zamierzamy dodać wszystkie cztery strony z naszej listy najnowszych :
Po dokonaniu wyboru kliknij Dodaj do menu . Po dodaniu stron powinny być one teraz widoczne po prawej stronie:
W tym momencie możesz śmiało przeciągnąć i upuścić strony (lub użyć strzałek), aby uporządkować je w kolejności, w jakiej mają się pojawiać. Następnie naciśnij Zapisz menu w prawym dolnym rogu.
Pamiętaj, że zawsze możesz dostosować to menu w Beaver Builder, zanim stanie się lepkie. Na przykład możesz zaimplementować niestandardowy CSS, aby przekształcić elementy menu w przyciski. Po zakończeniu wszelkich dostosowań możesz przejść do następnego kroku!
Do tej pory pracowaliśmy tylko na standardowym pulpicie nawigacyjnym WordPress, ale od teraz będziesz potrzebować Beaver Themer. Jeśli nie znasz narzędzia, nie martw się! Jest bardzo przystępny i przyjazny dla początkujących. Ponadto przeprowadzimy Cię przez cały proces.
Mimo to, jeśli chcesz trochę poćwiczyć przed użyciem, zawsze możesz sprawdzić nasz bezpłatny kurs tworzenia motywów. W przeciwnym razie przejdź do Beaver Builder> Themer Layouts> Add New :
Na tym ekranie musisz nadać nazwę nowemu układowi Themer. Następnie upewnij się, że wybrano opcję Themer Layout w obszarze Type i Header w opcji Layout :
Następnie kliknij Dodaj układ Themer .
Ważne jest, aby pamiętać, że jeśli widzisz Nieobsługiwany obok dowolnej opcji w menu Układ , prawdopodobnie Twój motyw nie jest zgodny z Beaver Themer lub Beaver Builder.
Aby uniknąć tego problemu, zalecamy użycie zgodnego motywu WordPress, takiego jak nasz własny motyw Beaver Builder, który został zaprojektowany specjalnie do pracy ze wszystkimi naszymi narzędziami Beaver Builder.
Po utworzeniu nowego układu nagłówka Themer zostaniesz automatycznie przeniesiony do ekranu, na którym możesz edytować jego ustawienia:
W tym miejscu możesz sprawić, by Twój układ był lepki. Po prostu znajdź panel ustawień układu Themer . Następnie obok Lepki wybierz Tak z menu rozwijanego:
Będziesz także musiał wybrać kluczowe konfiguracje, takie jak Sticky Breakpoint i Lokalizacja twojego układu. W tym przykładzie zaimplementujemy nasz lepki nagłówek dla wszystkich rozmiarów ekranu i sprawimy, że będzie on wyświetlany w całej naszej witrynie :
Możesz nawet tworzyć bardziej zaawansowane reguły (lub grupy reguł), które określają zachowanie lepkiego nagłówka. Po dokonaniu wyboru w tym miejscu kliknij Publikuj .
Następnie możesz wyświetlić podgląd swojej witryny w interfejsie użytkownika, aby zobaczyć wyniki:
Jak widać w naszym przykładzie, nagłówek jest teraz lepki! Pamiętaj, jeśli nie jesteś całkowicie zadowolony z wyników, zawsze możesz wrócić i dalej edytować swój układ Themer. W przeciwnym razie nadszedł czas, aby dostosować ustawienia lepkiego nagłówka.
Jak wspomnieliśmy, Beaver Themer nie tylko umożliwia przyklejanie nagłówka, ale także pozwala korzystać z zaawansowanych funkcji lepkich nagłówków. Na przykład możesz zmniejszyć swój lepki nagłówek.
Aby to zrobić, po prostu wróć do ekranu ustawień układu Themer i wybierz Tak z menu rozwijanego obok Zmniejsz . W tym scenariuszu, oto jak wyglądałby Twój lepki nagłówek:
Jak widać, nasz niebieski lepki nagłówek kurczy się i rozszerza w zależności od zachowania przewijania. Ta funkcja może natychmiast ulepszyć Twoją witrynę, nadając jej bardziej profesjonalny wygląd. Ponadto ten zmniejszający się nagłówek pozwoli użytkownikom zobaczyć więcej ekranu na raz.
Alternatywnie możesz wrócić do ustawień układu Themer i zastosować efekt nakładki. Dzięki temu nagłówek będzie miał przezroczyste tło. Pamiętaj tylko, aby kliknąć Aktualizuj w prawym górnym rogu, aby zapisać zmiany.
Lepkie nagłówki mogą być świetnym sposobem na ulepszenie UX witryny, ponieważ umożliwiają użytkownikom nawigację po nagłówkach bez względu na to, jaką część strony przeglądają.
Podsumowując, oto jak możesz stworzyć lepki nagłówek za pomocą Beaver Themer w czterech krokach:
Jeśli chcesz włączyć lepki nagłówek w motywie Beaver Builder, przejdź do opcji Dostosuj > Nagłówek > Układ nagłówka . Zapewnia zaawansowaną kontrolę zarówno nad nagłówkiem, jak i stopką.
Jeśli Twoja witryna zawiera wiele stron, możesz rozważyć przekształcenie lepkiego menu nagłówka w megamenu. Możesz go skonfigurować za pomocą dodatku Beaver Builder Mega Menu. Ponadto dodanie linków zakotwiczonych do treści może pomóc odwiedzającym w szybkim i łatwym poruszaniu się po Twoich stronach.