Divi: Krahasimi i llojeve të ndryshme të gradientëve

Dëshironi të përdorni Gradient Builder të Divi por nuk e dini se cilin lloj gradienti të zgjidhni?

Llojet e gradientit janë pjesë e së resë Divi Ndërtues i gradientit . Llojet e reja të gradientëve Divi ju lejon të shtoni forma dhe ngjyra të ndryshme në sfondin tuaj. 

Në këtë artikull, ne do t'i krahasojmë këto lloje gradientësh dhe do t'ju tregojmë se si t'i përdorni ato për të krijuar sfonde unike!

Le të fillojë.

Cilat janë llojet e gradientit Divi?

Ndërtuesi i ri i gradientit të Divi shton disa veçori të reja të gradientit që përfshijnë llojet e gradientit. Ekzistojnë katër lloje gradientësh për të zgjedhur:

• Lineare
• Circulaire
• Eliptike
• Konike

Secili prej llojeve shfaq gradientin ndryshe. Ato përdoren për të formuar gradientin që do të shfaqet si një model linear ngjyrash, në një rreth, elips ose kon. Ne do t'i shohim ato në detaje në shembujt tanë.

Llojet e gradientit ndikohen gjithashtu nga kontrolle të tjera, të tilla si pozicioni, nëse duhet përsëritur apo jo, njësia matëse për shiritin e lëvizjes së gradientit dhe vendosja e gradientit mbi sfond.

Çdo rregullim mund të ketë një ndikim të vogël ose të madh në gradient. Gradienti mund të jetë delikat ose të dallohet. Ndryshime të vogla ose të mëdha mund të bëhen vetëm me një rregullim.

Me këtë në mendje, le të shohim disa shembuj të gradientëve që përdorin secilin prej llojeve të gradientit. Ne do të tregojmë tre shembuj të çdo lloji të gradientit. 

E para do të jetë një tip gradient standard që do të shihni në ueb. Dy të ardhshmet do të jenë pak më eksperimentale, vetëm për të parë se çfarë mund të bëni me llojet e gradientëve.

Shembuj të llojeve të gradientit

Për shembuj të tipit gradient, ne përdorim seksionin Hero të faqes kryesore të pako pako e paraqitjes së shtratit dhe mëngjesit në dispozicion në Divi. Ky seksion ka tashmë një gradient, por ne do ta zëvendësojmë atë dhe do të bëjmë disa eksperimente. 

Ne mund të heqim gradientin origjinal të sfondit ose ta modifikojmë atë. Rezultatet janë të njëjta. Për thjeshtësi, ne do ta modifikojmë atë.

Ne e personalizuam tekstin e titullit duke e ndryshuar atë nga e zeza në të bardhë.

Lloji i gradientit linear

Lexo gjithashtu: Divi: Si të përdorni përzierjen e modeleve në imazhet e sfondit

Gradientët linearë shfaqin gradientin sikur të ishte shpërndarë në të gjithë faqen.

Shembulli i parë i llojit të gradientit linear

Këtu është një vrojtim i shembullit tonë të parë. Shfaq një ngjyrë më të çelur në të majtë të ekranit dhe një ngjyrë më të errët në të djathtë, me një tranzicion të qetë midis tyre.

Për të krijuar këtë shembull, shtoni dy ngjyra. të kryeministër është rgba(92,158,82,0.76) në pozicionin 0%. të i dytë është rgba(0,10,4,0.76) në pozicionin 97%.

• Ndalesat e gradientit:
  • 0%: rgba(92,158,82,0.76)
  • 97%: rgba (0,10,4,0.76)

Më pas ndryshoni Tipi gradient në Linear dhe vendosni Udhëheqja mbi 131 gradë. se ai mos u perserit. Vendosnjësi në Përqindje. Vendosni gradientin mbi imazhin e sfondit.

• Lloji i gradientit: Linear
• Drejtimi i gradientit: 131 gradë
• Përsëriteni gradientin: JO
• Njësia e gradientit: Përqindje
• Gradient katror mbi sfond Imazhi: PO

Shembulli i dytë i llojit të gradientit linear

Këtu është një vrojtim i shembullit të dytë linear të gradientit. Funksionon si i pari, por ka një ndalesë të fortë në të majtë ku merr një hije më e errët.

Për të krijuar këtë, shtoni tre ndalesa të gradientit. të kryeministër është rgba(18,76,41,0.76) në pozicionin 13%. të i dytë është rgba(92,158,82,0.76) në pozicionin 13%. ngjyra 3 është rgba(18,76,41,0.76) në pozicionin 34%.

• Ndalesat e gradientit:
  • 13%: rgba (18,76,41,0.76)
  • 13%: rgba (92,158,82,0.76)
  • 34%: rgba (18,76,41,0.76)

Më pas vendosni Tipi gradient në Linear dhe vendosni Udhëheqja mbi 90 gradë. se ai mos u perserit . Ndryshoninjësi përqindje. Vendoseni mbi imazhin e sfondit.

• Lloji i gradientit: Linear
• Drejtimi i gradientit: 90 gradë
• Përsëriteni gradientin: JO
• Njësia e gradientit: Përqindje
• Gradient katror mbi sfond Imazhi: PO

Shembulli i tretë i llojit të gradientit linear

Shembulli ynë i tretë vendos një vijë me ngjyrë të hapur diagonalisht në këndin e sipërm djathtas, duke prekur një vijë me ngjyrë më të errët.

Kjo ka tre ngjyra. ngjyra 1 është rgba(92,158,82,0.76) në pozicionin 13%. ngjyra 2 është rgba(92,158,82,0.76) në pozicionin 23%. Të ngjyra e tretë është rgba(18,76,41,0.76) në pozicionin 32%.

• Ndalesat e gradientit:
  • 13%: rgba (92,158,82,0.76)
  • 23%: rgba (92,158,82,0.76)
  • 32%: rgba (18,76,41,0.76)

Përcaktoni Tipi gradient në Linear në a drejtim prej 209 gradë. I lindur i mos u perserit dhe vendosninjësi në Përqindje. Vendosni gradientin mbi imazhin e sfondit.

• Lloji i gradientit: Linear
• Drejtimi i gradientit: 209 gradë
• Përsëriteni gradientin: JO
• Njësia e gradientit: Përqindje
• Gradient katror mbi sfond Imazhi: PO

Lloji i gradientit rrethor

Lloji i gradientit rrethor krijon një rreth me ngjyrat.

Shembulli i parë i llojit të gradientit rrethor

Shembulli ynë i parë rrethor i gradientit vendos një ngjyrë të lehtë në qendër dhe një ngjyrë më të errët rreth skajeve.

Kjo ka 2 ngjyra. të kryeministër është rgba(92,158,82,0.76) në pozicionin 0%. të i dytë është rgba(0,10,4,0.76) në pozicionin 62%.

• Ndalesat e gradientit:
  • 0%: rgba(92,158,82,0.76)
  • 62%: rgba (0,10,4,0.76)

Përcaktoni Tipi gradient në rrethore. Qendra e drejtim . Sigurohuni që ai mos u perserit , ndryshoninjësi si përqindje dhe vendoseni mbi imazhin e sfondit.

• Lloji i gradientit: Rrethor
• Pozicioni i gradientit: Qendër
• Përsëriteni gradientin: JO
• Njësia e gradientit: Përqindje
• Gradient katror mbi sfond Imazhi: PO

Shembulli i dytë i llojit të gradientit rrethor

Ky gradient vendos një skaj të qartë rrethor në qendër të ekranit.

Ka katër ngjyra. Dy ngjyra janë të mbivendosura. të kryeministër është rgba(18,76,41,0.76) në pozicionin 13%. të i dytë është rgba(92,158,82,0.76) në pozicionin 33%. ngjyra 3 është rgba(92,158,82,0.76) në pozicionin 51%. ngjyra 4 është rgba(18,76,41,0.76). Vendoset në pozicionin 51%, mbi ngjyrën 3.

• Ndalesat e gradientit:
  • 13%: rgba (18,76,41,0.76)
  • 33%: rgba (92,158,82,0.76)
  • 51%: rgba (92,158,82,0.76)
  • 51%: rgba (18,76,41,0.76)

Përcaktoni Tipi gradient në Rrethore dhe vendoseni Udhëheqja në këndin e sipërm majtas. Sigurohuni që ai mos u perserit , ndryshoni njësi si përqindje dhe vendoseni mbi imazhin e sfondit.

• Lloji i gradientit: Rrethor
• Pozicioni i gradientit: majtas lart
• Përsëriteni gradientin: JO
• Njësia e gradientit: Përqindje
• Gradient katror mbi sfond Imazhi: PO

Shembulli i tretë i llojit të gradientit rrethor

Ky shembull vendos disa rrathë të lehta në ngjyrën më të errët, duke filluar nga mesi i rrethit.

Kjo gjithashtu grumbullon dy ngjyra në një rend të caktuar për të arritur këtë dizajn. Të premierën ngjyra është rgba (18,76,41,0.76) në pozicionin 13%. ngjyra 2 është rgba(18,76,41,0.76) në pozicionin 44%. Të troisième ngjyra mbivendoset me ngjyrën e dytë. Kjo është rgba (92,158,82,0.76) në pozicionin 44%. ngjyra 4 është rgba(92,158,82,0.76) në pozicionin 51%.

• Ndalesat e gradientit:
  • 13%: rgba (18,76,41,0.76)
  • 44%: rgba (18,76,41,0.76)
  • 44%: rgba (92,158,82,0.76)
  • 51%: rgba (92,158,82,0.76)

ndryshoje tip gradient në formë rrethore. Vendosni drejtim poshte përsëritje këtë. Vendosnjësi në Përqindje dhe vendosni gradientin mbi imazhin e sfondit.

• Lloji i gradientit: Rrethor
• Pozicioni i gradientit: Poshtë
• Përsëriteni gradientin: PO
• Njësia e gradientit: Përqindje
• Gradient katror mbi sfond Imazhi: PO

Lloji i gradientit eliptik

Gradientët eliptikë vendosin ngjyrat në formën e një elipsi.

Shembulli i parë i llojit të gradientit eliptik

Shembulli ynë i parë eliptik vendos një elips me ngjyrë të çelur në qendër të ekranit me një ngjyrë më të errët rreth tij.

Kjo ka dy ngjyra. të kryeministër është rgba(92,158,82,0.76) në pozicionin 0%. të i dytë është rgba(0,10,4,0.76) në pozicionin 50%.

• Ndalesat e gradientit:
  • 0%: rgba(92,158,82,0.76)
  • 50%: rgba (0,10,4,0.76)

ndryshoje tip gradient në eliptike. Vendos drejtim në Qendër. Sigurohuni që kjo mos u perserit , rregulloninjësi në Përqindje dhe vendoseni mbi imazhin e sfondit.

• Lloji i gradientit: eliptik
• Pozicioni i gradientit: Qendër
• Përsëriteni gradientin: JO
• Njësia e gradientit: Përqindje
• Gradient katror mbi sfond Imazhi: PO

Shembulli i dytë i llojit të gradientit eliptik

Shembulli ynë i dytë vendos shumë vija të holla rrethore përgjatë gradientit.

Ka dy ngjyra. të kryeministër është rgba(92,158,82,0.76) në pozicionin 34pt. të i dytë është rgba(0,10,4,0.76) në pozicionin 39pt.

• Ndalesat e gradientit:
  • 34 pikë: rgba(92,158,82,0.76)
  • 39 pikë: rgba(0,10,4,0.76)

ndryshoje Tipi gradient në eliptik dhe rregulloni Udhëheqja në të majtë. Keni këtë në përsëris. Ndryshoninjësi me pika. Vendoseni mbi imazhin e sfondit.

• Lloji i gradientit: eliptik
• Pozicioni i gradientit: djathtas
• Përsëriteni gradientin: PO
• Njësia e gradientit: Pika (pt)
• Gradient katror mbi sfond Imazhi: PO

Shembulli i tretë i llojit të gradientit eliptik

Shembulli ynë i tretë vendos shumë gjysmërrathë në gradient.

Kjo ka dy ngjyra. të kryeministër është rgba(32,68,35,0.73) në pozicionin 34vmin. të i dytë është rgba(0,10,4,0.76) në pozicionin 39vmin.

• Ndalesat e gradientit:
  • 34vmin: rgba(32, 68, 35, 0.73)
  • 39vmin: rgba(0,10,4,0.76)

ndryshoje Tipi gradient në eliptik dhe rregulloni Udhëheqja në Lartë. Keni këtë në përsëris. NdryshoniUnité në Viewport Minimum. Vendoseni mbi imazhin e sfondit.

• Lloji i gradientit: eliptik
• Pozicioni i gradientit: Lart
• Përsëriteni gradientin: PO
• Njësia e gradientit: Minimumi i portit të pamjes (vmin)
• Gradient katror mbi sfond Imazhi: PO

Lloji i gradientit konik

Shiko gjithashtu: Divi: Si të krijoni kalime në sfond midis elementeve

Lloji i gradientit konik e shfaq gradientin si kon sikur koni të shihet nga lart.

Shembulli i parë i llojit të gradientit konik

Ky shembull vendos një vijë diagonale nga qendra e gradientit në të majtë me një ngjyrë të hapur në njërën anë dhe një ngjyrë të errët në anën tjetër.

Ka dy ngjyra. të kryeministër është rgba(92,158,82,0.76) në pozicionin 0%. të i dytë është rgba(0,10,4,0.76) në pozicionin 50%.

• Ndalesat e gradientit:
  • 0%: rgba(92,158,82,0.76)
  • 50%: rgba (0,10,4,0.76)

ndryshoje tip gradient në konik. Rregulloni drejtim mbi 221 gradë. Qendra e pozicion et mos e perserit . Vendosni gradientin sipër imazhit.

• Lloji i gradientit: Konik
• Drejtimi i gradientit: 221 gradë
• Pozicioni: Qendër
• Përsëriteni gradientin: JO
• Gradient katror mbi sfond Imazhi: PO

Shembulli i dytë i tipit të gradientit konik

Ky shembull është i ngjashëm me atë të mëparshëm, por vendos linjën qendrore.

Kjo ka katër ngjyra. të kryeministër është rgba(20,40,20,0.76) në pozicionin 7%. ngjyra 2 është rgba(30,73,25,0.68) në pozicionin 24%. ngjyra 3 është rgba(103,132,30,0.68) në pozicionin 65%. Të QUATRIEME ngjyra është rgba (38,86,26,0.68) në pozicionin 85%.

• Ndalesat e gradientit:
  • 7%: rgba (20,40,20,0.76)
  • 24%: rgba (30,73,25,0.68)
  • 65%: rgba (103,132,30,0.68)
  • 85%: rgba (38,86,26,0.68)

Përcaktoni tip gradient në konike dhe drejtim në 0 gradë. Qendra e pozicion . I lindur i mos u perserit dhe vendoseni sipër imazhit.

• Lloji i gradientit: Konik
• Drejtimi i gradientit: 0 gradë
• Pozicioni: Qendër
• Përsëriteni gradientin: JO
• Gradient katror mbi sfond Imazhi: PO

Shembulli i tretë i tipit të gradientit konik

Shembulli ynë i fundit vendos një shpërthim vijash nga qendra e sipërme e gradientit jashtë në të gjitha drejtimet.

Kjo ka dy ngjyra. të kryeministër është rgba (30,73,25,0.68) në pozicionin 5 gradë. të i dytë është rgba (20,40,20,0.76) në pozicionin 7 gradë.

• Ndalesat e gradientit:
  • 5 gradë: rgba (30,73,25,0.68)
  • 7 gradë: rgba (20,40,20,0.76)

Vendos Gradient Tipi në Konike dhe Udhëheqja në 221 gradë. Vendosni pozicion në krye. Përsëriteni këtë dhe vendoseni mbi imazhin e sfondit.

• Lloji i gradientit: Konik
• Drejtimi i gradientit: 221 gradë
• Pozicioni: Top
• Përsëriteni gradientin: PO
• Gradient katror mbi sfond Imazhi: PO

Shkarkoni DIVI Tani!!!

Përfundim

Ky është vështrimi ynë në krahasimin e llojeve të gradientit në Divi's Gradient Builder. 

Siç mund ta shihni nga këta shembuj, cilësimet janë të thjeshta, por secili prej tyre mund të bëjë një ndryshim të madh në hartimin e gradientit. 

Për rezultate më të mira, eksperimentoni me llojet e gradientit me drejtime dhe pozicione të ndryshme dhe aktivizoni ose çaktivizoni opsionin e përsëritjes për të parë se çfarë mund të 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ë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.

Mos hezitoni të konsultoheni edhe 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.

...