Jak zmniejszyć rozmiar globalnego nagłówka podczas przewijania za pomocą kreatora motywów Divi

Kiedy projektujesz stały globalny nagłówek, możesz chcieć zmniejszyć wysokość nagłówka, gdy użytkownicy przewijają. Pomaga zmniejszyć przestrzeń, jaką zajmuje globalny nagłówek na wysokości widocznego obszaru odwiedzających. W tym samouczku przeprowadzimy Cię przez ten proces. Zaczniemy od zbudowania menu, a następnie dodamy trochę kodu JQuery i CSS, aby wywołać efekt. 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!

Subskrybuj nasz kanał YouTube

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

Następnie kliknij „Buduj globalny nagłówek” i wybierz „Zbuduj globalny nagłówek”.

2. Zacznij budować globalny nagłówek

Ustawienia sekcji

Kolor tła

Gdy znajdziesz się w edytorze szablonów, zauważysz sekcję. Otwórz sekcję i zmień kolor tła na biały.

• Kolor tła: #FFFFFF

Rozmiary

Przejdź do zakładki projektu modułu i zmień szerokość.

• Szerokość: 100%

Rozstaw

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

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

Cień Pudełka

I oddziel zawartość strony od globalnego nagłówka, dodając subtelny cień pola do następnej sekcji.

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

Identyfikator CSS

Następnie dodaj do sekcji identyfikator CSS. W dalszej części samouczka użyjemy tego identyfikatora CSS do utworzenia efektu zmniejszania globalnego nagłówka podczas przewijania.

• Identyfikator CSS: dopełnienie sekcji

Główny element

Przejdź do zakładki Zaawansowane, przejdź do Niestandardowych ustawień CSS i napraw sekcję, dodając dwie linie kodu CSS do głównego elementu sekcji.

position: fixed;
top: 0;

Indeks Z

Aby upewnić się, że sekcja pozostaje na górze całej zawartości strony i posta, zwiększymy również indeks z tej sekcji.

• Indeks Z: 99999

Dodaj nowy wiersz

Struktura kolumny

Po skonfigurowaniu ustawień kolumn kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i odpowiednio zmień rozmiar:

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

Rozstaw

Następnie usuń domyślne górne i dolne dopełnienie wiersza.

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

Identyfikator CSS

Następnie przejdź do zakładki zaawansowane i dodaj identyfikator CSS do wiersza. Będziemy potrzebować tego identyfikatora CSS w dalszej części samouczka, aby efekt zmniejszania zadziałał.

• Identyfikator CSS: szerokość wiersza

Główny element

Na koniec, aby upewnić się, że wszystkie kolumny pozostają obok siebie na mniejszych rozmiarach ekranu i aby wyśrodkować całą zawartość kolumn, dodamy dwa wiersze kodu CSS do głównego elementu wiersza.

display: flex;
align-items: center;

Dodaj moduł obrazu do kolumny 1

Prześlij logo

Czas dodać moduły, zaczynając od Image Module w kolumnie 1. Prześlij logo z przezroczystym tłem.

Rozmiary

Następnie zmodyfikuj szerokość modułu.

• Szerokość: 5vw (komputer stacjonarny), 9vw (tablet), 13vw (telefon)

Dodaj moduł menu do kolumny 2

Wybierz menu

Przejdź do drugiej kolumny i wstaw moduł menu. Wybierz wybrane menu.

Usuń kolor tła

Następnie usuń kolor tła modułu.

Układ

Przejdź do zakładki projektu modułu i zmień również układ.

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

Tekst menu

Następnie otwórz ustawienia tekstu menu i wprowadź zmiany.

• Czcionka menu: Rubik
• Kolor tekstu menu: #000000
• Rozmiar tekstu w menu: 0.9vw (komputer), 2vw (tablet), 3vw (telefon)

Menu rozwijane

Zmodyfikuj również ustawienia menu rozwijanego.

• Kolor tła menu rozwijanego: #ffffff
• Kolor linii menu rozwijanego: #2970fa

Ikony

I uzupełnij ustawienia modułu, zmieniając kolor ikony menu hamburgera w ustawieniach ikon.

• Kolor ikony menu Hamburger: #2970fa

Dodaj moduł przycisku do kolumny 3

Dodaj kopię

Przejdź do następnej i ostatniej kolumny. Dodaj moduł przycisku z wybraną kopią.

Wyrównanie

Następnie zmień wyrównanie modułu.

• Wyrównanie przycisków: w prawo

Ustawienia przycisków

Stylizuj przycisk odpowiednio:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,8vw (komputer), 1,5vw (tablet), 2vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #2970fa
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 0px
• Odstępy między przyciskami: 1px
• Czcionka przycisku: Rubik
• Styl czcionki przycisku: wielkie litery

Rozstaw

I dodaj kilka niestandardowych wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 0,8vw (komputer stacjonarny), 1,8vw (tablet), 2,5vw (telefon)
• Dolna wyściółka: 0,8vw (komputer stacjonarny), 1,8vw (tablet), 2,5vw (telefon)
• Lewa wyściółka: 1.5vw (komputer), 3vw (tablet), 4vw (telefon)
• Prawa wyściółka: 1.5vw (komputer), 3vw (tablet), 4vw (telefon)

Cień Pudełka

Uzupełnij ustawienia modułu, dodając subtelny cień w kształcie pudełka.

• Pozycja pionowa cienia pudełka: 20px
• Siła rozmycia cieni w pudełku: 30px
• Kolor cienia: rgba (41 112 250, 0,2)

Dodaj moduł kodu do kolumny 2

Wstaw kod JQuery i CSS

Następna i ostatnia część tego samouczka zajmuje się efektem zmniejszania się, używając dwóch identyfikatorów CSS, które przypisaliśmy do naszej sekcji i wiersza. Dodaj moduł kodu do kolumny 2 z następującymi wierszami kodu JQuery i CSS. Upewnij się, że kod JQuery umieszczasz między tagami skryptu, a kod CSS między tagami stylu.

jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});

.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}

.slow-transition {
transition: all 0.9s ease-out 0s;
}

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

3. Zapisz zmiany Konstruktora i zobacz wyniki

Po dodaniu kodu możesz zapisać wszystkie zmiany wprowadzone w globalnym nagłówku i wyświetlić 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 utworzyć zmniejszający się globalny nagłówek za pomocą Kreatora motywów Divi. Zmniejszanie nagłówków to świetny sposób na zaoszczędzenie miejsca na wysokości okna użytkownika. Odtworzyliśmy projekt od podstaw i dodaliśmy trochę niestandardowego kodu, aby wywołać efekt zmniejszania. 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.