Podczas tworzenia globalnego nagłówka należy wziąć pod uwagę wiele rzeczy. Elementy, które umieścisz w nagłówku, powinny ci pomóc odwiedzający łatwo nawigować. Aby skrócić czas, jaki ludzie spędzają na przeglądaniu, wielu projektantów stron internetowych decyduje się na stały górny nagłówek, który pozwala odwiedzający aby natychmiast uzyskać dostęp do innych stron lub publikacji. Jest to naprawdę przydatne, ale podczas tworzenia stałego nagłówka zajmuje większą część wysokości rzutni odwiedzający jest zajęty, co pozwala na mniej niż treść wyświetlić od razu. Jeśli nie jesteś gotowy na takie poświęcenie, wiedz, że nie musisz. Możesz czerpać korzyści ze stałego nagłówka, pozwalając, aby ogólny nagłówek był widoczny, gdy odwiedzający przewijają w górę i ukrywał go, gdy przewijają w dół. Dzisiaj poprowadzimy Cię przez ukrywanie i ujawnianie globalnego nagłówka za pomocą narzędzia do tworzenia motywów Divi.

badanie

Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.

1. Przejdź do Divi Theme Builder i dodaj nowy szablon

Zacznij od przejścia do Kreatora motywów Divi.

Zacznij tworzyć globalny nagłówek

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

2. Rozpocznij tworzenie globalnego nagłówka

Ustawienia sekcji

Kolor tła

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

• Kolor tła: #ffffff

zaklejania

Przejdź do zakładki projektowania i przypisz 100% szerokości do następnej sekcji.

• Szerokość: 100%

rozstaw

Dodaj także niestandardowe górne i dolne wypełnienie.

• Górna wyściółka: 2vw
• Wyściółka u dołu: 2vw

Pole cienia

Zastosujemy również subtelny odcień do naszej sekcji.

• Pole Shadow Blur Strength: 50px
• Kolor cienia: rgba (0,0,0,0,08)

Identyfikator CSS

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

• CSS ID: globalna sekcja nagłówka

Główny element

Uczynimy również sekcję stałym nagłówkiem, dodając dwie linie kodu CSS do głównego elementu sekcji.

position: fixed;top: 0;

Indeks Z

Teraz, aby upewnić się, że nasza sekcja pojawi się na górze strony lub treść posta, zwiększymy także indeks Z w ustawieniach widoczności.

• Indeks Z: 99999

Dodaj nową linię

Struktura kolumny

Po zakończeniu wszystkich parametrów sekcji kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:

zaklejania

Nie dodając jeszcze modułu, otwórz ustawienia wiersza i pozwól, aby rząd zajmował 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ń także wszystkie domyślne górne i dolne wypełnienie.

• Górna wyściółka: 0px
• Dolne wypełnienie: 0px

Główny element

wyśrodkuj to treść kolumny i pozwól kolumnom pozostać obok siebie na mniejszych ekranach, dodając dwie linie 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 śledzenia mediów społecznościowych w kolumnie 1. Dodaj sieci społecznościowe, które chcesz pokazać.

Zresetuj poszczególne style mediów społecznościowych

Kontynuuj, resetując style każdej sieci społecznościowej do indywidualnego poziomu.

Dodaj indywidualną przestrzeń sieci społecznościowej

Będziesz także musiał otworzyć ustawienia dla każdej sieci społecznościowej indywidualnie i dodać dolne wypełnienie w ustawieniach odstępów.

• Wyściółka u dołu: 0.5vw

wyrównanie

Po indywidualnym dodaniu dolnego wypełnienia do każdej sieci społecznościowej wróć do ogólnych ustawień swojego moda. Przejdź do karty projektu i zmień wyrównanie modułu.

• Wyrównanie modułu: centrum

Domyślne ustawienia ikon

Zmień także kolor ikony w ustawieniach ikony.

• Kolor ikony: # 000000

Ustawienia ikony najechania kursorem

I zmień kolor ikony najechania.

• Kolor ikony: # c2ab92

granica

Uzupełnij parametry modułu, dodając dolną ramkę w parametrach ramki.

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

Dodaj moduł menu do kolumny 2

Wybierz menu

Przejdźmy do następnej kolumny! Dodaj moduł menu i wybierz żądane menu.

Pobierz logo

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

Usuń kolor tła

I usuń kolor tła.

Usposobienie

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

• Styl: wyśrodkowany
• Kierunek menu rozwijanego: w dół

Domyślny tekst menu

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

• Kolor aktywnego linku: # c2ab92
• Czcionka menu: Cormorant Garamond
• Kolor tekstu: # 000000
• Rozmiar tekstu menu: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)

Wskaż tekst menu

Zmień tekst menu po najechaniu myszą.

• Kolor tekstu menu: # c2ab92

Rozwijane menu

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 ikony.

• Kolor ikony menu hamburgera: # 000000

zaklejania

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

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

Menu linku CSS

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ę

Przejdźmy do ostatniego modułu! Tam jedynym modułem, którego potrzebujemy, jest moduł tekstowy.

Dodaj link

Ten moduł będzie służył jako CTA. Dodaj wybrane łącze.

• Adres URL linku do modułu: #

Domyślne ustawienia tekstu

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

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

Wskaż ustawienia tekstu

Zmień kolor tekstu po najechaniu myszą.

• Kolor tekstu: # c2ab92

zaklejania

Kontynuuj, zmieniając parametry rozmiaru modułu na różnych rozmiarach ekranu.

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

rozstaw

I dodaj trochę dolnego wypełnienia w ustawieniach odstępów.

• Wyściółka u dołu: 0.5vw

granica

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

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

Dodaj moduł kodu do kolumny 2

Wstaw kod JQuery i CSS

Po stylizowaniu wszystkich modów w rzędzie nadszedł czas, aby uzyskać efekt ujawnienia / ukrycia. Aby to zrobić, będziemy musieli 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 moduły. którego używasz, po prostu upewnij się, że dodałeś identyfikator CSS do swojej sekcji. Umieść kod JQuery między tagami skryptu, a kod CSS między tagami stylów, jak pokazano na poniższym ekranie drukowania.

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

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

3. Zapisz zmiany generatora i wyświetl wynik

Po wypełnieniu globalnego nagłówka zapisz wszystkie zmiany i wyświetl wynik na swoim Witryna internetowa!

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

końcowe przemyślenia

W tym artykule pokazaliśmy, jak wyświetlić nagłówek globalny podczas przewijania w górę i ukryć go podczas przewijania w dół. Jest to popularny i skuteczny sposób, aby pomóc odwiedzającym w łatwej nawigacji bez zajmowania części wysokości okna. Możesz także pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.