Jak automatycznie umieścić nagłówek pod pierwszą sekcją Divi każdej strony?

Odkąd pojawił się Divi Theme Builder, dzielimy się samouczkami na temat tworzenia i dostosowywania nagłówka, aby dopasować go do różnych potrzeb. W dzisiejszym samouczku będziemy kontynuować tę podróż, pokazując, jak automatycznie umieścić niestandardowy nagłówek pod pierwszą sekcją Divi każdej strony. Takie podejście pozwala odwiedzającym najpierw zobaczyć sekcję bohaterów twoich stron, a następnie uzyskać dostęp do menu i wszystkich jego pozycji. Styl, którego używamy dla niestandardowego nagłówka, pasuje do pakietu Bistro Layout Pack, będziesz mógł również pobrać niestandardowy szablon strony 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 niestandardowy szablon nagłówka ZA DARMO

Aby położyć swoje ręce na darmowym niestandardowym szablonie 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 strony

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

Zacznij od przejścia do Divi Theme Builder i dodaj nowy szablon.

Używać

Użyj tego nowego szablonu na wszystkich stronach.

• Użyj na: wszystkie strony

2. Rozpocznij tworzenie niestandardowego projektu nagłówka

Kontynuuj, budując niestandardowy nagłówek w szablonie strony.

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

Rozstaw

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

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

Granica

Dodaj również górną i dolną granicę.

• Szerokość górnej i dolnej granicy: 1px
• Kolor górnej i dolnej krawędzi: #002d4c

Identyfikator CSS

I dołącz identyfikator CSS. W dalszej części samouczka użyjemy tego identyfikatora CSS, aby umieścić sekcję poniżej pierwszej sekcji każdej strony.

• Identyfikator CSS: nagłówek niestandardowy

Indeks Z

Wreszcie, co nie mniej ważne, zwiększymy indeks z sekcji, aby upewnić się, że pojawia się on nad całą zawartością strony.

• Indeks Z: 99999

Dodaj nowy wiersz

Struktura kolumny

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ść sekcji.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• 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

Aby upewnić się, że wszystkie kolumny pozostaną obok siebie na mniejszych rozmiarach ekranu i aby wyśrodkować zawartość kolumny, dodamy również dwa wiersze kodu CSS do głównego elementu wiersza.

display: flex;
align-items: center;

Kolumna 1

Rozstaw

Kontynuuj, otwierając ustawienia kolumny 1 i dodaj górną i dolną wyściółkę do ustawień odstępów.

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

Granica

Dodaj również prawą ramkę do kolumny.

• Szerokość prawego obramowania: 1px
• Kolor prawego obramowania: #002d4c

Dodaj moduł obrazu do kolumny 1

Prześlij logo

Czas zacząć dodawać moduły! W kolumnie 1 potrzebujemy modułu obrazu. Prześlij swoje logo.

Wyrównanie

Przejdź do zakładki projektu modułu i zmień wyrównanie obrazu.

• Wyrównanie obrazu: Środek

Rozmiary

Zmodyfikuj również szerokość modułu na różnych rozmiarach ekranu.

• Szerokość: 4vw (komputer stacjonarny), 7vw (tablet), 12vw (telefon)

Dodaj moduł menu do kolumny 2

Wybierz menu

W drugiej kolumnie, tam, potrzebujemy modułu menu. Wybierz wybrane menu.

Układ

Przejdź do zakładki projektu modułu i zmień ustawienia układu w następujący sposób:

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

Tekst menu

Zmodyfikuj również ustawienia tekstu menu.

• Czcionka menu: kabina
• Kolor tekstu menu: #77848d
• Rozmiar tekstu menu: 16px (komputer), 15px (tablet), 14px (telefon)
• Wysokość linii menu: 1,8 em

Tekst rozwijany

Następnie zmień niektóre kolory w rozwijanych ustawieniach tekstu.

• Kolor tła menu rozwijanego: #ffffff
• Kolor linii menu rozwijanego: #002d4c

Ikony

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

• Kolor ikony menu hamburgerów: #002d4c

Dodaj moduł przycisku do kolumny 3

Dodaj kopię

Przejdź do następnej i ostatniej kolumny. Tam będziemy potrzebować modułu przycisku. Dodaj wybraną kopię.

Wyrównanie

Przejdź do zakładki projektu modułu i zmień wyrównanie przycisków.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Kontynuuj, stylizując przycisk w ustawieniach przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 13px
• Kolor tekstu przycisku: #002d4c
• Kolor tła przycisku: #ffffff
• Szerokość obramowania przycisku: 2px
• Kolor obramowania przycisku: #ffffff (domyślny), #d1d1d1 (najechanie)
• Promień obramowania przycisku: 0px

• Odstępy między przyciskami: 2px
• Czcionka przycisku: kabina
• Grubość czcionki przycisku: pół pogrubiona
• Styl czcionki przycisku: wielkie litery

Rozstaw

Następnie dodaj niestandardowe wypełnienie w różnych rozmiarach ekranu.

• Górna wyściółka: 16px
• Dolna wyściółka: 16px
• Lewa wyściółka: 24px (komputer i tablet), 13px (telefon)
• Prawe wypełnienie: 24px (komputer stacjonarny i tablet), 13px (telefon)

Cień Pudełka

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

• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 2px (domyślnie), 6px (najechanie)
• Kolor cienia: #002d4c
• Pozycja cienia pudełka: cień wewnętrzny

3. Automatycznie umieść nagłówek po pierwszej sekcji każdej strony za pomocą JQuery

Dodaj moduł kodu do kolumny 2

Teraz, aby automatycznie umieścić menu pod pierwszą sekcją każdej strony, potrzebujemy trochę kodu JQuery. Aby dołączyć ten kod do naszego niestandardowego nagłówka, dodaj moduł kodu do kolumny 2.

Wstaw kod JQuery

Dodaj następujące wiersze kodu JQuery, między tagami skryptu, jak widać na poniższym zrzucie ekranu , do modułu kodu, aby zastosować efekt:

jQuery(funkcja($){
$('#custom-header').insertAfter('.et_pb_section_0');
});

4. Zapisz zmiany w kreatorze motywów i wyświetl wyniki

I uzupełnij niestandardowy nagłówek, zapisując wszystkie zmiany w kreatorze motywów i wyświetlając wyniki na swoich stronach!

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 automatycznie umieścić niestandardowy nagłówek, który zbudujesz za pomocą Kreatora motywów Divi po pierwszej sekcji Divi na każdej stronie. Wystarczy raz zbudować niestandardowy nagłówek, dodać kod JQuery, a niestandardowy nagłówek zostanie automatycznie zmieniony. To świetny sposób na zmianę normalnej pozycji menu na górze strony i umożliwienie pierwszej sekcji bohatera. Udało Ci się również pobrać szablon 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.