Cum să creați o bară de meniu Glisare pentru site-ul dvs. web cu Divi

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați o bară de meniu glisantă pentru site-ul dvs. web, utilizând pachetul de layout pentru broker ipotecar. Acesta este un mod excelent de a adăuga interacțiune pe site-ul dvs. web. Veți avea aceeași experiență de utilizator pe toate dimensiunile ecranului și puteți utiliza această tehnică pentru orice fel de site web pe care îl creați.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Dezactivați navigarea fixă ​​în Opțiunile temei Divi

Accesați Opțiunile temei Divi

Să începem! Primul lucru pe care trebuie să-l faci este să mergi la opțiunile temei Divi de pe site-ul tău WordPress.

Dezactivați navigarea fixă

Aici vom dezactiva bara de navigare fixă. Trebuie să dezactivăm această opțiune pentru a scăpa complet de bara de meniu principală de pe pagina noastră mai târziu în acest tutorial.

• Bara de navigare fixă: dezactivată

Ascundeți bara de meniu principală pe pagină

Activați Visual Builder pe pagina de destinație a pachetului Layout Broker

Continuați accesând pagina pe care ați creat-o folosind pagina de destinație a pachetului de layout al brokerului ipotecar și activați Visual Builder.

Deschideți Setări pagină

Vom ascunde bara de meniu principală pe pagina noastră prin adăugarea unui cod CSS. Pentru a adăuga acest cod, deschideți setările paginii.

Adăugați cod CSS personalizat pentru a ascunde bara de meniu principală

Apoi, accesați fila avansată și plasați următoarele linii de cod CSS în caseta CSS personalizată:

#main-header {
display: none;
}

Adăugarea acestui cod va împiedica bara de meniu principală să apară pe pagină.

Creați design personalizat de meniu cu Divi

Asigurați-vă că există suficientă căptușire de top în secțiunea erou pe toate dimensiunile ecranului

Acum, că am scăpat de bara de meniu principală de pe pagina noastră, putem începe să adăugăm bara de meniu glisantă! Primul lucru pe care trebuie să-l faceți este să vă asigurați că există suficientă umplutură în partea de sus a paginii, astfel încât bara de meniu glisată să nu se suprapună cu orice conținut existent. În special pentru pagina de destinație a pachetului Layout Broker Layout, aceasta înseamnă să vă asigurați că umplutura personalizată a coloanei 1 rămâne „180 px” pe toate dimensiunile ecranului.

• Căptușeală superioară: 180 px

Adăugați o nouă secțiune regulată în partea de jos a paginii

Este timpul să începeți să creați bara de meniu personalizată! Adăugați o secțiune obișnuită în partea de jos a paginii.

Spațiere

Deschideți setările secțiunii și eliminați toate căptușelile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați rând

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Culoare de fundal

Deschideți setările rândului și schimbați culoarea de fundal a rândului în alb.

• Culoare fundal: #ffffff

Dimensionare

Apoi, deschideți setările rândului și modificați setările de dimensionare pentru a permite rândului să ocupe întreaga lățime a ecranului:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați toate căptușeala superioară și inferioară următoare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Box Shadow

Și pentru a ne asigura că există suficientă adâncime între bara de meniu glisată și pagina în sine, vom adăuga o umbră de casetă.

• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0.55)

Adăugați un modul de imagine

Încărcați sigla companiei

Este timpul să începeți să adăugați toate modulele pe care dorim să le afișăm în bara de meniu glisând, începând cu un modul de imagine. Încărcați sigla utilizând un fișier imagine cu lățimea de 226 px și înălțimea de 100 px.

Aliniere

Apoi, accesați fila de proiectare a modulului de imagine și modificați alinierea imaginii.

• Aliniere imagine: centru

Dimensionare

Schimbați apoi setările de dimensionare ale imaginii.

• Lățime maximă: 75% (desktop), 100% (tabletă și telefon)

Spațiere

Și adăugați niște căptușeli personalizate, de sus și de jos, la imagine.

• Căptușeală superioară: 15 px (tabletă), 25 px (telefon)
• Căptușeală inferioară: 15 px (tabletă), 25 px (telefon)

Adăugați un modul buton

Adăugați o copie

Al doilea modul de care avem nevoie este un modul buton. Adăugați o copie la alegere.

Aliniere

Apoi, accesați fila de proiectare și schimbați alinierea butonului.

• Aliniere buton: centru

Setări buton

Modificați în continuare aspectul butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0,8vw (desktop), 1,4vw (tabletă), 2,1vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 40eccc
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 50 px
• Distanța dintre litere și butoane: 2 px
• Buton Font: Lato
• Greutate font: greu
• Stilul fontului: majuscule

Spațiere

Și creați forma dorită folosind marja personalizată și valorile de umplere.

• Marja superioară: 15 px
• Marja inferioară: 15 px
• Căptușeală superioară: 15 px
• Căptușeală inferioară: 15 px
• Garnitura stânga: 40 px
• Căptușeală dreaptă: 40 px

Adăugați modulul de text nr. 1

Adăugați element de meniu în caseta de conținut

Următorul modul de care avem nevoie în bara noastră de meniu glisează este un modul de text. Aici, vom adăuga titlul paginii în caseta de conținut.

Adăugați un link

Treceți la setările linkului și adăugați linkul corect la modulul de text.

Culoare de fundal

Modificați culoarea de fundal în continuare.

• Culoare fundal: # f2f2f2

Setări text

Apoi, modificați setările de text.

• Font text: Lato
• Greutatea fontului textului: Bold
• Culoarea textului: # 000000
• Dimensiune text: 0.9vw (desktop), 1.9vw (tabletă), 2.4vw (telefon)
• Orientare text: centru

Spațiere

Și adăugați niște tampoane personalizate, de sus și de jos, la modul.

• Căptușeală superioară: 30 px
• Căptușeală inferioară: 30 px

Modul de text clonat x5 ori

După ce ați terminat modificarea modulului de text, puteți continua și clona de 5 ori.

Modificare copiere

Asigurați-vă că modificați titlul paginii în fiecare dintre aceste duplicate.

Schimbați linkurile

Împreună cu linkurile.

Schimbați culorile de fundal

Modificați culorile de fundal ale celui de-al doilea, al patrulea și al șaselea element de meniu care urmează.

• Culoare fundal: #ffffff

Adăugați CSS personalizat la rând

Elementul principal

Acum, pentru a ne asigura că bara de meniu glisați rămâne în partea de sus a paginii, va trebui să adăugăm câteva linii de cod CSS la elementul principal al rândului.

position:fixed;
top: 0px;
z-index: 99;

Coloana Element principal

De asemenea, transformăm coloana într-o grilă care ne permite să derulăm. Procentele pe care le puteți vedea în codul CSS de mai jos indică cât spațiu ocupă fiecare dintre module în grilă. Puteți modifica aceste valori dacă doriți ca grila dvs. să arate diferit.

overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

Coloana CSS Class

Și pentru a scăpa de bara de defilare, vom adăuga și o clasă CSS la rând.

Eliminați bara de derulare

Pe pagină

Puteți elimina bara de derulare a paginii în sine deschizând setările paginii și adăugând următoarele linii de cod CSS în caseta CSS personalizată:

.swipe-menu::-webkit-scrollbar {
display: none;
}

Pe întregul site web

Dacă nu doriți să repetați același pas de ascundere individuală a barei de defilare pe fiecare pagină, puteți merge, de asemenea, la opțiunile temei Divi și puteți face codul CSS să se aplice întregului site web derulând fila generală și adăugând următoarele rânduri a codului CSS în caseta CSS personalizată:

.swipe-menu::-webkit-scrollbar { display: none; }

Salvați ca secțiune ca articol global

Odată ce bara de meniu glisantă funcționează corect, o puteți salva în biblioteca Divi ca element global și o puteți folosi și pe alte pagini!

previzualizare

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

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați o bară de meniu pentru orice site web pe care îl creați utilizând Divi. Aceasta este o tehnică excelentă pentru adăugarea unei alte dimensiuni site-ului dvs. web. Acest tutorial face parte din inițiativa noastră continuă de proiectare Divi, unde încercăm să introducem ceva suplimentar în setul de instrumente de proiectare în fiecare săptămână. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!