Divi: Sådan bruger du "Gradient Builder" til at forskønne dine billeder

Kunne du tænke dig at give figurer til dine billeder ved hjælp af gradientgeneratoren? Divi ?

Billedmasker bruges ofte til at tilføje interessante former til billeder. De giver billedet mulighed for at se gennem formen, hvilket giver siden et unikt designelement.

Med Gradient Builder de Divi, behøver du ikke nødvendigvis bruge masker til at skabe former. I stedet kan du bruge Gradient stopper og parametrene for at skabe dem!

I denne artikel vil vi se, hvordan du forskønner dine billeder med Gradient Builder af Divi for at hjælpe dig med at tilføje unikke designs til dine billeder.

Lad os starte.

undersøgelse

Lad os først se, hvad vi skal lave i denne tutorial på forskellige skærmstørrelser.

Første eksempel – Cirkulær billedform

Stationær computer

giv former til dine billeder ved hjælp af Divis gradientgenerator

tablet

Telefon

Andet eksempel – Lineær billedform

kontor

tablet

Telefon

Tredje eksempel – Elliptisk billedform

Stationær computer

tablet

Telefon

Fjerde eksempel – Konisk billedform

Stationær computer

tablet

Telefon

Layoutdesign med Divi

Lad os starte med at lave det layout, som vi vil bruge i alle eksemplerne. Dette layout kan bruges som en heltesektion.

Det vil indeholde en titel og beskrivelse på den ene side og billedet på den anden. Vi vil derefter bruge dette layout og billede til eksemplerne.

Tilpas sektionen

Først skal du oprette en ny Divi-side og tilpasse sektionen. Åbn sektionsindstillingerne og skift farve baggrund til #f0f3fb.

Baggrund: #f0f3fb

Gå derefter til fanen Design og ændre afstandsindstillingerne som følger:.

Polstring (top og bund): 10 %

Tilføj linje

Tilføj derefter a linje med kolonnestrukturen nedenfor.

Få adgang til linjeparametrene på fanen Design, naviger til indstillingen dimensionering og ændre størrelsesparametrene.

Brug tilpasset tagrendebredde: JA
Maks. bredde: 1px

Indstillinger for første kolonne

I fanen Indhold i rækken, åbn indstillingerne for den første kolonne i rækken, gå til fanen Design. Rediger afstanden som følger.

Polstring (venstre og højre): 9% venstre, højre

Parametre for det første tekstmodul

Tilføj derefter a Tekstmodul til venstre kolonne.

Vælg Overskrift 4 for teksten til indhold og tilføj indhold af din krop.

Tekst: "Velkommen til BlogPasCher"

Gå derefter til fanen Design og ændre titelindstillingerne.

Skrifttype: Montserrat
Skrifttypevægt: Fed
Stil: TT
Tekstfarve: #1d4eff

Tekststørrelse: Desktop 16px, Tablet 14px, Telefon 12px
Bogstavafstand: 0,3em
Linjehøjde: 1,6 em

Rul til Mellemrum og ændre bundmargenen.

Margen (bund): 0px

Parametre for det andet tekstmodul

Tilføj derefter a Tekstmodul under den første.

Indstil teksttypen til "Overskrift 1" og tilføj indhold af din krop.

Indhold: "Planlæg din økonomiske fremtid"

Vælg derefter fane Design og ændre mulighederne for titlen.

Skrifttype: Montserrat
Skrifttypevægt: Fed
Tekstfarve: #0f1154

Størrelse: 80px desktop, 40px tablet, 24px telefon
Rækkehøjde: 110 %

Parametre for det tredje tekstmodul

Tilføj derefter a Tekstmodul under den anden.

Lad teksttypen stå ved "Afsnit", og tilføj dit kropsindhold.

Krop: indhold

Gå derefter til fanen Conception og ændre tekstindstillingerne.

Tekstskrifttype: Roboto
Skrifttypevægt: medium
Tekstfarve: #000000

Tekststørrelse: 18px (desktop og tablet), 14px (telefon)
Linjehøjde: 180 %

Rul til sidst ned til afstand og indstil bundmargenen. Luk modulindstillingerne.

Margen (bund): 0px

Billedmodulindstillinger

Tilføj nu en Billedmodul til højre kolonne.

første, fjern dummy-billede ved at klikke på skraldespanden eller nulstillingsikonet over billedet.

Rul derefter ned Baggrund , vælg fanen Billede og tilføj dit billede. Lad alle billedindstillinger være på deres standardværdier. Billedet vil ikke vise meget i starten. Vi ordner det, mens vi går.

Vælg derefter fane stil og scroll til Mellemrum.

Margen (skrivebord): -10 % (øverst), -30 % (venstre), 10 % (højre)
Polstring (top og bund): 300px

Margen (tablet/telefon): 0 % (øverst), 0 % (venstre og højre)

Polstring (telefon): 150px (top og bund)

Eksempler på billeder formet med Divi's Gradient Builder

Første eksempel - Cirkulær form

Vores første eksempel giver billedet en cirkulær form med et hul i midten.

Åbn billedmodulets indstillinger, og rul ned til Baggrund . Vælg Fanen Baggrundsgradient og indstil 6 gradientstop:

Første stop: 0%, #f0f3fb
Andet: 45%, #f0f3fb
Tredje (over anden): 45 %, rgba(41,196,169,0)
Fjerde: 69 %, rgba(250,255,214,0)
Femte (over fjerde): 69%, #f0f3fb
Sjette: 100 %, #f0f3fb

Type: Rund
Stilling: Center
Enhed: Procent
Firkantet gradient over baggrundsbillede : JA

Andet eksempel - Lineær form

Her er en forhåndsvisning af det andet eksempel på billedform. Dette eksempel placerer diagonale linjer på tværs af billedet.

Åbn indstillinger, rul ned til Baggrund og vælgFanen Baggrundsgradient. Tilføj fire gradientstop:

Første stop: 0%, #f0f3fb
Andet: 5%, #f0f3fb
Tredje (over anden): 5 %, rgba(175,175,175,0)
Fjerde: 13 %, rgba(41,196,169,0)

Type: Lineær
Styring: 150 grader
Gentag gradient: JA
Gradientenhed: Procent
Firkantet gradient over baggrundsbillede : JA

Tredje eksempel - Elliptisk form

Dette er vores tredje eksempel på billedform. Dette bruger en elliptisk form.

Åbn billedmodulets indstillinger, og rul ned til Baggrund . Vælg faneblad Baggrundsgradient og opret fire gradientstop:

Første stop: 0%, #f0f3fb
Andet: 9%, #f0f3fb
Tredje (over anden): 9 %, rgba(175,175,175,0)
Fjerde: 21 %, rgba(41,196,169,0)

Type: Elliptisk
Gradientposition: Øverst til venstre
Gentag gradient: JA
Gradientenhed: Procent
Firkantet gradient over baggrunden Billede: JA

Fjerde eksempel - Conical Shape

Vores fjerde eksempel bruger "konisk" at skabe en enkelt billedform.

Åbn billedmodulindstillinger, rul ned til Baggrund og vælg fanen Baggrundsbillede. Denne har 5 gradientstop:

Første stop: 23%, #f0f3fb
Andet: 35%, #f0f3fb
Tredje (over anden): 35 %, rgba(41,196,169,0)
Fjerde: 65 %, rgba(250,255,214,0)
Femte (over fjerde): 65%, #f0f3fb

Type: Tilspidset
Gradientretning: 180 grader
Gradientposition: Bund
Enhed: Procent
Firkantet gradient over baggrundsbillede : JA