Jak zrobić przyklejony nagłówek w WordPress
Zanim przejdziemy do tego, jak możemy utworzyć przyklejony nagłówek w WordPressie, najpierw zrozumiemy, czym one są i dlaczego możemy chcieć ich używać. Sticky elements lub fixed elements to specjalne rodzaje elementów, które zawsze pozostają widoczne i nie zmieniają swojej pozycji, gdy użytkownik przewija w górę lub w dół. Dostęp do tych elementów można uzyskać w dowolnym momencie ze względu na ich położenie i dlatego są bardzo przydatne w przypadku menu lub innych opcji nawigacji.
Chcesz dać swoim użytkownikom jak najwięcej wygodnych opcji, aby Twoje treści były łatwo dostępne i aby zmniejszyć frustrację użytkowników. Dzięki przyklejonym elementom użytkownicy mogą szybko przechodzić z jednej strony Twojej witryny na drugą i znajdować dokładnie to, czego potrzebują. Cały ten komfort i łatwość użytkowania oznacza, że Twoje wrażenia z użytkowania będą znacznie lepsze, a Ty będziesz mieć wyższą retencję użytkowników.
Teraz zajmiemy się jednym z głównych typów przyklejonych elementów, przyklejonym nagłówkiem i niesamowitym narzędziem, które pomoże nam łatwo tworzyć i dostosowywać te elementy. Narzędzie, o którym mowa, nazywa się WP Sticky.
Istnieje wiele różnych sposobów tworzenia lepkich nagłówków oprócz WP Sticky. Możesz nawet stworzyć te lepkie elementy używając czystego kodu HTML i CSS, ale wymaga to pewnej wiedzy technicznej i jest procesem czasochłonnym. Ta wtyczka jest znacznie prostszym rozwiązaniem problemu i jest wyjątkowo przyjazna dla początkujących.
Zanim zaczniemy korzystać z WP Sticky, musimy go najpierw pobrać i zainstalować wtyczkę. Ponieważ jest to bardzo prosty proces, nie będziemy tracić na to czasu. Zamiast tego przejdźmy od razu do tworzenia naszego pierwszego lepkiego nagłówka.
Pierwszą rzeczą, którą musimy zrobić, to wejść do sekcji wtyczek w naszym panelu administracyjnym WordPress; stamtąd wybierz WP Sticky Pro, a następnie kliknij Ustawienia.
Zostaniemy przywitani tymi opcjami, w których będziemy musieli wybrać Dodaj nowy przyklejony element.
Po wykonaniu tej czynności zobaczymy nowy wpis w zakładce Twoje Sticky Elements o nazwie Sticky Element #1. Gratulacje, utworzyłeś swój pierwszy przyklejony element, ale zanim stworzymy funkcjonalny przyklejony nagłówek, musisz zrobić o wiele więcej. Jak widać, istnieje kilka różnych kategorii ustawień dla naszego przyklejonego elementu.
Sprawdźmy je bardziej szczegółowo.
W tym miejscu nazwiemy nasz element i wybierzemy, co dokładnie chcemy przykleić.
Po pierwsze, musimy nadać nazwę naszemu przyklejonemu elementowi; w tym przypadku będzie to Sticky Header.
Następnie musimy zlokalizować i wybrać element, który chcemy uczynić sticky. Możemy to osiągnąć na dwa sposoby.
Wizualny selektor
Jest to wygodniejsza i łatwiejsza opcja. Po prostu przejdź do sekcji Podstawowe i wybierz opcję Wybierz element.
Gdy to zrobisz, Twoja witryna otworzy się razem z menu WP Sticky u góry, sygnalizując, że wprowadziłeś selektor wizualny. Jeśli najedziesz kursorem na niektóre elementy, zauważysz żółtawy prostokąt z przerywaną linią, wizualizujący zaznaczony obszar. Kliknij go lewym przyciskiem myszy, aby go wybrać.
Spowoduje to powrót do strony ustawień WP Sticky, gdzie zobaczysz unikalny identyfikator wybranego elementu. W naszym przypadku wygląda to mniej więcej tak.
Następnie kliknij przycisk Zapisz zmiany w prawym górnym rogu i gotowe.
Pisanie unikalnego identyfikatora
Jeśli wolisz i znasz unikalny identyfikator elementu, który chcesz przykleić, zamiast wybierać go wizualnie, możesz po prostu zapisać jego unikalny identyfikator.
Opcje wizualne
Po zakończeniu nazywania i wybierania naszego elementu nadszedł czas, aby uczynić go nagłówkiem i dostosować. WP Sticky daje nam sporo możliwości.
Ponieważ chcemy utworzyć nagłówek, pozostawiamy tę opcję w stanie domyślnym, czyli Top. Jeśli zmienisz zdanie lub zmienią się wymagania, możesz również wybrać opcję Dół.
Przestrzeń między górną częścią strony a przyklejonym elementem
Czasami nasze przyklejone elementy mogą zbliżyć się zbyt blisko górnej części strony. Możemy to poprawić ręcznie, wpisując liczbę pikseli między górną częścią strony a wyznaczonym przez nas przyklejonym elementem.
Domyślnie ta opcja nie jest ustawiona, ponieważ większość elementów zostanie poprawnie umieszczona automatycznie.
Sprawdź pasek narzędzi administratora
Jeśli Twoja witryna ma wyspecjalizowany pasek narzędzi administratora, może to blokować przyklejony nagłówek. W takim przypadku wystarczy zaznaczyć tę opcję, a problem zostanie rozwiązany. WP Sticky automatycznie rozpozna rozmiar paska narzędzi i odpowiednio zareaguje.
Czasami chcesz mieć różne zachowania w zależności od urządzenia, z którego korzystają odwiedzający, aby przeglądać Twoją witrynę. Możesz nie chcieć mieć przyklejonego nagłówka na urządzeniach mobilnych. WP Sticky daje możliwość wyboru kategorii urządzeń, które będą miały lepkie zachowanie. W naszym przypadku zrezygnujemy z małych i średnich urządzeń.
Innym przypadkiem, który może wymagać ręcznego dostosowania, jest pojawienie się elementów nad przyklejonym nagłówkiem. Aby temu zapobiec, musisz zwiększyć indeks Z lepkiego nagłówka.
Jeśli nie masz pewności co do wartości indeksu Z elementów, które nakładają się na nagłówek, wpisz maksymalną wartość 99999, a to rozwiąże problem.
Istnieją dwa ustawienia efektów, których możesz użyć. Zanikaj i zjeżdżaj w dół. Teraz, który z nich ostatecznie użyjesz, zależy w pełni od twoich osobistych preferencji i pożądanego wyglądu witryny. Eksperymentuj, dopóki się nie zdecydujesz.
Kolejna wizualna personalizacja lepkiego elementu. W zależności od reszty strony za pomocą suwaka możemy uczynić przyklejony element mniej lub bardziej przezroczystym.
Co się stanie, jeśli nie chcesz, aby niektóre części Twojej witryny miały przyklejony nagłówek? Cóż, ten suwak pozwala dostosować punkt początkowy i punkt końcowy, w którym przyklejony nagłówek będzie wyświetlany na Twojej stronie podczas przewijania.
Kolor tła
Co jeśli nasz lepki element nie jest tak wyraźnie widoczny? Wtyczka ma opcję wyróżnienia jej poprzez nadanie jej koloru tła. Aby to zrobić, kliknij przycisk pokazany poniżej i wybierz żądany kolor tła. To takie proste.
Jeśli chcesz wprowadzić jeszcze więcej zmian w swoim przyklejonym elemencie, które nie są objęte wyżej wymienionymi opcjami, istnieje pole, w którym możesz dodać dostosowanie za pomocą CSS. Jedną ważną rzeczą, o której należy pamiętać w tym przypadku, jest to, że nie ma potrzeby zawijania stylów w selektory. Nie musisz pisać .classname{color:#FFF;}, zamiast tego wystarczy napisać color:#FFF;
Zostawimy to puste, ponieważ nie ma potrzeby dostosowywania naszego przyklejonego nagłówka demonstracyjnego.
Po zmianie wszystkich żądanych ustawień nie zapomnij zapisać zmian. Po wykonaniu tej czynności możemy przejść dalej i kliknąć przycisk Przyklejony podgląd w prawym górnym rogu, aby wyświetlić podgląd zmian, które do tej pory wprowadziliśmy.
Na zakończenie
WP Sticky jest doskonałym dodatkiem do każdej strony internetowej i znacznie ułatwia pracę programisty. Tak prosta w użyciu, a jednocześnie oferująca tak szczegółowe i głębokie opcje dostosowywania, ta wtyczka gwarantuje, że pomoże Ci stworzyć idealny przyklejony nagłówek dla Twojej witryny. To świetna wiadomość, ponieważ przyklejony nagłówek może znacznie zwiększyć liczbę konwersji w witrynie.
WP Sticky ma wersję Pro, która zawiera wszystkie wyżej wymienione opcje i kosztuje 5,99 USD miesięcznie lub 39 USD za dożywotnią licencję. Dla zespołów i agencji dostępnych jest również kilka różnych planów cenowych.
Vallery Henings
Vallery Henings jest copywriterem i autorem treści, który specjalizuje się w blogowaniu duchów, kampaniach e-mail marketingowych i stronach sprzedażowych. Jest też miłośniczką wycieczek samochodowych, ciasteczek z masłem orzechowym i psiego imienia Mimy.