Cum să vă modelați imaginile cu Divi’s Gradient Builder

Măștile de imagine sunt adesea folosite pentru a adăuga forme interesante imaginilor. Ele permit imaginii să se uite prin formă, oferind paginii un element de design unic. Cu Divi's Gradient Builder, nu trebuie neapărat să folosiți măști pentru a crea forme. În schimb, puteți folosi Gradient Stops și setările pentru a le crea! În această postare, vom analiza cum să vă modelați imaginile cu Divi's Gradient Builder pentru a vă ajuta să adăugați design unic imaginilor dvs.

Să începem.

previzualizare

Mai întâi, să aruncăm o privire la ceea ce vom construi în acest tutorial.

Primul exemplu – Forma circulară a imaginii

Desktop

Comprimat

Telefon

Al doilea exemplu – Forma liniară a imaginii

Desktop

Comprimat

Telefon

Al treilea exemplu – Forma eliptică a imaginii

Desktop

Comprimat

Telefon

Al patrulea exemplu – Forma conică a imaginii

Desktop

Comprimat

Telefon

Creați aspectul

Mai întâi, să creăm aspectul pe care îl vom folosi în toate exemplele. Acest aspect poate fi folosit ca o secțiune erou. Acesta va include un titlu și o descriere pe o parte și imaginea pe cealaltă. Apoi vom folosi aspectul și imaginea respectivă pentru exemple.

Personalizați secțiunea

Mai întâi, creați o nouă pagină Divi și personalizați secțiunea. Deschideți setările secțiunii și schimbați culoarea de fundal la #f0f3fb.

• Culoare de fundal: #f0f3fb

Apoi, accesați fila Design și adăugați 10% Umplutură în partea de sus și de jos. Închideți setările.

• Captuseala: 10% sus, jos

Adăugați un rând

Apoi, adăugați un rând cu o coloană 2/3 și o coloană 1/3.

• 2/3, 1/3 rând

Accesați fila Design. Activați Utilizarea lățimii jgheab personalizate și setați Lățimea maximă la 1480 px.

• Utilizați lățimea jgheab personalizată: da
• Lățimea maximă: 1480 px

Setări prima coloană

În fila Conținutul rândului, deschideți setările pentru prima coloană a rândului, accesați fila Design și adăugați 9% Padding la stânga și la dreapta. Închideți setările pentru coloană și rând.

• Captuseala: 9% Stânga, Dreapta

Setările primului modul de text

Apoi, adăugați un modul de text în coloana din stânga.

Selectați Titlul 4 pentru textul conținutului și adăugați conținutul corpului.

• Titlu: 4
• Corp: Bun venit la Divi

Apoi, accesați fila Design . Setați fontul H4 la Montserrat, Weight la bold, Style la TT și Color la #1d4eff.

• Titlul 4 Font: Montserrat
• Greutate: îndrăzneață
• Stil: TT
• Culoare: #1d4eff

Setați dimensiunea fontului de pe desktop la 16 px, dimensiunea tabletei la 14 px și dimensiunea telefonului la 12 px. Schimbați spațierea literelor la 0,3 em și înălțimea liniei la 1,6 em.

• Dimensiune: desktop 16px, tabletă 14px, telefon 12px
• Spațiere între litere: 0,3 em
• Înălțimea liniei: 1,6 em

Derulați în jos la Spațiere și modificați Marja inferioară la 0px. Închideți modulul.

• Marja: 0px de jos

Setări al doilea modul de text

Apoi, adăugați un modul de text sub primul.

Setați tipul de text la Titlul 1 și adăugați conținutul corpului.

• Titlu: 1
• Corp: Planifică-ți viitorul financiar

Apoi, selectați fila Design . Schimbați fontul titlului în Montserrat, greutatea în aldine și culoarea la #0f1154.

• Titlul 1 Font: Montserrat
• Greutate: îndrăzneață
• Culoare: #0f1154

Setați dimensiunea fontului la 80 px pentru desktopuri, 40 px pentru tablete și 24 px pentru telefoane. Schimbați înălțimea liniei la 110%. Închideți modulul.

• Dimensiune: desktop 80px, tabletă 40px, telefon 24px
• Înălțimea liniei: 110%

Setări al treilea modul de text

Apoi, adăugați un modul text sub cel de-al doilea.

Lăsați tipul de text la Paragraf și adăugați conținutul corpului.

• Titlu: Paragraf
• Corp: conținut

Apoi, accesați fila Design . Schimbați fontul textului în Roboto, setați Greutatea la Mediu și Culoare la negru.

• Font text: Roboto
• Greutate: Mediu
• Culoare: #000000

Schimbați dimensiunea pentru computere desktop și tablete la 18 px și pentru telefoane la 14 px. Setați înălțimea liniei la 180%.

• Dimensiune: desktop 18px, tabletă 18px, telefon 14px
• Înălțimea liniei: 180%

În cele din urmă, derulați în jos la Spațiere și setați Marja inferioară la 0%. Închideți setările modulului.

• Marja: 0px de jos

Setări modul de imagine

Acum, adăugați un modul de imagine în coloana din dreapta.

Mai întâi, ștergeți imaginea falsă făcând clic pe coșul de gunoi sau pe pictograma de resetare de deasupra imaginii.

Apoi, derulați în jos Fundal , selectați fila Imagine și adăugați imaginea. Lăsați toate setările de imagine la valorile implicite. Imaginea nu va arăta prea multe la început. Vom rezolva asta pe măsură ce mergem.

Apoi, selectați fila Design și derulați în jos la Spațiere . Pentru computere desktop, adăugați -10% Top, -30% Stânga, 10% Marja dreapta. Adăugați căptușeală de sus și de jos de 300 px. Acestea sunt setările desktopului. Vom face ajustări pentru tablete și telefoane.

• Marja (desktop): -10% Sus, -30% Stânga, 10% Dreapta
• Căptușeală: 300px de sus, 300px de jos

Apoi, dorim să ne asigurăm că forma imaginii răspunde. Selectați pictograma tabletei pentru a deschide setările pentru tablete și telefoane. Plasați cursorul peste setările Marjă și selectați pictograma tabletă care apare. Aceasta deschide un set de file cu o filă pentru fiecare tip de dispozitiv. Alegeți fila Tabletă și modificați Marja la 0% Top, 0% Left, 0% Right Margin. Fila Telefon va urma setările Tabletei, așa că nu va trebui să o ajustăm pentru Marjă.

• Marja (tabletă/telefon): 0% Sus, 0% Stânga, 0% Dreapta

Apoi, selectați pictograma tabletă care apare când treceți cu mouse-ul peste setările de umplutură. Alegeți fila Telefon și modificați padding-ul la 150px de sus și 150px de jos. Tableta Padding va urma setările desktopului. Închideți setările modulului.

• Căptușeală: 150px de sus, 150px de jos

Modelați imagini cu exemplele Divi’s Gradient Builder

Apoi, vom folosi acele setări și vom modela imaginile cu Divi's Gradient Builder. După cum vom vedea, mai multe setări ne ajută să creăm forme de imagine interesante cu Divi's Gradient Builder.

Unele setări cheie de reținut includ stivuirea opririlor de gradient și setarea modelului să se repete. Asigurați-vă că testați modelele pe toate dimensiunile de ecran pentru a vă asigura că vă place forma.

Pentru mai multe informații despre utilizarea Divi’s Gradient Builder, căutați pe blogul Elegant Themes „Gradient Builder”. Veți găsi mai multe postări cu tutoriale detaliate pentru a vă ghida prin controale și setări.

Primul exemplu – Forma de imagine a generatorului de gradient circular

Primul nostru exemplu dă imaginii o formă circulară cu o gaură în centru.

Deschideți setările modulului de imagine și derulați în jos la Fundal . Selectați fila Gradient de fundal și setați 6 opriri de gradient:

• Prima oprire: 0%, #f0f3fb
• Al doilea: 45%, #f0f3fb
• Al treilea (pe deasupra celui de-al doilea): 45%, rgba(41.196.169,0)
• Al patrulea: 69%, rgba(250.255.214,0)
• Al cincilea (pe deasupra celui de-al patrulea): 69%, #f0f3fb
• Al șaselea: 100%, #f0f3fb

Apoi, alegeți Circular pentru Tipul de gradient, setați Poziția la Centru, utilizați Procent pentru unitate și activați Plasați gradient deasupra imaginii de fundal.

• Tip: circular
• Poziție: Centru
• Unitate: procente
• Plasați gradient deasupra imaginii de fundal: da

Al doilea exemplu – Forma imaginii generatorului de gradient liniar

Iată o privire asupra celui de-al doilea exemplu de formă a imaginii. Acest exemplu plasează linii diagonale peste imagine.

Deschideți setările, derulați până la Fundal și selectați fila Gradient de fundal . Adăugați patru opriri de gradient:

• Prima oprire: 0%, #f0f3fb
• Al doilea: 5%, #f0f3fb
• Al treilea (pe deasupra celui de-al doilea): 5%, rgba(175,175,175,0)
• Al patrulea: 13%, rgba(41.196.169,0)

Setați tipul de gradient la liniar cu o direcție de 150 de grade. Setați-l la Repetare. Utilizați Procent pentru unitate și activați Plasați gradient deasupra imaginii de fundal.

• Tip: Linear
• Direcție: 150 de grade
• Repet: Da
• Unitate: procente
• Plasați gradient deasupra imaginii de fundal: da

Al treilea exemplu – Forma imaginii generatorului de gradient eliptic

Iată cel de-al treilea exemplu de formă de imagine. Acesta folosește o formă eliptică.

Deschideți setările modulului de imagine și derulați în jos la Fundal . Selectați fila Gradient de fundal și creați patru opriri de gradient:

• Prima oprire: 0%, #f0f3fb
• Al doilea: 9%, #f0f3fb
• Al treilea (pe deasupra celui de-al doilea): 9%, rgba(175,175,175,0)
• Al patrulea: 21%, rgba(41.196.169,0)

Apoi, schimbați Tipul de gradient la Eliptic și setați Poziția la stânga sus. Alegeți Repetați gradul, utilizați Procentul ca unitate și activați Plasați gradul deasupra imaginii de fundal.

• Tip: eliptică
• Poziție: Sus Stânga
• Repetare gradient: Da
• Unitate: procente
• Plasați gradient deasupra imaginii de fundal: da

Al patrulea exemplu – Forma imaginii generatorului de gradient conic

Al patrulea exemplu folosește Conical pentru a crea o formă de imagine unică.

Deschideți setările modulului de imagine, derulați în jos la Fundal și selectați fila Gradient de fundal . Acesta are 5 opriri de gradient:

• Prima oprire: 23%, #f0f3fb
• Al doilea: 35%, #f0f3fb
• Al treilea (pe deasupra celui de-al doilea): 35%, rgba(41.196.169,0)
• Al patrulea: 65%, rgba(250.255.214,0)
• Al cincilea (pe deasupra celui de-al patrulea): 65%, #f0f3fb

Setați Tipul Gradient la Conic și lăsați Direcția la setarea implicită. Setați Poziția la Jos, utilizați Procent pentru unitate și activați Plasați gradient deasupra imaginii de fundal.

• Tip: conic
• Direcție: 180 de grade
• Poziție: jos
• Unitate: procente
• Plasați gradient deasupra imaginii de fundal: da

Rezultate Gradient Bulder Forma

Toate layout-urile au ieșit bine. Formele imaginilor ies în evidență, iar imaginile sunt încă ușor de înțeles. Toate sunt receptive, așa că arată grozav pe orice dispozitiv.

Primul exemplu – Forma circulară a imaginii

Desktop

Comprimat

Telefon

Al doilea exemplu – Forma liniară a imaginii

Desktop

Comprimat

Telefon

Al treilea exemplu – Forma eliptică a imaginii

Desktop

Comprimat

Telefon

Al patrulea exemplu – Forma conică a imaginii

Desktop

Comprimat

Telefon

Gânduri de sfârșit

Acesta este modul nostru de a vă modela imaginile cu Divi's Gradient Builder. Gradient Builder poate crea câteva forme de imagine interesante. Jocul cu Gradient Stops, încercarea diferitelor tipuri de gradient și activarea Gradient Repeat sunt modalități excelente de a crea noi modele. Asigurați-vă că vă verificați desenele pe toate dimensiunile de ecran și faceți ajustări dacă este necesar.

Vrem sa auzim de la tine. Ați folosit Divi's Gradient Builder pentru a vă modela imaginile? Spune-ne despre experiența ta în comentarii.