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

Nagłówek jest zazwyczaj pierwszą rzeczą, jaką widzi osoba odwiedzająca Twoją witrynę i służy jako podstawa jej eksploracji.

Niezależnie od tego, czy masz witrynę e-commerce, witrynę osobistą, witrynę edukacyjną, forum społecznościowe lub witrynę dla mediów, nagłówek ułatwia przeglądanie i sprawia, że ​​korzystanie z niej jest przyjemne.

Przyklejone nagłówki stają się coraz bardziej popularne wśród projektantów stron internetowych, którzy organizują i organizują witrynę internetową w celu poprawy 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 się przewijają.

• Krok 1: aby zrobić menu
• Krok 2: Tworzenie nagłówka w Elementorze
• Krok 3: Używanie Elementora do tworzenia szablonu nagłówka
• KROK 4: Jak sprawić, by nagłówek Elementora był lepki?
• Krok 5: dostosuj nasz CSS
• Wniosek

Krok 1: aby zrobić menu

Aby dodać przyklejony 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 ”.

Nadaj szablonowi nagłówka nazwę 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 lepkim nagłówkiem Elementora.

Możesz zobaczyć różne widżety nagłówków w edytorze Elementor, zanim zaczniemy projektować szablon. Za pomocą tych sekcji możemy szybko i łatwo zaprojektować nagłówek.

Krok 3: Używanie Elementora do tworzenia szablonu nagłówka

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

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

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

Dodaj menu nawigacyjne w drugiej kolumnie i wybierz menu główne utworzone w kroku 1. Ustaw menu nawigacyjne w prawo.

W tym samouczku zachowamy prosty nagłówek. Możesz uszczegółowić nagłówek, dodając kolor tła, unosząc efekty animacji, przyciski i inne elementy.

KROK 4: Jak sprawić, by nagłówek Elementora był lepki?

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

Aby to zrobić, przejdź do sekcji Edycja (sekcja Cały nagłówek). Z menu rozwijanego wybierz Zaawansowane > Efekty ruchu

Wybierz „ przyklej do góry ” pod efektami ruchu, a następnie „ urządzenia ”, w których ma się pojawić przyklejony nagłówek.

Przyklejony 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 zaznaczony tylko „Pulpit”.

Kiedy będziesz zadowolony ze swojej pracy, kliknij „ Opublikuj ”; aktywuje to przyklejony nagłówek, ale na razie nie zastąpi on aktualnego nagłówka motywu.

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

Chcieliśmy, aby ten nagłówek pojawiał się w całej witrynie, z pominięciem strony 404. W rezultacie wybraliśmy całą witrynę, pomijając stronę 404.

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

Spraw, aby Twój przyklejony nagłówek Elementora wyglądał o wiele lepiej Korzystając z niestandardowego CSS Elementor pozwala dostosować przyklejony nagłówek, dodając klasę CSS, aby był bardziej stylowy.

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

Wróć do obszaru edycji, aby stylowy nagłówek był bardziej stylowy (sekcja Cały nagłówek). Z menu rozwijanego wybierz Zaawansowane > Efekty ruchu

ustaw „ Przesunięcie efektów ” na 100. Gdy odwiedzający korzysta z Twojej witryny, jest to odległość przewijania, na której występuje efekt przewijania.

Ustaw przesunięcie ruchu na 100.

Pamiętaj, że opcje efektów przesunięcia działają tylko wtedy, gdy używany jest niestandardowy CSS. W związku z tym, jeśli nie dodajesz własnego niestandardowego kodu 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 nagłówka jest miejsce, w którym ma być wyświetlany przyklejony nagłówek. Jako przykład amp wybrać kryterium „ cała witryna ”.

Teraz zechcesz 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 sprzątanie; teraz przechodzimy do zawiłości witryny, w tym dodania niestandardowego kodu CSS. Zademonstrujemy zarówno podstawy, jak i zaawansowane techniki uzyskiwania bezpłatnych lepkich efektów nagłówka dla Elementora. Jeśli używasz Elementora 2.9 lub nowszego, możesz użyć globalnych reguł stylu, aby włączyć ten CSS do swojej witryny.

Postępuj zgodnie z procedurami opisanymi poniżej, aby uwzględnić niestandardowy CSS:

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

Następnie wklej poniższy kod CSS.

header.sticky-header { --header-height: 90px; --przezroczystość: 0,90; --skróć-me: 0,80; --przyklejony-kolor-tła: #0e41e5; --przejście: .3 s rozluźnienie; przejście: kolor tła var(--transition), obraz tła var(--transition), filtr tła var(--transition), krycie var(--transition); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) !ważne; obraz w tle: brak !ważne; nieprzezroczystość: var(--nieprzezroczystość) !ważne; -webkit-backdrop-filter: rozmycie (10px); filtr tła: rozmycie (10px); } header.sticky-header > .elementor-container { przejście: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!important; height: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { przejście: dopełnienie var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-top: 10px!ważne; } header.sticky-header > .elementor-container .logo img { przejście: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); } 

Krok 5: dostosuj nasz CSS

Wymienione powyżej instrukcje poprowadzą Cię przez proces tworzenia malejącego lepkiego nagłówka w Elementorze. Jeśli chcesz dowiedzieć się więcej o tym, jak dalej spersonalizować nagłówek, możesz spojrzeć na poniższy kod CSS, który pozwoli Ci być bardziej kreatywnym przy projektowaniu nagłówka. W zależności od potrzeb możesz spersonalizować lepki nagłówek Elementora, zmieniając liczne ustawienia i czyniąc go mniej lub bardziej lepkim. Zalecamy użycie edytora kodu, aby wprowadzić tę zmianę 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. Te edytory są bezpłatne i można do nich uzyskać 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 wprowadzisz tylko jedną zmianę 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 na pięć różnych sposobów. Nie wszystkie zmienne muszą być dostosowane, ale możesz to zrobić, jeśli chcesz. Jak tylko 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.

Kolor tła przyklejonego to #0e41e5, a wysokość nagłówka to 90px. Inne opcje stylizacji obejmują: nieprzezroczystość 0,90, zmniejszenie temp. 0,80, nieprzezroczystość 0,90 oraz przejście między wchodzeniem a luzowaniem 300 ms.

Właściwości niestandardowe są elementy, które pojawiają się po podwójnym kreską „-” w naszym ex amp kodu le, i można je znaleźć na liście w górnej części naszej s amp le kodu. Wystarczy dostosować wartość, która pojawia się po dwukropku i przed średnikiem w zdaniu.

Dla ex amp le, jeśli chcesz zwiększyć wysokość nagłówka do 100px, oto jak to będzie 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ć lepkie menu nagłówka na kilka różnych sposobów. Możesz nie tylko skonstruować darmowy lepki nagłówek Elementora, ale także spersonalizować nagłówek, dodając do niego niestandardowy CSS. Możliwe jest uzyskanie szczegółowych wskazówek, jak skonstruować zmniejszający się lepki nagłówek Elementora za pomocą Elementora i dostosować CSS za pomocą tego przewodnika krok po kroku.

Elementor zawiera różne szablony nagłówków; każdy jest wyraźny i elegancki i pomaga widzom w poruszaniu się po witrynie.

Dzięki Elementorowi masz pełną kontrolę nad stylem nagłówków swojej witryny. Dla ex amp le, można umieścić logo serwisu w środku strony i głównego menu poniżej. 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 ex amp les z licznych opcji projektowych nagłówek dostępnych dla użytkowników Elementor.

Wniosek

Umieszczenie przyklejonego nagłówka w witrynie może ułatwić odwiedzającym przechodzenie przez witrynę i zwiększyć liczbę kliknięć we wszystkich obszarach witryny.

Elementor eliminuje potrzebę ręcznego generowania przyklejonych nagłówków za pomocą JavaScript i CSS, co było wcześniej wymagane. Tworzenie lepkiego nagłówka dla Twojej witryny nigdy nie było prostsze niż teraz, dzięki lepkim nagłówkom Elementor.