Jak odsłonić swój globalny nagłówek podczas przewijania w górę i ukrywania podczas przewijania w dół za pomocą Divi

Kiedy tworzysz swój globalny nagłówek, musisz wziąć pod uwagę wiele rzeczy. Elementy, które umieszczasz w nagłówku, muszą ułatwiać odwiedzającym nawigację. Aby skrócić czas, jaki ludzie spędzają na nawigowaniu, wielu projektantów stron internetowych wybiera stały górny nagłówek, który umożliwia odwiedzającym natychmiastowe przejście do innych stron lub postów. To naprawdę wygodne, ale przy tworzeniu stałego nagłówka zajmowana jest duża część wysokości widocznego obszaru użytkownika, dzięki czemu mniej treści jest wyświetlane na raz. Jeśli nie chcesz tego poświęcić, wiedz, że nie musisz. Możesz czerpać korzyści ze stałego nagłówka, pozwalając globalnemu nagłówkowi ujawniać, kiedy użytkownicy przewijają w górę, i ukrywać go, gdy przewijają w dół. Dzisiaj poprowadzimy Cię przez ukrywanie i ujawnianie globalnego nagłówka za pomocą Kreatora motywów Divi. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon globalnego nagłówka ZA DARMO

Aby położyć swoje ręce na darmowym szablonie globalnego nagłówka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Przejdź do kreatora motywów Divi i dodaj nowy szablon

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder.

Zacznij budować globalny nagłówek

Tam kliknij „Dodaj globalny nagłówek” i wybierz „Zbuduj globalny nagłówek”.

2. Zacznij budować globalny nagłówek

Ustawienia sekcji

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i zmień jej kolor tła.

• Kolor tła: #ffffff

Rozmiary

Przejdź do zakładki projektu i przypisz do sekcji szerokość 100%.

• Szerokość: 100%

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 2vw
• Dolna wyściółka: 2vw

Cień Pudełka

Do naszej sekcji również zastosujemy subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba (0,0,0,0,08)

Identyfikator CSS

W dalszej części tego samouczka będziemy potrzebować niestandardowego kodu, aby wywołać efekt przewijania. Aby się na to przygotować, dodajemy do sekcji identyfikator CSS.

• Identyfikator CSS: global-header-section

Główny element

Przekształcimy również sekcję w stałą nagłówek, dodając dwie linie kodu CSS do głównego elementu sekcji.

position: fixed;
top: 0;

Indeks Z

Teraz, aby upewnić się, że nasza sekcja pojawia się na górze całej zawartości strony lub posta, zwiększymy również indeks z w ustawieniach widoczności.

• Indeks Z: 99999

Dodaj nowy wiersz

Struktura kolumny

Po wprowadzeniu wszystkich ustawień sekcji kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość ekranu.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Usuń również wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Główny element

Wyśrodkuj zawartość kolumny i pozwól kolumnom pozostać obok siebie na mniejszych rozmiarach ekranu, dodając dwa wiersze kodu CSS do głównego elementu wiersza.

display: flex;
align-items: center;

Dodaj moduł śledzenia mediów społecznościowych do kolumny 2

Dodaj sieci społecznościowe

Czas dodać moduły, zaczynając od modułu Social Media Follow w kolumnie 1. Dodaj sieci społecznościowe, które chcesz pokazać.

Zresetuj indywidualne style sieci społecznościowych

Kontynuuj, resetując style każdej sieci społecznościowej na indywidualnym poziomie.

Dodaj indywidualne odstępy w sieciach społecznościowych

Musisz również otworzyć ustawienia każdej sieci społecznościowej indywidualnie i dodać dolną wyściółkę w ustawieniach odstępów.

• Dolna wyściółka: 0,5vw

Wyrównanie

Po dodaniu dolnego wypełnienia do każdej sieci społecznościowej z osobna, wróć do ogólnych ustawień modułu. Przejdź do zakładki projektu i zmień wyrównanie modułu.

• Wyrównanie modułu: Środek

Domyślne ustawienia ikon

Zmień kolor ikony również w ustawieniach ikon.

• Kolor ikony: #000000

Ustawienia ikony najechania kursorem

I zmień kolor ikony po najechaniu myszą.

• Kolor ikony: #c2ab92

Granica

Uzupełnij ustawienia modułu, dodając dolne obramowanie w ustawieniach obramowania.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #000000

Dodaj moduł menu do kolumny 2

Wybierz menu

Do następnej kolumny! Dodaj moduł menu i wybierz wybrane menu.

Prześlij logo

Następnie prześlij logo do modułu.

Usuń kolor tła

I usuń kolor tła.

Układ

Następnie przejdź do karty projektu i upewnij się, że do układu odnoszą się następujące ustawienia:

• Styl: wyśrodkowany
• Menu rozwijane Kierunek: w dół

Domyślny tekst menu

Kontynuuj, zmieniając ustawienia tekstu menu w następujący sposób:

• Kolor aktywnego łącza: #c2ab92
• Czcionka menu: Kormoran Garamond
• Kolor tekstu: #000000
• Rozmiar tekstu w menu: 1vw (komputer), 2vw (tablet), 3vw (telefon)

Tekst menu podręcznego

Zmodyfikuj tekst menu po najechaniu myszą.

• Kolor tekstu menu: #c2ab92

Menu rozwijane

Następnie zmień kolor linii menu rozwijanego w ustawieniach menu rozwijanego.

• Kolor linii menu rozwijanego: #000000

Ikony

Zmieniamy również kolor ikony menu hamburgera w ustawieniach ikon.

• Kolor ikony menu hamburgerów: #000000

Rozmiary

Kontynuuj, zmieniając maksymalną szerokość logo na różnych rozmiarach ekranu w ustawieniach rozmiaru.

• Maksymalna szerokość logo: 5vw (komputer stacjonarny), 10vw (tablet), 13vw (telefon)

Menu Link CSS

I uzupełnij ustawienia modułu, dodając dwie linie kodu CSS do linku menu modułu w zakładce Zaawansowane.

padding-bottom: 1vw;
border-bottom: 1px solid #000;

Dodaj moduł tekstowy do kolumny 3

Dodaj kopię

Do ostatniego modułu! Tam jedynym potrzebnym nam modułem jest moduł tekstowy.

Dodaj link

Ten moduł będzie służył jako CTA. Dodaj wybrany przez siebie link.

• Adres URL łącza modułu: #

Domyślne ustawienia tekstu

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Kormoran Garamond
• Kolor tekstu: #000000
• Rozmiar tekstu: 1vw (komputer), 2vw (tablet), 3vw (telefon)

Ustawienia tekstu najechania kursorem

Zmień kolor tekstu po najechaniu myszą.

• Kolor tekstu: #c2ab92

Rozmiary

Kontynuuj, zmieniając ustawienia rozmiaru modułu dla różnych rozmiarów ekranu.

• Szerokość: 12vw (komputer stacjonarny), 18vw (tablet), 22vw (telefon)
• Wyrównanie modułu: Środek

Rozstaw

I dodaj dolną wyściółkę w ustawieniach odstępów.

• Dolna wyściółka: 0,5vw

Granica

Uzupełnij ustawienia modułu, dodając dolną ramkę.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #000000

Dodaj moduł kodu do kolumny 2

Wstaw kod JQuery i CSS

Po nadawaniu stylów wszystkim modułom w rzędzie nadszedł czas, aby wywołać efekt odsłonięcia/ukrycia. Aby to zrobić, musimy dodać niestandardowy kod do modułu kodu, który umieścimy w kolumnie 2. Ten kod będzie działał w każdej dodanej sekcji, bez względu na to, jak zaprojektujesz nagłówek lub jakich modułów używasz, po prostu upewnij się, że dodałeś identyfikator CSS do swojej sekcji. Umieść kod JQuery pomiędzy tagami skryptu i kod CSS pomiędzy tagami stylu, jak pokazano na poniższym zrzucie ekranu.

jQuery(function($){
  
var topPosition = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});

#main-content{
margin-top: 7vw;
}

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. Zapisz zmiany Konstruktora i zobacz wyniki

Po wypełnieniu globalnego nagłówka zapisz wszystkie zmiany i wyświetl wynik na swojej stronie!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak sprawić, by globalny nagłówek pojawiał się podczas przewijania w górę i ukrywał się podczas przewijania w dół. Jest to popularny i skuteczny sposób na ułatwienie użytkownikom nawigacji bez zajmowania części wysokości widocznego obszaru. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.