Që nga opsionet e reja të përmasave të Divi janë lëshuar, ka disa mësime që ju tregojnë se si të krijoni zbulime hover. Në këto mësime, përmbajtje i maskuar ishte vendosur vertikalisht. Megjithatë, në disa raste ju mund të dëshironi të krijoni një zbulim horizontal. Në këtë tutorial, ne do t'ju tregojmë se si të zbuloni imazhe duke përdorur rrjetet e pezullimit dhe opsionet e tejmbushjes. Divi. Kryerja e kësaj pune kërkon një qasje paksa të ndryshme. Ne do të përdorim një rresht të një kolone dhe do t'i vendosim të gjitha modulet njëra poshtë tjetrës. Kur rri pezull, ne do ta kthejmë kolonën në një rrjet horizontal. Ju gjithashtu mund të shkarkoni skedarin JSON falas!
Le të shkojnë.
studim
Para se të zhyteni në tutorial, le të hedhim një vështrim të shpejtë se si duket në madhësi të ndryshme të ekranit.
Le të fillojmë rikrijimin!
Shto një seksion të ri
Filloni duke shtuar një seksion të ri të rregullt në faqen ku po punoni.
Shto një rresht të ri
Struktura e kolonës
Vazhdoni të shtoni një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
Sfondi i gradientit të paracaktuar
Pa shtuar më shumë module, hapni parametrat e linjës dhe shtoni sfondin vijues të gradientit:
- Ngjyra 1: #b1ffc4
- Ngjyra 2: #ffffff
- Lloji i gradientit: Radial
- Drejtimi Radial: Qendra
- Pozicioni i fillimit: 28%
- Pozicioni i fundit: 28%
Flying mbi sfondin e gradientit
Ndryshoni sfondin e gradientit duke lëvizur.
- Ngjyra 1: #b1ffc4
- Ngjyra 2: #ffffff
- Lloji i gradientit: Radial
- Drejtimi radial: majtas
- Pozicioni i fillimit: 5%
- Pozicioni i fundit: 5%
ndarje
Shkoni te cilësimet e ndarjes dhe më pas ndryshoni vlerat e mbushjes dhe kufijve.
- Mbushja e sipërme: 0px
- Mbushja e poshtme: 0px
- Marzhi i sipërm: 50px
- Marzhi i poshtëm: 50px
Kufiri i paracaktuar
Shtoni një rreze kufitare me piksele 50 në qoshet e sipërm të djathtë dhe të poshtëm.
Kufiri rri pezull
Sillni qoshet tek "0px" duke u varur.
Hije e paracaktuar
Pastaj shtoni një hije delikate të kutisë duke përdorur parametrat e mëposhtëm:
- Kutia Shadow Blur Force: 50px
- Ngjyra e hijes: rgba (0,0,0,0.09)
Shadow Box Hover
Hiqeni hijen nga kutia kur fluturoni sipër, duke zëvendësuar ngjyrën e hijes me një ngjyrë plotësisht transparente.
- Ngjyra e hijes: rgba (0,0,0,0)
Shtoni një modul teksti në një kolonë
Shto përmbajtje H2
Është koha për të filluar shtimin e moduleve, duke filluar me një modul teksti. Futni përmbajtje H2 sipas zgjedhjes suaj.
Cilësimet e tekstit H2
Shkoni te skeda Design dhe ndryshoni përkatësisht cilësimet e tekstit H2:
- Titulli 2 Font: Acme
- Titulli 2 Stili i fontit: Nënvizoni
- Titulli 2 Ngjyra e nënvizimit: #00ff3f
- Titulli 2 Ngjyra e tekstit: #000000
- Titulli 2 Madhësia e tekstit: 3vw
ndarje
Pastaj shtoni vlera të mbushura me porosi.
- Mbushja më e mirë: 6vw
- Mbushja e poshtme: 7vw
- Mbushja e majtë: 2vw
Shto modul të imazhit në kolonë
Ngarkoni imazhin
Moduli i dytë që na duhet në këtë kolonë është një modul i imazhit. Ngarko një imazh peizazhi të zgjedhur nga ti.
Kuti e lehtë
Aktivizoni opsionin e dritës së lehtë në cilësimet e lidhjes pastaj.
- Hapni në shikues: po
sizing
Dhe detyroni gjerësinë e plotë të figurës në cilësimet e madhësisë. Kjo do të sigurojë që imazhi të mbetet i ndjeshëm në të gjitha madhësitë e ekranit.
- Gjerësia e plotë e forcës: Po
Moduli i Imazhit të Klonit dy herë
Pasi të keni përfunduar modulin e parë të figurës, mund ta kopjoni dy herë.
Ndrysho imazhet
Ndryshoni imazhet në dy kopjimet. Sigurohuni që imazhet që ngarkoni të jenë të njëjtën madhësi me imazhin e parë.
Shtoni efektin e rrokullisjes në rresht
sizing
Tani që kemi përfunduar cilësimet themelore të rreshtit dhe modit, është koha për të krijuar efektin e rri pezull! Ne do të fillojmë duke ndryshuar lartësinë dhe gjerësinë e rreshtit dhe do të fshehim vërshimet. Hapni cilësimet e madhësisë së rreshtit dhe bëni ndryshimet e mëposhtme:
- Përdorni një gjerësi të ulluqeve me porosi: Po
- Gjerësia e zorrës së trashë: 1
- Gjerësia: 20%
- Gjerësia maksimale: 100%
- Lartësia: 15.9vw
hovering
Ulni gjerësinë në "100%" ndërsa fluturoni. Kjo do të lejojë që imazhet të shfaqen pasi rreshti të mbulohet.
- Gjerësia: 100%
dukshmëri
Kalo te skeda tjetër e avancuar dhe fshih tejmbushjet. Kjo do të sigurojë që imazhet të maskohen përpara vizitorët rri pezull (desktop) ose kliko (tabletë/mobil) në modulin e tekstit.
- Rrjedhja horizontale: e fshehur
- Vërshimi vertikal: i fshehur
Transitions
Ne po ndryshojmë gjithashtu kohëzgjatjen e kalimit në parametrat e tranzicionit.
- Kohëzgjatja e tranzicionit: 0ms
Elementi kryesor i kthimit të kolonës
Për të krijuar një rrjet hover, ne do të hapim cilësimet e kolonës, do të shkojmë në skedën Opsione të përparuara dhe do të vendosim linjat e mëposhtme të kodit CSS në elementin kryesor të rri pezull:
ekran: rrjet; kolonat e modelit të rrjetit: 20% 25% 25% 25%; hendeku në rrjet: 10px;
Klononi rreshtin dy herë
Pasi të keni përfunduar rreshtin e parë, mund ta klononi atë sa herë që dëshironi. Për këtë shembull të veçantë të dizajnit, ne klonojmë rreshtin dy herë.
Modifikoni sfondin gradient të rreshtit 1
Ndryshoni ngjyrën e gradientit të parë në sfondin e gradientit të rreshtit të dytë.
- Ngjyra 1: # ffdc96
Ndryshoni sfondin gradient të rreshtit 2
Bëni të njëjtën gjë për rreshtin e tretë.
- Ngjyra 1: # b7c7ff
Ndryshoni kopjen e modulit të tekstit dhe ngjyrën e nënvizimit të dy kopjimeve
Vazhdoni duke ndryshuar ngjyrën e nënvizimit të kopjimeve të modulit të tekstit me kopjen dhe jeni bërë!
- Ngjyra e nënvizuar # 1: # ffaa00
- Ngjyra e nënvizuar # 2: # 0037ff
Mendimet e fundit
Në këtë tutorial, ne ju treguam se si të shfaqni imazhe në rrjetet horizontale të lëvizjes duke përdorur opsionet e tejmbushjes. Divi. Imazhet u zbuluan kur rrinin pezull në desktop dhe klikoheshin në tablet/telefon. Edhe pse ne kemi zbuluar imazhe, ju mund t'i zbuloni përmbajtje sipas zgjedhjes suaj duke modifikuar parametrat në gjenerator. Shpresojmë që ky tutorial t'ju frymëzojë për të krijuar dizajnet tuaja alternative të rrjetës së pezullimit! Nëse keni ndonjë pyetje ose sugjerim, sigurohuni që të lini një koment në seksionin e komenteve më poshtë!
