Cum să includeți bara de meniu principală în proiectarea paginii dvs. Divi

Publicat: 2018-08-26

Navigarea este o parte vitală a experienței utilizatorului pe site-ul dvs. web. Este important să vă asigurați că vizitatorii dvs. pot naviga fără probleme prin site-ul dvs. web fără a fi nevoie să compromiteți aspectele estetice. În mod implicit, bara de meniu principal WordPress este plasată în partea de sus a fiecărei pagini și este considerată separată de designul paginii pe care alegeți să îl urmați. În multe cazuri, totuși, includerea meniului dvs. în designul general al paginii poate aduce rezultate uimitoare. Acesta va oferi site-ului dvs. un aspect mai coerent.

În această postare, vă vom arăta cum să includeți bara de meniu principală în designul paginii Divi. Aceasta este o schimbare simplă, dar dinamică, a modului în care este afișat meniul principal, oferind un aspect unic oricărui proiect Divi.

Să ajungem la asta!

Abonați-vă la canalul nostru Youtube

previzualizare

Să începem aruncând o privire asupra rezultatului final pe diferite dimensiuni de ecran:

bara de meniu principală

Setări de personalizare temă

Accesați Tema de personalizare

Înainte de a începe să ne construim designul, să începem cu câteva modificări ale personalizatorului de teme. Accesați tabloul de bord WordPress> Aspect> Personalizare .

Salvați imaginea de fundal

Deoarece vom detașa bara de meniu principală de sus, vom avea nevoie de ceva pentru a acoperi spațiul pe care îl ocupă în mod normal. Vom folosi următoarea imagine de fundal, așa că mergeți mai departe și salvați-o pe computer:

cu-frontieră

Încărcați imaginea de fundal în setările generale

Apoi, accesați Setări generale> Fundal și încărcați imaginea pe fundalul site-ului web.

  • Imagine de fundal Strech: Activată
  • Poziția de fundal: Fix

Setări principale ale barei de meniu

De asemenea, vom îmbina bara principală de meniu gata cu designul nostru Divi. Pentru a face acest lucru, va trebui să modificăm mai întâi setările barei de meniu principale. Accesați Antet și navigare> Bara de meniu principală și utilizați următoarele setări:

  • Logo Înălțime maximă: 100
  • Dimensiune text: 18
  • Spațierea literelor: -1
  • Font: Poppins
  • Culoarea textului: # 333333
  • Culoare link activ: # f55c83
  • Culoare fundal: rgba (255,255,255,0)
  • Culoarea fundalului meniului drop-down: #FFFFFF

Adăugați o pagină nouă

Pagină CSS personalizată

Pentru ca bara de meniu principală să se suprapună peste proiectarea paginii noastre, vom avea nevoie de un pic de cod CSS. Puteți alege dacă doriți să faceți suprapunerea să se aplice pe întregul dvs. site web sau doar pe o pagină în special. Dacă alegeți să îl adăugați la o singură pagină, adăugați următorul cod CSS la setările paginii: 

#main-header {
margin-top: 140px;
}

Adăugați o secțiune nouă

Culoare de fundal

Să începem cu designul! Adăugați o pagină nouă, treceți la Visual Builder și adăugați prima secțiune. Deschideți apoi setările secțiunii și adăugați „rgba (255,255,255,0,81)” ca culoare de fundal. Acest lucru va permite afișarea imaginii de fundal a site-ului nostru web.

Spațiere

Continuați accesând setările Spațiu și adăugați următoarea marjă personalizată și umplere:

  • Marja de sus și de jos: 100 px
  • Marja stânga și dreapta: 60 px
  • Căptușeală superioară: 135 px
  • Căptușeală inferioară: 0 px

Colturi rotunjite

Adăugați „30px” la fiecare dintre colțurile secțiunii dvs.

Frontieră

Apoi, adăugați o margine de sus la secțiunea dvs.:

  • Lățimea marginii superioare: 35 px
  • Culoarea chenarului superior: # 333333

Box Shadow

Pentru a termina, adăugați o umbră de casetă foarte subtilă.

  • Puterea neclarității umbrei cutiei: 61 px
  • Puterea răspândirii umbrei cutiei: -13px

Adăugați rândul # 1

Structura coloanei

E timpul să începeți să adăugați rânduri și module! Adăugați primul rând folosind două coloane de dimensiuni egale.

Dimensionare

Fără a adăuga încă module, deschideți setările de rând și modificați setările de dimensionare:

  • Faceți acest rând lățime completă: Da
  • Egalizați înălțimile coloanei: Da

Spațiere

Adăugați câteva căptușeli personalizate în continuare:

  • Căptușeală superioară: 250 px (desktop), 50 px (tabletă și telefon)
  • Căptușeală inferioară: 200 px (desktop), 100 px (tabletă), 50 px (telefon)
  • Coloana 1 Padding stânga: 50 px (desktop), 0 px (tabletă și telefon)

Adăugați modulul de text al titlului în coloana 1

Setări text H1

Acum putem începe să adăugăm modulele. Vom începe cu prima coloană adăugând un nou titlu Modul text.

  • Font de titlu: Poppins
  • Greutate font antet: mediu
  • Dimensiune text antet: 120 px (desktop), 80 px (tabletă), 58 px (telefon)

Adăugați diferite culori la o parte din copiere

Puteți schimba cu ușurință culoarea unui cuvânt din titlu trecând la fila Text și adăugând o culoare la cuvântul ales, folosind etichete span.

Adăugați modulul de descriere text în coloana 1

Setări text

Chiar sub Modulul text anterior, continuați și adăugați o descriere Modulul text utilizând următoarele setări de text:

  • Font text: Poppins
  • Greutatea fontului textului: regulat
  • Dimensiune text: 20 px (desktop), 15 px (tabletă și telefon)
  • Înălțimea liniei de text: 2em

Spațiere

Vom avea nevoie de o marjă suplimentară pentru acest modul de text:

  • Marja de sus și de jos: 50 px

Adăugați modulul buton la coloana 1

Setări buton

Ultimul modul din această coloană este un modul buton. După ce ați adăugat copia CTA, modificați stilurile de buton:

  • Utilizați stiluri personalizate pentru buton: Da
  • Culoarea textului butonului: #FFFFFF
  • Culoare degrade 1: # f45085
  • Culoare gradient 2: # f88c7e
  • Direcția gradientului: 137deg
  • Lățimea chenarului butonului: 0 px
  • Raza chenarului butonului: 40 px
  • Buton Font: Poppins
  • Buton Font Greutate: Regular
  • Stilul fontului: majuscule

Spațiere

Deschideți apoi setările de spațiu și adăugați o margine și o umplere la buton:

  • Marja inferioară: 100 px (desktop), 20 px (tabletă și telefon)
  • Căptușeală superioară și inferioară: 15 px
  • Căptușeala stânga și dreapta: 50 px

Box Shadow

Nu în ultimul rând, vom folosi o umbră de casetă foarte subtilă pentru a crea mai multă adâncime pe pagina noastră:

  • Puterea neclarității umbrei cutiei: 55 px
  • Puterea răspândirii umbrei cutiei: -4px
  • Culoare umbră: rgba (84,84,84,0.25)

Adăugați modulul de imagine în coloana 2

Salvați și încărcați imaginea

A doua coloană conține doar un modul de imagine. Folosim o machetă care face parte din pachetul de marketing digital al Divi. Continuați și salvați imaginea de mai jos pe computer. După ce faceți acest lucru, adăugați-l la modulul de imagine din a doua coloană.

Adăugați rândul # 2

Structura coloanei

E timpul să adăugați al doilea rând! Alegeți următoarea structură de coloane pentru aceasta:

Coloana 1 Culoare fundal

Apoi, deschideți setările rândului și adăugați „#FFFFFF” ca Culoare 1 Culoare de fundal.

Copiați fundalul gradientului butonului

Ne vom economisi ceva timp și vom copia gradientul pe care l-am folosit deja pentru modulul Buton. Pentru aceasta, deschideți modulul buton, accesați setările butonului, faceți clic dreapta pe fundalul de gradient și copiați-l.

Lipiți fundalul gradientului în coloana 2

Apoi, reveniți la setările de rând și lipiți fundalul de gradient în a doua coloană.

Coloana 3 Culoare fundal

Pentru a treia coloană, folosim culoarea de fundal „#FFFFFF”.

Dimensionare

Accesați următoarea setare pentru dimensionare și modificați setările:

  • Utilizați lățimea personalizată: da
  • Lățime personalizată: 2600 px
  • Utilizați lățimea personalizată a jgheabului: da
  • Lățimea jgheabului: 1

Spațiere

Vom avea nevoie și de o căptușire suplimentară:

  • Căptușeală superioară și inferioară: 0 px
  • Căptușeala superioară și inferioară a coloanei: 30 px

Box Shadow

Nu în ultimul rând, vom folosi o umbră de casetă subtilă:

  • Puterea neclarității umbrei cutiei: 61 px
  • Puterea răspândirii umbrei cutiei: -20px

Adăugați Blurb Module # 1

Alege pictograma

Vom avea nevoie de trei module Blurb în total. Vom începe cu unul și îl vom clona după aceea pentru a economisi timp. Continuați și adăugați un nou modul Blurb în prima coloană. După adăugarea conținutului, selectați o pictogramă la alegere.

Setări pictograme

Modificați setările pictogramei în consecință:

  • Culoare pictogramă: # f55c83
  • Plasarea pictogramelor: stânga
  • Utilizați pictograma Dimensiune font: Da
  • Pictogramă Dimensiune font: 88 px (desktop și tabletă), 50 px (telefon)

Setări text titlu

Deschideți apoi setările pentru textul titlului și efectuați câteva modificări:

  • Titlu Font: Poppins
  • Titlu Greutate font: Mediu
  • Dimensiune text titlu: 34 px (desktop și tabletă), 23 px (telefon)

Setări text corp

Textul corpului trebuie modificat, de asemenea:

  • Font corp: Poppins
  • Greutate font corp: regulat
  • Dimensiune text corp: 16 px (desktop), 14 px (tabletă și telefon)
  • Înălțimea liniei corpului: 2em

Spațiere

Și pentru a crea un design mai atrăgător din punct de vedere estetic, adăugați câteva căptușeli:

  • Căptușeală superioară și căptușeală inferioară: 100 px
  • Căptușeală stânga și dreapta: 50 px (desktop și tabletă), 10 px (telefon)

Clonați modulul Blurb de două ori și plasați-l în coloanele rămase

Continuați și clonați modulele Blurb de două ori. După ce faceți acest lucru, plasați-le în coloanele rămase.

Schimbați modulul Blurb în coloana 2

Schimbați culoarea pictogramei

Al treilea modul Blurb nu are nevoie de modificări, al doilea însă. Începeți prin a schimba culoarea pictogramei în alb.

Schimbați culoarea textului

Deschideți Setările de text în continuare și schimbați culoarea textului în „Light”.

Dezactivați navigarea fixă

Pentru a ne asigura că bara de meniu principală își păstrează locul în design, va trebui să dezactivăm și bara de navigare fixă. Pentru aceasta, accesați tabloul de bord WordPress> Divi> Opțiuni temă> Dezactivați opțiunea „Bară de navigare fixă” și salvați setările .

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran:

bara de meniu principală

Gânduri finale

În această postare, v-am arătat cum să includeți în mod creativ bara de meniu principală în designul general al paginii Divi. Această abordare vă va ajuta să creați un aspect mai coerent pe site-ul dvs. web. Am creat un exemplu și de la zero. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!