Przejdź do głównej treści

Jak odsłonić nagłówek podczas przewijania w Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Podczas tworzenia globalnego nagłówka należy wziąć pod uwagę wiele rzeczy. Elementy umieszczone w nagłówku powinny ułatwić odwiedzającym nawigację. Aby skrócić czas przeglądania Internetu, wielu projektantów stron internetowych wybiera stały górny nagłówek, który umożliwia odwiedzającym natychmiastowy dostęp do innych stron lub publikacji. Jest to bardzo przydatne, ale podczas tworzenia stałego nagłówka znaczna część wysokości okna wyświetlania użytkowników jest zajęta, co pozwala wyświetlać mniej treści na czas. Jeśli nie jesteście gotowi na poświęcenie, wiedzcie, że nie musicie tego robić. Możesz skorzystać z zalet stałego nagłówka, pozwalając, aby ogólny nagłówek pokazywał, kiedy użytkownicy przewijają w górę, i ukrywał go, gdy przewijają w dół. Dzisiaj poprowadzimy Cię do ukrycia i ujawnienia globalnego nagłówka za pomocą Generatora motywów Divi.

badanie

Przed zanurzeniem się w samouczku, spójrzmy na wynik na różnych rozmiarach ekranu.

Menu animacji ujawniło divi

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

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

Kreator 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 tła.

  • Kolor tła: #ffffff
Ustawienie sesji Divi

zaklejania

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

  • Szerokość: 100%
Skonfiguruj szerokość

rozstaw

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

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

Pole cienia

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

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

Identyfikator CSS

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

  • Identyfikator CSS: globalna sekcja nagłówka
Dodaj klasy divi css

Główny element

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

position: fixed;top: 0;

Ustawienia Divi Sectoin

Indeks Z

Teraz, aby mieć pewność, że nasza sekcja pojawi się u góry strony lub treści publikacji, zwiększymy również indeks Z w ustawieniach widoczności.

  • Indeks Z: 99999
Konfiguracja Zindex

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:

Wybierz układ

zaklejania

Nie dodając na razie modułu, otwórz parametry linii i pozwól linii 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%
Konfiguracja modułu Divi Line

rozstaw

Usuń także wszystkie domyślne górne i dolne wypełnienie.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • Górna wyściółka: 0px
  • Dolne wypełnienie: 0px
odsłonić globalny nagłówek

Główny element

Wyśrodkuj zawartość kolumny i pozwól, aby kolumny pozostały obok siebie na mniejszych ekranach, dodając dwie linie kodu CSS do głównego elementu linii.

display: flex;align-items: center;

Dodaj kod elementu CSS Principal divi

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 wyświetlić.

Dodaj przycisk mediów społecznościowych

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

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

Zresetuj styl modułu Divi

Dodaj indywidualną przestrzeń sieci społecznościowej

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

  • Wyściółka u dołu: 0.5vw
Konfiguracja odstępów między modułami Divi

wyrównanie

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

  • Wyrównanie modułu: centrum
Moduł konfiguracji wyrównania Divi

Domyślne ustawienia ikon

Zmień także kolor ikony w ustawieniach ikony.

  • Kolor ikony: # 000000
Zmiana koloru divi

Ustaw ikonę ikony

I zmień kolor ikony po najechaniu myszą.

  • Kolor ikony: # c2ab92
Modyfikacja ikony po najechaniu kursorem

granica

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

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

Dodaj moduł menu do kolumny 2

Wybierz menu

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

Zdefiniuj zawartość modułu Divi menu

Pobierz logo

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

Wybierz logo formy Divi

Usuń kolor tła

I usuń kolor tła.

Usuń element div koloru tła

Usposobienie

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

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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

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)
Łącza konfiguracyjne moduł menu divi

Wskaż tekst menu

Zmień tekst menu po najechaniu myszą.

  • Kolor tekstu menu: # c2ab92
Ustawienie koloru menu Divi

Rozwijane menu

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

  • Kolor linii menu rozwijanego: # 000000
Konfiguracja kolorów modułu menu Divi

ikony

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

  • Kolor ikony menu Hamburger: # 000000
Konfiguracja ikony menu Divi

zaklejania

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

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

Menu linku CSS

I uzupełnij parametry modułu, dodając dwa wiersze kodu CSS do łącza menu modułu na karcie zaawansowanej.

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

Konfiguracja css menu divi

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 moduł tekstowy divi

Dodaj link

Ten moduł będzie służyć jako wezwanie do działania. Dodaj wybrany link.

  • Adres URL linku do modułu: #
Konfiguracja modułu tekstowego Divi

Domyślne ustawienia tekstu

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

  • Czcionka tekstu: Cormorant Garamond
  • Kolor tekstu: # 000000
  • Rozmiar tekstu: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
Ustawienie koloru czcionki modułu tekstowego Divi

Wskaż ustawienia tekstu

Zmień kolor tekstu po najechaniu myszą.

  • Kolor tekstu: # c2ab92
Regulacja koloru tekstu modułu Divi

zaklejania

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

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

rozstaw

I dodaj trochę dolnej dopełnienia w ustawieniach odstępów.

  • Wyściółka u dołu: 0.5vw
Regulacja rozstawu modułów Divi

granica

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

  • Szerokość dolnej krawędzi: 1px
  • Kolor dolnej ramki: # 000000
Regulacja obramowania modułu tekstowego Divi

Dodaj moduł kodu do kolumny 2

Wstaw kod JQuery i CSS

Po stylizowaniu wszystkich modułów w rzędzie nadszedł czas, aby zadziałał efekt ujawniania / ukrywania. 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ł na każdej dodanej sekcji, bez względu na to, jak zaprojektujesz nagłówek lub moduły używasz, upewnij się tylko, że dodałeś identyfikator CSS do swojej sekcji. Umieść kod JQuery między znacznikami skryptu i kod CSS między znacznikami stylu, jak pokazano na poniższym ekranie drukowania.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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;}

Dodaj kod js jQuery wordpress divi

3. Zapisz zmiany generatora i wyświetl wynik

Po zakończeniu globalnego nagłówka zapisz wszystkie zmiany i opublikuj wynik na swojej stronie!

Ostateczny projekt modułu menu divi
Globalny nagłówek Divi Builder

badanie

Teraz, gdy przeszliśmy przez wszystkie etapy, rzućmy okiem na wynik na różnych rozmiarach ekranu.

Pełny przegląd modułu

końcowe przemyślenia

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

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
3 akcji
udział3
ćwierkanie
Enregistrer