Divi: Sammenligning af de forskellige typer gradienter

Vil du bruge Gradient Builder af Divi men du ved ikke, hvilken type gradient du skal vælge?

Gradienttyper er en del af det nye Divi Gradient Builder . Nye typer gradienter Divi giver dig mulighed for at tilføje forskellige former og farver til dine baggrunde. 

I denne artikel vil vi sammenligne disse typer gradienter og vise dig, hvordan du bruger dem til at skabe unikke baggrunde!

Lad os starte.

Hvad er Divi-gradienttyperne?

Divis nye Gradient Builder tilføjer flere nye gradientfunktioner, der inkluderer gradienttyper. Der er fire typer gradienter at vælge imellem:

• Lineær
• cirkulær
• Elliptisk
• Konisk

Hver af typerne viser gradienten forskelligt. De bruges til at forme gradienten, der skal vises som et lineært farvemønster, i en cirkel, ellipse eller kegle. Vi vil se dem i detaljer i vores eksempler.

Gradueringstyper påvirkes også af andre kontroller, såsom position, om den skal gentages eller ej, måleenhed for gradueringsrullebjælken og placering af gradienten over baggrunden.

Hver justering kan have en lille eller enorm indflydelse på gradienten. Gradienten kan være subtil eller skille sig ud. Små eller store ændringer kan foretages med kun én justering.

Med det i tankerne, lad os se på nogle eksempler på gradienter, der bruger hver af gradienttyperne. Vi viser tre eksempler på hver type gradient. 

Den første vil være en standard gradienttype, som du vil se på nettet. De næste to vil være lidt mere eksperimentelle, bare for at se, hvad du kan gøre med typerne af gradienter.

Eksempler på gradienttyper

For eksempler på gradienttype bruger vi Hero-sektionen på hjemmesiden for gratis bed and breakfast layoutpakke tilgængelig i Divi. Denne sektion har allerede en gradient, men vi erstatter den og eksperimenterer lidt. 

Vi kan enten fjerne den originale baggrundsgradient eller ændre den. Resultaterne er de samme. For nemheds skyld ændrer vi det.

Vi tilpassede titelteksten ved at ændre den fra sort til hvid.

Lineær gradient type

Læs også: Divi: Sådan bruger du mønsterblanding på baggrundsbilleder

Lineære forløb viser forløbet, som om det var spredt ud over siden.

Første eksempel på den lineære gradienttype

Her er en forhåndsvisning af vores første eksempel. Den viser en lysere farve til venstre på skærmen og en mørkere farve til højre med en jævn overgang mellem dem.

For at oprette dette eksempel skal du tilføje to farver. det premier er rgba(92,158,82,0.76) ved 0%-positionen. det anden er rgba(0,10,4,0.76) ved 97%-positionen.

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

Skift derefter Type gradient til Lineær og indstil Lederskab over 131 grader. at han gentag ikke. Indstilenhed på procent. Placer gradienten over baggrundsbilledet.

• Gradienttype: Lineær
• Gradientretning: 131 grader
• Gentag gradient: NEJ
• Gradientenhed: Procent
• Firkantet gradient over baggrundsbillede : JA

Andet eksempel på den lineære gradienttype

Her er et eksempel på det andet lineære gradienteksempel. Den fungerer som den første, men den har et hårdt stop til venstre, hvor en mørkere nuance tager over.

For at oprette denne skal du tilføje tre gradientstop. det premier er rgba(18,76,41,0.76) ved 13%-positionen. det anden er rgba(92,158,82,0.76) ved 13%-positionen. farve 3 er rgba(18,76,41,0.76) ved 34%-positionen.

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

Indstil derefter Type gradient til Lineær og indstil Lederskab over 90 grader. at han gentag ikke . Skiftenhed procent. Placer den over baggrundsbilledet.

• Gradienttype: Lineær
• Gradientretning: 90 grader
• Gentag gradient: NEJ
• Gradientenhed: Procent
• Firkantet gradient over baggrundsbillede : JA

Tredje eksempel på den lineære gradienttype

Vores tredje eksempel placerer en lys linje diagonalt hen over det øverste højre hjørne og rører ved en mørkere linje.

Denne har tre farver. farve 1 er rgba(92,158,82,0.76) ved 13%-positionen. farve 2 er rgba(92,158,82,0.76) ved 23%-positionen. Det tredje farve er rgba(18,76,41,0.76) ved 32%-positionen.

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

Definer Type gradient til lineær i en retning på 209 grader. Født den gentag ikke og indstilenhed på procent. Placer gradienten over baggrundsbilledet.

• Gradienttype: Lineær
• Gradientretning: 209 grader
• Gentag gradient: NEJ
• Gradientenhed: Procent
• Firkantet gradient over baggrundsbillede : JA

Cirkulær gradienttype

Den cirkulære gradienttype skaber en cirkel med farverne.

Første eksempel på den cirkulære gradienttype

Vores første cirkulære gradienteksempel placerer en lys farve i midten og en mørkere farve rundt om kanterne.

Denne har 2 farver. det premier er rgba(92,158,82,0.76) ved 0%-positionen. det anden er rgba(0,10,4,0.76) ved 62%-positionen.

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

Definer Type gradient på Cirkulære. Centrer retning . Sørg for at han gentag ikke , ændreenhed som en procentdel og placer den over baggrundsbilledet.

• Gradienttype: Cirkulær
• Gradientposition: Center
• Gentag gradient: NEJ
• Gradientenhed: Procent
• Firkantet gradient over baggrundsbillede : JA

Andet eksempel på den cirkulære gradienttype

Denne gradient placerer en tydelig cirkulær kant i midten af ​​skærmen.

Den har fire farver. To farver er overlejret. det premier er rgba(18,76,41,0.76) ved 13%-positionen. det anden er rgba(92,158,82,0.76) ved 33%-positionen. farve 3 er rgba(92,158,82,0.76) ved 51%-positionen. farve 4 er rgba(18,76,41,0.76). Den er placeret i position 51%, over farve 3.

• Gradientstop:
  • 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 Type gradient til Cirkulær og placer Lederskab i øverste hjørne til venstre. Sørg for at han gentag ikke , ændre enhed som en procentdel og placer den over baggrundsbilledet.

• Gradienttype: Cirkulær
• Gradientposition: Øverst til venstre
• Gentag gradient: NEJ
• Gradientenhed: Procent
• Firkantet gradient over baggrundsbillede : JA

Tredje eksempel på den cirkulære gradienttype

Dette eksempel placerer flere lyse cirkler i den mørkeste farve, startende i midten af ​​cirklen.

Denne stabler også to farver i en bestemt rækkefølge for at opnå dette design. Det premiere farven er rgba(18,76,41,0.76) ved 13%-positionen. farve 2 er rgba(18,76,41,0.76) ved 44%-positionen. Det troisième farve overlapper den anden farve. Dette er rgba(92,158,82,0.76) ved 44%-positionen. farve 4 er rgba(92,158,82,0.76) ved 51%-positionen.

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

Ændre det gradient type i cirkulær. Placer retning ned. gentagelse denne. Indstilenhed på Procent og placer gradienten over baggrundsbilledet.

• Gradienttype: Cirkulær
• Gradientposition: Bund
• Gentag gradient: JA
• Gradientenhed: Procent
• Firkantet gradient over baggrundsbillede : JA

Elliptisk gradient type

Elliptiske gradienter placerer farver i form af en ellipse.

Første eksempel på den elliptiske gradienttype

Vores første elliptiske eksempel placerer en lys ellipse i midten af ​​skærmen med en mørkere farve omkring sig.

Denne har to farver. det premier er rgba(92,158,82,0.76) ved 0%-positionen. det anden er rgba(0,10,4,0.76) ved 50%-positionen.

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

Ændre det gradient type i ellipseformet. Indstil retning på Center. Sørg for denne gentag ikke , justerenhed på Procent og placer den over baggrundsbilledet.

• Gradienttype: Elliptisk
• Gradientposition: Center
• Gentag gradient: NEJ
• Gradientenhed: Procent
• Firkantet gradient over baggrundsbillede : JA

Andet eksempel på den elliptiske gradienttype

Vores andet eksempel placerer mange tynde cirkulære linjer gennem gradienten.

Den har to farver. det premier er rgba(92,158,82,0.76) ved 34pt-positionen. det anden er rgba(0,10,4,0.76) i position 39pt.

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

Ændre det Type gradient til elliptisk og juster Lederskab til venstre. Har denne kl gentagelse. Skiftenhed i prikker. Placer den over baggrundsbilledet.

• Gradienttype: Elliptisk
• Gradientposition: Højre
• Gentag gradient: JA
• Gradientenhed: Prikker(pt)
• Firkantet gradient over baggrundsbillede : JA

Tredje eksempel på den elliptiske gradienttype

Vores tredje eksempel placerer en masse halvcirkler i gradienten.

Denne har to farver. det premier er rgba(32,68,35,0.73) i position 34vmin. det anden er rgba(0,10,4,0.76) i position 39vmin.

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

Ændre det Type gradient til elliptisk og juster Lederskab på høj. Har denne kl gentagelse. SkiftForene i Viewport Minimum. Placer den over baggrundsbilledet.

• Gradienttype: Elliptisk
• Gradient Position: Top
• Gentag gradient: JA
• Gradientenhed: Viewport Minimum (vmin)
• Firkantet gradient over baggrundsbillede : JA

Konisk gradient type

Se også: Divi: Sådan opretter du baggrundsovergange mellem elementer

Den koniske gradienttype viser gradienten som en kegle, som om keglen ses ovenfra.

Første eksempel på den koniske gradienttype

Dette eksempel placerer en diagonal linje fra midten af ​​gradienten til venstre med en lys farve på den ene side og en mørk farve på den anden.

Den har to farver. det premier er rgba(92,158,82,0.76) ved 0%-positionen. det anden er rgba(0,10,4,0.76) ved 50%-positionen.

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

Ændre det gradient type i konisk. Juster retning over 221 grader. Centrer position et gentag det ikke . Placer gradienten over billedet.

• Gradient Type: Konisk
• Gradientretning: 221 grader
• Stilling: Center
• Gentag gradient: NEJ
• Firkantet gradient over baggrundsbillede : JA

Andet eksempel på den koniske gradienttype

Dette eksempel ligner det forrige, men det placerer midterlinjen opad.

Denne har fire farver. det premier er rgba(20,40,20,0.76) ved 7%-positionen. farve 2 er rgba(30,73,25,0.68) ved 24%-positionen. farve 3 er rgba(103,132,30,0.68) ved 65%-positionen. Det fjerde farven er rgba(38,86,26,0.68) ved 85%-positionen.

• Gradientstop:
  • 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 gradient type på konisk og den retning ved 0 grader. Centrer position . Født den gentag ikke og placer den over billedet.

• Gradient Type: Konisk
• Gradientretning: 0 grader
• Stilling: Center
• Gentag gradient: NEJ
• Firkantet gradient over baggrundsbillede : JA

Tredje eksempel på den koniske gradienttype

Vores sidste eksempel placerer et udbrud af linjer fra toppen af ​​midten af ​​gradienten udad i alle retninger.

Denne har to farver. det premier er rgba(30,73,25,0.68) ved 5 graders position. det anden er rgba(20,40,20,0.76) ved 7 graders position.

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

Indstil GradientType på Conical og den Lederskab ved 221 grader. Placer position øverst. Gentage denne og placer den over baggrundsbilledet.

• Gradient Type: Konisk
• Gradientretning: 221 grader
• Position: Top
• Gentag gradient: JA
• Firkantet gradient over baggrundsbillede : JA

Download DIVI nu!!!

Konklusion

Dette er vores kig på sammenligningen af ​​gradienttyper i Divi's Gradient Builder. 

Som du kan se fra disse eksempler, er indstillingerne enkle, men enhver af dem kan gøre en stor forskel i designet af gradienten. 

For de bedste resultater skal du eksperimentere med gradienttyper med forskellige retninger og positioner og slå gentagelsesindstillingen til eller fra for at se, hvad du kan oprette.

Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.

Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.

Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...