Divi: Jämförelse av de olika typerna av gradienter

Vill du använda Gradient Builder för Divi men du vet inte vilken typ av gradient du ska välja?

Gradienttyper är en del av det nya Divi Gradient Builder . Nya typer av gradienter Divi låter dig lägga till olika former och färger till dina bakgrunder. 

I den här artikeln kommer vi att jämföra dessa typer av gradienter och visa dig hur du använder dem för att skapa unika bakgrunder!

Låt oss börja.

Vilka är Divi-gradienttyperna?

Divis nya Gradient Builder lägger till flera nya gradientfunktioner som inkluderar gradienttyper. Det finns fyra typer av gradienter att välja mellan:

• Linjär
• cirkulär
• Elliptisk
• Konisk

Var och en av typerna visar gradienten på olika sätt. De används för att forma gradienten så att den visas som ett linjärt färgmönster, i en cirkel, ellips eller kon. Vi kommer att se dem i detalj i våra exempel.

Gradienttyper påverkas också av andra kontroller, såsom position, om den ska upprepas eller inte, måttenhet för övertoningsrullningslisten och placeringen av övertoningen ovanför bakgrunden.

Varje justering kan ha en liten eller stor inverkan på gradienten. Gradienten kan vara subtil eller sticka ut. Små eller stora ändringar kan göras med bara en justering.

Med det i åtanke, låt oss titta på några exempel på gradienter som använder var och en av gradienttyperna. Vi visar tre exempel på varje typ av gradient. 

Den första kommer att vara en standardgradienttyp som du kommer att se på webben. De kommande två kommer att vara lite mer experimentella, bara för att se vad du kan göra med typerna av gradienter.

Exempel på gradienttyper

För exempel på gradienttyp använder vi hjältesektionen på hemsidan för gratis bed and breakfast layoutpaket tillgänglig i Divi. Det här avsnittet har redan en gradient, men vi kommer att ersätta det och experimentera lite. 

Vi kan antingen ta bort den ursprungliga bakgrundsgradienten eller ändra den. Resultaten är desamma. För enkelhetens skull kommer vi att ändra det.

Vi anpassade titeltexten genom att ändra den från svart till vit.

Linjär gradienttyp

Läs också: Divi: Hur man använder mönsterblandning på bakgrundsbilder

Linjära övertoningar visar övertoningen som om den var spridd över sidan.

Första exemplet på linjär gradienttyp

Här är en förhandstitt på vårt första exempel. Den visar en ljusare färg till vänster på skärmen och en mörkare färg till höger, med en mjuk övergång mellan dem.

För att skapa detta exempel, lägg till två färger. de Premier är rgba(92,158,82,0.76) vid 0%-positionen. de 2:a är rgba(0,10,4,0.76) vid 97 %-positionen.

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

Ändra sedan Typ gradient till Linjär och ställ in Riktning över 131 grader. att han upprepa inte. Ställ inenighet på procent. Placera gradienten ovanför bakgrundsbilden.

• Gradienttyp: Linjär
• Lutningsriktning: 131 grader
• Upprepa gradient: NEJ
• Gradientenhet: procent
• Fyrkantig gradient ovanför bakgrundsbild : JA

Andra exemplet på linjär gradienttyp

Här är en förhandsvisning av det andra linjära gradientexemplet. Den fungerar som den första, men den har ett hårt stopp till vänster där en mörkare nyans tar över.

För att skapa den här, lägg till tre gradientstopp. de Premier är rgba(18,76,41,0.76) vid 13%-positionen. de 2:a är rgba(92,158,82,0.76) vid 13 %-positionen. färg 3 är rgba(18,76,41,0.76) vid 34 %-positionen.

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

Ställ sedan in Typ gradient till Linjär och ställ in Riktning över 90 grader. att han upprepa inte . Ändraenighet procentsats. Placera den ovanför bakgrundsbilden.

• Gradienttyp: Linjär
• Lutningsriktning: 90 grader
• Upprepa gradient: NEJ
• Gradientenhet: procent
• Fyrkantig gradient ovanför bakgrundsbild : JA

Tredje exemplet på linjär gradienttyp

Vårt tredje exempel placerar en ljus linje diagonalt över det övre högra hörnet och vidrör en mörkare linje.

Den här har tre färger. färg 1 är rgba(92,158,82,0.76) vid 13 %-positionen. färg 2 är rgba(92,158,82,0.76) vid 23%-positionen. De tredje färgen är rgba(18,76,41,0.76) vid 32 %-positionen.

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

Definiera Typ gradient till linjär i en riktning på 209 grader. Född den upprepa inte och ställ inenighet på procent. Placera gradienten ovanför bakgrundsbilden.

• Gradienttyp: Linjär
• Lutningsriktning: 209 grader
• Upprepa gradient: NEJ
• Gradientenhet: procent
• Fyrkantig gradient ovanför bakgrundsbild : JA

Cirkulär gradienttyp

Den cirkulära gradienttypen skapar en cirkel med färgerna.

Första exemplet på den cirkulära gradienttypen

Vårt första cirkulära gradientexempel placerar en ljus färg i mitten och en mörkare färg runt kanterna.

Denna har 2 färger. de Premier är rgba(92,158,82,0.76) vid 0%-positionen. de 2:a är rgba(0,10,4,0.76) vid 62 %-positionen.

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

Definiera Typ gradient på cirkulär. Centrera riktning . Se till att han upprepa inte , ändraenighet som en procentsats och placera den ovanför bakgrundsbilden.

• Gradienttyp: Cirkulär
• Gradient Position: Center
• Upprepa gradient: NEJ
• Gradientenhet: procent
• Fyrkantig gradient ovanför bakgrundsbild : JA

Andra exemplet på den cirkulära gradienttypen

Denna gradient placerar en tydlig cirkulär kant i mitten av skärmen.

Den har fyra färger. Två färger är överlagrade. de Premier är rgba(18,76,41,0.76) vid 13%-positionen. de 2:a är rgba(92,158,82,0.76) vid 33 %-positionen. färg 3 är rgba(92,158,82,0.76) vid 51 %-positionen. färg 4 är rgba(18,76,41,0.76). Den är placerad i position 51%, ovanför färg 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)

Definiera Typ gradient till Circular och placera Riktning i det övre hörnet till vänster. Se till att han upprepa inte , ändra enighet som en procentsats och placera den ovanför bakgrundsbilden.

• Gradienttyp: Cirkulär
• Gradientposition: Överst till vänster
• Upprepa gradient: NEJ
• Gradientenhet: procent
• Fyrkantig gradient ovanför bakgrundsbild : JA

Tredje exemplet av typen cirkulär gradient

Detta exempel placerar flera ljusa cirklar i den mörkaste färgen, med början i mitten av cirkeln.

Den här staplar också två färger i en viss ordning för att uppnå denna design. De premiär färgen är rgba(18,76,41,0.76) vid 13%-positionen. färg 2 är rgba(18,76,41,0.76) vid 44%-positionen. De tredje färgen överlappar den andra färgen. Detta är rgba(92,158,82,0.76) vid 44%-positionen. färg 4 är rgba(92,158,82,0.76) vid 51 %-positionen.

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

ändra det gradienttyp i cirkulär. Placera riktning ner. upprepning den här. Ställ inenighet på Procent och placera gradienten ovanför bakgrundsbilden.

• Gradienttyp: Cirkulär
• Gradient Position: Botten
• Upprepa gradient: JA
• Gradientenhet: procent
• Fyrkantig gradient ovanför bakgrundsbild : JA

Elliptisk gradienttyp

Elliptiska gradienter placerar färger i form av en ellips.

Första exemplet på den elliptiska gradienttypen

Vårt första elliptiska exempel placerar en ljus ellips i mitten av skärmen med en mörkare färg runt den.

Den här har två färger. de Premier är rgba(92,158,82,0.76) vid 0%-positionen. de 2:a är rgba(0,10,4,0.76) vid 50 %-positionen.

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

ändra det gradienttyp i elliptisk. Ställ in riktning på Center. Se till att denna upprepa inte , justeraenighet på Procent och placera den ovanför bakgrundsbilden.

• Gradienttyp: Elliptisk
• Gradient Position: Center
• Upprepa gradient: NEJ
• Gradientenhet: procent
• Fyrkantig gradient ovanför bakgrundsbild : JA

Andra exemplet på den elliptiska gradienttypen

Vårt andra exempel placerar många tunna cirkulära linjer genom gradienten.

Den har två färger. de Premier är rgba(92,158,82,0.76) vid 34pt-positionen. de 2:a är rgba(0,10,4,0.76) vid position 39pt.

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

ändra det Typ gradient till elliptisk och justera Riktning på vänster. Har den här kl upprepa. Ändraenighet i prickar. Placera den ovanför bakgrundsbilden.

• Gradienttyp: Elliptisk
• Gradient Position: Höger
• Upprepa gradient: JA
• Gradientenhet: Punkter(pt)
• Fyrkantig gradient ovanför bakgrundsbild : JA

Tredje exemplet på den elliptiska gradienttypen

Vårt tredje exempel placerar många halvcirklar i gradienten.

Den här har två färger. de Premier är rgba(32,68,35,0.73) vid position 34vmin. de 2:a är rgba(0,10,4,0.76) i position 39vmin.

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

ändra det Typ gradient till elliptisk och justera Riktning på hög. Har den här kl upprepa. ÄndraUnité i Viewport Minimum. Placera den ovanför bakgrundsbilden.

• Gradienttyp: Elliptisk
• Gradient Position: Topp
• Upprepa gradient: JA
• Gradientenhet: Viewport Minimum (vmin)
• Fyrkantig gradient ovanför bakgrundsbild : JA

Konisk gradienttyp

Se även: Divi: Hur man skapar bakgrundsövergångar mellan element

Den koniska gradienttypen visar gradienten som en kon som om konen ses uppifrån.

Första exemplet på den koniska gradienttypen

Detta exempel placerar en diagonal linje från mitten av gradienten till vänster med en ljus färg på ena sidan och en mörk färg på den andra.

Den har två färger. de Premier är rgba(92,158,82,0.76) vid 0%-positionen. de 2:a är rgba(0,10,4,0.76) vid 50 %-positionen.

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

ändra det gradienttyp i konisk. Justera riktning över 221 grader. Centrera placera et upprepa det inte . Placera gradienten ovanför bilden.

• Gradienttyp: konisk
• Lutningsriktning: 221 grader
• Position: Center
• Upprepa gradient: NEJ
• Fyrkantig gradient ovanför bakgrundsbild : JA

Andra exemplet på den koniska gradienttypen

Det här exemplet liknar det föregående, men det placerar mittlinjen uppåt.

Den här har fyra färger. de Premier är rgba(20,40,20,0.76) vid 7 %-positionen. färg 2 är rgba(30,73,25,0.68) vid 24 %-positionen. färg 3 är rgba(103,132,30,0.68) vid 65%-positionen. De fjärde färgen är rgba(38,86,26,0.68) vid 85%-positionen.

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

Definiera gradienttyp på koniska och den riktning vid 0 grader. Centrera placera . Född den upprepa inte och placera den ovanför bilden.

• Gradienttyp: konisk
• Lutningsriktning: 0 grader
• Position: Center
• Upprepa gradient: NEJ
• Fyrkantig gradient ovanför bakgrundsbild : JA

Tredje exemplet på den koniska gradienttypen

Vårt sista exempel placerar en skur av linjer från den övre mitten av gradienten utåt i alla riktningar.

Den här har två färger. de Premier är rgba(30,73,25,0.68) vid 5 graders position. de 2:a är rgba(20,40,20,0.76) vid 7 graders position.

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

Ställ in GradientType på Conical och den Riktning vid 221 grader. Placera placera ovan. Upprepa denna och placera den ovanför bakgrundsbilden.

• Gradienttyp: konisk
• Lutningsriktning: 221 grader
• Position: Topp
• Upprepa gradient: JA
• Fyrkantig gradient ovanför bakgrundsbild : JA

Ladda ner DIVI nu!!!

Slutsats

Det här är vår titt på jämförelsen av gradienttyper i Divis Gradient Builder. 

Som du kan se från dessa exempel är inställningarna enkla, men vilken som helst av dem kan göra stor skillnad i utformningen av gradienten. 

För bästa resultat, experimentera med gradienttyper med olika riktningar och positioner och slå på eller av upprepningsalternativet för att se vad du kan skapa.

Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.

Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.