Czy chcesz utworzyć globalny nagłówek z modułem menu pełnoekranowego w Divi?
Nagłówek jest jednym z najważniejszych elementów każdego Witryna internetowa i jest sercem doświadczenie użytkownika. Menu nawigacyjne daje użytkownikom wyobrażenie o tym, czego mogą się spodziewać na Twoim Witryna internetowa i pomaga im znaleźć potrzebne informacje.
Dodatkowo dodatkowy pasek menu może być idealnym miejscem do wyróżnienia wezwania do działania lub do promować oferta. Nie wspominając, że nagłówek jest jedną z najważniejszych części Twojego pliku Witryna internetowa, ponieważ zwykle pojawia się na każdej stronie. To świetna okazja, aby zaprezentować swój branding i stworzyć nagłówek spójny z projektem reszty witryny.
Opcje Divi's Theme Builder umożliwiają tworzenie niestandardowego globalnego nagłówka i dostosowywanie wyglądu modułów nagłówka i menu w całej witrynie.
W tym samouczku pokażemy, jak utworzyć globalny nagłówek za pomocą modułu menu pełnoekranowego Divi.
Zacznijmy!
badanie
Oto podgląd globalnego nagłówka, który zamierzamy zaprojektować.
Otwórz kreator motywów
Ponieważ w tym przykładzie budujemy globalny nagłówek, przejdźmy do „Konstruktora motywów”, który można znaleźć w menu WordPress Divi. Wybierz Dodaj globalny nagłówek, a następnie wybierz Utwórz globalny nagłówek.
Utwórz dodatkowy pasek menu
Gdy po raz pierwszy otworzysz globalny układ nagłówka, zostanie on wstępnie załadowany ze zwykłą sekcją. Zmodyfikujemy go tak, aby był naszym dodatkowym paskiem menu, który będzie znajdował się nad naszym menu o pełnej szerokości i będzie zawierał tekst wezwania do działania oraz przycisk.
Najpierw otwórz ustawienia sekcji i dodaj kolor tła.
- Tło: #92A8A1
Następnie margines sekcji.
- Wierzchołek marginesu wewnętrznego: 0px
- Dolny margines wewnętrzny: 0px
Teraz wstaw wiersz. W tym przykładzie użyjemy układu pokazanego poniżej.
W ustawieniach wierszy, na karcie Rozmiar na karcie Styl, zharmonizuj wysokości kolumn.
- Zharmonizuj wysokości kolumn: TAK
Następnie ustaw marginesy górny i dolny w następujący sposób:
- Górny margines wewnętrzny: 5px
- Dolny margines wewnętrzny: 5px
Ponieważ chcemy, aby nasze drugorzędne elementy nagłówka były wyrównane w pionie, dodamy niestandardowe CSS do głównego elementu wiersza.
1.
align-items:center;
Teraz, gdy nasza linia jest skonfigurowana, możemy wstawić moduły dla naszej treść. Najpierw wstaw moduł tekstowy po lewej stronie.
Zmodyfikuj treść tekstu. To idealne miejsce na umieszczenie wezwania do działania lub polecenia promować oferta.
- Tekst: "Dołącz do naszej listy mailingowej, aby otrzymać 10% zniżki na zamówienie!" »
Przejdź do zakładki Styl modułu Tekst i zmodyfikuj parametry w następujący sposób:
- Czcionka „Tekst”: Poppins
- „Tekst” przyciemnione światło: średnie
- Kolor tekstu „Tekst”: #FFFFFF
Następnie dodaj moduł Button po prawej stronie.
Dodaj tekst przycisku.
- Tekst: „Uzyskaj bezpłatną wycenę”
Na karcie Styl wyrównaj przycisk pośrodku.
- Wyrównanie przycisków: środek
Teraz dostosujmy wygląd przycisku.
- Użyj niestandardowych stylów dla "Przycisku": Tak
- Rozmiar tekstu przycisku: 14px
- Kolor tekstu przycisku: #FFFFFF
- Przycisk tła: #2F5349
- Szerokość obramowania przycisku: 0px
- Przycisk promienia obramowania: 50px
- Odstępy między przyciskami: 1px
- Czcionka przycisku: Poppins
Dodaj moduł menu pełnoekranowego
Teraz, gdy zaprojektowano menu pomocnicze, możemy przejść do menu głównego. Menu zbudujemy za pomocą modułu Full Screen Menu. Dodaj nową sekcję Fullscreen do globalnego nagłówka.
Wybierz i wstaw moduł menu pełnoekranowego
Następnie dostosujemy ustawienia menu pełnoekranowego.
- Kolor aktywnego łącza: #2F5349
- Menu czcionek: Poppins
- Dim Light Menu: Semi Bold
- Menu stylu kopiowania: TT
- Kolor tekstu menu: #000000
- Kolor tekstu w menu najechania: #2F5349
- Rozmiar tekstu menu: 15px
- Odstępy między literami menu: 2px
Zmień kolor ikony menu hamburgera na czarny.
- Kolor ikony menu hamburgerów: #000000
Zanim dodamy logo do naszego menu, zmieńmy opcje rozmiaru. Użyjemy wbudowanych opcji reakcji Divi, aby ustawić inną maksymalną wysokość dla komputera i telefonu komórkowego.
- Maksymalna wysokość logo na PC: 3vw
- Maksymalna wysokość logo na telefonie komórkowym: 6vw
Teraz dodaj swoje logo do menu pełnoekranowego.
Wreszcie, chcemy, aby menu główne pozostawało u góry ekranu, gdy użytkownik przewija witrynę, więc użyjemy do tego wbudowanych ustawień Sticky Sticky Divi.
- Lepka pozycja: trzymaj się na górze
Dzięki temu nasz globalny projekt nagłówka jest kompletny.
Utwórz nową stronę z predefiniowanym układem
Aby zobaczyć nagłówek i menu o pełnej szerokości w akcji, utwórzmy nową stronę z predefiniowanym układem z biblioteki Divi. W tym przykładzie użyjemy strony głównej Flooring z pakietu układ podłogi.
Dodaj nową stronę do swojej witryny i nadaj jej tytuł, a następnie wybierz opcję Użyj Divi Builder.
W tym przykładzie używamy gotowego układu z Biblioteki Divi, więc wybierz Wybierz układ.
Znajdź i wybierz układ „Strona główna podłogi”.
Wybierz „Wybierz układ”, aby dodać układ do swojej strony.
Teraz projekt jest gotowy!
Ostateczny wynik
Wnioski
Jak powiedzieliśmy powyżej, nagłówek i menu nawigacyjne są sercem doświadczenia użytkownika Twojej witryny. Zobaczyłeś teraz, jak łatwo jest zaprojektować oszałamiający ogólny nagłówek za pomocą modułu Divi „Pełny ekran menu”.
Na szczęście kreator motywów Divi daje Ci kontrolę nad każdym aspektem menu i nagłówka Twojej witryny, a za pomocą kilku kliknięć możesz tworzyć całkowicie niestandardowe i niepowtarzalne projekty.
Czy korzystałeś z globalnych opcji nagłówka Divi, aby dostosować swój nagłówek i menu nawigacyjne? Powiedz nam, co myślisz w komentarzach!
