Doriți să adăugați o pictogramă hamburger la modulul Meniu al Divi ?
Dacă vă construiți antetul Divi, există mai multe moduri de a face acest lucru.
Vă vom arăta cum să adăugați o pictogramă hamburger la modulul Meniu al Divi. Această pictogramă hamburger apare deja implicit pe ecranele mai mici. Dar în acest tutorial, ne vom asigura că o pictogramă hamburger apare și pe desktop.
Acest lucru oferă un aspect minim antetului dvs., adăugând și interacțiune.
Să mergem.
studiu
Înainte de a vă scufunda în acest tutorial, să aruncăm o privire rapidă la rezultat.
Descărcați DIVI acum!!!
Creați un nou șablon de antet global cu Divi Builder
Accesați Divi Theme Builder
Din tabloul de bord WordPress, accesați „Divi > Theme Builder' apoi apasa „Adăugați antet global”
Adăugați un nou antet global
Va apărea un meniu derulant. Pentru a începe să construiți de la zero, continuați selectând „Construiți antet global”.
Proiectarea designului antetului global
Setări secțiune
Culoare de fundal
Odată ajuns în editorul de șabloane, este timpul să începeți să proiectați antetul. Veți observa că există deja o secțiune. Deschideți setările secțiunii și adăugați o culoare de fundal.
- Culoare de fundal: #f6f9fb
spaţierea
Comutați la filă Amenajări a secțiunii și modificați următorii parametri.
- Umplutură (sus și jos): 0px
Adăugați o linie nouă
Structura coloanei
Continuați prin adăugarea unui nou rând folosind următoarea structură de coloane:
dimensionarea
Deschideți setările liniei, accesați fila Amenajări și modificați lățimea maximă în setările de dimensionare.
- Lățimea maximă: 1 px
spaţierea
Apoi modificați umplutura de sus și de jos în setările de spațiere.
- Umplutură (sus și jos): 5px
Adăugați un modul Meniu la coloană
Selectați meniul de adăugat
Apoi, adăugați un modul Meniu în coloana de rând și selectați un meniu dinamic la alegere.
Descărcați logo-ul
Descărcați a siglă.
Eliminați culoarea de fundal
Apoi, eliminați culoarea implicită de fundal alb din modul.
Setări text din meniu
Comutați la filă Amenajări a modulului și modificați parametrii text ai meniului în consecință:
- Meniu font: Poppins
- Greutatea fontului meniului: semi-aldine
- Culoare text: #003e51
- Dimensiunea textului meniului: 16px
- Alinierea textului: dreapta
Setări meniului derulant
Apoi modificați setările din meniul derulant.
- Culoarea liniei meniului dropdown: #7159c8
Setări pictograme
Modificați și setările pictogramei.
- Culoare pictogramă coș de cumpărături: #670fff
- Culoare pictogramă de căutare: #670fff
- Culoare pictogramă meniu Hamburger: #670fff
dimensionarea
Apoi accesați setările de dimensionare și atribuiți o lățime maximă de siglă.
- logo Lățimea maximă: 280 px
spaţierea
De asemenea, eliminați marginea de jos implicită din modul.
- Marja (jos): 0px
Faceți secțiunea lipicioasă
Acum că meniul nostru este la locul lui, vom face și secțiunea lipicioasă. Deschideți setările secțiunii, accesați fila Avansat și aplicați următoarele setări:
- Poziție lipicioasă: lipiți de sus
- Decalaj față de elementele lipicioase din jur: DA
- Stiluri implicite de tranziție și lipite: DA
Culoare de fundal în stare lipicioasă
Apoi schimbați culoarea de fundal a secțiunii în stare lipicioasă.
- Culoare de fundal: #ffffff
Umbra caseta de stare lipicioasă
De asemenea, aplicați o umbră de casetă pe secțiune.
- Culoare umbră (desktop): rgba(0,0,0,0)
- Culoare umbră (lipicioasă): rgba(0,0,0,0.04)
S-a adăugat o pictogramă hamburger la modulul Meniu
Adăugați ID CSS la modulul de meniu
Mai întâi, deschideți setările modulului Meniu, accesați fila Avansat și atribuiți un ID CSS.
- ID CSS: divi-menu
Adăugați un modul Cod sub modulul Meniu
Apoi, adăugați un modul Cod sub modulul Meniu.
Adăugați etichete de script și stil
Vom folosi codul CSS și JQuery. Pentru a pregăti acest lucru, vom adăuga etichete de stil și script.
Adăugați codul CSS
Vom lipi următoarele rânduri de cod CSS între etichetele de stil:
.toggle-icon:after {
content: "61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
transform: translateY(50%);
}
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
.icon-switch:after {
content: '4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
Adăugați JQuery
Adăugați linii de cod JQuery de deschidere
În continuare vom avea codul JQuery. Adăugați următoarele linii de cod JQuery între etichetele de script:
jQuery(function($){
$(document).ready(function(){
});
});
Creați variabile
Creați câteva variabile în continuare.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Plasați pictograma de comutare în modulul Meniu
Apoi, plasați variabila pictogramă de comutare în modulul Meniu folosind următoarea linie de cod:
toggleIcon.insertAfter(desktopMenu);
Adăugați o funcție de clic
Adăugăm și o funcție de clic.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Salvați modificările Divi Theme Builder
Acum că totul este la locul său, tot ce rămâne este să salvați toate modificările Divi Theme Builder și să vedeți rezultatul!
studiu
Acum că am parcurs toți pașii, să aruncăm o ultimă privire la rezultatul final.
Descărcați DIVI acum!!!
Concluzie
În acest articol, v-am arătat cum să fiți creativ cu antetul global în Divi Theme Builder.
Mai exact, v-am arătat cum să adăugați o pictogramă de meniu hamburger și pe desktop. În mod implicit, o pictogramă hamburger este afișată pe tabletă și mobil.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă finaliza proiectele de creare a site-ului. Sau consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
