Dëshironi të krijoni një menu anësore rrëshqitëse dhe të përgjegjshme në Divi?
Kur krijoni një Site Web, shpesh pyesni veten se çfarë lloji të kokës duhet të krijoni. Më i përdoruri në ueb është shiriti i menysë horizontale në krye, por ka edhe opsione të tjera, si p.sh. një menu rrëshqitëse.
Menytë rrëshqitëse më shpesh ju ndihmojnë të kufizoni hapësirën e zënë nga koka globale. Kështu që ju mund të lejoni që të shfaqet një meny rrëshqitëse kur ju vizitorët klikoni në ikonën e hamburgerit në këndin e sipërm të djathtë.
Prandaj, përdorimi i një menyje me rrëshqitje ju ndihmon të shtoni ndërveprim shtesë në tuajin Site Web.
Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një duke përdorur Divi's Theme Builder.
Le të fillojmë!
studim
Përpara se të zhytemi në këtë tutorial, le të shohim së pari rezultatin që do të marrim.
Shkoni te Ndërtuesi i Temave dhe krijoni një kokë globale
Shkoni te Ndërtuesi i Temave
Për të filluar, shkoni te Theme Builder nga menyja Divi në pultin tuaj të WordPress dhe klikoni në "Shto Kreun Global".
Krijo kokën globale
Vazhdoni duke zgjedhur "Krijo kokën globale".
Krijo një stil kokë
Cilësimet e seksionit
Ngjyrë e sfondit
Pasi të jeni në redaktuesin e shabllonit, do të vini re një seksion. Hapeni këtë seksion dhe bëjeni ngjyrën e sfondit transparent.
- Sfondi: rgba (255,255,255,0)
ndarje
Kalo te skeda Stil dhe hiq të gjitha kufijtë e poshtëm dhe të sipërm.
- Maja e marzhit të brendshëm: 0 px
- Marzhi i brendshëm i poshtëm: 0 px
Post
Më pas, ne do të ndryshojmë pozicionin e seksionit duke shkuar te skedari i avancuar dhe duke ndryshuar cilësimet e pozicionit.
- Pozicioni: Fiks
- Vendndodhja: Qendra e lartë
Shtoni rreshtin e parë
Struktura e kolonës
Pasi të keni përfunduar cilësimet e seksionit, shtoni një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
sizing
Pa shtuar ende asnjë modul, hapni cilësimet e rreshtit dhe ndryshoni cilësimet e madhësisë si më poshtë:
- Gjerësia maksimale: 97%
- Gjerësia maksimale: 100%
ndarje
Ndryshoni cilësimet e ndarjes.
- Marzhi i brendshëm i pikut: 1%
- Marzhi i brendshëm i poshtëm: 0 px
elementi kryesor
Më pas, shkoni te skedari i avancuar dhe shtoni dy rreshta të kodit CSS në elementin kryesor të rreshtit. Kjo do të na ndihmojë të përafrim vertikalisht përmbajtje të kolonës në rreshtin tonë.
display: flex;
align-items: center;
Shtoni një modul imazhi në kolonën 1
Shkarko logon
Është koha për të shtuar module, duke filluar me një modul Image në kolonën 1. Ngarko logon tuaj.
Shtoni një modul teksti në kolonën 3
Shtoni 3 hapësira në zonën e përmbajtjes
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Ngjyrë e sfondit
Ndryshoni ngjyrën e sfondit të modulit.
- Sfondi: rgba (0,0,0,0.04)
Cilësimet e tekstit
Më pas, kaloni në skedën Stil dhe hiqni lartësinë e rreshtit të tekstit. Kjo do të na ndihmojë të kemi kontroll të plotë mbi qëllimet që kemi shtuar.
- Lartësia e rreshtit të tekstit: 0em
sizing
Ne do të modifikojmë parametrat e madhësisë së modulit.
- Gjerësia maksimale: 120 piksele
- Rreshtimi i tekstit: djathtas
ndarje
Dhe ne do të plotësojmë parametrat e modulit duke e transformuar modulin në një katror. Për këtë ne do të përdorim vlerat e personalizuara të mbushjes në parametrat e ndarjes.
- Maja e marzhit të brendshëm: 40 px
- Marzhi i brendshëm i poshtëm: 60 px
- Margjina e brendshme e majtë: 40 px
- Diferenca e brendshme djathtas: 40 px
Shtoni rreshtin e dytë
Struktura e kolonës
Rreshti tjetër! Ne do ta përdorim këtë linjë për të dizajnuar të gjithë menunë tonë rrëshqitëse. Përdorni strukturën e mëposhtme të kolonës:
Ngjyrë e sfondit
Pa shtuar module, hapni cilësimet e rreshtit dhe ndryshoni ngjyrën e sfondit si më poshtë:
- Sfondi: #e7e0e2
Imazhi i sfondit
Ne përdorim gjithashtu një imazh të sfondit të modeluar. Ju mund të përdorni një model sfondi sipas zgjedhjes suaj.
- Madhësia e imazhit në sfond: madhësia aktuale
- Pozicioni i imazhit në sfond: në qendër
- Përsëritni imazhin e sfondit: Përsëriteni
sizing
Më pas, kaloni në skedën Stil dhe modifikoni cilësimet e madhësisë në përputhje me rrethanat:
- Përdorni gjerësinë e personalizuar të ulluqit: Po
- Hapësira e kolonave: 1
- Gjerësia maksimale: 20% (desktop), 40% (tabletë), 60% (telefon)
- Lartësia: 100 Vh
ndarje
Ndryshoni gjithashtu cilësimet e ndarjes në madhësi të ndryshme të ekranit.
- Marzhi i brendshëm i samitit: 10 vw (desktop), 30 vw (tabletë), 40 vw (telefon)
kufi
Dhe plotësoni parametrat e linjës duke shtuar një kufi të majtë.
- Gjerësia e kufirit të majtë: 10 px
- Ngjyra e kufirit të majtë: #24394a
- Stili i kufirit të majtë: i dyfishtë
Shtoni një modul teksti në kolonë
Shto përmbajtje
Është koha për të shtuar artikullin e parë të menusë "Moduli i tekstit"! Shtoni kopjen në kuti përmbajtje.
Shto një lidhje
Vazhdoni duke shtuar një lidhje përkatëse në artikullin e menysë.
- URL-ja e lidhjes së modulit: #
Ngjyrë e sfondit
Pastaj ndryshoni ngjyrën e sfondit.
- Sfondi: rgba (216,210,212,0.35)
Cilësimet e tekstit
Më pas, kaloni në skedën Style'3 dhe ndryshoni cilësimet e tekstit si më poshtë:
- Fonti i tekstit: Domine
- Tekst me dritë të butë: Tekst i trashë
- Teksti me ngjyra të tekstit: #000000
- Madhësia e tekstit: 1vw (desktop), 2vw (tabletë), 3vw (telefon)
- Rreshtimi i tekstit: në qendër
ndarje
Plotësoni cilësimet e modulit duke shtuar vlera të veçanta të ndarjes në madhësi të ndryshme të ekranit.
- Marzhi i poshtëm: 1vw (desktop), 2vw (tabletë), 3vw (telefon)
- Marzhi i brendshëm i pikut: 1vw
- Marzhi i brendshëm i poshtëm: 1vw
Moduli i klonimit të tekstit (1 modul për artikull të menysë)
Pasi të keni përfunduar modulin e parë të tekstit të artikullit të menusë, mund ta klononi atë sa herë të jetë e nevojshme. Vetëm sigurohuni që modulet tuaja të mos e kalojnë lartësinë e dritares.
Redaktoni përmbajtjen dhe lidhjet e modulit të tekstit të kopjuar
Ndryshoni përmbajtje dhe lidhjet e çdo moduli të tekstit të kopjuar.
Shtoni modulin e butonit në kolonë
Shto një kopje
Moduli i fundit që na nevojitet në këtë rresht është moduli Button. Shtoni një kopje sipas zgjedhjes suaj.
Shto një lidhje
Shtoni gjithashtu një lidhje.
- URL-ja e lidhjes së butonit: #
radhitje
Kaloni në skedën Stil dhe ndryshoni shtrirjen e butonit.
- Shtrirja e butonave: në qendër
Cilësimet e butonit
Vazhdoni duke personalizuar modulin Button si më poshtë:
- Përdorni stile të personalizuara për butonin: Po
- Madhësia e tekstit të butonit: 0,7 vw (desktop), 1,5 vw (tabletë), 2,5 vw (telefon)
- Ngjyra e tekstit të butonit: #000000
- Butoni i sfondit: rgba (0,0,0,0)
- Ngjyra e kufirit të butonit: #24394a
- Butoni Border Radius: 0 pixel
- Hapësira e shkronjave të butonave: 4 px
- Butoni i Fontit: Hap Asnjë
- Butoni i lehtë i dritës: Tekst i trashë
- Butoni i stilit të kopjimit: TT
ndarje
Dhe plotësoni cilësimet e modulit duke shtuar vlera të veçanta të ndarjes në madhësi të ndryshme të ekranit.
- Marzhi i sipërm: 5vw
- Diferenca e brendshme maksimale: 1vw (desktop), 2vw (tabletë), 3vw (telefon)
- Pjesa e poshtme e kufirit të brendshëm: 1vw (desktop), 2vw (tabletë), 3vw (telefon)
- Diferenca e brendshme majtas: 1,8 vw (desktop), 3 vw (tabletë), 4 vw (telefon)
- Diferenca e brendshme e djathtë: 1,8 vw (desktop), 3 vw (tabletë), 4 vw (telefon)
Shtoni funksionalitetin rrëshqitës
Shto ID CSS në modulin e tekstit të ikonës së menysë
Tani që i kemi të gjithë elementët në vend, është koha për të krijuar efektin e menusë rrëshqitëse të përgjegjshme! Së pari, hapni modulin Tekst (që përmban qëllimet) në kolonën e tretë të rreshtit tuaj të parë dhe përdorni një ID të personalizuar CSS në skedën e avancuar. Ne do të përdorim këtë ID CSS për të krijuar një funksion klikimi në kodin tonë.
- ID CSS: rrëshqitje-në-hapur
Shtoni klasën CSS në rreshtin #2
Pastaj hapni rreshtin e dytë, shkoni te skedari i avancuar dhe shtoni një klasë të personalizuar CSS. Kur klikohet, rreshti do të rrëshqasë.
- Klasa CSS: rrëshqitje-në-menu-kontejner
Ndryshoni pozicionimin e rreshtit #2
Ne gjithashtu do të ripozicionojmë këtë linjë. Vini re se si zhvendosja horizontale përputhet me gjerësinë e linjës në madhësi të ndryshme të ekranit në cilësimet e madhësisë.
- Pozicioni: Absolut
- Vendndodhja: lart djathtas
- Kompensimi horizontal: -20% (desktop), -40% (tabletë), -60% (telefon)
Ndryshoni opacitetin e rreshtit 2
Dhe sillni opacitetin në 0 në një gjendje të paracaktuar.
opacity: 0;
Shtoni modulin e Kodit në kolonën e dytë të rreshtit të parë
Fut kodin CSS
Për të krijuar efektin e funksionit të klikimit dhe për të stiluar shtizat e ikonës sonë të hamburgerit, do të na duhet një kod CSS. Shtoni një modul kodi në kolonën e dytë të rreshtit tuaj të parë dhe vendosni linjat e mëposhtme të kodit CSS midis etiketave të stilit, siç mund ta shihni në ekranin e printimit më poshtë:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2{
top: 10px;
}
.line-3{
top: 20px;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
Fut kodin JQuery
Do të na duhet gjithashtu të shtojmë disa JQuery për funksionin e klikimit. Sigurohu qe ti vendos kodin midis etiketave të skriptit , siç mund ta shihni në ekranin e printimit më poshtë:
jQuery(funksion($){ $('#slide-in-open'). kliko(funksion(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('rrëshqitje-në-menu'); }); });
Ruani ndryshimet e ndërtuesit të temave dhe shfaqni rezultatin në faqen e internetit
Pasi të keni përfunduar të gjithë elementët e kokës tuaj globale, gjithçka që duhet të bëni është të ruani të gjitha ndryshimet dhe të shfaqni rezultatin në faqen tuaj!
studim
Tani që kemi kaluar nëpër të gjitha hapat, le t'i hedhim një vështrim të fundit rezultatit.
Përfundim
Si përfundim, në këtë artikull, ne ju treguam se si të përdorni ndërtuesin e temave të Divi për të krijuar një menu rrëshqitëse të përgjegjshme. Për këtë, ne kemi kombinuar më të mirën e elementeve dhe opsioneve të integruara të Divi me një kod funksioni të personalizuar të klikimeve. Pra, ju lejon të përqendroheni në dizajnimin e menysë me rrëshqitje dhe të lini kodin të kujdeset për pjesën funksionale të kokës globale!
Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.
