Jak używać lepkiego nagłówka i efektów przewijania w Elementorze

Nagłówek jest zazwyczaj pierwszą rzeczą, którą widzi osoba odwiedzająca Twoją witrynę i stanowi podstawę sposobu jej przeglądania.

Niezależnie od tego, czy masz witrynę handlu elektronicznego, witrynę osobistą, witrynę edukacyjną, forum społeczności czy witrynę dla mediów, nagłówek sprawia, że ​​przeglądanie jest proste i przyjemne.

Przyklejone nagłówki stają się coraz bardziej popularne wśród projektantów stron internetowych w celu organizowania i strukturyzowania witryny internetowej w celu usprawnienia nawigacji użytkownika.

W tym samouczku pokażemy Ci, jak utworzyć przyklejony nagłówek za pomocą Elementora.

Przyklejone nagłówki umożliwiają użytkownikom przeglądanie nagłówka strony i sekcji menu niezależnie od tego, jak daleko przewiną w dół.

• Krok 1: zrobić menu
• Krok 2: Tworzenie nagłówka w Elementorze
• Krok 3: Użycie Elementora do utworzenia szablonu nagłówka
• KROK 4: Jak przykleić nagłówek Elementora
• Krok 5: dostosuj nasz CSS
• Wniosek

Krok 1: zrobić menu

Aby dodać przyklejany nagłówek do swojej witryny, przejdź do wp-admin > Wygląd > Menu i utwórz menu główne. W nagłówku wpisz sekcję, którą chcesz wyświetlić.

Krok 2: Tworzenie nagłówka w Elementorze

Po zakończeniu tworzenia menu głównego przejdź do Szablony Elementora > Kreator motywów Wybierz obszar nagłówka na stronie kreatora motywów i kliknij „ Dodaj nowy nagłówek ”.

Nazwij szablon nagłówka i kliknij „ Utwórz szablon ” na wyskakującym ekranie.

Następnie zostaniesz przeniesiony na stronę edycji Elementora. Możesz użyć jednego z gotowych szablonów nagłówków lub zaprojektować własny od podstaw.

W tym samouczku zaczniemy od zera z naszym przyklejonym nagłówkiem Elementora.

Zanim zaczniemy projektować szablon, możesz zobaczyć różne widżety nagłówka w edytorze Elementora. Korzystając z tych sekcji, możemy szybko i łatwo zaprojektować nagłówek.

Krok 3: Użycie Elementora do utworzenia szablonu nagłówka

Utwórz układ dwukolumnowy. Upewnij się, że szerokość zawartości sekcji jest ustawiona na „ W ramce ”.

W ustawieniach szerokości treści w sekcji edycji Elementora ustaw szerokość pierwszej kolumny na 20% w kolumnie „ Edytuj ”.

Umieść logo witryny swojej witryny w pierwszej kolumnie i wyrównaj je do lewej strony.

Dodaj menu nawigacji w drugiej kolumnie i wybierz menu główne utworzone w kroku 1. Wyrównaj menu nawigacji do prawej strony.

W tym samouczku nagłówek będzie prosty. Możesz zwiększyć szczegółowość nagłówka, dodając kolor tła, efekty animacji najechania kursorem, przyciski i inne elementy.

KROK 4: Jak przykleić nagłówek Elementora

Teraz, gdy stworzyliśmy nasz podstawowy nagłówek Elementora, czas przekształcić go w nagłówek Sticky.

W tym celu przejdź do sekcji Edycja (sekcja Cały nagłówek). Z menu rozwijanego wybierz Zaawansowane > Efekty ruchu

Wybierz „ przyklejony do góry ” w obszarze efektów ruchu, a następnie „ urządzenia ”, w których chcesz, aby pojawił się przyklejony nagłówek.

Lepki nagłówek jest prawie zawsze niepożądany na urządzeniach wielkości tabletu i prawie zawsze jest również niepożądany na ekranach telefonów komórkowych. W rezultacie kliknij „x” obok obu opcji w obszarze Sticky On, pozostawiając zaznaczoną tylko opcję „Pulpit”.

Kiedy będziesz zadowolony ze swojej pracy, kliknij „ Opublikuj ”; spowoduje to aktywację przyklejonego nagłówka, ale w tej chwili nie zastąpi on bieżącego nagłówka motywu.

Elementor poprosi Cię o dodanie warunku do nagłówka po jego opublikowaniu. Możesz wyświetlić nagłówek w dowolnym miejscu witryny, dodając warunki.

Chcieliśmy, aby ten nagłówek pojawił się w całej witrynie, pomijając stronę 404. W rezultacie uwzględniliśmy w wyborze całą witrynę, pomijając stronę 404.

Jak widać, użycie Elementora do stworzenia spersonalizowanego nagłówka Sticky jest proste i bezbolesne!

Spraw, aby przyklejony nagłówek Elementora wyglądał znacznie lepiej, korzystając z niestandardowego CSS Elementor pozwala dostosować przyklejony nagłówek, dodając klasę CSS, aby uczynić go bardziej stylowym.

Tutaj możesz dostosować wysokość nagłówka, kolor tła, przejście i efekty przyklejenia.

Wróć do obszaru edycji, aby nadać swojemu przyklejonemu nagłówkowi bardziej stylowy wygląd (sekcja Cały nagłówek). Z menu rozwijanego wybierz Zaawansowane > Efekty ruchu

W tym przypadku ustaw „ Przesunięcie efektów Gdy użytkownik korzysta z Twojej witryny, jest to odległość przewijania, przy której następuje efekt przewijania.

Ustaw przesunięcie ruchu na 100.

Należy pamiętać, że opcje Efekty przesunięcia będą działać tylko w przypadku użycia niestandardowego CSS. W związku z tym, jeśli nie dodajesz własnego niestandardowego CSS, możesz pominąć ostatnią opcję.

Przed opublikowaniem ostatniego przyklejonego nagłówka możesz opcjonalnie dodać warunki do ostatniego przyklejonego nagłówka. Przykładem amp przyklejonego nagłówka jest sytuacja, w której chcesz, aby przyklejony nagłówek był wyświetlany. Jako przykład amp wybrać kryteria „ cała witryna ”.

Będziesz teraz chciał umieścić w swojej witrynie niestandardowy CSS. Niestandardowy CSS jest dość elastyczny i możesz dołączyć wszystko, co chcesz, jeśli znasz jego działanie.

Zakończyliśmy czyszczenie; przechodzimy teraz do zawiłości serwisu, łącznie z dodaniem niestandardowego kodu CSS. Zademonstrujemy zarówno podstawy, jak i zaawansowane techniki uzyskiwania darmowych efektów lepkich nagłówków dla Elementora. Jeśli używasz Elementora 2.9 lub nowszego, możesz skorzystać z Globalnych reguł stylu, aby włączyć ten CSS do swojej witryny.

Postępuj zgodnie z procedurami opisanymi poniżej, aby dołączyć niestandardowy CSS:

• Aby uzyskać dostęp do menu hamburgerów, znajdź je w lewym górnym rogu menu Elementora i wybierz je.
• Wybierz opcję Wybierz style motywu z menu rozwijanego poniżej sekcji Styl globalny.
• Wybierz opcję Niestandardowy CSS z menu rozwijanego w tej sekcji (kolor zmieni się na niebieski z poprzedniego genetycznego koloru czerwonego).

Następnie wklej poniższy kod CSS.

nagłówek.sticky-header { --header-height: 90px; --nieprzezroczystość: 0,90; --zmniejsz mnie: 0,80; --kolor-przylepnego-tła: #0e41e5; --przejście: 0,3 s łatwość wejścia; przejście: kolor tła var(--przejście), obraz tła var(--przejście), filtr tła var(--przejście), krycie var(--przejście); } header.sticky-header.elementor-sticky--effects { kolor tła: var(--sticky-kolor-tła) ; obraz tła: brak; krycie: var(--opacity) ; -webkit-backdrop-filter: rozmycie (10px); filtr tła: rozmycie (10px); } header.sticky-header > .elementor-container { przejście: minimalna wysokość var(--przejście); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me)); wysokość: calc(var(--wysokość-nagłówka) * var(--zmniejsz-me)); } header.sticky-header .elementor-nav-menu .elementor-item { przejście: dopełnienie var(--przejście); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px; górna część dopełnienia: 10px; } header.sticky-header > .elementor-container .logo img { przejście: maksymalna szerokość var(--przejście); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); }

Krok 5: dostosuj nasz CSS

Instrukcje wymienione powyżej poprowadzą Cię przez proces tworzenia malejącego lepkiego nagłówka w Elementorze. Jeśli chcesz poznać więcej szczegółów na temat dalszej personalizacji nagłówka, możesz spojrzeć na kod CSS podany poniżej, który pozwoli Ci na większą kreatywność przy projektowaniu nagłówka. W zależności od potrzeb możesz spersonalizować przyklejony nagłówek Elementora, zmieniając liczne ustawienia i czyniąc go mniej lub bardziej lepkim. Zalecamy użycie edytora kodu w celu włączenia tej zmiany CSS bezpośrednio do Elementora. Możesz skorzystać z Visual Studio Code lub Atom, które pomogą Ci szybko złożyć kod i czerpać korzyści. Z tych edytorów można korzystać bezpłatnie i można uzyskać do nich dostęp z różnych systemów, w tym Windows, Mac OS X i Linux.

W tej sekcji zademonstrujemy, jak dostosować efekty zmniejszania nagłówka Elementora za pomocą arkusza stylów CSS. Jeśli dokonasz tylko jednej zmiany we właściwości niestandardowej, zostanie ona natychmiast zmieniona tak, aby pasowała do reszty kodu CSS.

Opcje dostosowywania malejącego nagłówka są dostępne łącznie na pięć różnych sposobów. Nie wszystkie zmienne muszą być dostosowywane, ale jeśli chcesz, możesz to zrobić. Gdy już zdecydujesz, które zmienne chcesz zmodyfikować, możesz modyfikować tylko te zmienne, a resztę parametrów pozostawić bez zmian.

Oto pięć zmiennych CSS, z domyślnymi wartościami każdej zmiennej zaznaczonymi na czerwono.

Przyklejony kolor tła to #0e41e5, a wysokość nagłówka to 90 pikseli. Inne opcje stylizacji obejmują: krycie 0,90, zmniejszanie 0,80, krycie 0,90 i przejście między stopniami rozluźniania i zmniejszania wynoszące 300 ms.

Właściwości niestandardowe to elementy, które w naszym amp kodzie pojawiają się po podwójnym myślniku „–”. Można je znaleźć na górze naszego amp kodu. Wystarczy dostosować wartość pojawiającą się po dwukropku i przed średnikiem w zdaniu.

Na amp , jeśli chcesz zwiększyć wysokość nagłówka do 100 pikseli, oto jak będzie to wyglądać przed i po zmianie wysokości:

Wcześniej wysokość nagłówka wynosiła 90 pikseli; później wysokość nagłówka wynosiła 100 pikseli.

Korzystając z Elementora, możesz zaprojektować przyklejone menu nagłówka na kilka różnych sposobów. Możesz nie tylko skonstruować darmowy, przyklejony nagłówek Elementora, ale możesz także spersonalizować nagłówek, dodając do niego niestandardowy CSS. Można uzyskać szczegółowe wskazówki, jak zbudować malejący, lepki nagłówek Elementora za pomocą Elementora i ulepszyć swój CSS, korzystając z tego przewodnika krok po kroku.

Elementor zawiera różnorodne szablony nagłówków; każdy jest odrębny i elegancki i pomaga widzom w poruszaniu się po Twojej witrynie.

Dzięki Elementorowi masz pełną kontrolę nad stylem nagłówków swojej witryny. Możesz na amp umieścić logo witryny na środku strony, a menu główne pod nim. Możesz dodać nagłówek nad głównym nagłówkiem, aby wyświetlić numer telefonu, linki do mediów społecznościowych i inne informacje.

Oto tylko kilka amp licznych opcji projektowania nagłówków dostępnych dla użytkowników Elementora.

Wniosek

Umieszczenie nagłówka w witrynie może ułatwić odwiedzającym poruszanie się po niej i zwiększyć liczbę kliknięć we wszystkich jej obszarach.

Elementor eliminuje potrzebę ręcznego generowania lepkich nagłówków za pomocą JavaScript i CSS, co było wcześniej wymagane. Tworzenie lepkich nagłówków dla Twojej witryny nigdy nie było tak proste jak teraz, dzięki lepkim nagłówkom Elementor.