Divi: Si të krijoni një menu ngjitëse dhe të zgjerueshme

Divi: Si të krijoni një menu ngjitëse dhe të zgjerueshme

Dëshiron të jesh kreativ duke krijuar një menu ngjitëse të zgjerueshme kur rri pezull me Divi?

Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një meny ngjitëse të zgjerueshme duke përdorur pezullimin nga Divi's Mechanic Layout Pack . 

Ne do të trajtojmë dy modele të ndryshme modelesh që mund t'i rikrijoni nga e para dhe t'i aplikoni në çdo lloj uebsajti që krijoni! 

Menuja do të shfaqet në lëvizje në desktop dhe do të aktivizohet kur klikoni në pajisjet celulare.

Le të shkojmë!

studim

Përpara se të zhytemi në këtë tutorial, le të hedhim një vështrim të shpejtë në rezultatin në madhësi të ndryshme të ekranit.

Shembull 1

Kompjuter desktop

meny ngjitëse e zgjerueshme kur rri pezull me Divi

i lëvizshëm

meny ngjitëse e zgjerueshme kur rri pezull me Divi

Shkarkoni DIVI Tani!!!

Shembull 2

Kompjuter desktop

meny ngjitëse e zgjerueshme kur rri pezull me Divi

i lëvizshëm

meny ngjitëse e zgjerueshme kur rri pezull me Divi

Shkarkoni DIVI Tani!!!

Hapat e përgjithshëm

Çaktivizo navigimin fiks

Hyni në opsionet e temës Divi

Do të fillojmë me disa hapa të përgjithshëm. Këta hapa janë të njëjtë për të dy shembujt dhe janë të nevojshëm për të arritur rezultatin e dëshiruar.

Nëse planifikoni të përdorni një menu ngjitëse në zgjerim në fund të faqes tuaj, mund të dëshironi të lini jashtë shiritin e menusë kryesore në krye. 

Lexo gjithashtu: Si të krijoni mbivendosje të personalizuara të imazhit në Divi

Për këtë ju do të duhet të shkoni Divi >> Opsionet e Temave nga pulti i WordPress

Çaktivizo navigimin fiks

Atje do t'ju duhet të çaktivizoni "Shirit i fiksuar i navigimit" për t'u siguruar që nuk ka mbetur hapësirë ​​në krye të faqes tuaj.

  • Shiriti i fiksuar i navigimit: i çaktivizuar

Fshih shiritin kryesor të menusë në faqe

Hap cilësimet e faqes

Shkoni te faqja ku dëshironi të shtoni menunë ngjitëse të zgjerueshme dhe hapni cilësimet e faqes.

Shto CSS të personalizuar

Fshihni menunë kryesore duke shtuar rreshtat e mëposhtëm të kodit CSS në faqen tuaj.

#main-header {
display: none;
}

Shtoni një seksion të ri në fund të faqes

Pavarësisht se cilin shembull dëshironi të rikrijoni, disa nga hapat bazë mbeten të njëjtë. Hapi i parë është të shtoni një seksion të rregullt në fund të faqes.

ndarje

Hapni cilësimet e seksionit dhe ndryshoni cilësimet e mëposhtme në skedën Projektimi nën opsion ndarje.

  • 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

Pa shtuar ende asnjë modul, hapni cilësimet e linjës dhe ndryshoni cilësimet e mëposhtme, në skedën Projektimi nën opsion sizing

  • Përdorni gjerësinë e ulluqit të personalizuar: PO
  • Gjerësia e kanalit: 1
  • Gjerësia: 100%
  • Gjerësia maksimale: 100%

ndarje

Pastaj hiqni të gjitha mbushjet e paracaktuara të sipërme dhe të poshtme, nën opsionin ndarje.

  • Mbushje (lart dhe poshtë): 0 px

Elementi kryesor

Ne lejojmë që i gjithë rreshti të ngjitet në fund të faqes sonë duke shtuar dy rreshta të thjeshtë të kodit CSS në elementin e rreshtit kryesor.

bottom: 0px;
position: fixed;

Z-indeksi

Dhe ne do të sigurohemi që rreshti (dhe moduli i tekstit që do të shtojmë në hapat e ardhshëm) të qëndrojnë në krye të të gjithë përmbajtjes në faqe duke rritur indeksin Z, opsionin Drop down pozitë.

  • Z-indeksi: 99

Shtoni modulin e kodit në kolonë

Shtoni kodin CSS midis etiketave të stilit

Pjesa e fundit e hapave të përgjithshëm është shtimi i një moduli Kodi në rreshtin e ri. Kodi CSS që shtojmë në këtë modul të Kodit do të na ndihmojë të arrijmë efektin zbulues në lëvizje. 

Shih gjithashtu: Si të krijoni një meny të rrotës rrotulluese në Hover në Divi

Ngjitni rreshtat e mëposhtëm të kodit CSS në modul:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Shembulli #1 Dizajni

Shtoni një modul teksti në kolonë

Shto përmbajtje

Tani që kemi kaluar nëpër të gjitha hapat, mund të fillojmë të fokusohemi në dy shembujt e ndryshëm të dizajnit, duke filluar nga i pari! 

Shtoni një modul teksti në kolonën e rreshtit tuaj. Në zonën e përmbajtjes ne përdorim stilin e paragrafit për të shfaqur tekstin '≡Meny'

Më pas vendosim të gjithë artikujt e menysë në një listë të pa renditur. Ne gjithashtu do të shtojmë një lidhje për secilin nga titujt e faqeve individualisht.

Ngjyra e parazgjedhur e sfondit

Shkoni te cilësimet e sfondit të modulit dhe ndryshoni ngjyrën e sfondit.

  • Sfondi: #ffffff

Ngjyra e sfondit në lëvizje

Ndrysho këtë ngjyrë të sfondit kur rri pezull.

  • Sfondi (Hover): rgba (255,255,255,0.83)

Sfondi i gradientit

Dhe gjithashtu shtoni sfondin e paracaktuar të gradientit.

  • Ngjyra e majtë: rgba (255,255,255,0)
  • Ngjyra e duhur: #ffffff
  • Pozicioni i djathtë: 60%

Cilësimet e paracaktuar të tekstit

Vazhdoni duke shkuar te skeda Projektimi dhe ndryshimi i cilësimeve të tekstit.

  • Fonti i tekstit: Khand
  • Pesha e shkronjave: Bold
  • Ngjyra e tekstit: #021827
  • Madhësia e tekstit: 3vh
  • Orientimi: Qendër

Vendosni cilësimet e tekstit

Ndryshoni disa nga cilësimet e tekstit të pezullimit.

  • Ngjyra e tekstit (Hover: rgba(255,255,255,0)
  • Madhësia e tekstit (Hover): 0vh

Cilësimet e tekstit të lidhjes

Më pas, shkoni te cilësimet e tekstit të lidhjes dhe ndryshoni ngjyrën e tekstit të lidhjes.

  • Ngjyra e tekstit të lidhjes: #000000

Lista e parazgjedhjeve (Desktop)

Kalo te cilësimet e tekstit të listës së paracaktuar dhe personalizoje sipas dëshirës. Sigurohuni që po përdorni '0px' për madhësinë e tekstit në gjendjen e tij të paracaktuar.

  • Fonti i listës së parregulluar: Khand
  • Stili i fontit të listës: TT
  • Rreshtimi i tekstit të listës: në qendër
  • Ngjyra e pa renditur e tekstit: rgba (255,255,255,0)
  • Madhësia e tekstit të listës së parregulluar: 0 px
  • Pesha e tekstit të listës: 0em
  • Pozicioni i stilit të listës së parregulluar: Brenda

Cilësimet e listës së pezullimit

Më pas ndryshoni disa nga vlerat në hover për të lejuar që artikujt e menusë të shfaqen.

  • Ngjyra e tekstit të listës (Hover): #000000
  • Madhësia e tekstit të listës së parregulluar (Hover): 2vh
  • Lartësia e tekstit të listës së parenditur (Hover): 2,1 em

Hapësira e parazgjedhur (Desktop)

Pastaj shkoni te cilësimet e ndarjes (opsioni ndarje) dhe i jepni një formë modulit Text.

  • Margjina (majtas dhe djathtas): 45vw (desktop), 39vw (tableti), 33vw (telefon)
  • Mbushje (lart dhe poshtë): 2vw (desktop), 4vw (tableti), 6vw (telefon)

Hapësira pezull

Modifikoni të njëjtat vlera kur rri pezull.

  • Margjina (majtas dhe djathtas): 14vw
  • Mbushje (sipër dhe poshtë): 8vw

Kufiri i parazgjedhur (Desktop)

Shkoni te cilësimet e kufirit dhe sigurohuni që secili nga qoshet e rrumbullakosura të ketë një vlerë prej '0px'.

Kufiri në hover

Aktivizo opsionet e pezullimit në qoshet e rrumbullakosura dhe ndryshoni vlerat lart majtas dhe djathtas lart.

  • Sipër majtas: 50vw
  • Sipër djathtas: 50vw

Kuti me hije

Vazhdoni duke i dhënë thellësi modulit duke përdorur një hije kutie. Kjo do të sigurojë që menyja të mos kalojë pa u vënë re në faqe.

  • Forca e turbullimit të hijeve të kutisë: 1000 px
  • Ngjyra e hijes: rgba (0,0,0,0.68)

Klasë CSS

Ne gjithashtu shtojmë një klasë CSS në modul.

  • Klasa CSS: dt-menu

Transitions

Së fundi, ulni kohëzgjatjen e tranzicionit në cilësimet e tranzicionit.

  • Kohëzgjatja e tranzicionit: 100 ms

Shembulli #2 Dizajni

Shtoni një modul teksti në kolonë

Shto përmbajtje

Le të kalojmë në shembullin e dytë! Këtu do të shtojmë përsëri '≡Meny' duke përdorur stilin e tekstit të paragrafit dhe artikujt e menysë duke përdorur një listë të pa renditur. Ne gjithashtu do të shtojmë një lidhje për secilin nga artikujt e menusë individualisht.

Ngjyra e parazgjedhur e sfondit (Desktop)

Shkoni te cilësimet e sfondit dhe ndryshoni ngjyrën e sfondit.

  • Sfondi: #ffffff

Ngjyra e sfondit në lëvizje

Ndrysho ngjyrën e sfondit kur rri pezull.

  • Sfondi (Hover): #f71535

Cilësimet e parazgjedhura të tekstit (Desktop)

Pastaj shkoni te skeda Projektimi dhe të bëjë disa ndryshime në pamjen e tekstit.

  • Fonti i tekstit: Khand
  • Pesha e shkronjave: Bold
  • Ngjyra e tekstit: #021827
  • Madhësia e tekstit: 3vh

Zhvendos cilësimet e tekstit

Ndrysho këto cilësime kur rri pezull.

  • Ngjyra e tekstit (Hover): rgba (255,255,255,0)
  • Madhësia e tekstit (Hover): 0vh

Cilësimet e tekstit të lidhjes

Shkoni te cilësimet e tekstit dhe ndryshoni ngjyrën e tekstit të lidhjes.

  • Ngjyra e tekstit të lidhjes: #ffffff

Cilësimet e tekstit të listës së parazgjedhur

Ndryshoni gjithashtu cilësimet e projektimit të artikujve të listës së pa renditur.

  • Fonti i listës së parregulluar: Khand
  • Stili i fontit të listës së parregulluar: TT
  • Rreshtimi i tekstit të listës: në qendër
  • Ngjyra e tekstit të listës së pa renditur: rgba (255,255,255,0)
  • Madhësia e tekstit të listës: 0 px
  • Lartësia e vijës së listës së parregulluar: 0em
  • Pozicioni i stilit të listës së parregulluar: Brenda

Cilësimet e listës së pezullimit

Dhe ndryshoni disa nga këto vlera në lëvizje.

  • Ngjyra e tekstit të listës së parenditur: #ffffff
  • Madhësia e tekstit të listës: 2vh
  • Lartësia e vijës së listës së parregulluar: 2,1 em

Hapësira e parazgjedhur (Desktop)

Pastaj shkoni te cilësimet e ndarjes dhe jepini modulit pak hapësirë.

  • Margjina (djathtas): 88 vw (desktop dhe tablet), 71 vw (telefon)
  • Mbushje (sipër): 6 vw (Desktop)), 10 vw (Tablet), 18 vw (Telefon)
  • Mbushje (në fund): 4 vw (Desktop), 10 vw (Tablet), 12 vw (Telefon)
  • Mbushja e majtë: 1vw

Hapësira pezull

Ndryshoni vlerat në lëvizje.

  • Margjina (djathtas): 59vw
  • Mbushja: (lart)13vw, (poshtë)8vw, (majtas)1vw, (djathtas)13vw
zgjerim i menysë ngjitëse

kufi

Dhe për të krijuar këtë dizajn të rrethit tremujor, ne do të ndryshojmë kufirin e sipërm djathtas në cilësimet e kufirit.

  • Sipër djathtas: 50vw

Kuti me hije

Ne gjithashtu do të shtojmë një hije kutie për të krijuar thellësi në faqe.

  • Forca e turbullimit të hijes së kutisë: 1000 px
  • Ngjyra e hijes: rgba (0,0,0,0.68)

Klasë CSS

Më pas do të shtojmë një klasë CSS në skedën Avancuar.

  • Klasa CSS: dt-menu

Transitions

Dhe ulni kohëzgjatjen e tranzicionit në skedë Avancuar për të krijuar një tranzicion të shpejtë.

  • Kohëzgjatja e tranzicionit: 100 ms

studim

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.

Shembulli # 1

zyrë

Zgjerimi i menusë ngjitëse

i lëvizshëm

Zgjerimi i menusë ngjitëse

Shkarkoni DIVI Tani!!!

Shembulli # 2

Kompjuter desktop

i lëvizshëm

Shkarkoni DIVI Tani!!!

përfundim

Në këtë artikull, ne ju treguam se si të krijoni një menu ngjitëse të zgjerueshme duke përdorur të Paketës së Paraqitjes së Divi Mechanic. Ne kemi mbuluar dy modele të ndryshme modelesh që mund t'i modifikoni dhe përdorni në çdo lloj uebsajti që krijoni!

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ë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për 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.

...

Divi: Si të krijoni një maskë sfondi ngjitës

Divi: Si të krijoni një maskë sfondi ngjitës

Dëshironi t'i jepni një dimension tjetër uebsajtit tuaj me një maskë sfondi Divi Sticky?

Opsionet ngjitëse të Divi ju lejojnë të krijoni një ton dizajnesh të ndryshme për faqet tuaja të internetit. Tutoriali i sotëm shton listën e gjërave që mund të bëni. Shpresojmë se kjo do të ndihmojë në ndezjen e kreativitetit tuaj. 

Ne do t'ju tregojmë se si të krijoni një maskë të sfondit ngjitës.

Ky tutorial kombinon opsionet ngjitëse të Divi me mënyrat e përzierjes së filtrave. 

studim

Përpara se të zhytemi në këtë tutorial, le të hedhim një vështrim të shpejtë në rezultatin në madhësi të ndryshme të ekranit.

zyrë

Maska e sfondit Divi Sticky

i lëvizshëm

Maska e sfondit Divi Sticky

Krijo një dizajn në Divi

Shto një seksion të ri

Imazhi i sfondit

Filloni duke shtuar një seksion të ri në faqen në të cilën po punoni. 

  • Ngarko një imazh të sfondit të zgjedhjes suaj.
  • Madhësia e imazhit në sfond: Kopertina
Divi

ndarje

Kalo te skeda Dizajni i seksionit dhe hiq parametrat e paracaktuar të ndarjes më poshtë:

  • Mbushje (lart dhe poshtë): 0 px

Përmbytjet

Pastaj fshihni tejmbushjet e seksionit në skedën Avancuar.

  • Vërshimi horizontal: I fshehur
  • Vërshimi vertikal: I fshehur

Shtoni rreshtin numër 1

Struktura e kolonës

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

sizing

Pa shtuar asnjë modul, hapni cilësimet e linjës dhe ndryshoni parametrat e madhësisë në përputhje me rrethanat:

  • Gjerësia: 100%
  • Gjerësia maksimale: 100%

ndarje

Hiqni gjithashtu të gjitha kufijtë e paracaktuar.

  • Mbushje (lart dhe poshtë): 0 px

Filters

Ne gjithashtu shtojmë një modalitet përzierjeje në këtë linjë. Kjo mënyrë e përzierjes do të na ndihmojë të krijojmë një maskë më vonë në tutorial.

  • Modaliteti i përzierjes: Ekrani

Z-indeksi

Për t'u siguruar që ky rresht të qëndrojë poshtë rreshtit të dytë që do të shtojmë në seksion, ne ndryshojmë indeksin z në skedën Avancuar.

  • Z Indeksi: 9

Parametrat e kolonës

Tjetra, ne do të hapim cilësimet e kolonës.

Ngjyrë e sfondit

Ne përdorim një ngjyrë të sfondit plotësisht të bardhë.

  • Ngjyra e sfondit: #ffffff

Elementi kryesor CSS

Ne gjithashtu shtojmë një vlerë lartësie në elementin kryesor në skedën Avancuar.

height: 100vh;

Shtoni një modul "Tekst" në rresht

Lëreni zonën e zbrazët

Pasi të keni mbaruar me cilësimet e rreshtit, shtoni një modul Teksti në kolonën e tij. 

Lëreni zonën e përmbajtjes bosh. Në vend të kësaj, ne përdorim këtë modul për të krijuar një formë që zbulon një pjesë të imazhit të sfondit të seksionit.

Ngjyrë e sfondit

Ne do të përdorim një ngjyrë më të errët të sfondit për këtë modul.

  • Ngjyra e sfondit: #0b3835

sizing

Më pas do të hyjmë në skedën Projektimi dhe modifikoni parametrat e madhësisë si më poshtë:

  • Gjerësia:
    • Desktop: 20vw
    • Tableti dhe telefoni: 70 vw
  • Lartësia:
    • Desktop: 30vh
    • Tableti dhe telefoni: 10vh

ndarje

Ne gjithashtu shtojmë një diferencë të lartë.

  • Marzhi (lart): 3vh

Kufiri

Dhe ne do të përfshijmë qoshet e rrumbullakosura.

  • Këndet e rrumbullakosura: 15 px

Shtoni rreshtin 2

Struktura e kolonës

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

sizing

Hapni cilësimet e linjës dhe bëni ndryshimet e mëposhtme në opsionet sizing në vijim:

  • Gjerësia: 100%
  • Gjerësia maksimale: 100%

Z-indeksi

Rritni gjithashtu indeksin z të rreshtit. Kjo do të ndihmojë që përmbajtja e rreshtit të qëndrojë mbi rreshtin e mëparshëm.

  • Indeksi Z: 12

Shtoni një modul "Tekst" në rresht

Shto përmbajtje H2

Është koha për të shtuar module, duke filluar me një modul të parë Teksti që përmban përmbajtje H2 sipas zgjedhjes suaj.

Cilësimet e tekstit H2

Personalizoni cilësimet e tekstit H2 si më poshtë:

  • Fonti: Playfair Display
  • Rreshtimi i tekstit: në qendër
  • Ngjyra e tekstit: #0b3835
  • Madhësia:
    • Desktop: 150 px
    • Tableti dhe telefoni: 45 px
  • Lartësia e linjës: 1,2 em

sizing

Më pas, lundroni te cilësimet e madhësisë dhe aplikoni cilësimet e mëposhtme:

  • Gjerësia maksimale: 980 px
  • Moduli i shtrirjes: Qendra

ndarje

Përfshini gjithashtu një diferencë negative të sipërme.

Shtoni një modul "Button" në rresht

Shtoni përmbajtje në butonin

Moduli tjetër dhe i fundit që na nevojitet në këtë rresht është moduli Button. Shtoni përmbajtje sipas zgjedhjes suaj.

Shtrirja e butonave

Kalo te skeda Projektimi të modulit dhe modifikoni shtrirjen e butonit.

  • Shtrirja e butonave: në qendër

Cilësimet e butonit

Më pas, shkoni te cilësimet e butonit dhe aplikoni stilet e mëposhtme:

  • Përdorni stile të personalizuara për butonin: Po
  • Madhësia e tekstit të butonit: 15 px
  • Ngjyra e tekstit të butonit: #ffffff
  • Ngjyra e sfondit të butonit: #000000
  • Gjerësia e kufirit të butonit: 0 piksel
  • Rrezja e kufirit të butonit: 100 px
  • Fonti i butonit: Montserrat
  • Pesha e shkronjave të butonit: Gjysmë e trashë
  • Stili i shkronjave: TT

ndarje

Ne gjithashtu shtojmë vlera të personalizuara të marzhit dhe mbushjes në cilësimet e ndarjes.

  • Marzhi (poshtë): 60vh
  • Mbushje (lart dhe poshtë): 15 px
  • Mbushje (majtas dhe djathtas): 40 px

Aplikoni efekte ngjitëse

Hapni rreshtin numër 1

Tani që kemi ndërtuar bazën e dizajnit tonë, është koha për të aplikuar stilet ngjitëse. Hapni cilësimet e rreshtit të parë.

maskë e poshtme ngjitëse

Aplikoni opsionet ngjitëse

Shko te skeda Avancuar dhe aplikoni cilësimet e mëposhtme të vazhdueshme:

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

Opsionet ngjitëse të modulit të tekstit

Tani që rreshti është Sticky, ne mund të aplikojmë stile në modulin Tekst brenda rreshtit. Hapni cilësimet e modulit.

maskë e poshtme ngjitëse

Madhësia ngjitëse

Më pas, shkoni te cilësimet e madhësisë dhe aplikoni vlerat e mëposhtme të madhësisë:

  • Gjerësia (Ngjitës): 80 vw
  • Lartësia (Ngjitës): 90vh
Divi

Koha e tranzicionit

Më në fund, lundroni te skeda Avancuar dhe të rrisë kohëzgjatjen e tranzicionit.

  • Kohëzgjatja e tranzicionit: 500 ms

studim

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.

zyrë

Maska e sfondit Divi Sticky

Shkarkoni DIVI Tani!!!

i lëvizshëm

Maska e sfondit Divi Sticky

Shkarkoni DIVI Tani!!!

përfundim

Në këtë artikull, ne ju kemi treguar edhe një herë se si të bëheni krijues me opsionet ngjitëse të Divi. 

Në mënyrë të veçantë, ne ju kemi treguar se si të kombinoni cilësimet e filtrit të Divi dhe opsionet ngjitëse.

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ë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për 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.

...

Divi: Si të krijoni një rrëshqitës fizarmonikë të përgjegjshëm

Divi: Si të krijoni një rrëshqitës fizarmonikë të përgjegjshëm

Dëshironi të krijoni një rrëshqitës fizarmonikë të përgjegjshëm Divi?

Një rrëshqitës fizarmonikë është një mënyrë argëtuese dhe tërheqëse për të shfaqur përmbajtjen në një hapësirë ​​të vogël. 

Rrëshqitësit e fizarmonikës zakonisht përbëhen nga disa elementë (ose panele) të vendosura horizontalisht si palosjet e një perde. Dhe kur rri pezull mbi një nga panelet, ai zgjerohet për të zbuluar përmbajtjen ndërsa panelet e tjera të fizarmonikës tkurren. Këtu kemi efektin si fizarmonikë të zgjerimit dhe tkurrjes.

Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një rrëshqitës fizarmonikë të përgjegjshëm në Divi duke përdorur vetëm CSS. Për ta bërë këtë, ne do të përdorim disa module Divi për të shërbyer si panele fizarmonikë. 

studim

Këtu është një përmbledhje e shpejtë e asaj që do të arrijmë në këtë tutorial.

Shkarkoni DIVI Tani!!!

Krijimi i një faqeje të re me Divi Builder

Për të filluar, do t'ju duhet të bëni sa më poshtë:

  • Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
rrëshqitës i përgjegjshëm fizarmonikë Divi
  • Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder
  • Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
rrëshqitës i përgjegjshëm fizarmonikë Divi

Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.

Krijimi i rrëshqitësit të përgjegjshëm të fizarmonikës në Divi

Krijimi i linjës

Për të filluar, shtoni një rresht me një kolonë në seksionin e rregullt.

Pastaj hapni cilësimet e linjës dhe përditësoni sa vijon:

  • Përdorni gjerësinë e ulluqit të personalizuar: PO
  • Gjerësia e kanalit: 1
  • Gjerësia: 100%
  • Gjerësia maksimale: 800 px
  • Lartësia: 400 px (Desktop); 700 px (tableti dhe telefoni)

Vlerat e gjerësisë dhe gjerësisë maksimale mund të ndryshohen për t'iu përshtatur nevojave tuaja. Harmonika do të përshtatet dhe do të funksionojë në çdo gjerësi rreshti.

Parametrat e kolonës

Tani që kemi një lartësi të përcaktuar për rreshtin, hapni cilësimet e kolonës dhe shtoni CSS-në e mëposhtme në elementin kryesor:
Desktop

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

tablette

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

Krijimi i panelit të fizarmonikës me module Blurb

Rrëshqitësi i fizarmonikës mund të ndërtohet duke përdorur çdo lloj moduli(e). Nëse dëshironim, mund të përdornim një kombinim të moduleve të ndryshme për të vepruar si një panel fizarmonikë. Por për këtë dizajn, ne do të përdorim modulet Blurb.

Filloni duke shtuar një modul Blurb në linjë.

Blurb Mod Design

Hapni cilësimet e modulit të prezantimit dhe përditësoni sa vijon:

Mbani titullin imagjinar dhe përmbajtjen e trupit. Ne gjithmonë mund ta ndryshojmë atë më vonë.

Më pas, përditësoni ikonën e prezantimit si më poshtë:

  • Ikona (Desktop): ikona e vijës së shigjetës horizontale (shih pamjen e ekranit)
  • Ikona (Hover): (shih pamjen e ekranit)
  • Ikona (tableti dhe telefoni): (shih pamjen e ekranit)

Sfondi

Më pas jepini turbullirës një imazh të sfondit dhe një mbivendosje të gradientit në lëvizje si më poshtë:

  • Shtoni një imazh të sfondit të paktën 1000 px të gjerë
  • Pozicioni i imazhit në sfond: në qendër të majtë

Pastaj shtoni një mbivendosje të sfondit gradient.

rri pezull

  • Gradienti i sfondit majtas (Hover): #3e215b
  • Gradienti i sfondit djathtas (rrit pezull): rgba(0,0,0,0)
  • Drejtimi i gradientit: 90 gradë
  • Gradient katror mbi sfond Imazhi: PO

ikonë

  • Ngjyra e ikonës: #ffffff
  • Vendosja e imazhit/ikonës: djathtas

Më pas, kaloni në skedën Dizajn dhe përditësoni sa vijon:

Titulli dhe trupi i tekstit

  • Fonti i titullit: Poppins
  • Pesha e shkronjave: gjysmë e theksuar
  • Ngjyra e tekstit të titullit: transparente (Desktop), #ffffff (Hover)
  • Madhësia e tekstit të titullit: 22 px
  • Ngjyra e tekstit të trupit: transparent (Desktop), #ffffff (Hover)

Lartësia dhe hija e kutisë

Pasi teksti të personalizohet, jepini modulit një lartësi prej 100% dhe një hije kutie si më poshtë:

  • lartësia: 100%
  • Box Shadow: Shiko pamjen e ekranit
  • Pozicioni horizontal: -12 px
  • Pozicioni vertikal: 0px

Custom CSS

Në mënyrë që panelet tona të fizarmonikës (ose moduli Blurb) të rriten dhe të kontraktohen me pjesën tjetër të moduleve, ne duhet të shtojmë CSS të personalizuar për të ndryshuar madhësinë e modulit me flex-grow. 

Meqenëse do të kemi gjithsej 5 module që përbëjnë fizarmonikën, shtojmë "flex:1" për gjendjen e paracaktuar dhe më pas e ndryshojmë atë në "flex:5" në gjendjen hover.

Nën skedën Advanced, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor Blurb:

zyrë

flex:1;
position: relative !important;
transition: flex 800ms !important;

Në pezullim

flex:5;
position: relative !important;
transition: flex 800ms !important;

Pastaj shtoni CSS-në e mëposhtme të personalizuar në përmbajtjen Blurb CSS:

zyrë

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
krijoni një rrëshqitës fizarmonikë të përgjegjshëm Divi

tablette

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
krijoni një rrëshqitës fizarmonikë të përgjegjshëm Divi

Vërshimi dhe tranzicioni

  • Vërshimi horizontal: I fshehur
  • Vërshimi vertikal: I fshehur
  • Kohëzgjatja e tranzicionit: 400 ms
  • Kurba e shpejtësisë së tranzicionit: lineare
krijoni një rrëshqitës fizarmonikë të përgjegjshëm Divi

Shume mire! Ishte një personalizim serioz i një moduli Blurb. Por lajmi i mirë është se gjithçka që duhet të bëjmë është t'i dublikojmë ato për të krijuar panelet e mbetura të fizarmonikës.

Paraqitjet e dyfishta për më shumë panele fizarmonikë

Zhvendoseni mbi modulin e prezantimit dhe klikoni katër herë ikonën e dyfishtë për të krijuar gjithsej pesë panele (ose module) fizarmonikë.

Më pas, përditësoni imazhet e sfondit për secilën nga turbullimet e reja që keni dublikuar.

krijoni një rrëshqitës fizarmonikë të përgjegjshëm Divi

Rezultati përfundimtar

Tani që kemi kaluar nëpër të gjitha hapat, le të shohim rezultatin përfundimtar.

Shkarkoni DIVI Tani!!!

përfundim

Ky rrëshqitës fizarmonikë i përgjegjshëm ka me të vërtetë disa elementë unikë që e bëjnë atë argëtues për t'u përdorur. Panelet e fizarmonikës zgjerohen dhe tkurren pa probleme me kalimin e miut pa ndonjë defekt të papritur. 

Dhe ikonat e prezantimit ndryshojnë në lëvizje dhe në celular për të rritur UX-në. 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ë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për 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.

...

Divi: Si të krijoni mbivendosje të personalizuara të imazhit

Divi: Si të krijoni mbivendosje të personalizuara të imazhit

Dëshironi të mësoni se si të dizajnoni mbivendosje të personalizuara të imazhit me Divi?

Mbivendosjet e imazheve kanë qenë rreth e rrotull për një kohë të gjatë në dizajnin e uebit. Ato janë të shkëlqyera për të tërhequr vizitorët duke zbuluar përmbajtje shtesë dhe elemente dizajni kur rri pezull mbi imazh. 

Në këtë tutorial, ne do t'ju tregojmë se si të dizajnoni mbivendosje të personalizuara të imazhit në Divi. Këto mbivendosje do të ndryshojnë dhe do të zbulojnë elementë kur të rri pezull mbi imazh. 

Nuk nevojiten shtojca.

Le të fillojmë!

studim

Ja një vështrim i shpejtë i dizajnit që do të krijojmë në këtë tutorial.

Krijo një faqe të re me Divi Builder

Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.

Ndërtues Divi

Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder

Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)

Ndërtues Divi

Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.

Krijimi i mbivendosjeve të personalizuara të imazheve në Divi

Dizajnoni seksionin, rreshtin dhe kolonat

Për të filluar, krijoni një rresht me tre kolona në seksionin e paracaktuar.

Hapni cilësimet e seksionit dhe shtoni ngjyrën e mëposhtme të sfondit:

  • Sfondi: #3a0ca3

Më pas, hapni cilësimet e kolonës 1 dhe përditësoni sa vijon:

  • Klasa CSS: et-overlay-container
  • Vërshimi horizontal: I fshehur
  • Vërshimi vertikal: I fshehur

Shtoni imazhin

Tani që Seksioni, Rreshti dhe Kolona janë gati, shtoni një modul të ri Imazh në Kolonën 1. Ky do të jetë imazhi kryesor pas modeleve tona të mbivendosjes.

Ngarko një imazh që duket më shumë si një portret sesa një peizazh. Sigurohuni që të jetë mjaft e gjerë për të mbuluar gjerësinë e plotë të kolonës në të gjitha madhësitë e shfletuesit.

SHËNIM: Mund të përdorni imazhe peizazhi, por mund t'ju duhet të rregulloni pozicionimin e elementeve të mbivendosjes në përputhje me rrethanat, në mënyrë që ato të mos mbivendosen.

Nën skedinë Projektimi, përditësoni sa vijon:

  • Marzhi (poshtë): 0 px

Nën skedinë Avancuar, shtoni klasën e mëposhtme CSS:

  • Klasa CSS: et-overlay-image

Shtimi i ngjyrës së mbivendosjes së imazhit duke përdorur një modul "Ndarës".

Për të krijuar ngjyrën e mbivendosjes së imazhit, ne do të përdorim një modul Divider.

Së pari, shtoni një modul Divider poshtë imazhit.

Pastaj vendoseni ndarësin në mënyrë absolute në mënyrë që të vendoset sipër imazhit:

  • Pozicioni: Absolut

Nën skedinë Përmbajtja, përditësoni sa vijon:

  • Ndarësi i shfaqjes: JO
  • Ngjyra e sfondit: rgba (247,37,133,0.8)

Pastaj përditësoni lartësinë dhe gjerësinë e ndarësit:

  • Gjerësia: 100%
  • lartësia: 100%

Me dizajnin në vend, shtoni klasën e mëposhtme CSS në ndarësin:

  • dhe-mbivendosje-artikull

SHËNIM: Kjo klasë duhet t'u shtohet të gjithë elementëve të dizajnit të mbivendosjes që dëshironi të shfaqni vetëm në lëvizje. Nëse nuk dëshironi që elementi të fshihet fillimisht, lëreni atë jashtë.

Për t'ju ndihmuar të mbani gjurmët e elementeve/moduleve të dizajnit, hapni shtresat modale dhe etiketoni ndarjen e modulit ("Ngjyra e mbivendosjes").

Teksti i kokës së mbivendosjes u shtua

Në modulin Divider, shtoni një modul të ri Teksti. Kjo do të shërbejë si teksti i mbivendosjes së kokës që do të shfaqet në krye të imazhit kur rri pezull.

Përditëso përmbajtjen me një titull H2:

<h2>Coaching</h2>

Më pas, përditësoni etiketën e modulit të tekstit për referencë në të ardhmen.

Nën skedinë Projektimi, përditësoni sa vijon:

  • Rreshtimi i tekstit: në qendër
  • Ngjyra e tekstit: e lehtë
  • Fonti: Cormorant Garamond
  • Pesha e shkronjave: Bold
  • Madhësia e tekstit: 40 px
  • Gjerësia: 100%
  • Gjerësia maksimale: 85%

Nën skedinë Avancuar, përditësoni pozicionin si më poshtë:

  • Pozicioni: Absolut
  • Vendndodhja: qendra e sipërme
  • Kompensimi vertikal: 10%

SHËNIM: Zhvendosja vertikale mund të duhet të rregullohet në varësi të madhësisë së raportit të pamjes së figurës. Për shembull, një imazh i tipit peizazh mund të kërkojë më pak kompensim

Më pas, shtoni klasat e mëposhtme CSS në modulin e tekstit:

  • Klasa CSS: et-overlay-item lëviz-poshtë

Përveç klasës "dhe-overlay-item", shtojmë një klasë shtesë "leviz poshte" në mënyrë që të përdorni CSS-në e personalizuar për të lëvizur kokën pak poshtë kur rri pezull.

Krijimi i tekstit të trupit të mbivendosur

Për të krijuar trupin e tekstit të mbivendosjes, ne mund të kopjojmë modulin Tekst të përdorur për kokën e mbivendosjes. Përpara se të përditësoni parametrat e dyfishtë, ndryshoni etiketën në "Trupi i mbivendosur".

Hapni cilësimet e tekstit të modulit të ri Tekst dhe përditësoni përmbajtjen e trupit me disa fjali të tekstit të paragrafit.

Nën skedinë Avancuar, ndryshoni vendndodhjen absolute të modulit në qendër.

Meqenëse nuk duam që kjo të vazhdojë të lëvizë (vetëm shfaqet), përditësoni klasën CSS për të përfshirë vetëm sa vijon:

  • Klasa CSS: et-overlay-item

Krijimi i butonit të mbivendosjes

Mbivendosja e fundit në këtë imazh do të jetë butoni. Për të krijuar butonin, shtoni një modul të ri Buton nën modulin e dytë të tekstit.

Përpara modifikimit të dizajnit, përditësoni pozicionin e butonit si më poshtë:

  • Pozicioni: absolut
  • Kompensimi vertikal: 10%

Tani butoni duhet të përqendrohet në pjesën e poshtme të figurës.

Në skedë Avancuar, përditësoni klasën CSS dhe shtoni një fragment të personalizuar CSS në elementin kryesor si më poshtë:

  • Klasa CSS: et-overlay-item lëvizja lart
  • Elementi kryesor CSS:
min-width: 15em;

Vini re se një klasë shtesë është shtuar në butonin për ta lëvizur atë pak lart kur rri pezull. Kjo është për të plotësuar lëvizjen poshtë të tekstit të kokës kur rri pezull.

Më pas, përditësoni cilësimet e mëposhtme të dizajnit:

  • Shtrirja e butonave: në qendër
  • Përdorni stile të personalizuara për butonin: PO
  • Madhësia e tekstit të butonit: 14 px
  • Ngjyra e sfondit: #4361ee
  • Gjerësia e kufirit të butonit: 0 piksel
  • Hapësira e shkronjave të butonave: 0,1em
  • Pesha e shkronjave: Bold
  • Stili i fontit të butonit: TT
  • Mbushja: 0,8em (lart dhe poshtë), 0px (majtas dhe djathtas)

Shtimi i CSS i personalizuar me modulin e kodit

Shtoni një modul Kodi poshtë butonit.

Pastaj ngjisni CSS-në e mëposhtme në përmbajtjen e kodit. Mos harroni të mbështillni kodin në etiketat e nevojshme të skriptit.

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

Kodi është komentuar kështu që ju mund të kuptoni se ku mund të rregulloni CSS për t'iu përshtatur nevojave tuaja.

Dubliko kolonën për më shumë dizajn

Hapni shtresën modale, së pari fshini dy kolonat boshe.

Pastaj dubliko dy herë kolonën që përmban dizajnin e mbivendosjes së imazhit. Duhet të keni gjithsej tre kolona me dizajne identike.

Krijimi i dizajnit të mbivendosjes së imazhit #2

Për këtë dizajn tjetër, ne do ta vendosim butonin në qendër të imazhit (gjithmonë i dukshëm). Më pas, ne do të zhvendosim kokën dhe tekstin e trupit në pamje nga lart dhe fundi i imazhit.

Rregulloni vendosjen e tekstit të trupit dhe klasën CSS

Hapni cilësimet e modulit të tekstit të mbivendosjes së trupit në kolonën 2 dhe përditësoni pozicionin:

  • Vendndodhja: në qendër të poshtme
  • Kompensimi vertikal: 5%

Më pas, përditësoni klasën CSS me sa vijon:

  • Klasa CSS: et-overlay-item lëvizja lart

Rregulloni vendndodhjen e butonit dhe klasën CSS

Më pas, hapni cilësimet e butonit në kolonën 2 dhe përditësoni vendndodhjen e mëposhtme të pozicionit:

  • Vendndodhja: Qendër

Më pas, hiqni klasën CSS pasi duam që butoni të mbetet gjithmonë i dukshëm.

Hapni cilësimet e modulit Divider (ngjyra e mbivendosjes) dhe ndryshoni sfondin si më poshtë:

  • Sfondi: rgba (67,97,238,0.8)

Pastaj hapni cilësimet e butonit dhe ndryshoni ngjyrën e sfondit:

  • Ngjyra e sfondit: #f72585

Rregulloni imazhin dhe klasën CSS

Pastaj hapni cilësimet e imazhit dhe ngarkoni një imazh të ri (nëse dëshironi).

Pastaj shtoni klasën e mëposhtme CSS në imazh:

  • Klasa CSS: et-overlay-image et-scale

Vini re se përveç klasës "et-overlay-image", ekziston një klasë shtesë e quajtur "et-scale" e cila do të rrisë madhësinë e imazhit, duke krijuar një efekt zmadhimi në lëvizje.

Krijimi i dizajnit të mbivendosjes së imazhit #3

Tani është koha për të krijuar modelin e tretë të mbivendosjes së imazhit në kolonën 3.

Rregulloni përmbajtjen e tekstit të mbivendosjes dhe klasën CSS

Filloni duke hapur cilësimet e modulit të tekstit të mbivendosjes në kolonën 3. Më pas, shtoni titullin H2 sipër tekstit të paragrafit. Tani të dy do të jenë brenda një moduli.

Mbivendosjet e imazhit Divi

Pastaj hiqni klasën CSS në mënyrë që teksti të mbetet i dukshëm sipër imazhit.

Rregullo kompensimin e butonit dhe klasën CSS

Hapni cilësimet e modulit të butonit dhe përditësoni zhvendosjen e pozicionit vertikal:

  • Kompensimi vertikal: 5%

Hiq kokën e mbivendosjes

Më pas, hiqni modulin e tekstit të kokës së mbivendosjes.

Rregulloni ngjyrën e mbivendosjes dhe klasën CSS

Hapni cilësimet e modulit Divider (ngjyra e mbivendosjes) dhe përditësoni sfondin në sa vijon:

  • Ngjyra e gradientit të sfondit të majtë: rgba (67,97,238,0.8)
  • Ngjyra e gradientit të sfondit të djathtë: rgba (247,37,133,0.8)
  • Pozicioni fillestar: 25%
  • Pozicioni përfundimtar: 75%

Dhe meqenëse duam ta mbajmë mbivendosjen e gradientit të dukshëm gjatë gjithë kohës, hiqni klasën CSS.

Rregulloni klasën CSS të imazhit

Së fundi, ne do të shtojmë një klasë shtesë CSS (“et-rotate”) në imazhin kryesor që do të ndryshojë përmasat dhe do ta rrotullojë imazhin kur rri pezull.

  • Klasa CSS: et-overlay-image et-rotate

Prekjet e fundit

Para se të kontrollojmë rezultatet tona përfundimtare, duhet të bëjmë disa rregullime.

Hiq kufirin e poshtëm të paracaktuar për të gjitha modulet

Meqenëse tashmë e kemi përditësuar margjinën me një diferencë të poshtme prej 0 px, mund ta zgjerojmë këtë diferencë në të gjitha modulet.

Klikoni me të djathtën në cilësimin e margjinës dhe zgjidhni "Zgjero margjinat".

Pastaj zgjidhni të zgjeroni margjinën te Të gjitha modulet në faqe.

Hiq modulet e kodit dublikatë

Sigurohuni që të hiqni modulet shtesë të kodit që janë bartur nga dyfishimi i kolonës së parë. Ju duhet të keni vetëm një. Ju mund ta bëni këtë lehtësisht nga shtresat modale.

Divi

Rezultatet përfundimtare

Tani që tre modelet tona janë kompletuar, le të hedhim një vështrim në rezultatet përfundimtare të modeleve tona të mbivendosjes së imazhit.

mbivendosje të personalizuara të imazhit me Divi

Shkarkoni DIVI Tani!!!

Dhe këtu është dizajni në celular. Efektet e pezullimit të mbivendosjes zbatohen vetëm në desktop. Prandaj, mbivendosjet do të jenë ende të dukshme në celular.

mbivendosje të personalizuara të imazhit me Divi

Shkarkoni DIVI Tani!!!

përfundim

Krijimi i mbivendosjeve të personalizuara të imazhit është në fakt shumë argëtues. Ka modele të panumërta që mund t'i provoni vizualisht me Divi Builder. 

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ë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për 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.

...

Divi: Si të shtoni një ikonë hamburgeri në modulin e Menysë

Divi: Si të shtoni një ikonë hamburgeri në modulin e Menysë

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

Nëse jeni duke ndërtuar kokën tuaj në Divi, ka disa mënyra për ta bërë atë. 

Ne do t'ju tregojmë se si të shtoni një ikonë hamburgeri në modulin e menusë 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

Ngarko një 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

Tjetra, shkoni te cilësimet e madhësisë dhe caktoni një gjerësi maksimale të logos.

  • Gjerësia maksimale e logos: 280 piksele

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.

...

Divi: Si të krijoni një meny të rrotave rrotulluese në hover

Divi: Si të krijoni një meny të rrotave rrotulluese në hover

Dëshironi të krijoni një menu origjinale Divi në formën e një rrote rrotulluese në lëvizje?

Krijimi i një rrote menyje rrotulluese në hover është një mënyrë argëtuese për të shfaqur lidhje të dobishme në faqen tuaj të internetit. Kjo do të ishte një mënyrë e shkëlqyer për të ofruar thirrje të shumta për veprim në një kokë për t'i drejtuar përdoruesit ku duhet të shkojnë. Dhe do të ishte gjithashtu një menu e lezetshme nënkategorie për blogun tuaj.

Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një rrotë menyje rrotulluese kur rri pezull në Divi. Kjo mund të bëhet duke përdorur një kombinim të opsioneve të integruara Divi dhe disa copa të personalizuara css.

studim

Përpara se të hyjmë në këtë tutorial, le të hedhim një vështrim në rezultatin që duam të arrijmë.

Shkarkoni DIVI Tani!!!

Krijo një faqe të re me Divi Builder

Për të filluar, do t'ju duhet sa më poshtë:

Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.

menu origjinale Divi në formën e një rrote rrotulluese në hover

Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder

Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)

Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.

Dizajni i rrotës së menusë rrotulluese në Divi

Krijoni seksionin dhe rreshtin 1

Në seksionin e pranishëm si parazgjedhje, shtoni një rresht me strukturën e kolonës vijuese.

Pastaj shtoni një modul teksti në rreshtin me përmbajtjen e mëposhtme.

Më pas, përditësoni dizajnin e tekstit si më poshtë:

  • Fonti i tekstit: Share Tech
  • Hapësira e shkronjave të tekstit: 1 px
  • Titulli 2 Madhësia e tekstit: 8vw

Shtoni rreshtin 2 për të ndërtuar rrotën

Më pas, duhet të shtojmë një rresht të ri në një kolonë poshtë rreshtit 1.

Përpara se të fillojmë të shtojmë modulet tona Teksti për lidhjet tona, duhet ta dizajnojmë linjën tonë si një rrotë. Do të ketë shumë optimizime të nevojshme në rresht për të bërë dizajnin tonë të rrotave.

Lexo gjithashtu: Si të zbuloni përmbajtjen në ndarësin e seksionit Hover në Divi 

Për të filluar, hapni Cilësimet e rreshtit 2 dhe përditësoni sa vijon:

  • Ngjyra e sfondit: #02366b
  • Ngjyra e gradientit të sfondit të majtë: rgba (0,0,0,0.45)
  • Ngjyra e gradientit të sfondit të djathtë: #02366b
  • Lloji i gradientit: Rrethor
  • Drejtimi radial: Qendër
  • Pozicioni fillestar: 36%
  • Pozicioni përfundimtar: 0%
  • Përdorni gjerësinë e ulluqit të personalizuar: PO
  • Gjerësia e kanalit: 1
  • Gjerësia: 500 px
  • Gjerësia maksimale: 500 px (Desktop), automatike (Tablet dhe telefon)
  • Lartësia: 500 px (Desktop), automatike (Tableti dhe telefoni)
  • Mbushje (Desktop): 0 px (lart dhe poshtë)
  • Mbushja (tableti dhe telefoni): 20 px (lart, poshtë dhe majtas)
  • Marzhi (Telefon): -10% (djathtas)

Ne duhet të vendosim si lartësinë ashtu edhe gjerësinë e rreshtit në 500 piksele në mënyrë që të jetë një katror i përsosur. Kjo do të na lejojë t'i japim një formë rrethore perfekte duke përdorur opsionin e këndeve të rrumbullakosura të Divi (rrezja e kufirit).

  • Këndet e rrumbullakosura: 50%

Më pas, ne mund të shtojmë një nivel tjetër të dizajnit të rrethit duke përdorur një hije kutie si më poshtë:

  • Forca e turbullimit të hijes së kutisë: 0 px
  • Forca e përhapjes së hijes së kutisë: 210 px
  • Ngjyra e hijes: rgba (2,54,107,0.66)

Më pas, do të shtojmë një fragment të vogël të CSS për të përqendruar vertikalisht përmbajtjen e rreshtit tonë. Nën skedën Avancuar, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor.

display:flex;align-items:center;

Shtimi i lidhjeve

Çdo lidhje në timon do të krijohet me një modul Tekst. Ne do të krijojmë gjithsej gjashtë module Tekst. Pesë nga modulet Tekst do të përmbajë lidhjet për timonin dhe tjetra do të përmbajë titullin e menysë.

Filloni duke krijuar një modul të ri "Text".

Më pas, përditësoni cilësimet e tekstit si më poshtë:

  • Trupi: “Elementi 1”
  • Fonti i tekstit: Share Tech
  • Ngjyra e tekstit: #ffffff
  • Madhësia: 16 px (e parazgjedhur), 20 px (Hover)
  • Hapësira e shkronjave: 1 px
  • Lartësia e rreshtit të tekstit: 60 px
  • Gjerësia: 250 px (Desktop), automatike (Tablet dhe telefon)
  • Lartësia: 60 px
  • Mbushje (majtas): 20 px

Ruani cilësimet për momentin. Më pas dublikojeni modulin e tekstit 4 herë për të krijuar gjithsej 5 module teksti.

Pozicionimi i lidhjeve/moduleve të tekstit

Tani jemi gati të vendosim lidhjet tona përgjatë perimetrit të timonit. Për ta bërë këtë, ne do të përditësojmë çdo modul Tekst me opsione transformimi që lëvizin/përkthejnë dhe rrotullojnë modulin në vend.

Zbuloni gjithashtu: Si të krijoni një rrjet kolone fluide në hover në divi

Për ta lehtësuar këtë, vendosni modalitetin e shfaqjes së kornizës së telit dhe etiketoni modulet e tekstit duke filluar me lidhjen 1 në krye deri në lidhjen 5 në fund.

Lidhja 1

Do të fillojmë duke redaktuar Lidhjen 1. Hapni cilësimet e modulit të tekstit për Lidhjen 1 dhe përditësoni sa vijon:

  • Transformo Translate (boshti Y): 120 px (Desktop), 0 px (Tablet dhe telefon)
  • Rrotullimi i transformimit (boshti Z): 60 gradë (Desktop), 0 px (Tableti dhe telefoni)
  • Origjina: 50% (në qendër djathtas)

Lidhja 2

Hapni cilësimet e modulit të tekstit për lidhjen 2 dhe përditësoni sa vijon:

  • Transformoj
    • Përkthe (boshti Y): 60 pikselë (Desktop), 0 px (Tableti dhe telefon)
    • Rrotullimi i boshtit Z: 30 gradë (Desktop), 0 px (Tableti dhe telefoni)
    • Origjina: 50% (në qendër djathtas)

Lidhja 3

Meqenëse moduli Tekst për lidhjen 3 është në mes, mund ta lëmë në vend.

Lidhja 4

Hapni cilësimet e modulit të tekstit për lidhjen 2 dhe përditësoni sa vijon:

  • Transformimi:
    • Përkthe boshtin Y: -60 px (Desktop), 0px (Tablet dhe telefon)
    • Rrotullimi i boshtit Z: -30 gradë (Desktop), 0 px (Tableti dhe telefoni)
    • Origjina: 50% (në qendër djathtas)

Lidhja 5

Hapni cilësimet e modulit të tekstit për lidhjen 2 dhe përditësoni sa vijon:

  • Transformimi:
    • Përkthe boshtin Y: -120 px (Desktop), 0px (Tablet dhe telefon)
    • Rrotullimi i boshtit Z: -60 gradë (Desktop), 0 px (Tableti dhe telefoni)
    • Origjina: 50% (në qendër djathtas)

Tani le të shohim rezultatin deri tani. Vini re se si lidhjet/teksti në modulet e tekstit shkojnë në mënyrë të përsosur përgjatë perimetrit të rrethit.

Etiketa e menusë e shtuar

Për të shtuar etiketën e menysë, do të duhet të shtojmë një modul tjetër Teksti në krye të pesë moduleve të tekstit që kemi tashmë. Shkoni përpara dhe shtoni një modul të ri Teksti mbi lidhjen 1.

Më pas, përditësoni përmbajtjen e trupit me sa vijon:

Menu

Më pas, për të shpejtuar dizajnin, kopjoni stilet e modulit Tekst për lidhjen 3 dhe ngjitini këto stile të modulit në modulin e ri Tekst.

Më pas, përditësoni sa vijon:

  • Lartësia e linjës së tekstit: 300 px (Desktop), 20 px (Tableti dhe telefoni)
  • Lartësia: rivendosni cilësimin e paracaktuar (auto)
  • Rrotullimi i transformimit (boshti Z): 180 gradë (Desktop), 0 gradë (Tableti dhe telefoni)
  • Origjina e transformimit: 50% (në qendër djathtas)

Pasi të kemi përfunduar, duhet t'i japim modulit të tekstit të etiketës së menysë një pozicion absolut. Për ta bërë këtë, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor:

position: absolute!important;

Tani zbuloni rezultatin. Ju duhet të shihni se artikulli i menusë është me kokë poshtë në të djathtë të timonit.

U shtua efekti rrotullues rrotullues në linjë/rrotë

Për të shtuar efektin rrotullues të rripit në rresht, përditësoni cilësimet e rreshtit si më poshtë:

  • Rrotullimi i transformimit (boshti Z): 180 gradë (Desktop), 0 gradë (Hover), 0 gradë (Tableti dhe telefoni)

Më pas, përditësoni cilësimet e tranzicionit si më poshtë:

  • Kohëzgjatja e tranzicionit: 450 ms
  • Tranzicioni i kurbës së shpejtësisë: Lehtësia në dalje

Tani shikoni se si rrotullohet rrota kur rri pezull mbi të.

Krijimi i një plan urbanistik me dy kolona për seksionin

Aktualisht, faqosja përbëhet nga dy rreshta me një kolonë të vendosura njëra mbi tjetrën. Megjithatë, ne mund të përdorim veçorinë flex css për të lidhur dy rreshtat horizontalisht. 

Për ta bërë këtë, ne mund të shtojmë një pjesë të vogël të CSS të personalizuar në seksion. Pasi të jetë bërë kjo, do të na duhet të rregullojmë pak hapësirën për t'i bërë gjërat siç duhet.

Hapni cilësimet e seksionit dhe shtoni css-në e mëposhtme të personalizuar në elementin kryesor:

display:flex;

Përditëso ndarjen e linjës 1

Më pas, përditësoni madhësinë dhe hapësirën e rreshtit 1 si më poshtë:

  • Gjerësia: 40% (Desktop)
  • Marzhi (Desktop): 5% e mbetur

Rezultati përfundimtar

Tani le të shohim rezultatin përfundimtar.

Shkarkoni DIVI Tani!!!

Dizajn alternativ me gjysmë rrota

Një dizajn alternativ interesant është fshehja e gjysmës së djathtë të timonit jashtë seksionit në mënyrë që lidhjet të fshihen dhe më pas të zbulohen kur rri pezull. 

Për ta bërë këtë, vazhdoni dhe kopjoni të gjithë seksionin që përmban vizatimin që sapo krijuam. 

Në seksionin e kopjuar, përditësoni parametrat në rreshtin 1 si më poshtë:

  • Gjerësia: 70% (desktop)

Më pas, përditësoni cilësimet në rreshtin 2 për të shtyrë timonin jashtë seksionit si më poshtë:

  • Margjina: -250 px djathtas

Duhet të përdorim -250 px sepse gjerësia totale e rrotës është 500 px dhe duam të fshehim saktësisht gjysmën e vijës.

Më pas vendosni dukshmërinë e seksionit të fshehur si më poshtë:

  • Vërshimi horizontal: I fshehur
  • Vërshimi vertikal: I fshehur

Këtu është rezultati përfundimtar.

menu origjinale Divi në formën e një rrote rrotulluese në hover

Shkarkoni DIVI Tani!!!

përfundim

Një rrotë lidhëse rrotulluese është një nga ato elemente elegante të dizajnit që mund të tërheqë vizitorët me një efekt delikate dhe unik pezullimi. Dhe është shumë e mahnitshme se sa lehtë mund të bëhet ky dizajn me cilësimet e dizajnit të integruar të Divi. 

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ë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për 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.

...