Jak utworzyć niestandardowy globalny nagłówek pełnoekranowy za pomocą kreatora motywów Divi?

Jeśli szukasz sposobu na stworzenie globalnego nagłówka dla swojej witryny, który nie zajmuje dużo miejsca, pokochasz ten samouczek. Pokażemy Ci, jak utworzyć globalny nagłówek pełnoekranowy za pomocą Kreatora motywów Divi. Podczas przewijania strony jedyne dwie dodatkowe rzeczy, które zauważysz w swoim poście/stronie, to 1) klikalna ikona hamburgera w lewym górnym rogu i 2) logo w prawym górnym rogu. Te dwa elementy będą śledzić odwiedzających przez cały proces nawigacji, a po kliknięciu ikony hamburgera otworzy się niestandardowe menu pełnoekranowe i umożliwi odwiedzającym przejście do innych stron w Twojej witrynie. Wynik tego projektu jest bardzo responsywny i 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 pełnoekranowy szablon globalnego nagłówka ZA DARMO

Aby położyć swoje ręce na pełnoekranowym szablonie globalnego nagłówka, 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.

Zacznij budować globalny nagłówek

Następnie kliknij „Dodaj globalny nagłówek” i przejdź do „Zbuduj globalny nagłówek”.

2. Poświęć sekcję #1 na nawigację pełnoekranową

Ustawienia sekcji

Kolor tła

Czas zacząć tworzyć! Otwórz ustawienia sekcji, którą możesz zauważyć w edytorze szablonów i zmień kolor tła na całkowicie przezroczysty.

• Kolor tła: rgba (255,255,255,0)

Rozstaw

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

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

Klasa CSS

Kontynuuj, dodając klasę CSS do sekcji. Później w tym poście będziemy potrzebować tej klasy CSS, aby włączyć pełnoekranowe menu.

• Klasa CSS: sekcja-transformacja

Widoczność domyślna

Następnie przejdź do ustawień widoczności i ukryj przepełnienia. Upewnij się, że zwiększyłeś również indeks z sekcji, dzięki czemu sekcja pozostanie na górze całej zawartości strony i posta.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte
• Indeks Z: 999999

Widoczność najechania

Po dodaniu indeksu z włącz opcję hover i upewnij się, że stosuje się tam również ten sam indeks z.

• Indeks Z: 999999

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając pierwszy 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ść ekranu.

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

Dodaj moduł tekstowy do kolumny

Dodaj zawartość

Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł tekstowy. Dodaj wybrany symbol menu do pola treści. W tym samouczku używamy '≡'.

Ustawienia tekstu

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

• Czcionka tekstu: Abril Fatface
• Kolor tekstu: #000000
• Rozmiar tekstu: 3vw (komputer), 5vw (tablet), 7vw (telefon)
• Wysokość linii tekstu: 1em

Rozstaw

Następnie zmodyfikuj wartości odstępów na różnych rozmiarach ekranu.

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

Identyfikator CSS

Ten moduł tekstowy będzie służył jako wyzwalacz dla menu pełnoekranowego. Dlatego musimy przypisać identyfikator CSS do modułu tekstowego. W dalszej części samouczka użyjemy identyfikatora CSS w naszym kodzie.

• Identyfikator CSS: menu-otwórz

Dodaj wiersz nr 2

Struktura kolumny

Kontynuuj, dodając drugi wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Zmodyfikuj również wartości odstępów.

• Górny margines: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)
• Margines dolny: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)
• Lewa wyściółka: 19vw
• Prawa wyściółka: 19vw

Dodaj moduł tekstowy do kolumny

Dodaj zawartość

Następnie dodaj do kolumny nowy moduł tekstowy. Ten moduł tekstowy reprezentuje twój pierwszy element menu.

Dodaj link

Upewnij się, że w następnej kolejności dodałeś właściwy link do modułu.

• Adres URL łącza modułu: #

Ustawienia tekstu

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

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: pół pogrubiona
• Kolor tekstu: #000000
• Rozmiar tekstu: 3vw (komputer), 7vw (tablet), 8vw (telefon)
• Odstępy między literami tekstu: -0,1vw
• Wysokość linii tekstu: 1em

Rozstaw

Następnie zmodyfikuj ustawienia odstępów modułu.

• Górny margines: 1vw
• Dolna wyściółka: 2vw
• Lewa wyściółka: 3vw

Granica

Dodaj też dolną granicę.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #333333

Klasa CSS

I uzupełnij ustawienia modułu, dodając niestandardową klasę CSS. Musisz dodać tę klasę CSS do każdego elementu menu, który umieścisz w swojej sekcji.

Trzykrotne klonowanie modułu tekstowego

Po ukończeniu pierwszego modułu tekstowego możesz go klonować tyle razy, ile chcesz (w zależności od pozycji menu, które chcesz pokazać w swoim menu). Upewnij się jednak, że moduły nie przekraczają wysokości ekranu.

Zmień treść i link każdego duplikatu

Będziesz musiał zmienić treść i link każdego duplikatu.

Dodaj moduł śledzenia mediów społecznościowych

Dodaj wybrane sieci społecznościowe

Następnym i ostatnim modułem, którego potrzebujemy w tym rzędzie, jest moduł śledzenia w mediach społecznościowych. Dodaj wszystkie sieci społecznościowe, które chcesz wyświetlić.

Zresetuj indywidualne style sieci społecznościowych

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

Ustawienia ikon

Następnie przejdź do zakładki projektowania modułu i zmodyfikuj ustawienia ikon w następujący sposób:

• Kolor ikony: #000000
• Użyj niestandardowego rozmiaru ikony: Tak
• Rozmiar czcionki ikony: 1vw (komputer), 2vw (tablet), 3vw (telefon)

Rozstaw

Dodaj też lewą wyściółkę.

• Lewa wyściółka: 3vw

Klasa CSS

Uzupełnij ustawienia modułu, dodając klasę CSS.

Dodaj wiersz nr 3

Struktura kolumny

Ostatni wiersz, którego potrzebujemy w tej sekcji, zawiera następującą strukturę kolumn:

Rozstaw

Ogranicz przestrzeń zajmowaną przez ten wiersz, usuwając wszystkie domyślne górne i dolne wyściółki.

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

Dodaj moduł kodu do kolumny

Wstaw kod JQuery i CSS

Następnie dodaj moduł kodu i wstaw trochę kodu CSS i JQuery, aby menu pełnoekranowe działało. Upewnij się, że ręcznie umieszczasz kod JQuery między tagami skryptu, a kod CSS między tagami stylu, jak widać na poniższym zrzucie ekranu.

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});

.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. Poświęć sekcję nr 2 na logo w prawym górnym rogu

Ustawienia sekcji

Kolor tła

Do następnej sekcji! Ta sekcja będzie zawierać logo w prawym górnym rogu. Otwórz ustawienia sekcji i zmień kolor tła na całkowicie przezroczysty.

• Kolor tła: rgba(0,0,0,0)

Rozstaw

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

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

Widoczność domyślna

Zwiększ również indeks z sekcji.

• Indeks Z: 99999

Widoczność najechania

Włącz opcję najechania na indeksie z i upewnij się, że ta sama wartość obowiązuje również przy najechaniu.

• Indeks Z: 99999

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Usuń również domyślną górną i dolną wyściółkę wiersza.

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

Dodaj moduł obrazu do kolumny

Prześlij obraz logo PNG

Jedynym modułem, którego potrzebujemy w tym wierszu i sekcji, jest moduł obrazu. Prześlij swój półprzezroczysty plik obrazu logo.

Rozmiary

Przejdź do ustawień rozmiaru modułu i wymuś pełną szerokość.

• Wymuś pełną szerokość: tak

Rozstaw

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

• Górna wyściółka: 2.5vw (komputer stacjonarny), 3.5vw (tablet), 5vw (telefon)
• Dolna wyściółka: 2.5vw (komputer stacjonarny), 3.5vw (tablet), 5vw (telefon)
• Lewa wyściółka: 3vw (komputer), 4vw (tablet), 7vw (telefon)
• Prawa wyściółka: 3vw (komputer), 4vw (tablet), 7vw (telefon)

4. Dodatkowe ustawienia sekcji

Sekcja 1

Rozmiary

Po ukończeniu obu sekcji i wszystkich zawartych w nich modułów nadszedł czas na zmianę ich rozmiaru. Otwórz pierwszą sekcję i zastosuj następujące wartości szerokości i wysokości:

• Szerokość: 8vw (komputer stacjonarny), 11vw (tablet), 18vw (telefon)
• Wysokość: 7vw (komputer stacjonarny), 11vw (tablet), 18vw (telefon)

Domyślny główny element

Następnie przejdź do zakładki zaawansowanej sekcji i dodaj następujące wiersze kodu CSS:

position: fixed;
top: 0;

Unieś główny element

Upewnij się, że te same wiersze kodu CSS są stosowane po najechaniu myszą.

position: fixed;
top: 0;

Sekcja #2

Rozmiary

Kontynuuj, otwierając ustawienia drugiej sekcji i zmieniając szerokość na różnych rozmiarach ekranu.

• Szerokość: 13vw (komputer), 21vw (tablet), 30vw (telefon)

Domyślny główny element

Następnie przejdź do zakładki zaawansowane i dodaj następujące wiersze kodu CSS:

position: fixed;
right: 0;
top: 0;

Unieś główny element

Upewnij się, że te same wiersze kodu CSS są stosowane po najechaniu myszą.

position: fixed;
right: 0;
top: 0;

5. Zapisz zmiany Konstruktora i zobacz wyniki

Po wykonaniu wszystkich powyższych kroków możesz zapisać szablon globalnego nagłówka i wyświetlić wynik 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 samouczku pokazaliśmy, jak utworzyć globalny nagłówek pełnoekranowy za pomocą Kreatora motywów Divi. Do naszego projektu dodaliśmy dwa stałe elementy; ikona hamburgera w lewym górnym rogu i logo w prawym górnym rogu. Po kliknięciu ikona hamburgera otwiera menu pełnoekranowe wykonane przy użyciu wbudowanych elementów Divi. Możesz dowolnie używać Divi do projektowania tego pełnoekranowego menu, jak tylko chcesz! Na początku tego samouczka można było również bezpłatnie pobrać plik JSON. Jeśli masz jakieś pytania, 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.