Dëshironi të shtoni një ikonë hamburgeri në modulin e Menysë së Divi ?

Nëse e ndërtoni kokën tuaj në Divi, ka disa mënyra për ta bërë këtë. 

Ne do t'ju tregojmë se si të shtoni një ikonë hamburgeri në modulin e Menysë së Divi. Kjo ikonë hamburger tashmë shfaqet si parazgjedhje në ekranet më të vogla. Por në këtë tutorial, ne do të sigurohemi që një ikonë hamburgeri të shfaqet edhe në desktop. 

Kjo i jep një pamje minimale kokës tuaj duke shtuar gjithashtu ndërveprim.

Le të shkojnë.

studim

Përpara se të zhytemi në këtë tutorial, le t'i hedhim një vështrim të shpejtë rezultatit.

Shkarkoni DIVI Tani!!!

Krijo një shabllon të ri global të titullit me Divi Builder

Shkoni te Divi Theme Builder

Nga pulti i WordPress, shkoni te 'Divi > Ndërtues i Temave' pastaj kliko "Shto titullin global"

Ndërtuesi i Temave Divi

Shtoni një kokë të re globale

Do të shfaqet një menu rënëse. Për të filluar ndërtimin nga e para, vazhdoni duke zgjedhur "Ndërtoni titullin global".

Dizajnimi i dizajnit global të kokës

Cilësimet e seksionit

Ngjyrë e sfondit

Pasi të jeni në redaktuesin e shabllonit, është koha për të filluar dizajnimin e kokës. Do të vini re se tashmë ka një seksion. Hapni cilësimet e seksionit dhe shtoni një ngjyrë të sfondit.

  • Ngjyra e sfondit: #f6f9fb

ndarje

Kalo te skeda Projektimi të seksionit dhe modifikoni parametrat e mëposhtëm.

  • Mbushje (lart dhe poshtë): 0 px

Shto një rresht të ri

Struktura e kolonës

Vazhdoni duke shtuar një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:

sizing

Hapni cilësimet e linjës, shkoni te skeda Projektimi dhe ndryshoni gjerësinë maksimale në cilësimet e madhësisë.

  • Gjerësia maksimale: 1 px

ndarje

Më pas ndryshoni mbushjen e sipërme dhe të poshtme në cilësimet e ndarjes.

  • Mbushje (lart dhe poshtë): 5 px

Shtoni një modul meny në kolonë

Zgjidhni menunë për të shtuar

Më pas, shtoni një modul Menu në kolonën e rreshtit dhe zgjidhni një menu dinamike sipas zgjedhjes suaj.

Shkarko logon

Shkarko a logo.

Hiq ngjyrën e sfondit

Më pas, hiqni ngjyrën e parazgjedhur të sfondit të bardhë nga moduli.

Cilësimet e tekstit të menysë

Kalo te skeda Projektimi të modulit dhe modifikoni parametrat e tekstit të menusë në përputhje me rrethanat:

  • Menuja e shkronjave: Poppins
  • Pesha e shkronjave të menysë: Gjysmë e trashë
  • Ngjyra e tekstit: #003e51
  • Madhësia e tekstit të menysë: 16 px
  • Rreshtimi i tekstit: djathtas

Cilësimet e menusë zbritëse

Pastaj ndryshoni cilësimet nga menyja rënëse.

  • Ngjyra e linjës së menysë rënëse: #7159c8

Cilësimet e ikonës

Ndryshoni gjithashtu cilësimet e ikonës.

  • Ngjyra e ikonës së karrocës së blerjeve: #670fff
  • Ngjyra e ikonës së kërkimit: #670fff
  • Ngjyra e ikonës së menysë së Hamburgerit: #670fff

sizing

Pastaj shkoni te cilësimet e madhësisë dhe caktoni një gjerësi maksimale prej logo.

  • logo Gjerësia maksimale: 280 px

ndarje

Hiqni gjithashtu kufirin e poshtëm të paracaktuar nga moduli.

  • Marzhi (poshtë): 0 px

Bëni seksionin ngjitës

Tani që menuja jonë është në vend, ne gjithashtu do ta bëjmë seksionin ngjitës. Hapni cilësimet e seksionit, shkoni te skeda Avancuar dhe aplikoni cilësimet e mëposhtme:

  • Pozicioni ngjitës: Ngjit në krye
  • Kompensimi nga elementët ngjitës përreth: PO
  • Stilet e parazgjedhura dhe ngjitëse të tranzicionit: PO

Ngjyra e sfondit në gjendje ngjitëse

Më pas ndryshoni ngjyrën e sfondit të seksionit në gjendje ngjitëse.

  • Ngjyra e sfondit: #ffffff

Hije e kutisë ngjitëse të gjendjes

Aplikoni gjithashtu një hije kutie në seksion.

  • Ngjyra e hijes (Desktop): rgba (0,0,0,0)
  • Ngjyra e hijes (ngjitëse): rgba (0,0,0,0.04)

Shtoi një ikonë hamburgeri në modulin e Menysë

Shto ID CSS në modulin e menysë

Së pari, hapni cilësimet e modulit të Menysë, shkoni te skeda Avancuar dhe caktoni një ID CSS.

  • CSS ID: divi-menu

Shtoni një modul Kodi nën modulin Meny

Më pas, shtoni një modul Kodi nën modulin e Menysë.

Shtoni etiketat e skriptit dhe stilit

Ne do të përdorim kodin CSS dhe JQuery. Për t'u përgatitur për këtë, ne do të shtojmë etiketa stili dhe skripti.

Shto kodin CSS

Ne do të ngjitim rreshtat e mëposhtëm të kodit CSS midis etiketave të stilit:

.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;    
}

Shto JQuery

Shtoni linjat e hapjes së kodit JQuery

Më pas do të kemi kodin JQuery. Shtoni linjat e mëposhtme të kodit JQuery midis etiketave të skriptit:

jQuery(function($){
$(document).ready(function(){
 
});
});

Krijo variabla

Më pas krijoni disa variabla.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

Vendosni ikonën e ndryshimit në modulin e menysë

Më pas, vendosni variablin e ikonës së ndryshimit në modulin e Menysë duke përdorur linjën e mëposhtme të kodit:

toggleIcon.insertAfter(desktopMenu);

Shto një funksion klikimi

Po shtojmë gjithashtu një funksion klikimi.

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

Ruaj ndryshimet e Divi Theme Builder

Tani që gjithçka është në vend, gjithçka që mbetet është të ruani të gjitha modifikimet e Divi Theme Builder dhe të shikoni rezultatin!

Ndërtuesi i Temave Divi

studim

Tani që kemi kaluar nëpër të gjitha hapat, le t'i hedhim një vështrim të fundit rezultatit përfundimtar.

ikona e hamburgerit në modulin e menusë Divi

Shkarkoni DIVI Tani!!!

Përfundim

Në këtë artikull, ne ju treguam se si të bëheni krijues me kokën tuaj globale në Divi Theme Builder. 

Në mënyrë të veçantë, ne ju kemi treguar se si të shtoni një ikonë të menusë së hamburgerit edhe në desktop. Si parazgjedhje, një ikonë hamburgeri shfaqet në tablet dhe celular.

Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.

Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të përfunduar projektet e krijimit të faqes suaj të internetit. Ose shikoni gjithashtu udhëzuesin tonë në Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...