Cum să creați o navigație verticală transparentă care se suprapune site-ului dvs. Divi

Publicat: 2017-07-26

În tutorialul Divi de astăzi, ne vom concentra în primul rând pe a face ceva special cu navigarea verticală pe site-ul dvs. web. Navigarea verticală este o opțiune adesea uitată pe care o oferă tema Divi. Deși nu este folosit des, poate schimba aspectul complet al site-ului dvs. web și îl poate aduce la nivelul dorit. Pentru a vă ajuta să faceți navigarea pe verticală și mai specială decât este deja, o vom face transparentă. În plus, ne vom asigura că meniul transparent se suprapune peste restul site-ului dvs. web.

În prezent, nu vedem multe site-uri web cu navigare verticală acolo. Dar, în anumite cazuri, poate oferi rezultate uimitoare. Într-una din postările noastre anterioare, v-am arătat 12 exemple de site-uri web Divi care utilizează navigarea verticală pentru a-și îmbunătăți designul web.

Atunci când navigația verticală se suprapune site-ului dvs., este important să folosiți o culoare de fundal transparentă. Dacă nu utilizați o culoare de fundal transparentă, navigarea verticală se poate suprapune cu un anumit conținut de pe site-ul dvs. web. Nu doriți să scăpați de accentul principal pe conținutul site-ului dvs. și nici nu doriți să îl suprapuneți.

Pentru a demonstra ce vrem să spunem exact, am făcut un exemplu elegant și simplist pe care îl vom arăta cum să faci. Pas cu pas, vă vom ghida prin diferiți pași care sunt necesari pentru a obține următoarele rezultate.

Rezultatul final de astăzi: un meniu vertical simplu și elegant

Navigare verticală transparentă

În imaginea de mai sus, puteți observa simplitatea pe care o navigare verticală transparentă o poate aduce site-ului dvs. web. În afară de a vă arăta cum să creați meniul vertical transparent, vă vom oferi și câteva sfaturi generale de proiectare pe care le puteți utiliza atunci când îl recreați pentru a se potrivi cu propriul site web.

Crearea designului în Divi

Abonați-vă la canalul nostru Youtube

setari generale

Înainte de a ne arunca cu capul în exemplul pe care l-am făcut, vă vom oferi câteva informații generale (și linii de cod CSS) care vă ajută să integrați navigarea transparentă într-un mod simplu (fără toate celelalte modificări pe care le-am făcut în exemplu) .

Activați navigarea verticală

Pentru început, trebuie să activați navigarea verticală pe site-ul dvs. web. Pentru aceasta, accesați Tabloul de bord WordPress> Aspect> Personalizare> Antet și navigare> Format antet> Și activați Navigarea verticală.

Alegeți setările dvs. de design în Personalizatorul temei

Acum, că sunteți încă în Customizerul tematic, puteți regla toate setările de navigare verticală în același mod în care modificați navigarea de sus. Reveniți la Antet și navigare> Meniul principal> Și efectuați toate modificările pe care doriți să le faceți meniului principal.

În această parte, este important să oferiți o culoare de fundal meniului care are o opacitate mai mică de 1. De preferință, chiar mai mică de 0,5. Asigurați-vă că acest lucru aplică culoarea de fundal. Dacă doriți ca același lucru să se aplice culorii de fundal a meniului derulant, alegeți aceeași culoare și acolo.

Adăugați codul CSS

După ce ați făcut toate modificările dorite în partea de proiectare a navigării dvs. verticale, puteți trece la partea CSS. Deoarece suntem deja în Customizerul tematic, vom adăuga codul CSS personalizat acolo. Puteți, desigur, să adăugați codul CSS la o pagină, în special, sau prin Opțiunile temei.

Codul CSS cu care vă vom furniza face două lucruri. În primul rând, se asigură că navigarea pe verticală transparentă și site-ul web se suprapun. În al doilea rând, vă ajută să reglați lățimea navigării pe verticală. Dacă nu doriți să modificați deloc lățimea, puteți lăsa acea bucată de cod din site-ul dvs. web și pur și simplu faceți navigarea verticală transparentă și site-ul dvs. să se suprapună.

Aceste modificări se vor aplica numai versiunii desktop a site-ului dvs. web. Pe ecranele care au o lățime mai mică de 981 px, modificările nu se vor aplica.

Adăugați cod CSS în Theme Customizer

În primul rând, avem codul care asigură faptul că site-ul dvs. web umple întreaga lățime a browserului dvs. Copiați și lipiți următorul cod în fila CSS suplimentară a personalizatorului de teme: 

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

În plus, dacă doriți să reglați și lățimea navigării pe verticală, copiați și lipiți următoarele rânduri de cod CSS: 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}

Recreerea navigării verticale simpliste

Acum că am gestionat pașii necesari pentru a crea o navigație verticală transparentă care se suprapune site-ului dvs. web, vom recrea exemplul. Exemplul, încă o dată, arată astfel:

Navigare verticală transparentă

Sfaturi generale de proiectare

Înainte de a începe, vă vom împărtăși câteva sfaturi și gânduri generale de proiectare pe care ar trebui să le aveți în vedere. Aceste sfaturi vă vor ajuta să profitați la maximum de site-ul elegant și simplist pe care îl creați. Să aruncăm o privire la cele două sfaturi pe care cu siguranță dorim să le subliniem.

Centralizează totul

În primul rând, asigurați-vă că centralizați conținutul de pe site-ul dvs. web. Este evident de la sine, dar merită menționat. Dacă utilizați o navigație verticală transparentă care se suprapune site-ului dvs., centralizarea conținutului dvs. se va potrivi cel mai bine cu asta. În schimb, dacă aliniați totul la partea stângă a site-ului dvs. web, este mai probabil ca navigarea verticală transparentă și conținutul să se amestece. Probabil că acesta nu este rezultatul pe care doriți să îl obțineți. Doriți să acordați prioritate simetriei și lizibilității pe site-ul dvs. web.

Dacă optați pentru conținut aliniat diferit, asigurați-vă că verificați umplerea și marginile conținutului. Dacă modificați marginile și căptușelile în consecință, rezultatele se pot dovedi în continuare extraordinare. Dar, probabil, va trebui să faceți o mulțime de modificări manuale.

Fundal cu aceeași culoare oriunde

Dacă utilizați o culoare de fundal complet transparentă pentru navigarea pe verticală, așa cum o folosim în acest exemplu, este important să mențineți o anumită consistență. Doriți ca culoarea din navigarea pe verticală să fie lizibilă și vizibilă, deoarece oamenii ar trebui să poată naviga fără probleme prin site-ul dvs. web.

Dacă alegeți o culoare deschisă a fontului în navigarea verticală transparentă, asigurați-vă că imaginile de fundal sau culorile conțin culori închise. La fel, dacă utilizați o culoare de font întunecată, asigurați-vă că imaginile de fundal sau culorile pe care le utilizați au culori deschise.

Începeți să creați exemplul

Fără alte motive, să începem să recreăm exemplul pe care vi l-am arătat. În primul rând, creați o pagină nouă și adăugați o secțiune de lățime completă. Vă vom arăta doar cum să creați o secțiune a paginii. Desigur, puteți continua și adăuga oricâte secțiuni doriți. Meniul va rămâne exact același la derulare.

Creați un antet cu lățime completă

În secțiunea Fullwidth, adăugați un antet Fullwidth. Apoi, accesați fila Proiectare, puneți Orientarea textului și siglei pe „Centru” și activați și modul ecran complet al antetului dvs. cu lățime completă.

Setări titlu

De asemenea, derulați în aceeași filă și efectuați următoarele modificări la subcategoria Text de titlu:

  • Titlu Font: Lato Light
  • Titlu Stil Font: Capitale
  • Titlu Font Style: 60 (desktop), 50 (tabletă), 40 (telefon)
  • Culoarea textului titlului: #FFFFFF

Setări Subhead

Mai mult, continuați să derulați și asigurați-vă că setările subcategoriei Subhead Text sunt următoarele:

  • Font Subhead: Lato Light
  • Dimensiunea fontului subhead: 22 px (desktop și tabletă), 19 (telefon)
  • Culoare text subtitlu: # c4c4c4

Setări buton

În cele din urmă, efectuați următoarele modificări la subcategoria Buton din fila Proiectare:

  • Utilizați stiluri personalizate pentru butonul 1: Da
  • Buton Dimensiune text: 15 (desktop și tabletă), 12 (telefon)
  • Culoarea textului butonului unu: # 000000
  • Culoare fundal buton 1: #FFFFFF
  • Butonul One Font: Lato Light
  • Stilul fontului Buton One: Bold și majuscule

Setări de fundal pentru gradient

Apoi, deschideți setările Secțiunii lățime completă pentru a adăuga o imagine de fundal cu suprapunere în gradient în subcategoria de fundal a filei Conținut. În funcție de tipul de fundal și de culorile pe care le utilizați, adăugați culori potrivite.

În exemplul nostru, folosim fundaluri întunecate. Prin urmare, vom începe cu o culoare neagră în gradient. Cealaltă culoare, potrivită cu imaginea de fundal este „rgba (0,49,109,0,43)”.

În plus, setările pe care le-am folosit pentru culorile degradate sunt următoarele:

  • Tipul gradientului: liniar
  • Direcția gradientului: 87 grade
  • Poziția inițială: 0%
  • Poziție finală: 62%

Continuând, adăugați o imagine de fundal și aplicați următoarele setări:

  • Dimensiunea imaginii de fundal: copertă
  • Poziția imaginii de fundal: Centru
  • Repetarea imaginii de fundal: fără repetare
  • Amestec de imagine de fundal: Suprapunere

Modificări în Personalizarea temelor

Pentru următorul pas, va trebui să facem alte modificări în Customizerul tematic. Dacă vă aflați în tabloul de bord WordPress, accesați Aspect> Personalizare> Antet și navigare> Bara principală de meniu> și efectuați următoarele modificări:

  • Logo Înălțime maximă: 83
  • Dimensiune text: 14
  • Spațierea literelor: 0
  • Font: Lato Light
  • Stilul fontului: majuscule
  • Culoarea textului: #FFFFFF
  • Culoare link activ: #FFFFFF
  • Culoare fundal: #FFFFFF
  • Culoarea fundalului meniului drop-down: rgba (221,153,51,0)
  • Culoare linie meniu derulant: # 1E73BE
  • Culoarea textului din meniul drop-down: #FFFFFF

Adăugați cod CSS personalizat în Personalizator temă

În timp ce vă aflați încă în Customizerul tematic, vom adăuga liniile de cod CSS necesare pentru ca aspectul să arate așa cum arată.

Prima parte a codului elimină marginea din stânga a site-ului web atunci când se utilizează o navigare verticală. A doua parte pune meniul mai aproape de stânga. A treia parte plasează o margine de sus și o margine de jos pentru fiecare pagină din meniu. A patra parte adaugă o marjă superioară la logo și elimină marja după logo. Și, în cele din urmă, ne-am asigurat că meniul păstrează aceeași distanță între siglă și elementele de meniu, eliminând căptușeala superioară. Aceste modificări se aplică și meniului atunci când derulați. Prin urmare, meniul va arăta la fel pe întregul site web. 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

Rezultat final

Ca urmare a tuturor pașilor pe care i-ați urmat pe parcursul acestei postări, ar trebui să aveți următorul rezultat pe site-ul pe care lucrați:

Navigare verticală transparentă

Înfășurându-se

În această postare, v-am arătat cum să realizați o navigație verticală transparentă care să se suprapună site-ului dvs. web. În plus, am împărtășit și un design elegant și simplist pe care îl puteți folosi pentru propriul dvs. site web, dacă urmați această postare pas cu pas. Dacă aveți întrebări sau solicitări, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos, astfel încât să putem lua legătura!

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!