Dëshironi të paraqisni funksionalitetet ose produktet tuaja në formën e një skede Divi me efekt hover?
Po kërkoni mënyra të reja krijuese për të shfaqur veçoritë dhe/ose produktet në faqet tuaja të internetit?
Nëse po, vazhdoni të lexoni sepse në këtë artikull ne do t'ju tregojmë se si të shfaqni veçoritë në skeda në lëvizje duke përdorur vetëm opsionet e integruara të Divi. Mundësitë që keni me këtë qasje janë të pafundme dhe ato me siguri do t'ju lejojnë ta kuptoni Divi në një nivel më të thellë.
Efekti i pezullimit të skedës do të shfaqet vetëm në desktop. Në përmasat më të vogla të ekranit, ato do të shfaqen në format e tyre normale.
Le të shkojmë!
studim
Përpara se të zhytemi në këtë tutorial, le të hedhim një vështrim në rezultatin që duam të arrijmë.
Le të fillojmë procesin e krijimit me Divi
Shto një seksion të ri
Sfondi i gradientit
Shtoni një faqe të re ose hapni një faqe ekzistuese dhe shtoni një seksion të ri. Hapni cilësimet e seksionit dhe shtoni një sfond gradient në seksion.
- Ngjyra e majtë: #f2f2f2
- Ngjyra e duhur: #ffffff
- Drejtimi i gradientit: 87 gradë
- Pozicioni majtas: 20%
- Pozicioni i duhur: 80%
ndarje
Më pas, Ndryshoni cilësimet e mëposhtme të ndarjes:
- Mbushje (lart dhe poshtë): 0 px
Shto një rresht të ri
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri në seksion duke përdorur strukturën e mëposhtme të kolonës:
Ngjyrë e sfondit
Pa shtuar ende asnjë modul, hapni cilësimet e rreshtit dhe ndryshoni ngjyrën e sfondit.
- Ngjyra e sfondit: #ffffff
Madhësia dhe shtrirja
Në skedë Projektimi, tërhiqni opsionin sizing dhe ndryshoni cilësimet e mëposhtme:
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Gjerësia e kanalit: 1
- Gjerësia: 400 px
- Shtrirja e rreshtit: majtas
Hover Disizing
Ndrysho opsionin Gjerësi në cilësimet e madhësisë së hover. Kjo do të lejojë që linja të zgjerohet kur rri pezull.
- Gjerësia (Hover): 2 piksele
ndarje
Pastaj shkoni te cilësimet e ndarjes në opsion ndarje
- Mbushje (lart dhe poshtë): 0 px
Kufiri (Desktop)
Shtoni '20px' në këndin e sipërm djathtas të rreshtit dhe gjithashtu shtoni një kufi të majtë në rresht.
- Këndet e rrumbullakosura (Desktop): 20 px (Këndi i sipërm djathtas)
- Gjerësia e kufirit të majtë: 20 px
- Ngjyra e kufirit të majtë: #6d44ff
Kufiri në hover
Hiq këndin e sipërm djathtas të rrumbullakosura të "20px" në lëvizje duke shtuar "0px" në vend.
Box Shadow (Desktop)
Në fund, shtoni një hije delikate.
- Forca e turbullimit të hijes së kutisë: 80 px
- Forca e përhapjes së hijes së kutisë: -10 px
- Ngjyra e hijes: rgba (0,0,0,0.11)
Hover Shadow
Dhe ndryshoni ngjyrën e hijes në një ngjyrë plotësisht transparente kur rri pezull.
- Hija e kutisë: rgba (255,255,255,0)
Shto modulin Blurb në rresht
Shto përmbajtje
Tani që kemi mbaruar ndryshimin e të gjitha cilësimeve të rreshtit, mund të vazhdojmë dhe të shtojmë një modul Blurb në kolonë. Mos ngurroni të përdorni çdo modul tjetër sipas zgjedhjes suaj.
Pasi të keni shtuar modulin, shtoni disa përmbajtje e zgjedhjes suaj.
Zgjidhni ikonën
Pastaj zgjidhni një ikonë sipas dëshirës tuaj.
Cilësimet e ikonës
Dhe ndryshoni pamjen e ikonës në cilësimet e ikonës. Shkoni te skeda Projektimi
- Ngjyra e ikonës: #5323ff
- Vendosja e imazhit/ikonës: në krye
- Gjerësia e imazhit/ikonës: 50 px
Cilësimet e titullit të tekstit (Desktop)
Pastaj ndryshoni cilësimet e titullit.
- Fonti i titullit: Poppins
- Rreshtimi i tekstit: në qendër
- Ngjyra e tekstit të titullit: #5323ff
- Madhësia e tekstit të titullit: 25 px
- Hapësira e shkronjave: -1 px
- Lartësia e linjës: 1 em
Zhvendos cilësimet e titullit të tekstit
Dhe ndryshoni lartësinë e rreshtit të titullit kur rri pezull.
- Lartësia e linjës së titullit: 1,5 em
Cilësimet e tekstit të trupit (Desktop)
Më pas, shkoni te cilësimet e tekstit të trupit dhe bëni disa ndryshime. Kjo përfshin ndryshimin e madhësisë së tekstit në '0px'. Kjo do të na ndihmojë që teksti i trupit të shfaqet vetëm në lëvizje.
- Fonti i trupit: Poppins
- Pesha e shkronjave të trupit: e lehtë
- Rreshtimi i tekstit: në qendër
- Ngjyra e tekstit të trupit: #000000
- Madhësia e tekstit të trupit: 0 px (desktop), 15 px (tableti dhe telefoni)
- Lartësia e linjës: 2,2 em
Cilësimet e tekstit të trupit në lëvizje
Për të siguruar që teksti i trupit të shfaqet në lëvizje, ndryshoni madhësinë e tekstit të varur.
- Madhësia e tekstit në trup: 15 px
Hapësira (Desktop)
Për t'i dhënë modulit pak hapësirë, ne modifikojmë parametrat e mëposhtëm të ndarjes:
- Mbushje (lart dhe poshtë): 80 px
Hapësira pezull
Ne do të ndryshojmë cilësimet e ndarjes së pezullimit.
- Mbushje (lart dhe poshtë): 80 px
- Mbushje (majtas dhe djathtas): 20vw
Klonimi i rreshtit 3 herë
Pasi të keni mbaruar redaktimi i rreshtit të parë dhe modulit të tij Blurb, mund të vazhdoni dhe ta klononi rreshtin sa herë të dëshironi.
Edit Line dhe Blurb Moduli #2
Ndrysho ngjyrën e kufirit të linjës
Le të fillojmë duke ndryshuar ngjyrën e kufirit të majtë të rreshtit.
- Ngjyra e kufirit të majtë: #00ffcc
Redakto përmbajtjen dhe ikonën e Blurb
Më pas, hapni cilësimet e modulit Blurb dhe ndryshoni ikonën.
Ndrysho ngjyrën e ikonës së modulit blurb
Me ngjyrën e ikonës.
- Ngjyra e ikonës: #00eda6
Ndrysho ngjyrën e titullit
Dhe ngjyra e tekstit të titullit.
- Ngjyra e tekstit të titullit: #00eda6
Redaktoni linjën dhe modulin Burb #3
Ngjyra e kufirit të vijës
Le të ndryshojmë ngjyrën e kufirit të vijës së majtë.
- Ngjyra e kufirit të majtë: #afebff
Redakto përmbajtjen dhe ikonën e Blurb
Le të ndryshojmë gjithashtu ikonën dhe përmbajtje të tekstit të prezantimit.
Ndrysho ngjyrën e ikonës së modulit blurb
Ndryshoni gjithashtu ngjyrën e ikonës.
- Ngjyra e ikonës: #68d9ff
Ndrysho ngjyrën e tekstit të titullit
Dhe ngjyra e tekstit të titullit gjithashtu.
- Ngjyra e tekstit të titullit: #68d9ff
Edit Line dhe Blurb Moduli #4
Ndrysho ngjyrën e kufirit të linjës
Në modulin tjetër dhe të fundit, ndryshoni gjithashtu ngjyrën e kufirit të majtë të rreshtit.
- Ngjyra e kufirit të majtë: #dd87cf
Redakto përmbajtjen dhe ikonën e Blurb
Hapni modulin Blurb në rresht dhe ndryshoni ikonën dhe përmbajtje du modul.
Ndrysho ngjyrën e ikonës së modulit blurb
Me ngjyrën e ikonës.
- Ngjyra e ikonës: #dd6aca
Ndrysho ngjyrën e tekstit të titullit
Dhe ngjyra e tekstit të titullit gjithashtu.
- Ngjyra e tekstit të titullit: #dd6aca
studim
Tani që kemi kaluar nëpër tutorial, le t'i hedhim një vështrim të fundit rezultatit.
Shkarkoni DIVI Tani!!!
Përfundim
Në këtë artikull, ne ju treguam se si të përdorni opsionet e integruara të Divi vetëm për të krijuar skeda të disponueshme në hover.
Kjo qasje do t'ju ndihmojë të ndani përmbajtjen rreth veçorive ose produkteve në mënyrë interaktive.
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.
...
