Jak stworzyć lepkie menu i nagłówek za pomocą Elementora

Wielu naszych czytelników często pyta nas: „Jak stworzyć lepkie menu i nagłówek za pomocą Elementora”. Aby odpowiedzieć na to zapytanie, pomyśleliśmy, dlaczego nie napiszemy artykułu wyjaśniającego cały proces tworzenia lepkiego menu i nagłówka za pomocą Elementora. Mając tę ​​myśl, tworzymy podsumowanie tego, jak utworzyć lepkie menu i nagłówek za pomocą Elementora.

Na początek Elementor to narzędzie w WordPress. Jest to jeden z najbardziej znanych i łatwych w użyciu kreatorów stron, który pomaga z łatwością tworzyć i projektować witryny WordPress. Możesz być w pełni kreatywny, jeśli chodzi o używanie Elementora jako narzędzia do dostosowywania swojej witryny. Przyklejony nagłówek i menu odnoszą się do funkcji na stronie internetowej. Podczas poruszania się po witrynie internetowej z urządzenia mobilnego lub komputera PC przewijanie rozpoczyna się, gdy nagłówek znajduje się u góry strony. Jednak gdy zaczniesz przewijać w dół, nagłówek kurczy się i przykleja na górze strony w nieco innym formacie.

Niesamowitość tej funkcji polega na tym, że Twoja witryna wygląda super fajnie. Ponieważ możesz być kreatywny w wyglądzie nagłówka, gdy odwiedzający zaczyna przewijać witrynę, daje to wiele nowych możliwości do odkrycia. Ta funkcja może być uważana za unikalny dodatek do Twojej witryny. W tym opisie pokażemy krok po kroku, jak utworzyć lepkie menu i nagłówek za pomocą Elementora.

Wcześniej zakładamy, że znasz WordPressa i Elementora. Masz już działającą witrynę WordPress, która jest zgodna z Elementorem. Dodatkowo zakładamy, że masz już wstawione podstawowe elementy i logo w menu nagłówka. Teraz, gdy przygotowaliśmy scenę, przejdziemy do szczegółów, w jaki sposób możesz łatwo tworzyć lepkie nagłówki Elementora za pomocą Elementora.

Przewodnik krok po kroku dotyczący tworzenia kurczącego się nagłówka za pomocą Elementora

Jeśli ustawiłeś swój zwykły nagłówek w motywie WordPress, przyjrzymy się szczegółom, jak zmniejszyć ten przyklejony nagłówek Elementora. Aby mieć działający zmniejszający się lepki nagłówek Elementora, musisz dostosować niestandardowy CSS swojej witryny. Nie martw się, wspieramy Cię, ponieważ ujawnimy dokładny kod, którego potrzebujesz, aby uzyskać ten lepki efekt nagłówka dla Elementora.

Krok 1: Edytuj szablon nagłówka w Elementorze

Pierwszym krokiem jest edycja nagłówka za pomocą kreatora motywów Elementor. Proszę wykonać następujące kroki:

• Zaloguj się do panelu administracyjnego WordPress.
• Z menu po lewej stronie przejdź do „Szablony” >> „Konstruktor motywów” .
• Kliknij opcję „Edytuj za pomocą Elementora” , aby rozpocząć edycję nagłówka Elementora.
  
  

Krok 2: Pobierz swój CSS na torze

W tym kroku musisz zająć się podstawowym porządkiem ustawień CSS. Podstawowe sprzątanie zapewni, że Twój nagłówek będzie działał z kodem CSS, który umieścisz w następnym kroku. Proszę postępować zgodnie z wymienionymi krokami:

• Otwórz ustawienia z sekcji Nagłówek
• Na karcie Układ upewnij się, że jako nagłówek wybrano menu rozwijane Tag HTML
  

• Przejdź do zakładki Układ .
• Upewnij się, że minimalna wysokość nagłówka wynosi 90 pikseli. Rozmiar można później zmienić, ale dla łatwiejszego zrozumienia zacznij od 90px.
  
  
  

• Przejdź do zakładki Zaawansowane i wybierz sticky-header dla sekcji Header.
  
  

• Następnie musisz otworzyć widżet obrazu zawierający Twoje logo i przejść do zakładki Zaawansowane .
• W tej sekcji ustaw pole Klasy CSS obrazu na obrazy logo.
  
  
  

Krok 3: Ustaw efekty ruchu, aby utworzyć przyklejony nagłówek Elementora

Aby aktywować lepki nagłówek Elementor, możesz skorzystać z funkcji Motion Effects Elementora. Aby to zrobić, wykonaj następujące czynności:

• Otwórz ustawienia sekcji nagłówka.
• Przejdź do zakładki Zaawansowane .
• Otwórz Ustawienia efektów ruchu .
• Ustaw listę rozwijaną Sticky na Top.
• Upewnij się, że Sticky On Box zawiera tylko pulpit. Inne urządzenia należy usunąć,
• Przesunięcie efektów powinno być ustawione na 90.
  
  

4. Krok 4: Dodaj niestandardowy CSS:

Tak jak skończyliśmy z porządkiem, teraz możemy przejść do szczegółów i dodać niestandardowy kod CSS do strony internetowej. Pokażemy zarówno podstawowe, jak i zaawansowane sposoby uzyskiwania lepkich efektów nagłówka dla Elementora za darmo. Jeśli używasz Elementora 2.9 i nowszych, możesz użyć globalnych reguł stylu, aby dodać ten CSS.

Aby dodać niestandardowy CSS, wykonaj poniższe czynności:

• Kliknij ikonę menu hamburgera znajdującą się w lewym górnym rogu menu Elementor.
• Przejdź do opcji Wybierz style motywu poniżej sekcji Styl globalny .
• Z tej sekcji wybierz Wybierz niestandardowy CSS (kolor zmieni się na niebieski z poprzedniego genetycznego czerwonego koloru).
• Następnie dodaj następujący kod CSS .
  

 header.sticky-header { --header-height: 90px; --opacity: 0.90; --shrink-me: 0.80; --sticky-background-color: #0e41e5; --transition: .3s ease-in-out; transition: background-color var(--transition), background-image var(--transition), backdrop-filter var(--transition), opacity var(--transition); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) !important; background-image: none !important; opacity: var(--opacity) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } header.sticky-header > .elementor-container { transition: 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 { transition: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-top: 10px!important; } header.sticky-header > .elementor-container .logo img { transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); } 

Jeśli Twój Elementor nie jest w wersji 2.9, będziesz musiał uzyskać dostęp do ustawień sekcji nagłówka, przejdź do Zaawansowane >> Niestandardowy CSS .

Krok 5: Dostosuj CSS

Wyżej wymienione kroki pomogą Ci utworzyć kurczący się lepki nagłówek w Elementorze. Jeśli chcesz dowiedzieć się więcej o tym, jak jeszcze bardziej dostosować nagłówek, możesz spojrzeć na poniższy kod CSS, aby być bardziej kreatywnym z nagłówkiem. Możesz zmienić wiele zmiennych nagłówka i dostosować lepki nagłówek Elementora zgodnie z wymaganiami. Aby umieścić tę edycję CSS bezpośrednio w Elementorze, zasugerujemy użycie edytora kodu. Możesz użyć Visual Studio Code lub Atom, które pomogą Ci łatwo umieścić kod i czerpać z niego korzyści. Te edytory nie są płatne, możesz ich używać z różnych platform, takich jak Windows, macOS i Linux.

Poniżej zilustrujemy, w jaki sposób możesz użyć CSS do dostosowania efektów zmniejszania nagłówka Elementora. Jeśli właściwość niestandardowa jest edytowana raz, zostanie automatycznie zaktualizowana, aby dopasować cały kod CSS.

Kurczący się nagłówek można dostosować za pomocą łącznie pięciu zmiennych. Nie musisz dostosowywać wszystkich zmiennych, ale masz taką możliwość. Gdy już zdecydujesz, które zmienne chcesz dostosować, możesz tylko je dostosować, a pozostałe zachować bez zmian. Poniżej podamy przykład zmiennych, które możesz dostosować i jak to zrobić.

Oto pięć zmiennych CSS, pokazuje domyślną wartość zmiennych.

• –header-height: 90px;
• –nieprzezroczystość: 0,90;
• –skurcz-me: 0,80;
• –przyklejony-kolor-tła: #0e41e5;
• –przejście: 300ms luzu;

Zobaczysz je wymienione na górze naszego przykładowego kodu – właściwości niestandardowe to elementy, które występują po podwójnej myślniku „–”. Wszystko, co musisz zrobić, to zaktualizować wartość po dwukropku i przed średnikiem.

Na przykład, jeśli chcesz zmienić wysokość nagłówka na 100px, oto jak by to wyglądało przed i po:

• Przed: –header-height: 90px;
• Po: –header-height: 100px;

Oto sposoby tworzenia lepkiego menu nagłówka za pomocą Elementora. Możesz nie tylko utworzyć lepki nagłówek Elementora za darmo, ale także dostosować nagłówek za pomocą niestandardowego CSS. Dzięki temu przewodnikowi krok po kroku możesz uzyskać jasne instrukcje dotyczące tworzenia kurczącego się lepkiego nagłówka Elementora za pomocą Elementora i dostosowywania CSS.

Zanim zakończymy, chcielibyśmy omówić znaczenie używania kurczącego się lepkiego nagłówka.

Korzyści z używania kurczącego się nagłówka samoprzylepnego

Ukojenie oczu

Posiadanie kurczącego się lepkiego nagłówka Elementora zapewni więcej miejsca na wyświetlanie treści. Mając więcej miejsca na wyświetlanie treści, czytelnik będzie kojąco nawigował po witrynie. Gdy nagłówek się kurczy, daje więcej miejsca na wyświetlanie treści czytelnikom. Dodatkowo, jeśli wybierzesz odpowiedni kolor, będzie to uczta dla oczu odwiedzającego witrynę.

Dostęp do menu nawigacyjnego

Gdy masz cały czas przyklejony nagłówek u góry strony, ułatwia to czytelnikowi poruszanie się po elementach na pasku menu. Jeśli czytelnik przeczytał wystarczającą ilość treści i planuje przejść na inną stronę Twojej witryny, posiadanie lepkiego menu na górze strony ułatwi mu łatwe nawigowanie do różnych stron. Nie będą musieli przewijać do końca, a następnie przechodzić na różne strony.

Obecność logo

Jeśli zachowasz przyklejony nagłówek na swojej stronie, Twoje logo będzie widoczne przez cały czas. Możesz zmniejszyć rozmiar logo, aby było gotowe do siatkówki, jednak obecność logo podczas nawigowania po stronie jest bardzo ważna. Na przykład czytelnik lubi treść i robi zrzut ekranu z treścią. Jeśli twoje lepkie menu ma logo, zapiszą zrzut ekranu z logo. Jeśli udostępnią zrzut ekranu w innym miejscu, nadal będzie on zawierał Twoje logo.

Widzieć i czuć

Przyciągający wzrok i starannie zaprojektowany zmniejszający się nagłówek Elementora nada Twojej witrynie inny wygląd. Jeśli myślisz o wprowadzeniu wyjątkowego charakteru do witryny za pomocą zmniejszającego się nagłówka i przyklejonego menu, możesz to łatwo zrobić. Pokazuje ilość pracy, którą włożyłeś za prostym nagłówkiem i pozostawia dobre wrażenie w umyśle czytelnika.

Oto sposoby tworzenia lepkiego menu i nagłówka za pomocą Elementora. Mamy nadzieję, że był to prosty przewodnik krok po kroku, pokazujący proces dodawania kurczącego się lepkiego nagłówka w Elementorze.

Jeśli spodobał Ci się ten artykuł, zapraszam do zapoznania się z naszym blogiem.