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"
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!
studim
Tani që kemi kaluar nëpër të gjitha hapat, le t'i hedhim një vështrim të fundit rezultatit përfundimtar.
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.
...