Cum să creați un meniu de navigare vertical (sau antet) pentru site-ul dvs. Divi
Publicat: 2020-06-14Meniurile de navigare verticală pot fi utile pentru anumite site-uri web care au nevoie de mai multe elemente de meniu în prim plan. Meniurile orizontale pot fi dificil pentru a se potrivi cu toate linkurile de meniu necesare, în special pe lățimi mai mici ale browserului. În acest tutorial, vă vom arăta cum să creați un meniu de navigare vertical personalizat utilizând Divi Theme Builder. Acest lucru vă va permite mai mult spațiu pentru prezentarea articolelor din meniul WordPress. Și veți avea toată puterea de a adăuga module Divi suplimentare la antetul vertical și de a le proiecta împreună cu constructorul Divi.
Să începem!
Trage cu ochiul
Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.
Descărcați aspectul GRATUIT
Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.
Descarcă gratis
Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.
V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!
Pentru a încărca șablonul, navigați la Divi Theme Builder în backend-ul site-ului dvs. WordPress.
Încărcați șablonul de site implicit global
Apoi, în colțul din dreapta sus, veți vedea o pictogramă cu două săgeți. Faceți clic pe pictogramă.
Navigați la fila de import, încărcați fișierul JSON pe care ați putut să-l descărcați în această postare și faceți clic pe „Importați șabloane Divi Theme Builder”.
Salvați modificările Divi Theme Builder
După ce ați încărcat fișierul, veți observa un nou antet și subsol global în șablonul dvs. de site web implicit. Salvați modificările Divi Theme Builder imediat ce doriți ca șablonul să fie activat.
Să trecem la tutorial, nu-i așa?
Partea 1: Construirea unui nou antet global
Pentru acest tutorial, vom construi meniul de navigare vertical într-un antet global folosind Divi Theme Builder. Cu toate acestea, vă vom arăta cum să adăugați același meniu la corpul unui șablon de pagină la sfârșitul postării, doar în cazul în care doriți să îl utilizați în plus față de meniul principal al site-ului dvs.
Pentru a începe, accesați tabloul de bord WordPress și navigați la Divi> Theme Builder.
Apoi faceți clic pe zona „Adăugați antet global” din șablonul de site implicit și selectați „Creați antet global” din meniul derulant.
Apoi selectați opțiunea „Build from Scratch”.
Partea 2: Proiectarea aspectului secțiunii verticale
În Editorul global de aspect antet, deschideți setările secțiunii obișnuite deja existente și actualizați următoarele.
- Lățime (desktop): 300 px
- Lățime (tabletă și telefon): 100%
- Înălțime (desktop): 100vh
- Înălțime (tabletă și telefon): automat
- Umplutură (desktop): 4vh sus, 0 px jos
- Căptușeală (tabletă și telefon): 0 px sus, 0 px jos
Continuați proiectarea adăugând o umbră de casetă după cum urmează:
- Box Shadow: vezi captura de ecran
- Box Shadow Vertical Position: 0px
- Puterea neclarității umbrei cutiei: 20 px
- Puterea răspândirii umbrei cutiei: -10px
- Culoare umbră: rgba (0,0,0,0,3)
Pentru a vă asigura că meniul de navigare vertical rămâne vizibil în stânga în timp ce utilizatorul derulează, actualizați poziția la fix și actualizați indexul z după cum urmează:
- Poziție: Fix
- Indicele Z: 9999
Pentru a ne asigura că vom putea vedea submeniul de navigare care se va extinde în afara secțiunii, adăugați următorul CSS personalizat la elementul principal:
overflow: visible !important;
Acum secțiunea dvs. se află într-un aspect vertical în partea stângă a șablonului.
Partea 3: Proiectarea meniului vertical
Cu secțiunea în poziție, suntem gata să proiectăm meniul vertical. Pentru a face acest lucru, vom folosi un modul de meniu cu unele CSS personalizate pentru a stiliza navigarea care va fi afișată vertical.
Vom utiliza, de asemenea, unitatea de lungime vh, astfel încât meniul să se scaleze frumos cu diferite înălțimi ale browserului.
Adăugarea rândului
Pentru a începe, adăugați un rând cu o coloană la secțiune.
Apoi actualizați setările rândului după cum urmează:
Dimensiune și căptușeală
- Lățimea jgheabului: 1
- Lățime: 100%
- Lățime maximă: 80%
- Căptușeală (desktop): 3vh sus, 3vh jos
- Căptușeală (tabletă și telefon): 0 px sus, 0 px jos
Frontieră
- Lățimea chenarului: 1 px
- Culoare margine: #eeeeee
Adăugarea modulului de meniu
În interiorul rândului cu o coloană, adăugați un nou modul de meniu.
Selectați un meniu care va fi afișat sub comutarea conținutului.
Apoi adăugați logo-ul site-ului dvs. ca conținut dinamic sub comutatorul Logo.
Sub fila Proiectare, actualizați următoarele:
- Stil: Centrat
- Font meniu: Nunito Sans
- Culoare text meniu: # 535b7c
- Dimensiune text meniu: 18 px (desktop), 14 px (tabletă și telefon)
- Înălțimea liniei meniului: 2em
- Culoare linie meniu derulant: # 535b7c
- Meniul derulant Culoare link activ: # 535b7c
- Culoare pictogramă coș de cumpărături: # 535b7c
- Culoare pictogramă de căutare: # 535b7c
- Culoare pictogramă meniu hamburger: # 535b7c
- Garnitura (desktop): 2vh sus, 2vh jos
- Umplutură (desktop): 10 px sus, 10 px jos
Partea 4: Adăugarea CSS personalizat pentru meniu
Meniul are nevoie de niște CSS personalizate pentru a obține navigarea verticală pe care dorim să o realizăm. Pentru a începe, accesați fila avansată și adăugați următorul CSS personalizat la linkul meniului și sigla meniului.
Link de meniu CSS (desktop):
width: 100%; padding: 1vh 15px; background: #f8f8f8; border-radius: 3px; border: 1px solid #eeeeee;
Meniu Link CSS (tabletă):
width: auto; border:none;
Logo-ul meniului CSS:
margin-bottom: 20px;
Apoi, adăugați o clasă CSS personalizată la modulul de meniu, după cum urmează:
Clasa CSS: et-vert-menu
Va fi folosit pentru a viza acest meniu special în CSS-ul nostru personalizat extern pe care îl vom adăuga folosind un modul de cod.
Adăugarea CSS personalizat cu modulul de cod
Sub modulul de meniu, adăugați un nou modul de cod.
Apoi lipiți următorul cod în caseta de coduri (asigurați-vă că îl așezați între etichetele de stil):
/*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;
}
}
Partea 5: Proiectarea butonului și a pictogramelor de urmărire a rețelelor sociale
Acum că meniul este complet, putem adăuga un buton și unele rețele sociale urmează linkuri pentru a completa antetul vertical.
Adăugarea rândului
Adăugați un nou rând cu o coloană sub rândul curent.
Adăugarea butonului
Apoi adăugați un nou modul de buton pe rând.
Actualizați setările butonului după cum urmează:
- Aliniere buton: centru
- Dimensiune text buton: 18 px (desktop), 14 px (tabletă și telefon)
- Culoarea textului butonului: #ffffff
- Culoarea fundalului butonului: # 535b7c
- Lățimea chenarului butonului: 0 px
Apoi accesați fila avansată și lipiți următorul CSS personalizat în elementul principal:
Element principal CSS (desktop)
display:block; width: 100%;
Element principal CSS (tabletă)
display:inherit;
Adăugarea pictogramelor de urmărire pe rețelele sociale
Sub buton, adăugați un modul Social Media Follow.
Adăugați rețelele sociale dorite în fila conținut.
Sub fila Proiectare, actualizați următoarele:
- Alinierea modulului: centru
- Culoare pictogramă: # 535b7c
Apoi deschideți setările fiecărei rețele și ștergeți culoarea de fundal.
Apoi adăugați o mică marjă superioară după cum urmează:
- Marja: 3vh top
Actualizați setările rândului
După ce pictogramele de urmărire pe rețelele sociale sunt complete, deschideți setările rândului și reglați următoarele:
- Lățimea jgheabului: 1
- Umplutură (desktop): 3vh sus, 0 px jos
- Căptușeală (tabletă și telefon): partea superioară de 10 px
Salvați aspectul și șablonul
După ce ați terminat, salvați aspectul și șablonul.
Rezultat final
Iată rezultatul final pe o pagină live.
Cum se adaugă meniul de navigare verticală în zona corpului unui șablon de pagină
Dacă doriți să adăugați meniul de navigare vertical la un aspect de pagină (în loc de antetul dvs. global), trebuie mai întâi să salvați aspectul secțiunii în Biblioteca Divi.
Pentru aceasta, deschideți Global Header Layout Editor și salvați secțiunea verticală (care conține meniul) în biblioteca Divi.
Apoi ieșiți din editorul de aspect și creați un șablon nou și atribuiți-l oricărei pagini pe care doriți. Faceți clic pentru a crea un corp personalizat pentru șablonul de pagină.
Selectați pentru a-l construi de la zero.
Adăugați o nouă secțiune de lățime completă la aspect.
Apoi, adăugați un modul de conținut complet Postare la secțiune.
Ștergeți secțiunea obișnuită implicită din partea de sus a paginii, apoi deschideți setările pentru secțiunea lățime completă și adăugați următorul CSS personalizat la elementul principal:
Element principal CSS (desktop)
width: calc(100% - 300px); margin-left:300px !important;
Element principal CSS (tabletă)
width: 100%;
Sub secțiunea obișnuită, faceți clic pentru a adăuga o nouă secțiune și, sub fila Adăugare din bibliotecă, selectați secțiunea de meniu vertical pe care ați salvat-o anterior în bibliotecă.
Deoarece nu vrem ca secțiunea să apară pe mobil, deschideți setările secțiunii și dezactivați vizibilitatea secțiunii pe tabletă și telefon.
Apoi deschideți modulul de cod din aspectul secțiunii și înlocuiți acest fragment de cod ...
#et-main-area {
width: calc(100% - 300px);
margin-left: 300px;
}
Cu asta…
#main-header, #main-footer {
width: calc(100% - 300px);
margin-left: 300px;
}
Aceasta va muta antetul principal și subsolul pentru a se potrivi cu meniul vertical fix din stânga șablonului de pagină. Iată cum arată pe o pagină live utilizând antetul și subsolul implicit al Divi.
Gânduri finale
Meniul de navigare vertical prezentat aici a primit o poziție fixă. Cu toate acestea, dacă aveți nevoie de mai mult spațiu pentru elemente de meniu sau conținut suplimentar, puteți schimba poziția secțiunii în absolută. De asemenea, puteți schimba depășirea verticală pentru a derula pentru a oferi utilizatorului posibilitatea de a derula prin elementele de meniu (rețineți doar că nu veți putea vedea / utiliza submeniurile cu această setare de depășire).
Configurarea secțiunii verticale deschide ușa și pentru crearea unor bare laterale personalizate. Sper că acest lucru va fi util pentru proiectele viitoare.
Aștept cu nerăbdare să aud de la dvs. în comentarii.
Noroc!