Divi: Jak stworzyć pionowe menu nawigacyjne

Czy chciałbyś stworzyć pionowe menu nawigacyjne, aby prezentowało więcej elementów na pierwszym planie w DIVI?

Pionowe menu nawigacyjne mogą być przydatne w przypadku niektórych witryn internetowych, które wymagają większej liczby elementów menu na pierwszym planie. Skalowanie menu poziomych do wszystkich niezbędnych łączy menu może być trudne, zwłaszcza w przypadku mniejszych przeglądarek. 

W tym samouczku pokażemy, jak utworzyć pionowe menu nawigacyjne za pomocą Divi Theme Builder. 

Dzięki temu będziesz mieć więcej miejsca na zaprezentowanie elementów menu WordPress.

Zacznijmy!

badanie

Oto krótkie spojrzenie na projekt, który będziemy tworzyć w tym samouczku.

Przejdźmy do samouczka.

Tworzenie nowego globalnego nagłówka

W tym samouczku utworzymy pionowe menu nawigacyjne w globalnym nagłówku za pomocą kreatora motywów Divi

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

Następnie kliknij obszar „Dodaj globalny nagłówek” pliku szablon strony internetowej domyślnie i wybierz "Build Global Header" z listy rozwijanej.

Czytaj także: Jak stworzyć globalny nagłówek za pomocą Theme Buildera w DIVI

Projekt układu przekroju pionowego

W edytorze globalnego układu nagłówka otwórz standardowe ustawienia sekcji, które już tam są, i zaktualizuj następujące.

• Maksymalna szerokość: 300px
• Wysokość: 100vh

• Margines wewnętrzny: góra 4vh, dół 0px

Kontynuuj dostosowywanie, dodając pole cienia w następujący sposób:

• Pudełko cieni: 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 kartę Zaawansowane do stałej pozycji i zaktualizuj indeks Z w następujący sposób:

• Stała stacja
• Indeks Z: 9999

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

overflow: visible !important;

Twoja sekcja będzie teraz w układzie pionowym po lewej stronie szablonu.

Zaprojektuj pionowe menu

Po umieszczeniu sekcji jesteśmy gotowi do zaprojektowania pionowego menu. Aby to zrobić, użyjemy modułu menu z niestandardowym CSS, aby dostosować nawigację do wyświetlania w pionie.

Użyjemy również jednostki długości vh, aby menu dobrze dopasowywało się do różnych wysokości przeglądarki.

Dodanie linii

Aby rozpocząć, dodaj wiersz do kolumny w sekcji.

Następnie zaktualizuj parametry linii w następujący sposób:

Rozmiary i odstępy

• Użyj niestandardowej szerokości rynny: TAK
• Rozstaw kolumn: 1
• Maksymalna szerokość: 100%
• Maksymalna szerokość: 80%

• Margines wewnętrzny: 3vh Górny, 3vh Dolny

Granica

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

Dodano moduł menu

W jednokolumnowym wierszu dodaj nowy moduł Menu.

Wybierz menu, które ma być wyświetlane na karcie Treść.

Następnie dodaj logo swojego strona internetowa jak treść dynamiczny pod przyciskiem Logo.

Na karcie Styl zaktualizuj następujące elementy:

• Styl: wyśrodkowany

• Menu czcionek: Nunito Sans
• Kolor tekstu menu: #535b7c

• Menu Rozmiar tekstu: 18px (komputer), 14px (tablet i telefon)
• Wysokość wiersza menu: 2 em

• Kolor wiersza rozwijanego: #535b7c
• Menu rozwijane Aktywny kolor łącza: #535b7c

• Kolor ikony koszyka: #535b7c
• Kolor ikony wyszukiwania: #535b7c
• Kolor ikony Hamburger Menu: #535b7c

• Margines wewnętrzny: 2vh Górny, 2vh Dolny

Dodano niestandardowy CSS dla 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 linku menu i logo menu.

Link do menu CSS (komputer):

width: 100%;

padding: 1vh 15px;

background: #f8f8f8;

border-radius: 3px;

border: 1px solid #eeeeee;

Link do menu CSS (tablet):

width: auto;

border:none;

Logo CSS menu:

margin-bottom: 20px;

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

Klasa CSS: et-vert-menu

Ta klasa będzie używana do kierowania tego konkretnego menu w naszym zewnętrznym niestandardowym CSS, który dodamy za pomocą modułu Code.

Dodawanie własnego CSS za pomocą modułu Code

W module Menu dodaj moduł Kod.

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

/* Menu de Navigation Style Vertical*/

.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: 10px0!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 alland (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;

}

}

Zaprojektuj przycisk i ikony 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.

Dodanie linii

Dodaj nowy wiersz o jedną kolumnę poniżej bieżącego wiersza.

Dodaj przycisk

Następnie dodaj moduł Button do linii.

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

• Wyrównanie przycisków: środek

• Użyj niestandardowych stylów dla przycisku: TAK
• Rozmiar tekstu przycisku: 18px (komputer), 14px (tablet i telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #535b7c
• Szerokość obramowania przycisku: 0 pikseli

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

Główny element CSS (komputer)

display:block;

width: 100%;

Główny element CSS (tablet)

display:inherit;

Dodano ikony śledzenia mediów społecznościowych

Poniżej przycisku dodaj moduł Śledź nas w mediach społecznościowych.

Dodaj wybrane sieci społecznościowe pod zakładką treść.

Na karcie Styl zaktualizuj następujące elementy:

• Wyrównanie modułu: Środek

• Kolor ikony: #535b7c

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

Następnie dodaj mały górny margines w następujący sposób:

• Marża: szczyt 3vh

Zaktualizuj parametry linii

Gdy ikony śledzenia w mediach społecznościowych są gotowe, otwórz Ustawienia linii i dostosuj następujące ustawienia:

• Użyj niestandardowej szerokości rynny: TAK
• Rozstaw kolumn: 1

• Margines wewnętrzny: góra 3vh, dół 0px

Zapisz układ i szablon

Po zakończeniu zapisz układ i szablon.

Ostateczny wynik

Oto wynik końcowy na aktywnej stronie.

Pobierz DIVI teraz !!!

Wnioski

Pokazane 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

Konfiguracja sekcji pionowej otwiera również drzwi do tworzenia niestandardowych pasków bocznych. 

Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...