Dëshironi të krijoni modele të personalizuara të sfondit duke përdorur opsionin Gradient Repeat të Divi ?
Opsionet e sfondit të Divi ofrojnë shumë mënyra për të krijuar modele sfondi. Mund të krijoni edhe modele sfondi duke përdorur vetëm gradientë. Opsioni Gradient Repeat e bën këtë të thjeshtë dhe të lehtë.
Në këtë artikull do të shohim se si të përdorim opsionin Gradient Repeat të Divi për të krijuar modele të personalizuara të sfondit.
Le të fillojë.
Shiko gjithashtu: Divi: Si të krijoni një formë kontakti që shfaqet pasi klikoni në një buton
Çfarë është përsëritja e gradientit
Opsioni Gradient Repeat krijon një model të bazuar në Gradient Stops. Ndalesat e gradientit janë matje që përcaktojnë se ku shfaqen ngjyrat dhe ndalen në gradient. Divi dhe Gradient Builder i tij përdorin këto ndalesa për të krijuar modelin.
Ngjyra e fundit i tregon gradientit se ku është pika e thyerjes në gradient. Ju mund të keni sa më shumë ngjyra që dëshironi përpara kësaj pike pushimi.
Le Ndërtues i gradientit më pas do ta përsërisë atë për të mbushur ekranin që krijon modelin. Opsioni mund të shtohet në çdo seksion, rresht, kolonë ose modul dhe ato mund të përdoren së bashku.
Aktivizoni opsionin "Background Gradient".
Për të aktivizuar opsionin Përsëritja e gradientit, hapni cilësimet e seksionit duke klikuar ikonën e ingranazhit të tij. Ai gjithashtu punon me rreshta, kolona dhe Modulet.
Shkoni te Sfond . Zgjidhni skedën Sfondi i gradientit dhe klikoni mbi Shto gradientin e sfondit.
Nën shiritin e ndalimit të gradientit është një cilësim i quajtur Përsëritja e gradientit . Kjo është çaktivizuar si parazgjedhje. Thjesht klikoni mbi të për ta aktivizuar.
Gradienti tani do të përsëritet, duke krijuar një model të bazuar në ndalesat e gradientit dhe cilësimet e tjera të gradientit, si p.sh. njësia e gradientit.
Njësitë e gradientit
Njësia e gradientit është njësia matëse. Kjo specifikon se çfarë tregojnë numrat e ndalimit të gradientit në shiritin e gradientit, i cili përcakton se si maten ndalesat e gradientit. Kjo ndikon në modelin e krijuar nga opsioni i përsëritjes.
Gjeneratori i gradientit të sfondit të Divi ofron 15 njësi. Le të shohim një shembull të katër opsioneve më të njohura. Siç do të shohim në shembujt tanë, rezultati do të ndryshojë në varësi të numrit të ndalesave të gradientit dhe cilësimeve tuaja.
Përqindje (përqind)
Përqindja mat ndalesat e gradientit në përqindje. Kjo llogarit pikat e gradientit bazuar në elementin prind. Sa më i vogël të jetë thurja e fundit e gradientit, aq më i ngushtë është modeli i krijuar. Kur rregulloni pozicionin e njërës prej ngjyrave, ajo ngjyrë lëviz ndërsa të tjerat mbeten në vend.
Piksele (px)
Pixels mat numrin e pikselëve për çdo ndalesë gradient. Kjo i jep gradientit një model më të vogël se shumica e llojeve të tjera të njësive. Lëvizja e pozicionit të ngjyrës së parë ose të fundit ndryshon pozicionin e secilës ngjyrë.
Lartësia e dritares (vh)
Porta e shikimit është zona e dritares së shfletuesit që është e dukshme. Ajo matet në lartësi dhe gjerësi veçmas. Lartësia e dritares përdor ndalesat e gradientit për të matur përqindjen e lartësisë së madhësisë së dritares. Rregullimi i pozicionit të ngjyrës së parë ose të fundit prek të gjitha ngjyrat.
Gjerësia e dritares (vw)
Gjerësia e dritares përdor ndalesat e gradientit për të matur përqindjen e gjerësisë së madhësisë së dritares (ose gjerësinë e shfletuesit). Rregullimet ndryshojnë në varësi të gjerësisë. Ndërsa rregulloni numrin më të madh ose më të vogël, ajo ngjyrë specifike ndryshon pozicionin ndërsa të tjerat mbeten të njëjta.
Shembuj të përdorimit të opsionit "Gradient Repeat".
Lexo gjithashtu: Divi: Si të krijoni një tabletë me përmbajtje ngacmuese të lëvizshme
Për shembujt tanë, ne përdorim seksionin Thirrje për Veprim të faqes kryesore të pako e paraqitjes së akupunkturës falas në dispozicion në Divi.
Ne do të duhet të bëjmë një rregullim në kolonën e parë të seksionit. Hapini ato parametrat e linjës duke klikuar në ikonën e tij të ingranazhit.
Pastaj zgjidhni ikonë ingranazhi për kolonën e parë.
gradient i kolonës një
Kolona e parë ka gradientin e vet të sfondit. Është pjesë e paraqitjes. Ne nuk do ta ndryshojmë atë. Ne do të përdorim të njëjtin gradient në katër shembujt tanë. Këtu janë cilësimet në rast se ju nevojiten.
- Ndalesat e gradientit:
- 0px: #f4d5b8
- 100 px: rgba (244,213,184,0)
Cilësimet e gradientit
- Lloji i gradientit: Linear
- Pozicioni i gradientit: 180 gradë
- Përsëriteni gradientin: JO
- Njësia e gradientit: Përqindje
- Gradient katror mbi sfond Imazhi: NR
ndarje
Ne do të shtojmë hapësirë në të majtë të kolonës. Hyni në skedën Projektimi, lëvizni te ndarje dhe zgjidhni ikona e tabletit për të hapur opsionet e pajisjes.
Shtoni 5% mbushje majtas për skedat e desktopit dhe tabletit. Zgjidhni skedën e telefonit dhe fshini mbushjen e majtë. Lini Top dhe Right në cilësimet e tyre aktuale.
- mbushje
- Top: 180 px
- majtas: 5%
- Majtas: 80 px
shembull një
Shembulli ynë i parë krijon një model përsëritës diagonal me vija të holla.
Ky ka tre ndalesa gradient.
- Ndalesat e gradientit:
- 4 px: #fff6ee
- 9 px: #ede3dc
- 14 px: #e8ded7
Përdorni cilësimet e mëposhtme.
- Lloji i gradientit: Linear
- Drejtimi i gradientit: 156 gradë
- Përsëriteni gradientin: PO
- Njësia e gradientit: pikselë
- Gradient katror mbi sfond Imazhi: nr
Shembulli i dytë
Shembulli ynë i dytë krijon një model përsëritës diagonal me vija më të mëdha.
Ky ka tre ndalesa gradient.
- Ndalesat e gradientit:
- 4 px: #fff6ee
- 43 px: #ede3dc
- 50 px: #e8ded7
Për cilësimet e gradientit,
- Lloji i gradientit: Linear
- Drejtimi i gradientit: 156 gradë
- Përsëriteni gradientin: PO
- Njësia e gradientit: pikselë
- Gradient katror mbi sfond Imazhi: NR
Shembulli tre
Shembulli ynë i tretë krijon një model rrethor të përsëritur me rrathë me madhësi mesatare.
Ky ka tre ndalesa gradient.
- Ndalesa e gradientit
- 4 px: #fff6ee
- 7 px: #e8ded7
- 8 px: #ede3dc
Aplikoni cilësimet e mëposhtme të gradientit
- Lloji i gradientit: Rrethor
- Pozicioni i gradientit: Poshtë
- Përsëriteni gradientin: PO
- Njësia e gradientit: Përqindje
- Gradient katror mbi sfond Imazhi: NR
Shembull 4
Shembulli ynë i katërt krijon një model rrethor me rrathë të mëdhenj.
Ky ka tre ndalesa gradient.
- Ndalesat e gradientit:
- 4 px: #fff6ee
- 23 px: #e8ded7
- 31 px: #ede3dc
Për cilësimet e gradientit, ndryshoni si më poshtë:
- Lloji i gradientit: Rrethor
- Pozicioni i gradientit: Qendër
- Përsëriteni gradientin: PO
- Njësia e gradientit: Përqindje
- Gradient katror mbi sfond Imazhi: nr
Shkarkoni DIVI Tani!!!
Përfundim
Ky është vështrimi ynë se si të përdorim opsionin për të Përsëritja e gradientit nga Divi për të krijuar sfonde të personalizuara. Shumë rregullime në cilësimet e gradientit ndikojnë në hartimin e gradientit.
Përsëritja e gradientit funksionon mirë me të gjitha këto rregullime për të krijuar lehtësisht modele interesante të sfondit të personalizuar.
Ne rekomandojmë të provoni shembujt që kemi dhënë këtu dhe të bëni ndryshime për të parë se si ndikohen gradientët dhe të krijoni gradientët tuaj të personalizuar të sfondit.
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.
...
