Divi: Sammenligning av de forskjellige typene gradienter

Vil du bruke Gradient Builder til Divi men du vet ikke hvilken type gradient du skal velge?

Gradienttyper er en del av det nye Divi Gradientbygger . Nye typer gradienter Divi lar deg legge til forskjellige former og farger til bakgrunnene dine. 

I denne artikkelen vil vi sammenligne disse typene gradienter og vise deg hvordan du bruker dem til å lage unike bakgrunner!

La oss begynne.

Hva er Divi-gradienttypene?

Divis nye Gradient Builder legger til flere nye gradientfunksjoner som inkluderer gradienttyper. Det er fire typer gradienter å velge mellom:

• Lineær
• sirkulær
• Elliptisk
• Konisk

Hver av typene viser gradienten forskjellig. De brukes til å forme gradienten som skal vises som et lineært fargemønster, i en sirkel, ellipse eller kjegle. Vi vil se dem i detalj i eksemplene våre.

Gradienttyper påvirkes også av andre kontroller, for eksempel posisjon, om det skal gjentas eller ikke, måleenhet for gradientrullefeltet og plassering av gradienten over bakgrunnen.

Hver justering kan ha en liten eller stor innvirkning på gradienten. Gradienten kan være subtil eller skille seg ut. Små eller store endringer kan gjøres med kun én justering.

Med det i tankene, la oss se på noen eksempler på gradienter som bruker hver av gradienttypene. Vi viser tre eksempler på hver type gradient. 

Den første vil være en standard gradienttype som du vil se på nettet. De neste to vil være litt mer eksperimentelle, bare for å se hva du kan gjøre med typene gradienter.

Eksempler på gradienttyper

For eksempler på gradienttype bruker vi Hero-delen av hjemmesiden til gratis bed & breakfast-oppsettpakke tilgjengelig i Divi. Denne delen har allerede en gradient, men vi erstatter den og eksperimenterer litt. 

Vi kan enten fjerne den opprinnelige bakgrunnsgradienten eller endre den. Resultatene er de samme. For enkelhets skyld vil vi endre den.

Vi tilpasset tittelteksten ved å endre den fra svart til hvit.

Lineær gradienttype

Les også: Divi: Hvordan bruke mønsterblanding på bakgrunnsbilder

Lineære gradienter viser gradienten som om den var spredt over siden.

Første eksempel på den lineære gradienttypen

Her er en forhåndsvisning av vårt første eksempel. Den viser en lysere farge til venstre på skjermen og en mørkere farge til høyre, med en jevn overgang mellom dem.

For å lage dette eksemplet, legg til to farger. de premier er rgba(92,158,82,0.76) i 0%-posisjonen. de sekund er rgba(0,10,4,0.76) ved 97 %-posisjonen.

• Gradientstopp:
  • 0 %: rgba(92,158,82,0.76)
  • 97 %: rgba(0,10,4,0.76)

Deretter endrer du typen gradient til Lineær og sett Lederskap over 131 grader. at han ikke gjenta. Settenhet på prosent. Plasser gradienten over bakgrunnsbildet.

• Gradienttype: Lineær
• Gradientretning: 131 grader
• Gjenta gradient: NEI
• Gradientenhet: prosent
• Firkantet gradient over bakgrunnsbilde: JA

Andre eksempel på den lineære gradienttypen

Her er en forhåndsvisning av det andre lineære gradienteksemplet. Den fungerer som den første, men den har en hard stopp til venstre der en mørkere nyanse tar over.

For å lage denne, legg til tre gradientstopp. de premier er rgba(18,76,41,0.76) i 13%-posisjonen. de sekund er rgba(92,158,82,0.76) ved 13 %-posisjonen. farge 3 er rgba(18,76,41,0.76) ved 34 %-posisjonen.

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

Still deretter inn typen gradient til Lineær og sett Lederskap over 90 grader. at han ikke gjenta . Endreenhet prosentdel. Plasser den over bakgrunnsbildet.

• Gradienttype: Lineær
• Gradientretning: 90 grader
• Gjenta gradient: NEI
• Gradientenhet: prosent
• Firkantet gradient over bakgrunnsbilde: JA

Tredje eksempel på den lineære gradienttypen

Vårt tredje eksempel plasserer en lys linje diagonalt over øverste høyre hjørne, og berører en mørkere linje.

Denne har tre farger. farge 1 er rgba(92,158,82,0.76) ved 13 %-posisjonen. farge 2 er rgba(92,158,82,0.76) ved 23 %-posisjonen. De tredje farge er rgba(18,76,41,0.76) ved 32 %-posisjonen.

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

Definer typen gradient til Lineær i en retning på 209 grader. Født den ikke gjenta og still innenhet på prosent. Plasser gradienten over bakgrunnsbildet.

• Gradienttype: Lineær
• Gradientretning: 209 grader
• Gjenta gradient: NEI
• Gradientenhet: prosent
• Firkantet gradient over bakgrunnsbilde: JA

Sirkulær gradienttype

Den sirkulære gradienttypen lager en sirkel med fargene.

Første eksempel på den sirkulære gradienttypen

Vårt første sirkulære gradienteksempel plasserer en lys farge i midten og en mørkere farge rundt kantene.

Denne har 2 farger. de premier er rgba(92,158,82,0.76) i 0%-posisjonen. de sekund er rgba(0,10,4,0.76) ved 62 %-posisjonen.

• Gradientstopp:
  • 0 %: rgba(92,158,82,0.76)
  • 62 %: rgba(0,10,4,0.76)

Definer typen gradient på rundskriv. Sentrer retning . Sørg for at han ikke gjenta , endreenhet som en prosentandel og plasser den over bakgrunnsbildet.

• Gradienttype: Sirkulær
• Gradientposisjon: Senter
• Gjenta gradient: NEI
• Gradientenhet: prosent
• Firkantet gradient over bakgrunnsbilde: JA

Andre eksempel på sirkulær gradienttype

Denne gradienten plasserer en tydelig sirkulær kant i midten av skjermen.

Den har fire farger. To farger er lagt over hverandre. de premier er rgba(18,76,41,0.76) i 13%-posisjonen. de sekund er rgba(92,158,82,0.76) ved 33 %-posisjonen. farge 3 er rgba(92,158,82,0.76) ved 51 %-posisjonen. farge 4 er rgba(18,76,41,0.76). Den er plassert i posisjon 51 %, over farge 3.

• Gradientstopp:
  • 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)

Definer typen gradient til sirkulær og plasser Lederskap øverst til venstre. Sørg for at han ikke gjenta , endre enhet som en prosentandel og plasser den over bakgrunnsbildet.

• Gradienttype: Sirkulær
• Gradientposisjon: Øverst til venstre
• Gjenta gradient: NEI
• Gradientenhet: prosent
• Firkantet gradient over bakgrunnsbilde: JA

Tredje eksempel på sirkulær gradienttype

Dette eksemplet plasserer flere lyse sirkler i den mørkeste fargen, og starter i midten av sirkelen.

Denne stabler også to farger i en bestemt rekkefølge for å oppnå dette designet. De premiere fargen er rgba(18,76,41,0.76) ved 13%-posisjonen. farge 2 er rgba(18,76,41,0.76) ved 44 %-posisjonen. De tredje farge overlapper den andre fargen. Dette er rgba(92,158,82,0.76) ved 44%-posisjonen. farge 4 er rgba(92,158,82,0.76) ved 51 %-posisjonen.

• Gradientstopp:
  • 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)

endre det gradienttype i rundskriv. Plasser retning under. gjenta denne. Settenhet på Prosent og plasser gradienten over bakgrunnsbildet.

• Gradienttype: Sirkulær
• Gradientposisjon: Bunn
• Gjenta gradient: JA
• Gradientenhet: prosent
• Firkantet gradient over bakgrunnsbilde: JA

Elliptisk gradienttype

Elliptiske gradienter plasserer farger i form av en ellipse.

Første eksempel på den elliptiske gradienttypen

Vårt første elliptiske eksempel plasserer en lys ellipse i midten av skjermen med en mørkere farge rundt.

Denne har to farger. de premier er rgba(92,158,82,0.76) i 0%-posisjonen. de sekund er rgba(0,10,4,0.76) ved 50 %-posisjonen.

• Gradientstopp:
  • 0 %: rgba(92,158,82,0.76)
  • 50 %: rgba(0,10,4,0.76)

endre det gradienttype i elliptisk. Sett retning på senteret. Sørg for denne ikke gjenta , justerenhet på Prosent og plasser den over bakgrunnsbildet.

• Gradienttype: Elliptisk
• Gradientposisjon: Senter
• Gjenta gradient: NEI
• Gradientenhet: prosent
• Firkantet gradient over bakgrunnsbilde: JA

Andre eksempel på den elliptiske gradienttypen

Vårt andre eksempel plasserer mange tynne sirkulære linjer gjennom gradienten.

Den har to farger. de premier er rgba(92,158,82,0.76) i 34pt-posisjonen. de sekund er rgba(0,10,4,0.76) i posisjon 39pt.

• Gradientstopp:
  • 34 pkt: rgba(92,158,82,0.76)
  • 39 pkt: rgba(0,10,4,0.76)

endre det typen gradient til elliptisk og juster Lederskap til venstre. Har denne kl gjenta. Endreenhet i prikker. Plasser den over bakgrunnsbildet.

• Gradienttype: Elliptisk
• Gradientposisjon: Høyre
• Gjenta gradient: JA
• Gradientenhet: Prikker(pt)
• Firkantet gradient over bakgrunnsbilde: JA

Tredje eksempel på den elliptiske gradienttypen

Vårt tredje eksempel plasserer mange halvsirkler i gradienten.

Denne har to farger. de premier er rgba(32,68,35,0.73) i posisjon 34vmin. de sekund er rgba(0,10,4,0.76) i posisjon 39vmin.

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

endre det typen gradient til elliptisk og juster Lederskap på høy. Har denne kl gjenta. EndreEnhet i Viewport Minimum. Plasser den over bakgrunnsbildet.

• Gradienttype: Elliptisk
• Gradient posisjon: Topp
• Gjenta gradient: JA
• Gradientenhet: Viewport Minimum (vmin)
• Firkantet gradient over bakgrunnsbilde: JA

Konisk gradient type

Se også: Divi: Hvordan lage bakgrunnsoverganger mellom elementer

Den koniske gradienttypen viser gradienten som en kjegle som om kjeglen er sett ovenfra.

Første eksempel på den koniske gradienttypen

Dette eksemplet plasserer en diagonal linje fra midten av gradienten til venstre med en lys farge på den ene siden og en mørk farge på den andre.

Den har to farger. de premier er rgba(92,158,82,0.76) i 0%-posisjonen. de sekund er rgba(0,10,4,0.76) ved 50 %-posisjonen.

• Gradientstopp:
  • 0 %: rgba(92,158,82,0.76)
  • 50 %: rgba(0,10,4,0.76)

endre det gradienttype i konisk. Juster retning over 221 grader. Sentrer posisjon et ikke gjenta det . Plasser gradienten over bildet.

• Gradient Type: Konisk
• Gradientretning: 221 grader
• Stilling: Senter
• Gjenta gradient: NEI
• Firkantet gradient over bakgrunnsbilde: JA

Andre eksempel på den koniske gradienttypen

Dette eksemplet ligner det forrige, men det plasserer midtlinjen opp.

Denne har fire farger. de premier er rgba(20,40,20,0.76) ved 7 %-posisjonen. farge 2 er rgba(30,73,25,0.68) ved 24 %-posisjonen. farge 3 er rgba(103,132,30,0.68) ved 65 %-posisjonen. De fjerde fargen er rgba(38,86,26,0.68) ved 85%-posisjonen.

• Gradientstopp:
  • 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)

Definer gradienttype på konisk og den retning ved 0 grader. Sentrer posisjon . Født den ikke gjenta og plasser den over bildet.

• Gradient Type: Konisk
• Gradientretning: 0 grader
• Stilling: Senter
• Gjenta gradient: NEI
• Firkantet gradient over bakgrunnsbilde: JA

Tredje eksempel på den koniske gradienttypen

Vårt siste eksempel plasserer et utbrudd av linjer fra toppen av midten av gradienten utover i alle retninger.

Denne har to farger. de premier er rgba(30,73,25,0.68) ved 5 graders posisjon. de sekund er rgba(20,40,20,0.76) ved 7 graders posisjon.

• Gradientstopp:
  • 5 grader: rgba(30,73,25,0.68)
  • 7 grader: rgba(20,40,20,0.76)

Sett GradientType på Conical og den Lederskap ved 221 grader. Plasser posisjon ovenfor. Gjenta denne og plasser den over bakgrunnsbildet.

• Gradient Type: Konisk
• Gradientretning: 221 grader
• Posisjon: Topp
• Gjenta gradient: JA
• Firkantet gradient over bakgrunnsbilde: JA

Last ned DIVI nå!!!

konklusjonen

Dette er vår titt på sammenligningen av gradienttyper i Divis Gradient Builder. 

Som du kan se fra disse eksemplene, er innstillingene enkle, men hvilken som helst av dem kan utgjøre en stor forskjell i utformingen av gradienten. 

For best resultat, eksperimenter med gradienttyper med forskjellige retninger og posisjoner, og slå gjenta-alternativet på eller av for å se hva du kan lage.

Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.

Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.

Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...