Cum se face suprapunerea standard și verticală de navigare pe site-ul dvs. Divi

În această postare, vă vom arăta cum să combinați navigarea standard și verticală. Mai exact; cum să faci ca meniul secundar și subsolul să se suprapună peste navigarea verticală pe site-ul tău. Asta înseamnă că nu va trebui să alegeți între a avea o navigare de sus sau o navigație verticală; le poți face pe amândouă! Puteți stiliza meniul principal și meniul secundar oricum doriți în Customizerul dvs. de temă, nu asta vă vom ajuta să realizați în acest post în mod explicit. Mai degrabă vă vom arăta următoarele lucruri care vă ajută în procesul de a face următoarele lucruri:

• cum să faci ca meniul secundar să se suprapună peste navigarea pe verticală
• cum să vă fixați meniul secundar atunci când derulați
• cum să faci ca subsolul tău să se suprapună peste navigarea pe verticală

Acestea sunt toate lucrurile care vă vor ajuta să creați un echilibru frumos între navigarea standard și verticală pe site-ul dvs. web. Prin suprapunerea standard și verticală a navigării, site-ul dvs. web nu va simți că este dominat de navigarea verticală. Conținutul principal de pe site-ul dvs. web se va adapta la navigarea verticală, dar meniul secundar și subsolul se vor comporta în același mod în care se comportă atunci când navigarea verticală nu este activată.

Rezultat

La sfârșitul acestui tutorial, veți putea obține următorul rezultat pe un site web care utilizează navigarea verticală:

Inspirația pentru navigarea standard și verticală suprapusă

Într-o postare anterioară, am împărtășit câteva exemple de site-uri web care utilizează navigarea verticală. Toate exemplele ne-au arătat cât de creativ puteți obține cu o opțiune Divi care nu este atât de des utilizată. O navigare verticală gândită pe site-ul dvs. web vă poate oferi acea interacțiune suplimentară pe care încercați să o realizați cu vizitatorii dvs.

În timp ce afișam exemplele, au existat câteva comentarii care ne-au inspirat să vă arătăm cum să obțineți anumite rezultate. Această postare este unul dintre acele tutoriale bazate pe inspirație care vă vor arăta cum să faceți câteva modificări pe site-ul dvs. fără a fi nevoie să căutați singur soluții.

Am fost inspirați de site-ul web Alex Brands care folosește meniul secundar din partea de sus și navigarea verticală din partea stângă a paginii.

În timp ce derulați, meniul secundar derulează. Oferă o atingere extraordinară minunată site-ului web și ajută la menținerea concentrării asupra conținutului din meniul secundar. Alex Brands este un site de comerț electronic, iar meniul secundar fix ajută la amintirea oamenilor ce se află în coșul lor de cumpărături și despre oferta pe care o oferă.

Acest tip de navigație verticală este deosebit de interesant pentru site-urile de comerț electronic. Navigarea verticală facilitează navigarea vizitatorilor prin diferitele categorii de articole oferite pe site. Este mai ușor să urmăriți elementele de meniu atunci când sunt situate într-o navigație verticală, deoarece este mai ușor interpretat ca o listă pe care oamenii trebuie să o parcurgă.

Cum se face suprapunerea standard și verticală de navigare pe site-ul dvs. Divi

Abonați-vă la canalul nostru Youtube

Pași generali

Înainte de a ne arunca cu capul în partea în care vă arătăm cum să faceți ca navigarea dvs. standard să se suprapună peste navigarea pe verticală, vom parcurge mai întâi pașii generali. Acești pași generali sunt fundamentul pe care va trebui să-l parcurgeți înainte de a aplica suprapunerea.

Fără alte datorii; să începem.

Creați-vă meniul și adăugați elemente de meniu

Primul lucru pe care trebuie să-l faceți (dacă nu ați făcut-o deja) este să adăugați un meniu și elementele de meniu pe site-ul dvs. web. Acestea sunt elementele de meniu care vor apărea în navigarea dvs. verticală. Pentru a adăuga un nou meniu la site-ul dvs. web, accesați tabloul de bord WordPress> Aspect> Meniuri. Odată ce sunteți pe pagina respectivă, dați noului meniu un titlu și creați meniul.

Continuați adăugând elemente de meniu și transformându-l în meniul principal.

Adăugați pictograme sociale în meniul secundar

Următorul lucru pe care trebuie să-l faci este să îți activezi meniul secundar. Pentru a vă asigura că meniul secundar apare pe site-ul dvs., meniul secundar trebuie să aibă un element activat. În această postare, vom adăuga doar pictogramele de pe rețelele sociale, dar puteți, desigur, să adăugați orice doriți.

Pentru a activa meniul secundar și pentru a afișa pictogramele sociale, începeți accesând tabloul de bord WordPress> Personalizați> Antet și navigare> Elemente antet> Activați opțiunea „Afișați pictogramele sociale”.

Activați navigarea verticală

Următorul pas pe care va trebui să îl faceți este activarea navigării verticale în cadrul constructorului Divi. Pentru aceasta, accesați tabloul de bord WordPress> Aspect> Personalizare> Antet și navigare> Format antet> Activați navigarea verticală.

În afară de aceasta, puteți alege și unde doriți să apară navigarea pe verticală; în partea stângă sau dreaptă a site-ului dvs. web.

Dezactivați navigarea fixă ​​pentru meniul dvs. principal

Înainte de a trece la modificările avansate, rămâne un ultim lucru de făcut: dezactivarea navigării fixe pentru meniul principal. Dacă ați dezactivat deja meniul principal, săriți peste acest pas. Cu toate acestea, dacă meniul dvs. principal este fixat în prezent, accesați tabloul de bord WordPress> Divi> Opțiuni temă> Și dezactivați navigarea fixă.

Combinați navigarea standard și verticală

În următoarea parte a acestei postări, vă vom arăta cum să transformați navigarea standard și verticală în ceva diferit decât de obicei. Când vine vorba de navigație verticală, suntem obișnuiți să vedem o parte a ecranului acoperită de acesta. Meniul secundar și subsolul, implicit, nu vor trece de navigare verticală.

Dar, în unele cazuri, vrem să ne asigurăm că navigarea secundară și subsolul sunt în partea de sus a navigării verticale. În acest fel, singurul lucru care va depinde de navigarea verticală este conținutul principal. Site-ul dvs. web nu va simți că este complet împărțit în două locuri; navigarea verticală și restul site-ului web.

Adăugați cod CSS la Opțiunile temei

Puteți adăuga codul CSS în două moduri: prin Opțiunile temei Divi sau prin Customizerul temei. Pentru a adăuga codul la Opțiunile temei, accesați tabloul de bord WordPress> Divi> Opțiuni temă> General> Derulați în jos fila și lipiți următoarele linii de cod CSS în caseta CSS personalizată:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Adăugați cod CSS la Customizerul temei

Cealaltă posibilitate pe care o aveți este adăugarea liniilor de cod CSS în Theme Customizer. Pentru aceasta, accesați tabloul de bord WordPress> Aspect> Personalizare> CSS suplimentar> Și lipiți liniile CSS în câmpul CSS personalizat:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Gânduri finale

În această postare, v-am arătat cum să combinați navigarea standard și verticală pe site-ul dvs. web. Mai precis; v-am arătat cum să faceți ca meniul secundar și subsolul să se suprapună cu navigarea pe verticală și cum să vă fixați meniul secundar. Dacă aveți întrebări sau sugestii; nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de Line design / shutterstock.com