Jak utworzyć pionowe menu nawigacyjne (lub nagłówek) dla swojej witryny Divi?

Pionowe menu nawigacyjne mogą się przydać w przypadku niektórych witryn, które wymagają większej liczby elementów menu na pierwszym planie. Menu poziome może być trudne do dopasowania wszystkich potrzebnych linków menu, szczególnie w przypadku mniejszych przeglądarek. W tym samouczku pokażemy, jak zbudować niestandardowe pionowe menu nawigacyjne za pomocą Divi Theme Builder. Dzięki temu uzyskasz więcej miejsca na prezentację elementów menu WordPress. Będziesz mieć pełną moc, aby dodać dodatkowe moduły Divi do pionowego nagłówka i zaprojektować je za pomocą konstruktora Divi.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, 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!

Aby przesłać szablon, przejdź do Divi Theme Builder na zapleczu swojej witryny WordPress.

Prześlij globalny domyślny szablon strony internetowej

Następnie w prawym górnym rogu zobaczysz ikonę z dwiema strzałkami. Kliknij ikonę.

Przejdź do zakładki importu, prześlij plik JSON, który udało Ci się pobrać w tym poście, i kliknij „Importuj szablony Divi Theme Builder”.

Zapisz zmiany w kreatorze motywów Divi

Po przesłaniu pliku zauważysz nowy globalny nagłówek i stopkę w domyślnym szablonie witryny. Zapisz zmiany Divi Theme Builder, gdy tylko chcesz, aby szablon został aktywowany.

Przejdźmy do samouczka, dobrze?

Część 1: Budowanie nowego globalnego nagłówka

W tym samouczku zbudujemy pionowe menu nawigacyjne w globalnym nagłówku za pomocą Divi Theme Builder. Jednak pokażemy Ci, jak dodać to samo menu do treści szablonu strony na końcu posta, na wypadek, gdybyś chciał go użyć oprócz głównego menu swojej witryny.

Aby rozpocząć, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Divi> Theme Builder.

Następnie kliknij obszar „Dodaj globalny nagłówek” domyślnego szablonu witryny i wybierz „Zbuduj globalny nagłówek” z menu rozwijanego.

Następnie wybierz opcję „Buduj od podstaw”.

Część 2: Projektowanie układu przekroju pionowego

W edytorze globalnego układu nagłówka otwórz ustawienia zwykłej sekcji, która już tam jest, i zaktualizuj następujące elementy.

• Szerokość (pulpit): 300px
• Szerokość (tablet i telefon): 100%

• Wysokość (stacjonarny): 100vh
• Wysokość (tablet i telefon): auto

• Wypełnienie (komputer): góra 4vh, dół 0px
• Wypełnienie (tablet i telefon): 0px na górze, 0px na dole

Kontynuuj projekt, dodając cień w następujący sposób:

• Cień pudełka: patrz zrzut ekranu
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 20px
• Siła rozprzestrzeniania się cieni w pudełku: -10px
• Kolor cienia: rgba(0,0,0,0.3)

Aby upewnić się, że pionowe menu nawigacyjne pozostaje widoczne po lewej stronie podczas przewijania przez użytkownika, zaktualizuj pozycję do stałej i zaktualizuj indeks z w następujący sposób:

• Pozycja: Naprawiono
• Indeks Z: 9999

Aby upewnić się, że będziemy mogli zobaczyć nawigację podmenu, która wyjdzie poza sekcję, dodaj następujący niestandardowy CSS do głównego elementu:

overflow: visible !important;

Teraz twoja sekcja jest w układzie pionowym po lewej stronie szablonu.

Część 3: Projektowanie menu pionowego

Po utworzeniu sekcji jesteśmy gotowi do zaprojektowania pionowego menu. Aby to zrobić, użyjemy modułu menu z niektórymi niestandardowymi kodami CSS, aby wystylizować nawigację tak, aby była wyświetlana w pionie.

Użyjemy również jednostki długości vh, aby menu ładnie skalowało się z różnymi wysokościami przeglądarki.

Dodawanie rzędu

Aby rozpocząć, dodaj do sekcji wiersz z jedną kolumną.

Następnie zaktualizuj ustawienia wiersza w następujący sposób:

Rozmiar i wypełnienie

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 80%
• Wypełnienie (komputer): 3vh na górze, 3vh na dole
• Wypełnienie (tablet i telefon): 0px na górze, 0px na dole

Granica

• Szerokość obramowania: 1px
• Kolor obramowania: #eeeeee

Dodawanie modułu menu

W jednokolumnowym wierszu dodaj nowy moduł menu.

Wybierz menu, które ma być wyświetlane pod przełącznikiem zawartości.

Następnie dodaj logo witryny jako zawartość dynamiczną pod przełącznikiem Logo.

Na karcie projekt zaktualizuj następujące elementy:

• Styl: wyśrodkowany
• Czcionka menu: Nunito Sans
• Kolor tekstu menu: #535b7c
• Rozmiar tekstu menu: 18px (komputer), 14px (tablet i telefon)
• Wysokość linii menu: 2em
• Kolor linii menu rozwijanego: #535b7c
• Menu rozwijane Aktywny kolor łącza: #535b7c

• Kolor ikony koszyka na zakupy: #535b7c
• Kolor ikony wyszukiwania: #535b7c
• Kolor ikony menu hamburgerów: #535b7c

• Wypełnienie (komputer): 2vh góra, 2vh dół
• Padding (komputer): 10px góra, 10px dół

Część 4: Dodawanie niestandardowego CSS do menu

Menu wymaga niestandardowego kodu CSS, aby uzyskać pionową nawigację, którą chcemy osiągnąć. Aby rozpocząć, przejdź do zakładki Zaawansowane i dodaj następujący niestandardowy kod CSS do łącza menu i logo menu.

Menu Link CSS (komputer):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

Menu Link CSS (tablet):

width: auto;
border:none;

Menu Logo CSS:

margin-bottom: 20px;

Następnie dodaj niestandardową klasę CSS do modułu menu w następujący sposób:

Klasa CSS: et-vert-menu

Zostanie użyty do kierowania tego konkretnego menu w naszym zewnętrznym niestandardowym CSS, który dodamy za pomocą modułu kodu.

Dodawanie niestandardowego CSS za pomocą modułu kodu

W module menu dodaj nowy moduł kodu.

Następnie wklej następujący kod do pola kodu (pamiętaj, aby umieścić go między tagami stylu):

/*Style Vertical Navigation Menu*/  
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/  
#et-main-area { 
  width: calc(100% - 300px); 
  margin-left: 300px;
}
}

Część 5: Projektowanie przycisków i ikon śledzenia w mediach społecznościowych

Teraz, gdy menu jest gotowe, możemy dodać przycisk, a niektóre media społecznościowe podążają za linkami, aby uzupełnić pionowy nagłówek.

Dodawanie rzędu

Dodaj nowy jednokolumnowy wiersz pod bieżącym wierszem.

Dodawanie przycisku

Następnie dodaj nowy moduł przycisku do wiersza.

Zaktualizuj ustawienia przycisków w następujący sposób:

• Wyrównanie przycisków: środek
• Rozmiar tekstu przycisku: 18px (komputer), 14px (tablet i telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #535b7c
• Szerokość obramowania przycisku: 0px

Następnie przejdź do zakładki zaawansowane i wklej następujący niestandardowy kod CSS do elementu głównego:

Główny element CSS (komputer stacjonarny)

display:block;
width: 100%;

Główny element CSS (tablet)

display:inherit;

Dodawanie ikon śledzenia w mediach społecznościowych

Pod przyciskiem dodaj moduł Social Media Follow.

Dodaj żądane sieci społecznościowe na karcie treści.

Na karcie Projekt zaktualizuj następujące elementy:

• Wyrównanie modułu: Środek
• Kolor ikony: #535b7c

Następnie otwórz ustawienia każdej z sieci i usuń kolor tła.

Następnie dodaj trochę górnego marginesu w następujący sposób:

• Marża: górna 3vh

Aktualizuj ustawienia wiersza

Po zakończeniu ikon śledzenia w mediach społecznościowych otwórz ustawienia wiersza i dostosuj następujące elementy:

• Szerokość rynny: 1
• Wypełnienie (komputer): 3vh na górze, 0px na dole
• Wypełnienie (tablet i telefon): góra 10px

Zapisz układ i szablon

Po zakończeniu zapisz układ i szablon.

Ostateczny wynik

Oto wynik końcowy na aktywnej stronie.

Jak dodać pionowe menu nawigacyjne do obszaru treści szablonu strony?

Jeśli chcesz dodać pionowe menu nawigacyjne do układu strony (zamiast globalnego nagłówka), musisz najpierw zapisać układ sekcji w bibliotece Divi.

Aby to zrobić, otwórz Edytor układu nagłówka globalnego i zapisz sekcję pionową (zawierającą menu) w swojej bibliotece Divi.

Następnie wyjdź z edytora układu i utwórz nowy szablon i przypisz go do dowolnej strony. Kliknij, aby zbudować niestandardową treść szablonu strony.

Wybierz, aby zbudować go od podstaw.

Dodaj do układu nową sekcję o pełnej szerokości.

Następnie dodaj do sekcji moduł treści posta o pełnej szerokości.

Usuń domyślną zwykłą sekcję u góry strony, a następnie otwórz ustawienia sekcji o pełnej szerokości i dodaj następujący niestandardowy kod CSS do elementu głównego:

Główny element CSS (komputer stacjonarny)

width: calc(100% - 300px);
margin-left:300px !important;

Główny element CSS (tablet)

width: 100%;

W sekcji zwykłej kliknij, aby dodać nową sekcję, a na karcie Dodaj z biblioteki wybierz sekcję menu pionowego, którą wcześniej zapisałeś w bibliotece.

Ponieważ nie chcemy, aby sekcja była wyświetlana na urządzeniach mobilnych, otwórz ustawienia sekcji i wyłącz widoczność sekcji na tablecie i telefonie.

Następnie otwórz moduł kodu w układzie sekcji i zastąp ten fragment kodu…

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Z tym…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Spowoduje to przeniesienie głównego nagłówka i stopki tak, aby zmieściły się w stałym pionowym menu po lewej stronie szablonu strony. Oto, jak wygląda na aktywnej stronie przy użyciu domyślnego nagłówka i stopki Divi.

Końcowe przemyślenia

Przedstawione tutaj pionowe menu nawigacyjne ma ustaloną pozycję. Jeśli jednak potrzebujesz więcej miejsca na dodatkowe elementy menu lub zawartość, możesz zmienić położenie sekcji na bezwzględne. Możesz także zmienić pionowe przepełnienie, aby przewijać, aby dać użytkownikowi możliwość przewijania pozycji menu (pamiętaj, że nie będziesz mógł zobaczyć/używać podmenu z tym ustawieniem przepełnienia).

Konfiguracja sekcji pionowej otwiera drzwi do tworzenia niestandardowych pasków bocznych. Mam nadzieję, że przyda się to w przyszłych projektach.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!