Divi: Hur man använder "Gradient Builder" för att försköna dina bilder

Vill du ge dina bilder former med hjälp av gradientgeneratorn? Divi ?

Bildmasker används ofta för att lägga till intressanta former till bilder. De låter bilden se genom formen, vilket ger sidan ett unikt designelement.

Med den Gradient Builder de Divi, du behöver inte nödvändigtvis använda masker för att skapa former. Istället kan du använda Gradient stannar och parametrarna för att skapa dem!

I den här artikeln kommer vi att se hur du förskönar dina bilder med Gradient Builder Divi för att hjälpa dig lägga till unika mönster till dina bilder.

Låt oss börja.

undersökningen

Låt oss först se vad vi ska skapa i den här handledningen på olika skärmstorlekar.

Första exemplet – Cirkulär bildform

Stationär dator

ge dina bilder former med Divis gradientgenerator

tablett

Telefon

Andra exemplet – Linjär bildform

office

tablett

Telefon

Tredje exemplet – Elliptisk bildform

Stationär dator

tablett

Telefon

Fjärde exemplet – konisk bildform

Stationär dator

tablett

Telefon

Layoutdesign med Divi

Låt oss börja med att skapa layouten som vi kommer att använda i alla exempel. Denna layout kan användas som en hjältesektion.

Den kommer att innehålla en titel och beskrivning på ena sidan och bilden på den andra. Vi kommer sedan att använda denna layout och bild för exemplen.

Anpassa avsnittet

Skapa först en ny Divi-sida och anpassa avsnittet. Öppna avsnittsinställningarna och ändra färg bakgrund till #f0f3fb.

Bakgrund: #f0f3fb

Gå sedan till fliken Designa och ändra avståndsinställningarna enligt följande:.

Vaddering (topp och botten): 10 %

Lägg till rad

Lägg sedan till a Ligne med kolumnstrukturen nedan.

Gå till linjeparametrarna på fliken Designa, navigera till alternativet Storlek och ändra storleksparametrarna.

Använd anpassad rännbredd: JA
Max bredd: 1px

Inställningar för första kolumnen

På fliken Innehåll i raden, öppna inställningarna för den första kolumnen i raden, gå till fliken Designa. Ändra avståndet enligt följande.

Stoppning (vänster och höger): 9% vänster, höger

Parametrar för den första textmodulen

Lägg sedan till a Textmodul till vänster kolumn.

Välj Rubrik 4 för texten till innehåll och lägg till innehåll av din kropp.

Text: "Välkommen till BlogPasCher"

Gå sedan till tab Designa och ändra titelinställningarna.

Typsnitt: Montserrat
Teckensnittsvikt: Fet
Stil: TT
Textfärg: #1d4eff

Textstorlek: Desktop 16px, surfplatta 14px, telefon 12px
Bokstavsavstånd: 0,3 em
Linjehöjd: 1,6 em

Bläddra till Förband och ändra bottenmarginalen.

Marginal (botten): 0px

Parametrar för den andra textmodulen

Lägg sedan till a Textmodul under den första.

Ställ in texttypen på "Rubrik 1" och lägg till innehåll av din kropp.

Innehåll: "Planera din ekonomiska framtid"

Välj sedan flik Designa och ändra alternativen för titeln.

Typsnitt: Montserrat
Teckensnittsvikt: Fet
Textfärg: #0f1154

Storlek: 80px Desktop, 40px surfplatta, 24px telefon
Radhöjd: 110 %

Parametrar för den tredje textmodulen

Lägg sedan till a Textmodul under den andra.

Lämna texttypen vid "Paragraph" och lägg till ditt kroppsinnehåll.

Kropp: innehåll

Gå sedan till tab Conception och ändra textinställningarna.

Texttypsnitt: Roboto
Teckensnittsvikt: medium
Textfärg: #000000

Textstorlek: 18px (dator och surfplatta), 14px (telefon)
Linjehöjd: 180 %

Till sist, scrolla ner till avstånd och ställ in bottenmarginalen. Stäng modulinställningarna.

Marginal (botten): 0px

Bildmodulinställningar

Lägg nu till a Bildmodul till höger kolumn.

först, ta bort dummybild genom att klicka på papperskorgen eller återställningsikonen ovanför bilden.

Scrolla sedan ner Bakgrund väljer du fliken Bild och lägg till din bild. Lämna alla bildinställningar på sina standardvärden. Bilden kommer inte att visa mycket till en början. Vi kommer att reda ut detta allt eftersom.

Välj sedan flik Stil och bläddra till Förband.

Marginal (Skrivbord): -10% (Överst), -30% (Vänster), 10% (Höger)
Utfyllnad (topp och botten): 300px

Marginal (surfplatta/telefon): 0% (överst), 0% (vänster och höger)

Utfyllnad (telefon): 150 px (överst och neder)

Exempel på bilder formade med Divis Gradient Builder

Första exemplet – Cirkulär form

Vårt första exempel ger bilden en cirkulär form med ett hål i mitten.

Öppna bildmodulens inställningar och scrolla ner till Bakgrund . Välj Fliken Bakgrundsgradient och ställ in 6 gradientstopp:

Första stoppet: 0%, #f0f3fb
Andra: 45 %, #f0f3fb
Trea (över tvåan): 45 %, rgba(41,196,169,0 XNUMX XNUMX)
Fjärde: 69 %, rgba(250,255,214,0 XNUMX XNUMX)
Femte (över fjärde): 69 %, #f0f3fb
Sjätte: 100 %, #f0f3fb

Typ: Rund
Position: Center
Enhet: Procent
Fyrkantig gradient ovanför bakgrundsbild : JA

Andra exemplet – Linjär form

Här är en förhandsvisning av det andra exemplet med bildform. Detta exempel placerar diagonala linjer över bilden.

Öppna inställningar, scrolla ner till Bakgrund och väljFliken Bakgrundsgradient. Lägg till fyra gradientstopp:

Första stoppet: 0%, #f0f3fb
Andra: 5 %, #f0f3fb
Trea (över tvåan): 5 %, rgba(175,175,175,0 XNUMX XNUMX)
Fjärde: 13 %, rgba(41,196,169,0 XNUMX XNUMX)

Typ: Linjär
Styrning: 150 grader
Upprepa gradient: JA
Gradientenhet: procent
Fyrkantig gradient ovanför bakgrundsbild : JA

Tredje exemplet – Elliptisk form

Detta är vårt tredje exempel på bildform. Detta använder en elliptisk form.

Öppna bildmodulens inställningar och scrolla ner till Bakgrund . Välj flik Bakgrundsgradient och skapa fyra gradientstopp:

Första stoppet: 0%, #f0f3fb
Andra: 9 %, #f0f3fb
Trea (över tvåan): 9 %, rgba(175,175,175,0 XNUMX XNUMX)
Fjärde: 21 %, rgba(41,196,169,0 XNUMX XNUMX)

Typ: Elliptisk
Gradientposition: Överst till vänster
Upprepa övertoning: JA
Gradientenhet: procent
Fyrkantig gradient ovanför bakgrundsbild : JA

Fjärde exemplet – Conical Shape

Vårt fjärde exempel använder "Konisk" för att skapa en enda bildform.

Öppna bildmodulens inställningar, scrolla ner till Bakgrund och välj fliken Bakgrundsbild. Den här har 5 gradientstopp:

Första stoppet: 23%, #f0f3fb
Andra: 35 %, #f0f3fb
Trea (över tvåan): 35 %, rgba(41,196,169,0 XNUMX XNUMX)
Fjärde: 65 %, rgba(250,255,214,0 XNUMX XNUMX)
Femte (över fjärde): 65 %, #f0f3fb

Typ: Avsmalnande
Lutningsriktning: 180 grader
Gradient Position: Botten
Enhet: Procent
Fyrkantig gradient ovanför bakgrundsbild : JA