Cum se creează un meniu slide-in în Divi

Publicat: 2022-05-12

Lucrul grozav al meniurilor de diapozitive este că permit ca mai mult conținut să fie disponibil fără a ocupa spațiu suplimentar pe ecran și se potrivesc în majoritatea aspectelor și se găsesc adesea în aplicațiile mobile, astfel încât va exista un sentiment de familiaritate în utilizarea lor.

Vom demonstra două moduri de a avea un meniu slide-in pe site-ul dvs. Divi în acest tutorial, primul este prin utilizarea personalizării temei pentru tema Divi, iar al doilea este de a construi un antet global folosind generatorul de teme Divi.

Cum se creează un meniu slide-in în Divi prin personalizarea temei

În primul rând, trebuie să vă conectați la WordPress ca administrator pentru a avea acces la personalizarea temei site-ului web și trebuie să vă asigurați că nu există un antet global activ în generatorul de teme Divi. Apoi, treceți la Divi → Personalizare teme .

Veți fi luat în personalizarea temei pentru a vă personaliza site-ul web. De aici, puteți să vă schimbați titlul și sloganul site-ului, să adăugați widget-uri la o bară laterală sau subsol, să creați meniuri, să schimbați setările paginii de pornire și multe altele.

Continuați făcând clic pe blocul Antet și navigare → Format antet → Stil antet , apoi selectați opțiunea Slide in .

Viola la fel ca meniul dvs. glisant este gata de acțiune.

Cu toate acestea, dacă doriți să adăugați mai multă personalizare, cum ar fi modificarea lățimii meniului glisant, a culorii de fundal, a dimensiunii textului și multe altele, puteți accesa Setările pentru antet pentru glisare și ecran complet din blocul Antet și navigare care apar după ce alegeți opțiune de meniu slide-in sau ecran complet.

Cum se creează un meniu slide-in în Divi prin Theme Builder

De data aceasta, vă vom arăta cum să creați un meniu slide-in în Divi folosind generatorul de teme Divi prin construirea unui antet global. Din meniul Divi de pe tabloul de bord WordPress, alegeți opțiunea Theme Builder , apoi continuați să construiți un antet global.

Setarea secțiunii

Veți fi dus la editorul Divi Builder, începeți prin a face clic pe pictograma setări secțiuni pentru a modifica setarea primei secțiuni. Continuați prin schimbarea culorii de fundal a secțiunii într-una transparentă: rgba(255,255,255,0)

Treceți la fila Design → Spațiere pentru a elimina umplutura implicită de sus și de jos . Setați valoarea la 0 pentru ambele.

Treceți la fila Avansat → Poziție , apoi schimbați opțiunea Poziție în Fix și schimbați Locația în cea centrală sus.

Setarea primului rând

Continuați prin adăugarea unui nou rând în secțiune folosind următoarea structură de coloane:

Înainte de a adăuga orice module, deschideți mai întâi Setări rând, apoi modificați opțiunea Dimensiune și spațiere din fila Design , după cum urmează:

Dimensiuni :

Latime : 97%
Latime maxima : 100%

Spațiere :

Umplutură superioară : 1%
Umplutură inferioară : 0px

Apoi treceți la fila Avansat → CSS personalizat → Element principal și adăugați următoarele fragmente acolo:

 display: flex;
alinierea elementelor: centru;

Puteți plasa logo-ul site-ului dvs. pe prima coloană a acestui rând adăugând acolo un Modul de imagine.

Creați pictograma interactivă Hamburger

Treceți la a treia coloană sau coloana 3 și adăugați un modul de text. Vom folosi fila text în loc de vizuală pentru a adăuga trei intervale HTML cu clase personalizate pentru a crea o pictogramă hamburger interactiv.

 <span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Apoi schimbați culoarea de fundal folosind această valoare: rgba(0,0,0,0.04)

Treceți la fila Design → Text → Text Line Height pentru a elimina înălțimea liniei de text introducând valoarea 0em pentru a avea control deplin asupra intervalelor pe care le-am adăugat.

Treceți la setarea Dimensiune și modificați valoarea după cum urmează:

Latime : 120px
Alinierea modulului : dreapta

Să îndreptăm modulul adăugând valori personalizate de umplere în setările de spațiere , valoarea după cum urmează:

Umplutură superioară : 40px
Umplutură inferioară : 60px
Căptușeală din stânga : 40px
Captuseala dreapta : 40px

Apoi adăugați un ID CSS personalizat pentru a finaliza modulul. Vom folosi acest ID CSS pentru a crea o funcție de clic în codul nostru. Treceți la fila Avansat → CSS ID & Classes, apoi introduceți următorul text în câmpul CSS ID :

ID CSS : slide-in-deschide

Setări al doilea rând

Să continuăm prin crearea unui nou rând, al doilea rând. Fără a adăuga încă vreun modul, faceți clic pe pictograma setărilor rândului pentru a deschide setările acestuia. Acest rând va fi locul pentru întregul nostru meniu slide-in.

Hai sa schimbam culoarea de fundal dupa bunul plac, pentru meniul nostru alegem aceasta culoare: #e7e0e2

Continuați prin deplasarea la fila Design → Dimensiune și modificați valoarea după cum urmează:

Utilizați lățimea jgheab personalizată : da
Lățimea jgheabului : 1
Lățime : 20% (desktop), 40% (tabletă), 60% (telefon)
Înălțime : 100vh

Apoi treceți la setările Spațiere și modificați valoarea pe diferite dispozitive pentru Top Padding : 10vw (desktop), 30vw (tabletă), 40vw (telefon).

Continuați adăugând o clasă CSS personalizată, avem nevoie de ea pentru a permite rândului să alunece înăuntru. Deplasați-vă la fila Avansat → ID CSS și clase, apoi introduceți următorul text în câmpul Clase CSS :

Clasa CSS : slide-in-menu-container

Apoi aduceți opacitatea rândului la 0 în starea implicită prin inserarea opacity: 0; în CSS personalizat → Element principal .

Pentru a finaliza setarea pe al doilea rând, modificați poziționarea în setarea Poziție la următoarele valori:

Poziție : absolută
Locație : Sus dreapta
Offset orizontal : -20% (desktop), -40% (tabletă), -60% (telefon)

Adăugarea meniului

Să începem să adăugăm meniul adăugând un modul de text și tastând primul meniu pe care doriți să-l afișați, folosim casa pentru primul nostru meniu. Apoi adăugați un link relevant la acesta.

Continuați prin schimbarea culorii de fundal la: rgba(216,210,212,0.35)

Treceți la fila Design și modificați setările Text după cum urmează:

Font text : Arial
Greutatea fontului textului : aldine
Culoare text : #0c71c3
Dimensiune text : 1vw (desktop), 2vw (tabletă), 3vw (telefon)
Umbra text : Efect de lumină
Alinierea textului : Centru

Continuați prin modificarea valorilor Spațiere pe diferite dispozitive. Valorile sunt următoarele:

Marja inferioară : 1vw (desktop), 2vw (tabletă), 3vw (telefon)
Captuseala superioara : 1vw
Căptușeală inferioară : 1vw

Primul meniu este complet, acum pentru restul meniului, trebuie doar să clonăm primul meniu făcând clic pe pictograma modulului duplicat și apoi modificați textul și linkul după cum dorim.

Adăugarea funcției de introducere

Să încheiem meniul adăugând un modul de cod în a doua coloană a primului rând, apoi copiați următorul cod în modul.

 <stil>
#alunecare-deschis{
cursor: pointer;
}
 
.linia{
afisare: bloc;
poziție: absolută;
înălțime: 4px;
latime: 100%;
fundal: #24394A;
chenar-rază: 9px;
opacitate: 1;
-webkit-tranziție: .1s ease-in-out;
-moz-tranziție: .1s ease-in-out;
-o-tranziție: .1s ease-in-out;
tranziție: .1s ease-in-out;
}
 
.randul 2 {
sus: 10px;
}
 
.line-3 {
sus: 20px;
}
 
#slide-in-open.open .line-1 {
sus: 10px;
-webkit-transform: rotire(135deg);
-moz-transform: rotire(135deg);
-o-transform: roti(135deg);
transformare: rotire(135deg);
}
 
#slide-in-open.open .line-2 {
afișaj: niciunul;
}
 
#slide-in-open.open .line-3 {
sus: 10px;
-webkit-transform: rotire(-135deg);
-moz-transform: rotire(-135deg);
-o-transform: rotire(-135deg);
transformare: rotire(-135deg);
}
 
.meniu-alunecare {
dreapta: 0 !important;
opacitate: 1 !important;
}
 
.glise-in-menu-container {
-webkit-tranziție: toate 0.5s ease !important;
-moz-tranziție: toate 0.5s ease !important;
-o-tranziție: toate 0.5s ease !important;
-ms-transition: toate 0.5s ease !important;
tranziție: toate 0.5s ușurință !important;
}
</stil>
<script>
jQuery(funcție($){
$('#slide-in-open').click(function(){
$(this).toggleClass('deschis');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});
</script>

Codul ar trebui să aibă grijă de efectul funcției de clic și să stilizeze pictograma hamburger, apoi să facă meniul să alunece când se face clic pe pictogramă.

Odată ce meniul slide-in este complet, să salvăm proiectul și să aplicăm modificările făcând clic pe Salvați toate modificările în generatorul de teme Divi. Să aruncăm o privire asupra meniului într-o postare de pe site-ul nostru.