Dëshironi të keni një gradient të sfondit Divi që ndryshon kur rri pezull?
Ndërtimi i faqeve të internetit ka të bëjë me sigurimin që çdo detaj është i saktë. Duke i kushtuar vëmendje detajeve të vogla të dizajnit tuaj do të rrisni shpejt cilësinë tuaj Site Web.
Me opsionet e reja të pezullimit të Divi, ju mund të shtoni lehtësisht ndërveprime të vogla në tuaj Site Web. Opsionet e pezullimit zbatohen pothuajse për të gjithë parametrat e dizajnit. Ju, për shembull, mund të ndryshoni në mënyrë indirekte një sfond gradient në hover për të krijuar një tranzicion të bukur.
Kjo është pikërisht ajo që ne do t'ju tregojmë në këtë tutorial. Përveç bërjes së tranzicionit të gradientit, ne do të krijojmë gjithashtu një shembull mahnitës dizajni nga e para që do të jeni të lirë ta përdorni për çdo lloj Site Web që krijoni.
Le të shkojmë!
studim
Para se të zhytemi në tutorial, le të hedhim një vështrim në rezultatin përfundimtar.
Le të fillojmë të dizajnojmë me Divi
Shiko gjithashtu: Divi: Si të krijoni një rrëshqitës fizarmonikë të përgjegjshëm
Shtoni seksionin # 1
ndarje
Gjëja e parë që duhet të bëni është të krijoni një faqe të re ose të hapni një ekzistuese dhe të shtoni një seksion të ri të rregullt në të. Hapni cilësimet dhe shtoni kufijtë e personalizuar të sipërm dhe të poshtëm.
- Mbushje (lart dhe poshtë): 100 px
Shtoni rreshtin 1
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
Ngjyra e parazgjedhur e sfondit (Desktop) e kolonës 1
Pa shtuar ende asnjë modul, hapni cilësimet e rreshtit dhe shtoni ngjyrën e mëposhtme të paracaktuar të sfondit në kolonën 1:
- Sfondi (Desktop): #e7ffa0
Ngjyra e sfondit të kolonës 1 në rri pezull
Ndrysho këtë ngjyrë të sfondit kur rri pezull.
- Sfondi: #00020c
Gradient i sfondit të kolonës 1
Shtoni gjithashtu një ngjyrë gradienti të sfondit në kolonën 1. Vini re se po përdorim një ngjyrë plotësisht transparente. Kjo ngjyrë do të lejojë që ngjyra e sfondit të shfaqet, e cila nga ana tjetër ndryshon kur rri pezull.
- Ngjyra 1 (20%): rgba (255,255,255,0)
- Ngjyra 2 (100%): rgba (16,0,201,0.8)
- Lloji i gradientit: Linear
- Drejtimi i gradientit: 50 gradë
Ngjyra e sfondit të kolonës 2
Shtoni gjithashtu një ngjyrë sfondi në kolonën 2.
- Sfondi: #ffffff
sizing
Pastaj shkoni te skeda Projektimi dhe ndryshoni cilësimet e madhësisë në opsion sizing.
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Gjerësia e kanalit: 1
- Gjerësia: 2000 px
ndarje
Vazhdoni duke shtuar vlerat e personalizuara të mbushjes në cilësimet e ndarjes.
- Mbushje (lart dhe poshtë): 0 px
Hapësira (kolona 2)
- Mbushje (lart dhe poshtë): 6vw (desktop), 120 px (tableti dhe telefoni)
- Mbushje (majtas dhe djathtas): 5vw (Desktop), 80px (Tablet), 50px (Telefon)
Hija e Kutisë
Dhe gjithashtu jepini rreshtit një hije delikate të kutisë.
- Forca e turbullimit të hijes së kutisë: 100 px
- Forca e përhapjes së hijes së kutisë: -10 px
Transitions
Më në fund, ne do të krijojmë një tranzicion të qetë të gradientit të sfondit duke rritur kohëzgjatjen e tranzicionit në skedë Avancuar.
- Kohëzgjatja e tranzicionit: 1100 ms
Shtoni një modul imazhi në kolonën 1
Ngarko një imazh
Është koha për të filluar shtimin e moduleve! Shtoni një modul imazhi në kolonën e parë.
Sfondi i gradientit
Shkoni te cilësimet e sfondit të këtij moduli të imazhit dhe shtoni një sfond gradient. Ne po përdorim përsëri një ngjyrë plotësisht transparente për të lejuar që ngjyrat e tjera të shfaqen.
- Ngjyra 1 (57%): rgba (50,217,255,0.66)
- Ngjyra 2 (100%): rgba (255,255,255,0)
- Lloji i gradientit: Rrethor
- Pozicioni i gradientit: Lart
ndarje
Më pas, shtoni mbushje të sipërme me porosi në modul.
- Mbushje (sipër): 14vw
Shtoni modulin e tekstit në kolonën 2
Shto përmbajtje
Le të kalojmë në kolonën e dytë! Moduli i parë që do të na duhet është një modul teksti për titullin. Shkoni përpara dhe shtoni një përmbajtje titulli i zgjedhjes.
Cilësimet e tekstit të kokës
Më pas, shkoni te cilësimet e tekstit të kokës dhe bëni disa ndryshime.
- Fonti: Abril Fatface
- Ngjyra e tekstit: #000000
- Madhësia e tekstit: 4 vw (desktop), 60 px (tabletë), 40 px (telefon)
Shtoni një modul të dytë Teksti në kolonën 2
Shto përmbajtje
Moduli i dytë që do të na duhet është një modul tjetër Teksti. Shtoni disa përmbajtje e zgjedhjes.
Cilësimet e tekstit
Tjetra, shkoni te cilësimet e tekstit dhe ndryshoni shtrirjen e tekstit.
- Rreshtimi i tekstit: I justifikuar
sizing
Rregulloni gjithashtu gjerësinë në cilësimet e madhësisë.
- Gjerësia: 73% (Desktop), 100% (Tableti dhe telefoni)
ndarje
Së fundi, shtoni kufijtë e personalizuar të sipërm dhe të poshtëm në modul për të krijuar hapësira.
- Marzhi (lart dhe poshtë): 2,5 vw (Desktop), 50 px (Tableti dhe telefoni)
Shto modulin e butonit në kolonën 2
Shto një përshkrim
Moduli i tretë dhe i fundit që do të na nevojitet në kolonën e dytë është një modul Button. Shtoni një kopje sipas zgjedhjes suaj.
Cilësimet e butonit
Pastaj ndryshoni cilësimet e butonit.
- Përdorni stile të personalizuara për butonin: PO
- Madhësia e tekstit të butonit: 1,2 vw (Desktop), 14 px (Tablet dhe telefon)
- Ngjyra e tekstit të butonit: #ffffff
- Gradient ndalesa 1 (0%): #9ea6ff
- Ndalesa gradient 2 (100%): rgba(16,0,201,0.8)
- Drejtues: 78 gradë
- Gjerësia e kufirit të butonit: 0 piksel
- Rrezja kufitare: 30 px
- Hapësira e shkronjave: -1 px
- Pesha e shkronjave: Ultra Bold
- Stili i shkronjave: TT - (Shkronja të mëdha)
ndarje
Shtoni gjithashtu vlera të mbushura me porosi.
- Mbushje (lart dhe poshtë): 10 px
- Mbushje (majtas dhe djathtas): 40 px
Hija e Kutisë
Dhe aplikoni një hije delikate kutie në buton.
- Forca e turbullimit të hijes së kutisë: 40 px
Lexo gjithashtu: Si të personalizoni modulin "Countdown Timer" me një GIF
Shtoni seksionin # 2
ndarje
Tani që kemi përfunduar pjesën e parë, do të kalojmë në pjesën tjetër. Shtoni një seksion të ri të rregullt duke përdorur vlerat e mëposhtme të mbushjes me porosi:
- Mbushje (lart dhe poshtë): 100 px
Shtoni një rresht në dy kolona
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri në seksion duke përdorur strukturën e mëposhtme të kolonës:
Sfondi i kolonës 1
Pa shtuar ende asnjë modul, hapni cilësimet e rreshtit dhe shtoni ngjyrën e mëposhtme të sfondit në kolonën 1:
- Sfondi: #ffffff
Sfondi i kolonës 2 (Desktop)
Shtoni ngjyrën e mëposhtme të sfondit në kolonën 2.
- Sfondi (Desktop): #ffffff
Ngjyra e sfondit të kolonës 2 në rri pezull
Dhe ndryshoni këtë ngjyrë të sfondit kur rri pezull.
- Sfondi (Hover): #3d02ff
Sfondi i gradientit me 2 kolona
Shtoni gjithashtu një sfond gradient në kolonë.
- Ndalesa e gradientit 1 (20%): rgba(255,255,255,0)
- Gradient ndalesa 2 (100%): #ff7700
sizing
Më pas, shkoni te cilësimet e madhësisë dhe bëni disa ndryshime.
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Gjerësia e kanalit: 1
- Gjerësia: 2000 px
Hapësira (Linja)
Vazhdoni duke shtuar vlerat e personalizuara të mbushjes në cilësimet e ndarjes.
- Mbushje (lart dhe poshtë): 0 px
Hapësira (kolona 1)
Ndrysho cilësimet e ndarjes së kolonës 1
- Mbushje (lart dhe poshtë): 6vw (desktop), 120 px (tableti dhe telefoni)
- Mbushje (majtas dhe djathtas): 5vw (Desktop), 80px (Tablet), 50px (Telefon)
Hija e Kutisë
Dhe gjithashtu shtoni një hije delikate kuti në këtë rresht.
- Forca e turbullimit të hijes së kutisë: 100 px
- Forca e përhapjes së hijes së kutisë: -10 px
Transitions
Së fundi, krijoni një tranzicion të qetë duke rritur kohëzgjatjen e tranzicionit në skedë Avancuar.
- Kohëzgjatja e tranzicionit: 1100 ms
Dublikatë module të linjës 1
Meqenëse i kemi tashmë të gjitha modulet që na duhen në pjesën e mëparshme, do të kursejmë kohë duke i klonuar ato.
Vendosni dublikatat në kolonat e rreshtit 2
Dhe vendosni dublikatat në rreshtin e ri si më poshtë:
Ndrysho përmbajtjen
Sigurohuni që të ndryshoni përmbajtje e moduleve tuaja.
Ndrysho sfondin e gradientit të butonit
Ndryshoni gjithashtu gradientin e sfondit të butonit.
- Gradient ndalon 0%: #ff653f
- Gradient ndalon 100%: #0066ff
- Drejtues: 39 gradë
Ndrysho imazhin
Zëvendësoni imazhin.
Ndrysho gradientin e sfondit
Së fundi, modifikoni gradientin e sfondit të modulit Image.
- Ndalesa e gradientit 0%: rgba(0,2,12,0.66)
- Ndalesa e gradientit 57%: rgba(255,255,255,0)
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ë ndryshoni një sfond të gradientit gjatë përdorimit të pezullimit Divi. Ne kemi krijuar gjithashtu një shembull të shkëlqyer nga e para që përdor këtë qasje.
Jeni të lirë të përdorni dizajnin dhe veprën artistike për ç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.
...
