Jak zamienić nagłówek Divi na inny na Scroll?

Twój nagłówek nieuchronnie pozostaje jednym z najważniejszych elementów Twojej witryny. Wpływa na proces nawigacji odwiedzających i pozwala im znaleźć to, czego szukają w mgnieniu oka. Teraz, jeśli szukasz sposobu na zamianę nagłówka Divi podczas przewijania na inny, spodoba ci się ten post. Pokażemy Ci dokładnie, jak to zrobić, korzystając z kreatora motywów Divi, wbudowanych elementów i dodatkowego kodu. Dbamy też o to, by u góry strony znajdowało się miejsce na automatycznie wygenerowane miejsce zastępcze na nagłówek. 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 Swap Divi Header ZA DARMO

Aby położyć ręce na szablonie darmowej wymiany Divi, najpierw musisz go pobrać za pomocą poniższego przycisku. 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 Divi Theme Builder i zacznij budować globalny nagłówek

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder na zapleczu swojej witryny WordPress i kliknij „Dodaj globalny nagłówek”.

Zbuduj globalny nagłówek

Następnie kliknij „Buduj globalny nagłówek”, aby zostać przekierowanym do edytora szablonów.

2. Utwórz oba nagłówki w tej samej sekcji

Modyfikuj sekcję

Rozmiary

W edytorze szablonów zauważysz sekcję. Otwórz ustawienia sekcji i upewnij się, że szerokość sekcji wynosi „100%”.

• Szerokość: 100%

Rozstaw

Następnie przejdź do ustawień odstępów i usuń wszystkie domyślne górne i dolne dopełnienie.

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

Cień Pudełka

Używamy również subtelnego cienia pudełkowego.

• Pozycja pionowa cienia pudełka: 15px
• Kolor cienia: rgba (0,0,0,0,06)

Pozycja

Na koniec ustawimy sekcję w górnej środkowej części naszej strony, korzystając z ustawień pozycji w zakładce Zaawansowane.

• Pozycja: Naprawiono
• Lokalizacja: górne centrum

Dodaj nagłówek wiersza nr 1

Struktura kolumny

Oba nagłówki, które utworzymy, będą częścią tej samej sekcji. Dla każdego nagłówka użyjemy osobnego wiersza. Dodaj nagłówek pierwszego wiersza, korzystając z następującej struktury kolumn:

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i zmień kolor tła.

• Kolor tła: #000000

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie przejdź do ustawień odstępów i usuń wszystkie domyślne górne i dolne dopełnienie.

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

Główny element

Uzupełnij ustawienia wiersza, dodając dwa wiersze kodu CSS do głównego elementu wiersza. Ten kod CSS pomoże nam wyrównać całą zawartość kolumn.

display: flex;
align-items: center;

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Czas dodać moduły, zaczynając od modułu obrazu w kolumnie 1. Prześlij wybrane logo.

Wyrównanie

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

• Wyrównanie obrazu: Środek

Dodaj moduł menu do kolumny 2

Wybierz menu

W drugiej kolumnie jedynym potrzebnym modułem jest moduł menu. Wybierz wybrane menu.

Usuń kolor tła

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

Układ

Przejdź do zakładki projektu i odpowiednio zmień układ:

• Styl: wyśrodkowany

Ustawienia tekstu menu

Następnie wprowadź zmiany w ustawieniach tekstu menu.

• Czcionka menu: Roboto
• Grubość czcionki menu: pogrubiona
• Kolor tekstu menu: #ffffff (komputer), #000000 (tablet i telefon)
• Rozmiar tekstu menu: 18px

Menu rozwijane Ustawienia tekstu

Następnie zmienimy kolor linii menu rozwijanego w ustawieniach tekstu menu rozwijanego.

• Kolor linii menu rozwijanego: #000000

Ustawienia ikon

Zmieniamy też kolor ikony menu hamburgerów.

• Kolor ikony menu Hamburger: #ffffff

Rozstaw

Uzupełnij ustawienia modułu, dodając niestandardowe lewe i prawe dopełnienie na mniejszych rozmiarach ekranu.

• Lewa wyściółka: 30px (tylko tablet i telefon)
• Prawe dopełnienie: 30px (tylko tablet i telefon)

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

Dodaj wybrane sieci społecznościowe

W ostatniej kolumnie jedynym modułem, którego potrzebujemy, jest moduł Social Media Follow. Dodaj wybrane sieci społecznościowe.

Indywidualny kolor tła sieci społecznościowej

Następnie otwórz każdą sieć społecznościową indywidualnie i zmień kolor tła na biały.

• Kolor tła: #FFFFFF

Wyrównanie

Wróć do ogólnych ustawień modułu i zmień wyrównanie modułu.

• Wyrównanie modułu: Środek

Ustawienia ikon

Zmodyfikuj też kolor ikony.

• Kolor ikony: #0042c9

Granica

I uzupełnij ustawienia modułu, dodając trochę promienia obramowania.

• Wszystkie rogi: 100px

Dodaj nagłówek wiersza nr 2

Struktura kolumny

Do drugiego nagłówka! Dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

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

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

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

Główny element

Następnie wyrównaj całą zawartość kolumny, używając dwóch wierszy kodu CSS w głównym elemencie wiersza.

display: flex;
align-items: center;

Kolumna 3 Kolor tła

I uzupełnij ustawienia wiersza, otwierając ustawienia kolumny 3 i używając koloru tła.

• Kolor tła: #0042c9

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

W kolumnie 1 jedynym modułem, którego potrzebujemy, jest moduł obrazu. Prześlij wybrane logo.

Wyrównanie

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

• Wyrównanie obrazu: Środek

Moduł menu klonowania i miejsce w kolumnie 2 nagłówka wiersza nr 2

Sklonuj moduł menu, który był używany w poprzednim wierszu i umieść duplikat w środkowej kolumnie drugiego wiersza.

Zmień ustawienia tekstu menu

Otwórz duplikat modułu menu i zmień kolor tekstu menu.

• Kolor tekstu menu: #0042c9

Zmień ustawienia tekstu w menu rozwijanym

Zmodyfikuj również ustawienia tekstu menu rozwijanego.

• Kolor linii menu rozwijanego: #ffc21d

Zmień ustawienia ikon

Uzupełnij ustawienia modułu menu, zmieniając kolor ikony menu hamburgera.

• Kolor ikony menu hamburgerów: #0042c9

Dodaj moduł przycisku do kolumny 3

Dodaj kopię

W ostatniej kolumnie wiersza jedynym modułem, którego potrzebujemy, jest moduł przycisku. Wprowadź wybraną kopię.

Wyrównanie

Następnie zmodyfikuj wyrównanie przycisku.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Następnie zmień styl przycisku w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 20px (komputer), 18px (tablet), 15px (telefon)
• Kolor tekstu przycisku: #ffffff
• Szerokość obramowania przycisku: 0px

• Czcionka przycisku: Roboto
• Waga czcionki przycisku: pogrubiona

Rozstaw

I uzupełnij ustawienia modułu, dodając niestandardowe wypełnienie na różnych rozmiarach ekranu.

• Górna wyściółka: 33px (komputer), 35px (tablet), 38px (telefon)
• Dolna wyściółka: 33px (komputer), 35px (tablet), 38px (telefon)

2. Dodaj klasy CSS

Sekcja

Po dodaniu i stylizacji wszystkich modułów nadszedł czas, aby dodać klasy CSS, których będziemy używać w naszym kodzie JQuery. Najpierw otwórz ustawienia sekcji i użyj następującej klasy CSS:

• Klasa CSS: sekcja nagłówka

Nagłówek wiersza nr 1

Następnie otwórz nagłówek pierwszego wiersza i użyj następującej klasy CSS:

• Klasa CSS: nagłówek-1

Nagłówek wiersza nr 2

Otwórz również drugi rząd. Użyj do tego następującej klasy CSS:

• Klasa CSS: nagłówek-2

3. Dodaj JQuery i kod CSS

Dodaj moduł kodu do trzeciej kolumny pierwszego wiersza

Gdy wszystkie klasy CSS są już gotowe, nadszedł czas na dodanie kodu. Dodaj nowy moduł kodu w dowolnym miejscu w swojej sekcji. Umieszczamy go w trzeciej kolumnie pierwszego wiersza.

Dodaj kod JQuery (między tagami skryptu)

Następnie dodaj następujące wiersze kodu CSS między tagami skryptu, jak widać na poniższym zrzucie ekranu:

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

Dodaj kod CSS (między tagami stylu)

Dodaj również następujący kod CSS między tagami stylu :

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

4. Zapisz zmiany w kreatorze motywów i zobacz wynik

W tym momencie jedyne, co pozostało do zrobienia, to zapisanie wszystkich zmian w kreatorze motywów i wyświetlenie wyniku w swojej witrynie!

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 zamienić nagłówek Divi na inny podczas przewijania za pomocą kreatora motywów Divi, elementów Divi i dodatkowego kodu JQuery i CSS. Wygenerowaliśmy też automatycznie trochę miejsca u góry kontenera strony, które zapobiega nakładaniu się stałego nagłówka na zawartość strony. Udało Ci się również pobrać plik JSON szablonu nagłówka wymiany Divi 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.