Divi: Usporedba različitih vrsta gradijenata

još Gaetane | Divi, Divi Tutoriali

Želite li koristiti Gradient Builder of Divi ali ne znate koju vrstu gradijenta odabrati?

Vrste gradijenata dio su novog Divi Gradijent graditelj . Nove vrste gradijenata Divi omogućuju vam dodavanje različitih oblika i boja vašim pozadinama. 

U ovom ćemo članku usporediti ove vrste gradijenata i pokazati vam kako ih koristiti za stvaranje jedinstvenih pozadina!

Počnimo.

Koje su Divi vrste gradijenata?

Divijev novi Gradient Builder dodaje nekoliko novih značajki gradijenata koje uključuju vrste gradijenata. Postoje četiri vrste gradijenata za odabir:

  • Linearno
  • Circulaire
  • Eliptična
  • Stožast
Koje su Divi vrste gradijenata

Svaka od vrsta drugačije prikazuje gradijent. Koriste se za oblikovanje gradijenta koji će biti prikazan kao linearni uzorak boja, u krugu, elipsi ili stošcu. Detaljno ćemo ih vidjeti u našim primjerima.

Koje su Divi vrste gradijenata

Na vrste gradijenata također utječu druge kontrole, kao što je položaj, hoće li se ponoviti ili ne, mjerna jedinica za traku za pomicanje gradijenta i položaj gradijenta iznad pozadine.

Koje su Divi vrste gradijenata

Svaka prilagodba može imati mali ili veliki utjecaj na gradijent. Gradijent može biti suptilan ili istaknut. Male ili velike promjene mogu se napraviti samo jednom prilagodbom.

Imajući to na umu, pogledajmo neke primjere gradijenata koristeći svaku od vrsta gradijenata. Pokazat ćemo tri primjera svake vrste gradijenta. 

Prvi će biti standardna vrsta gradijenta koju ćete vidjeti na webu. Sljedeća dva bit će malo eksperimentalnija, samo da vidimo što možete učiniti s vrstama gradijenata.

Primjeri vrsta gradijenata

Za primjere tipa gradijenta koristimo odjeljak Hero na početnoj stranici besplatan paket rasporeda noćenja s doručkom dostupan u Divi. Ovaj dio već ima gradijent, ali ćemo ga zamijeniti i malo eksperimentirati. 

Možemo ili ukloniti izvorni pozadinski gradijent ili ga modificirati. Rezultati su isti. Radi jednostavnosti, modificirat ćemo ga.

Primjeri vrsta gradijenata

Tekst naslova smo prilagodili mijenjajući ga iz crnog u bijeli.

Primjeri vrsta gradijenata

Vrsta linearnog gradijenta

Pročitajte također: Divi: Kako koristiti miješanje uzoraka na pozadinskim slikama

Linearni gradijenti prikazuju gradijent kao da je raširen po stranici.

Prvi primjer tipa linearnog gradijenta

Ovdje je pregled našeg prvog primjera. Prikazuje svjetliju boju na lijevoj strani zaslona i tamniju boju na desnoj strani, s glatkim prijelazom između njih.

Prvi primjer linearnog gradijenta

Da biste stvorili ovaj primjer, dodajte dvije boje. the premijer je rgba(92,158,82,0.76) na poziciji 0%. the drugi je rgba(0,10,4,0.76) na poziciji 97%.

  • Gradijent zaustavljanja:
    • 0%: rgba(92,158,82,0.76)
    • 97%: rgba(0,10,4,0.76)
Prvi primjer linearnog gradijenta

Zatim promijenite Tip gradijent na Linearno i postavite Smjer preko 131 stupnja. da on ne ponavljaj. Postavijedinstvo na Postotak. Postavite gradijent iznad pozadinske slike.

  • Vrsta gradijenta: linearni
  • Smjer gradijenta: 131 stupnjeva
  • Ponavljanje gradijenta: NE
  • Jedinica gradijenta: postotak
  • Kvadratni gradijent iznad pozadinske slike: DA
Prvi primjer linearnog gradijenta

Drugi primjer tipa linearnog gradijenta

Evo pregleda drugog primjera linearnog gradijenta. Radi kao i prvi, ali ima teški graničnik s lijeve strane gdje tamnija nijansa prelazi.

Drugi primjer linearnog gradijenta

Da biste stvorili ovaj, dodajte tri gradijenta. the premijer je rgba(18,76,41,0.76) na poziciji 13%. the drugi je rgba(92,158,82,0.76) na poziciji 13%. boja 3 je rgba(18,76,41,0.76) na poziciji 34%.

  • Gradijent zaustavljanja:
    • 13%: rgba(18,76,41,0.76)
    • 13%: rgba(92,158,82,0.76)
    • 34%: rgba(18,76,41,0.76)
Drugi primjer linearnog gradijenta

Zatim postavite Tip gradijent na Linearno i postavite Smjer preko 90 stupnja. da on ne ponavljaj . Promijenijedinstvo postotak. Postavite ga iznad pozadinske slike.

  • Vrsta gradijenta: linearni
  • Smjer gradijenta: 90 stupnjeva
  • Ponavljanje gradijenta: NE
  • Jedinica gradijenta: postotak
  • Kvadratni gradijent iznad pozadinske slike: DA
Drugi primjer linearnog gradijenta

Treći primjer tipa linearnog gradijenta

Naš treći primjer postavlja svijetlu crtu dijagonalno preko gornjeg desnog kuta, dodirujući crtu tamnije boje.

Treći primjer linearnog gradijenta

Ovaj ima tri boje. boja 1 je rgba(92,158,82,0.76) na poziciji 13%. boja 2 je rgba(92,158,82,0.76) na poziciji 23%. The treća boja je rgba(18,76,41,0.76) na poziciji 32%.

  • Gradijent zaustavljanja:
    • 13%: rgba(92,158,82,0.76)
    • 23%: rgba(92,158,82,0.76)
    • 32%: rgba(18,76,41,0.76)
Treći primjer linearnog gradijenta

Definirajte Tip gradijent do linearnog u a smjer od 209 stupnjeva. Rođena ne ponavljaj i postavitejedinstvo na Postotak. Postavite gradijent iznad pozadinske slike.

  • Vrsta gradijenta: linearni
  • Smjer gradijenta: 209 stupnjeva
  • Ponavljanje gradijenta: NE
  • Jedinica gradijenta: postotak
  • Kvadratni gradijent iznad pozadinske slike: DA
Treći primjer linearnog gradijenta

Vrsta kružnog gradijenta

Vrsta kružnog gradijenta stvara krug s bojama.

Prvi primjer tipa kružnog gradijenta

Naš prvi primjer kružnog gradijenta postavlja svijetlu boju u središte i tamniju oko rubova.

Prvi primjer kružnog gradijenta

Ovaj ima 2 boje. the premijer je rgba(92,158,82,0.76) na poziciji 0%. the drugi je rgba(0,10,4,0.76) na poziciji 62%.

  • Gradijent zaustavljanja:
    • 0%: rgba(92,158,82,0.76)
    • 62%: rgba(0,10,4,0.76)
Prvi primjer kružnog gradijenta

Definirajte Tip gradijent na kružnom. Središte smjer . Pobrinite se da on ne ponavljaj , promijenijedinstvo kao postotak i postavite ga iznad pozadinske slike.

  • Vrsta gradijenta: Kružni
  • Položaj gradijenta: središte
  • Ponavljanje gradijenta: NE
  • Jedinica gradijenta: postotak
  • Kvadratni gradijent iznad pozadinske slike: DA
Prvi primjer kružnog gradijenta

Drugi primjer tipa kružnog gradijenta

Ovaj gradijent postavlja jasan kružni rub u središte zaslona.

Drugi primjer kružnog gradijenta

Ima četiri boje. Dvije boje su postavljene. the premijer je rgba(18,76,41,0.76) na poziciji 13%. the drugi je rgba(92,158,82,0.76) na poziciji 33%. boja 3 je rgba(92,158,82,0.76) na poziciji 51%. boja 4 je rgba(18,76,41,0.76). Nalazi se na poziciji 51%, iznad boje 3.

  • Gradijent zaustavljanja:
    • 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)
Drugi primjer kružnog gradijenta

Definirajte Tip gradijent na Circular i postavite Smjer u gornjem lijevom kutu. Pobrinite se da on ne ponavljaj , promijeni jedinstvo kao postotak i postavite ga iznad pozadinske slike.

  • Vrsta gradijenta: Kružni
  • Položaj gradijenta: gore lijevo
  • Ponavljanje gradijenta: NE
  • Jedinica gradijenta: postotak
  • Kvadratni gradijent iznad pozadinske slike: DA
Drugi primjer kružnog gradijenta

Treći primjer tipa kružnog gradijenta

Ovaj primjer postavlja nekoliko svijetlih krugova u najtamniju boju, počevši od sredine kruga.

Treći primjer kružnog gradijenta

Ovaj također slaže dvije boje određenim redoslijedom kako bi se postigao ovaj dizajn. The premijerno boja je rgba(18,76,41,0.76) na poziciji 13%. boja 2 je rgba(18,76,41,0.76) na poziciji 44%. The treći boja preklapa drugu boju. Ovo je rgba(92,158,82,0.76) na poziciji 44%. boja 4 je rgba(92,158,82,0.76) na poziciji 51%.

  • Gradijent zaustavljanja:
    • 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)
Treći primjer kružnog gradijenta

promijeni to vrsta gradijenta u kružnom. Postaviti smjer ispod. ponoviti ovaj. Postavijedinstvo na Percentage i postavite gradijent iznad pozadinske slike.

  • Vrsta gradijenta: Kružni
  • Položaj gradijenta: dolje
  • Ponovi gradijent: DA
  • Jedinica gradijenta: postotak
  • Kvadratni gradijent iznad pozadinske slike: DA
Treći primjer kružnog gradijenta

Eliptični tip gradijenta

Elipsasti gradijenti postavljaju boje u obliku elipse.

Prvi primjer eliptičnog tipa gradijenta

Naš prvi eliptični primjer postavlja svijetlu elipsu u središte zaslona s tamnijom bojom oko nje.

Prvi primjer eliptičnog gradijenta

Ovaj ima dvije boje. the premijer je rgba(92,158,82,0.76) na poziciji 0%. the drugi je rgba(0,10,4,0.76) na poziciji 50%.

  • Gradijent zaustavljanja:
    • 0%: rgba(92,158,82,0.76)
    • 50%: rgba(0,10,4,0.76)
Prvi primjer eliptičnog gradijenta

promijeni to vrsta gradijenta u eliptičnom. Postavi smjer na Centru. Provjerite ovaj ne ponavljaj , podesitejedinstvo na Percentage i postavite ga iznad pozadinske slike.

  • Vrsta gradijenta: Eliptična
  • Položaj gradijenta: središte
  • Ponavljanje gradijenta: NE
  • Jedinica gradijenta: postotak
  • Kvadratni gradijent iznad pozadinske slike: DA
Prvi primjer eliptičnog gradijenta

Drugi primjer eliptičnog tipa gradijenta

Naš drugi primjer postavlja mnogo tankih kružnih linija kroz gradijent.

Drugi primjer eliptičnog gradijenta

Ima dvije boje. the premijer je rgba(92,158,82,0.76) na poziciji 34pt. the drugi je rgba(0,10,4,0.76) na poziciji 39pt.

  • Gradijent zaustavljanja:
    • 34pt: rgba(92,158,82,0.76)
    • 39pt: rgba(0,10,4,0.76)
Drugi primjer eliptičnog gradijenta

promijeni to Tip gradijent na Elliptical i prilagodite Smjer na lijevoj strani. Imajte ovaj na ponoviti. Promijenijedinstvo u točkicama. Postavite ga iznad pozadinske slike.

  • Vrsta gradijenta: Eliptična
  • Položaj gradijenta: desno
  • Ponovi gradijent: DA
  • Jedinica gradijenta: točke (pt)
  • Kvadratni gradijent iznad pozadinske slike: DA
Drugi primjer eliptičnog gradijenta

Treći primjer eliptičnog tipa gradijenta

Naš treći primjer postavlja mnogo polukrugova u gradijent.

Treći primjer eliptičnog gradijenta

Ovaj ima dvije boje. the premijer je rgba(32,68,35,0.73) na poziciji 34vmin. the drugi je rgba(0,10,4,0.76) na poziciji 39vmin.

  • Gradijent zaustavljanja:
    • 34vmin: rgba(32, 68, 35, 0.73)
    • 39vmin: rgba(0,10,4,0.76)
Treći primjer eliptičnog gradijenta

promijeni to Tip gradijent na Elliptical i prilagodite Smjer na Visokom. Imajte ovaj na ponoviti. Promijenijedinstvo u Viewport Minimum. Postavite ga iznad pozadinske slike.

  • Vrsta gradijenta: Eliptična
  • Položaj gradijenta: vrh
  • Ponovi gradijent: DA
  • Jedinica gradijenta: minimalno polje za prikaz (vmin)
  • Kvadratni gradijent iznad pozadinske slike: DA
Treći primjer eliptičnog gradijenta

Stožasti tip gradijenta

Vidi također: Divi: Kako stvoriti pozadinske prijelaze između elemenata

Stožasti tip gradijenta prikazuje gradijent kao stožac kao da se stožac gleda odozgo.

Prvi primjer tipa konusnog gradijenta

Ovaj primjer postavlja dijagonalnu liniju od središta gradijenta ulijevo sa svijetlom bojom na jednoj i tamnom bojom na drugoj strani.

Prvi primjer stožastog gradijenta

Ima dvije boje. the premijer je rgba(92,158,82,0.76) na poziciji 0%. the drugi je rgba(0,10,4,0.76) na poziciji 50%.

  • Gradijent zaustavljanja:
    • 0%: rgba(92,158,82,0.76)
    • 50%: rgba(0,10,4,0.76)
Prvi primjer stožastog gradijenta

promijeni to vrsta gradijenta u konusnom. Podesite smjer preko 221 stupnja. Središte položaj et ne ponavljaj . Postavite gradijent iznad slike.

  • Vrsta gradijenta: Stožasti
  • Smjer gradijenta: 221 stupnjeva
  • Pozicija: Centar
  • Ponavljanje gradijenta: NE
  • Kvadratni gradijent iznad pozadinske slike: DA
Prvi primjer stožastog gradijenta

Drugi primjer tipa konusnog gradijenta

Ovaj primjer je sličan prethodnom, ali postavlja središnju liniju gore.

Drugi primjer konusnog gradijenta

Ovaj ima četiri boje. the premijer je rgba(20,40,20,0.76) na poziciji 7%. boja 2 je rgba(30,73,25,0.68) na poziciji 24%. boja 3 je rgba(103,132,30,0.68) na poziciji 65%. The četvrta boja je rgba(38,86,26,0.68) na poziciji 85%.

  • Gradijent zaustavljanja:
    • 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)
Drugi primjer konusnog gradijenta

Definirajte vrsta gradijenta na stožastim i smjer na 0 stupnjeva. Središte položaj . Rođena ne ponavljaj i postavite ga iznad slike.

  • Vrsta gradijenta: Stožasti
  • Smjer gradijenta: 0 stupnjeva
  • Pozicija: Centar
  • Ponavljanje gradijenta: NE
  • Kvadratni gradijent iznad pozadinske slike: DA
Divi's Gradient Builder

Treći primjer tipa konusnog gradijenta

Naš posljednji primjer postavlja prasak linija od gornjeg središta gradijenta prema van u svim smjerovima.

Treći primjer stožastog gradijenta

Ovaj ima dvije boje. the premijer je rgba(30,73,25,0.68) na poziciji od 5 stupnjeva. the drugi je rgba(20,40,20,0.76) na poziciji 7deg.

  • Gradijent zaustavljanja:
    • 5 stupnjeva: rgba(30,73,25,0.68)
    • 7 stupnjeva: rgba(20,40,20,0.76)
Divi's Gradient Builder

Postavi GradientType na Conical and the Smjer na 221 stupnjeva. Postaviti položaj na vrhu. Ponoviti ovaj i postavite ga iznad pozadinske slike.

  • Vrsta gradijenta: Stožasti
  • Smjer gradijenta: 221 stupnjeva
  • Pozicija: Vrh
  • Ponovi gradijent: DA
  • Kvadratni gradijent iznad pozadinske slike: DA
Treći primjer stožastog gradijenta

Preuzmite DIVI odmah!!!

Zaključak

Ovo je naš pogled na usporedbu vrsta gradijenata u Divi Gradient Builderu. 

Kao što možete vidjeti iz ovih primjera, postavke su jednostavne, ali svaka od njih može napraviti veliku razliku u dizajnu gradijenta. 

Za najbolje rezultate eksperimentirajte s vrstama gradijenata s različitim smjerovima i položajima te uključite ili isključite opciju ponavljanja da vidite što možete stvoriti.

Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.

Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.

Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...

Objavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.