Czy chcesz utworzyć nagłówek, który będzie się zmniejszał, gdy strona się ładuje? ? Gdy odwiedzający przewija stronę w dół, zmniejszający się nagłówek będzie miłym efektem, który zaimponuje odwiedzającemu. Nawet jeśli nie planujesz używać tego efektu, warto zastanowić się, czy byłby dobrym dodatkiem do Twojej witryny.
Tutaj nauczymy Cię dokładnie, jak wykorzystać Elementor Pro do zmniejszenia nagłówka witryny WordPress. Za pomocą niestandardowego kodu CSS pokażemy Ci dokładnie, co musisz zrobić, aby wykonać zadanie.
Co to jest kurczący się nagłówek?
Zmniejszający się nagłówek to dokładnie ten sam nagłówek, który widzisz, gdy pojawia się strona internetowa, ale staje się nieco mniejszy, gdy zaczynasz przewijać. Na początek istnieje standardowy górny nagłówek. Nagłówek „zmniejszy się”, gdy użytkownik przewinie stronę w dół, a Ty możesz dostosować, jak bardzo się kurczy i jaka jest przezroczystość.
Chociaż staje się mniejszy, nagłówek nadal tam jest, gdy przewijasz stronę w dół. Istnieją różne opcje, takie jak całkowite zakopanie nagłówka i ujawnienie go tylko wtedy, gdy użytkownik przewinie z powrotem w górę.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć terazZalety kurczącego się nagłówka
Jeśli użyjesz zmniejszającego się nagłówka, będziesz mieć więcej miejsca na samą treść. Konkurencja o uwagę z pełnego nagłówka jest mniejsza, co oznacza, że możesz skupić się na głównej treści.
Jeśli całkowicie ukryjesz nagłówek, gdy użytkownik przewinie w dół, nie będziesz w stanie zapewnić użytkownikom dostępu do całego menu nawigacyjnego przez cały czas.
W pewnym stopniu daje to dodatkowe miejsce na zawartość, jednocześnie umożliwiając wyświetlanie pełnego menu. Co więcej, ten efekt jest estetyczny i dodaje trochę dodatkowej wizualnej słodyczy odwiedzającym Twoją witrynę podczas jej przeglądania.
Jak stworzyć kurczący się nagłówek
Kiedy masz gotowy nagłówek, możesz iść. Reszta postu poprowadzi Cię do jego zmniejszenia. Będziesz korzystać z wielu niestandardowych CSS. Podamy Ci jednak potrzebny kod i pokażemy, jak go zmienić, aby pasował do Twojej witryny.
Edytuj za pomocą Elementora
Aby rozpocząć, edytuj szablon nagłówka za pomocą Elementor Theme Builder.
Aby edytować szablon nagłówka za pomocą Elementora, przejdź do Kreatora motywów szablonów na pulpicie nawigacyjnym WordPress i wybierz Edytuj za pomocą Elementora.
Podstawowe sprzątanie CSS
Przed zastosowaniem kodu CSS, który zobaczysz w następnych sekcjach, musisz nieco wyczyścić nagłówek.
Pierwszym krokiem jest uzyskanie dostępu do ustawień sekcji nagłówka. Ustaw menu rozwijane Tag HTML na nagłówek na karcie Układ.
Nie powinno być minimalnej wysokości, a wyrównanie w pionie powinno być ustawione na środku w zakładce układu.
Przejdź do zakładki Zaawansowane i zmień klasę CSS sekcji nagłówka na stick-header.
Na koniec otwórz widżet obrazu zawierający Twoje logo i wybierz opcję Zaawansowane z menu rozwijanego. Następnie w obszarze Klasy CSS obrazu logo wpisz logo:
Efekty ruchu, które sprawią, że Twój nagłówek się przyklei
Funkcjonalność Motion Effects Elementora może być używana do utrzymywania nagłówka u góry strony, podczas gdy widzowie przewijają w dół.
Możesz uzyskać dostęp do ustawień nagłówka sekcji, klikając je. Następnie kliknij stronę Zaawansowane i sprawdź opcje efektów ruchu
- Załóżmy, że Top jest wybrany w obszarze Sticky w menu rozwijanym.
- Usuń wszystkie inne urządzenia, które nie są wymienione w polu „Sticky On”.
- Przesunięcie efektów powinno być ustawione na 90 (wysokość nagłówka).
niestandardowe CSS
Ostatnim krokiem przed zakończeniem jest dodanie niestandardowego kodu CSS. Oto podstawowy kod, którego będziesz używać. Omówimy, jak to dostosować w następnych sekcjach:
Poniższy kod CSS:
- Aby uzyskać dostęp do menu hamburgerów, przejdź do lewego górnego rogu interfejsu Elementor i kliknij go.
- Styl motywu można wybrać z menu rozwijanego Styl globalny.
- Wybierz niestandardowy CSS (po otwarciu interfejsu stylu motywu będzie on niebieski zamiast „zwykłego” elementu lub czerwonego)
/***
* class: .sticky-header
*/
header.sticky-header {
--header-height: 100px;
--shrink-header-to: 0.6;
--transition: .45s cubic-bezier(.4, 0, .2, 1);
background-color: rgba(244, 245, 248, 1);
transition: background-color var(--transition),
backdrop-filter var(--transition),
box-shadow var(--transition);
}
/***
* Sticky header activated
*/
header.sticky-header.elementor-sticky--effects {
background-color: rgba(244, 245, 248, .8);
box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
header.sticky-header > .elementor-container {
min-height: var(--header-height);
transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc( var(--header-height) * var(--shrink-header-to) );
}
/***
* Shorter header on mobile (70px instead of 100px)
*/
@media only screen and (max-width: 767px) {
header.sticky-header {
--header-height: 70px;
}
}
/***
* class: .logo
*/
header.sticky-header .logo img {
transition: transform var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
transform: scale(.8);
}
Dostosuj CSS
Ten CSS może być dostosowany do Twoich konkretnych potrzeb, więc przejdźmy teraz do tego, jak to zrobić. Korzystanie z edytora kodu, takiego jak Visual Studio Code lub Atom, jest zalecane zamiast edytowania CSS bezpośrednio w interfejsie Elementor. Użytkownicy systemów Windows, Mac i Linux mogą korzystać z tych edytorów typu open source.
Naszym wyborem będą niestandardowe właściwości CSS (lub zmienne CSS). Te elementy sterujące umożliwiają precyzyjne dostrojenie zmniejszającego się efektu nagłówka. Jeśli wprowadzisz pojedynczą zmianę we właściwości niestandardowej, cały kod CSS zostanie zaktualizowany, aby odzwierciedlić tę zmianę.
W sumie istnieje pięć czynników, które można dostosować. Nie musisz ich nawet zmieniać, jeśli nie chcesz –, po prostu zachowaj je tak, jak są, jeśli podoba Ci się sposób, w jaki działają!
Aby Ci pomóc, poniżej zamieściliśmy pięć zmiennych CSS i ich wartości domyślne:
- –wysokość nagłówka: 90px;
- –przezroczystość: 0,90;
- –skurcz-nagłówek-do: 0,80;
- –lepki kolor tła: #0e41e5;
- –transition: 300ms złagodzenie;
Jeśli spojrzysz na nasz przykładowy kod, zauważysz, że umieściliśmy kilka niestandardowych właściwości zamiast podwójnej myślnika „–”. Po dwukropku, a przed średnikiem, wystarczy zrobić małą edycję.
Zmiana wysokości nagłówka na przykład na 100px wyglądałaby tak przed i po:
- Przed : –header-height: 90px;
- Po : –header-height: 100px;
Zacznijmy od tych zmiennych.
Lepki kolor tła (--sticky-background-color)
Kolor tła „skurczonego” nagłówka, który jest wyświetlany, gdy odwiedzający przewijają w dół, jest kontrolowany przez właściwość Przyklejony kolor tła. Zmiana koloru nie musi pasować do koloru nagłówka, jeśli nie jest to to, co wolisz.
Na przykład w szablonie Digital Agency tło nagłówka ma początkowo gradient. Kolor nagłówka zmienia się na jednolity niebieski, gdy odwiedzający przewijają w dół, a nagłówek staje się mniejszy (możesz to zobaczyć w przykładowym filmie od początku).
Wysokość nagłówka (--nagłówek-wysokość)
W Elementorze atrybut Header Height określa wysokość nagłówka - musi on odpowiadać wysokości sekcji nagłówka. Ustawienie tego na 90px było miłym punktem początkowym w instrukcji.
Jeśli jednak zdecydujesz się zmienić wysokość, pamiętaj, aby zrobić to we właściwości CSS oraz w ustawieniach sekcji nagłówka.
Aby uniknąć problemów z efektem zmniejszania, nie zalecamy wysokości nagłówka większej niż 100 pikseli.
Nieprzezroczystość (--nieprzezroczystość)
Stopień przezroczystości malejącego nagłówka jest kontrolowany przez właściwość Opacity:
- 0 oznacza, że nagłówek będzie niewidoczny.
- 1 oznacza, że w ogóle nie będzie widocznego nagłówka (brak przezroczystości)
W naszym przykładowym kodzie krycie jest ustawione na 0.9, co czyni go prawie całkowicie nieprzezroczystym. Numer ten można zmienić zgodnie z własnymi wymaganiami. Zmniejsz wartość do zera, aby było bardziej oczywiste.
Zmniejsz nagłówek do (--shrink-header-to)
Gdy odwiedzający zacznie przewijać w dół, atrybut Zmniejsz mnie określa, jak bardzo zmniejszy się nagłówek i logo. Oznacza to, że nagłówek i logo zmniejszą się na przykład do 80% ich początkowego rozmiaru.
Przejście (--przejście)
Jeśli atrybut przejścia jest ustawiony na „skurczony”, nagłówek zmniejszy się z oryginalnego rozmiaru do tej wartości.
Najlepiej zostawić coś bez zmian, ale w razie potrzeby możesz to zmienić.
Tak więc zaktualizowany CSS dla kurczącego się nagłówka będzie -
header.sticky-header {
--header-height: 100px; /* Set your own header height */
--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
background-color: rgba(244, 245, 248, 1); /* Set your own background color */
transition: background-color var(--transition-timing),
backdrop-filter var(--transition-timing),
box-shadow var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects {
background-color: rgba(244, 245, 248, .8); /* Set your own background color on scroll */
box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07); /* Delete this line if you don't want shadow on scroll */
-webkit-backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
}
header.sticky-header > .elementor-container {
min-height: var(--header-height);
transition: min-height var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc( var(--header-height) * var(--shrink-header-to) );
}
/***
* class: .logo
* Add the class "logo" to your logo to scale your logo to 80% on scroll
*/
header.sticky-header .logo img,
header.sticky-header .logo.elementor-widget-theme-site-logo img,
header.sticky-header .logo .elementor-icon svg {
transition: transform var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects .logo img,
header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img,
header.sticky-header.elementor-sticky--effects .logo .elementor-icon svg {
transform: scale(.80); /* Shrinks logo to 80%, values: 0.10 to 1 */
}
header.sticky-header .logo .elementor-icon svg {
width: auto;
}Końcowe myśli
Praca z Elementorem jest bardzo łatwa, ponieważ stał się jednym z najbardziej poszukiwanych kreatorów stron dla wielu twórców stron internetowych na całym świecie. Posiadanie takiego interaktywnego projektu przyciągnie więcej odwiedzających do Twojej witryny. Jeśli masz jakieś pytania, nie wahaj się ich zapytać. Na naszej stronie mamy ogromną liczbę samouczków Elementora , sprawdź je i daj nam znać, co powinniśmy omówić dalej.
