Cum să utilizați Divi Gradient Builder pentru a crea forme circulare unice de fundal

Divi's Gradient Builder poate crea o mulțime de fundaluri interesante. Culorile lucrează împreună pentru a crea forme și modele care sunt de obicei dificil de creat. Divi's Gradient Builder include setări care fac crearea de modele circulare, cum ar fi o formă circulară de fundal, ceea ce face să creeze fundaluri unice o sarcină simplă. În această postare, vom vedea cum să folosim Divi Gradient Builder pentru a proiecta forme circulare unice de fundal care să atragă atenția asupra oricărei secțiuni sau coloane.

Să începem.

previzualizare

Mai întâi, să vedem ce construim.

Primul fundal circular

Desktop

Telefon

Fundal al doilea circular

Desktop

Telefon

Fundal al treilea circular

Desktop

Telefon

Fundal al patrulea circular

Desktop

Telefon

Creați secțiunea de formă circulară

În loc să folosim o secțiune dintr-un aspect Divi, vom crea o secțiune personalizată pentru acest tutorial. Secțiunea va avea nevoie de un rând cu două coloane cu coloane de dimensiuni egale.

În coloana din stânga, vom plasa un separator. Acest lucru nu va fi vizibil. Permite ca fundalul coloanei 1 să fie afișat pe ecrane de dimensiuni mai mici. Numai coloanele cu module sunt afișate pe ecrane mai mici. Coloana din dreapta va include două module de text și un formular de contact.

Secțiunea Setări

Deschideți setările secțiunii făcând clic pe pictograma roată.

Derulați în jos la Fundal și schimbați culoarea la #fff7ef.

• Culoare de fundal: #fff7ef

Apoi, selectați fila design . Derulați în jos la Spațiere și introduceți 0px pentru umplutura de sus și de jos. Închideți setările secțiunii.

• Sus: 0px
• De jos: 0px

Adăugați rândul

Apoi, adăugați un rând cu două coloane .

Apoi, deschideți setările rândului făcând clic pe pictograma roată.

Selectați fila design și activați Egalizare înălțimi coloane . Setați Lățimea la 100% și modificați Lățimea maximă la Niciunul.

• Egalizare înălțimi coloane: da
• Latime: 100%
• Lățimea maximă: niciuna

Apoi, derulați în jos la Spațiere și introduceți 0px pentru umplutura de sus și de jos.

• Umplutură: 0px Sus, 0px Jos

Setări coloane

În continuare, vom face câteva ajustări de spațiere la coloane . Vom reveni la setările coloanei când creăm fundalurile circulare. Deschideți setările pentru prima coloană.

Accesați fila de design și introduceți 8vw pentru umplutura de sus și de jos și 10% pentru umplutura din stânga și dreapta. Închideți setările coloanei.

• Sus: 8vw
• De jos: 8vw
• Stânga: 10%
• Dreapta: 10%

Apoi, deschideți setările celei de-a doua coloane .

Accesați fila de design și introduceți 8vw pentru umplutura de sus și de jos și 12% pentru umplutura din dreapta. Închideți setările coloanei și rândurilor.

• Sus: 8vw
• De jos: 8vw
• Dreapta: 12%

Modul divizor

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

Deschideți setările modulului divizor și selectați Nu pentru Afișare vizibilitate.

• Afișează vizibilitate: nu

Apoi, selectați fila de design și derulați în jos la Spațiere . Selectați pictograma tabletă și alegeți fila tabletă. Adăugați 15vh la căptușeala de sus și de jos. Setările telefonului vor urma setările tabletei. Nu vom avea nevoie de aceste setări pentru versiunea desktop. Închideți setările modulului.

• Captuseala (tableta): 15vH sus, 15vh jos

Titlu Text Modul

Apoi, adăugați un modul de text în coloana din dreapta. Aceasta va crea titlul pentru formularul de contact.

Adăugați titlul „Intră în contact” și schimbați fontul la Titlul 1.

• Font: Titlul 1
• Conținutul corpului: Luați legătura

Selectați fila de design și derulați în jos la Textul titlului . Selectați Inter pentru Font și alegeți Light pentru Greutatea fontului.

• Font: Inter
• Greutatea fontului: ușoară

Setați culoarea fontului la negru, dimensiunea fontului de pe desktop la 78px, dimensiunea fontului tabletei la 44px și dimensiunea fontului telefonului la 28px. Schimbați înălțimea liniei la 1,1 em. Închideți setările modulului.

• Culoare: #000000
• Dimensiunea fontului: 78px (desktop), 44px (tabletă), 28px (telefon)
• Înălțimea liniei: 1,1 em

Modulul de text de descriere

Apoi, adăugați un modul text sub modulul text titlu.

Deschideți setările și adăugați descrierea dvs. în zona de conținut. Folosesc doar conținut fals pentru exemplul meu.

• Textul corpului: descriere

Apoi, selectați fila de design și alegeți Inter pentru Font. Alegeți Lumină pentru Greutatea fontului și setați culoarea la negru.

• Font: Inter
• Greutatea fontului: ușoară
• Culoare: #000000

Selectați pictograma tabletei pentru a seta dimensiunile pentru fiecare tip de ecran. Faceți clic pe pictograma de pe desktop și modificați dimensiunea la 24px. Selectați pictograma tabletei și modificați dimensiunea la 20px. Selectați pictograma telefonului și modificați dimensiunea la 16px. Schimbați înălțimea liniei la 1,6 em. Închideți setările modulului.

Modulul formular de contact

În cele din urmă, adăugați un modul de formular de contact sub textul de descriere.

Deschideți setările , derulați în jos la Protecție împotriva spamului și activați Utilizați un serviciu de protecție împotriva spamului. Pentru mai multe informații despre această caracteristică, consultați articolul Cum să utilizați un serviciu de protecție împotriva spamului în Modulul Optin e-mail al Divi.

• Utilizați un serviciu de protecție împotriva spamului: da

Câmpuri

Accesați fila design și setați culoarea de fundal a câmpurilor la rgba(0,0,0,0). Setați culoarea textului câmpurilor la negru.

• Culoare de fundal câmpuri: rgba(0,0,0,0)
• Culoare text: #000000

Apoi, alegeți Inter pentru Fontul Fields. Schimbați dimensiunea la 16 px și înălțimea liniei la 1,6 em.

• Font: Inter
• Dimensiune: 16px
• Înălțimea liniei: 1,6 em

Buton

Derulați în jos la Buton și selectați Utilizați stiluri personalizate. Schimbați dimensiunea textului la 16 px. Schimbați culoarea textului în alb și setați culoarea de fundal la #b35330.

• Utilizați stiluri personalizate: da
• Dimensiunea textului: 16px
• Culoare text: #ffffff
• Culoare de fundal: #b35330

Schimbați raza chenarului la 100px. Selectați Inter pentru Fontul Butonului. Schimbați greutatea la Medie.

• Raza chenarului: 100px
• Font buton: Inter
• Greutate: Mediu

Derulați în jos la Button Padding și adăugați 16px pentru partea de sus și de jos și 40px pentru stânga și dreapta.

• Butoane: 16 px (sus, jos), 40 px (stânga, dreapta)

Frontiere de câmp

Derulați în jos la Border și modificați Lățimea chenarului de intrare la 1px. Schimbați culoarea chenarului intrărilor la #b35330.

• Lățimea chenarului intrărilor: 1px
• Intrări Culoare chenar: #b35330

Setări de câmp

Apoi, deschideți setările pentru câmpul Nume .

Selectați fila design și activați Make Fullwidth. Închideți setările câmpului de nume.

• Faceți lățime completă: da

Apoi, deschideți setările câmpului E-mail .

Selectați fila design și activați Make Fullwidth. Închideți setările câmpului de e-mail, închideți setările formularului de contact și salvați-vă munca.

• Faceți lățime completă: da

Duplicați secțiunea

Avem acum o secțiune cu o coloană goală în stânga și un formular de contact creat cu două module de text și un modul de formular de contact în dreapta. Înainte de a crea fundalurile, să duplicăm această secțiune.

Plasați cursorul peste setările secțiunii și faceți clic pe pictograma Duplicare secțiune de trei ori. Vom avea apoi patru secțiuni. Vom adăuga un fundal circular diferit fiecăruia.

Adăugarea gradientului de fundal

Pentru fiecare dintre fundalurile noastre circulare, vom adăuga Gradientul de fundal în coloana din stânga a rândului. În cea mai mare parte, vor folosi aceleași culori și mai multe vor avea Gradient Stops care se stivuiesc. Acordați o atenție sporită ordinii stivei, deoarece aceasta va schimba gradientul. Vom folosi și unități diferite, dar toate vor începe ca procente.

Pentru a crea un gradient de fundal, deschideți setările rândului făcând clic pe pictograma roată.

Faceți clic pe pictograma roată pentru prima coloană .

Derulați în jos la Fundal , selectați fila Gradient de fundal și faceți clic pe Adăugați Gradient de fundal .

Plasați opririle de gradient făcând clic pe bara de gradient. Schimbați-le culorile selectându-le. Bara de gradient le arată ca procente în mod implicit, dar le vom schimba pe măsură ce mergem.

Acum, să construim exemplele noastre de fundal circulare.

Fundal circular forma unu

Acest fundal circular va avea cinci opriri de gradient și va crea o mulțime de cercuri în cercuri.

Prima oprire în gradient

Pentru prima oprire a gradientului, setați-o pe Poziția de 29% și utilizați culoarea #ffb482.

• Poziția: 29
• Culoare: #ffb482

A doua oprire în gradient

Adăugați a doua oprire de gradient la marcajul de 31% și schimbați-i culoarea la #a84321.

• Poziția: 31
• Culoare: #a84321

A treia oprire în gradient

Setați a treia oprire a gradientului la 51% și schimbați culoarea la #ffc99b.

• Poziția: 51
• Culoare: #ffc99b

Al patrulea gradient oprire

Setați a patra oprire de gradient la 63% și schimbați culoarea la #ffc99b.

• Poziția: 63
• Culoare: #ffc99b

A cincea oprire în gradient

Setați a cincea oprire de gradient la marcajul de 78% și schimbați-i culoarea la #ffb67f.

• Poziția: 78
• Culoare: #ffb67f

Setări de gradient

Pentru setările Gradient , schimbați Tipul în Circular și Poziția în Centru. Activați Repeat Gradient, schimbați Unitatea în pixeli și activați Plasați Gradient deasupra imaginii de fundal.

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

Forma circulară de fundal doi

A doua formă circulară de fundal va include cinci opriri de gradient. Va afișa o parte dintr-un model încercuit dintr-un colț.

Prima oprire în gradient

Pentru prima oprire a gradului, setați-o la 31% și schimbați culoarea la #a84321.

• Poziția: 31
• Culoare: #a84321

A doua oprire în gradient

Plasați al doilea Gradient Stop la 51% și schimbați culoarea la #ffb482.

• Poziția: 51
• Culoare: #ffb482

A treia oprire în gradient

Plasați a treia oprire de gradient la 52% și schimbați culoarea la #ffc99b.

• Poziția: 52
• Culoare: #ffc99b

Al patrulea gradient oprire

Setați a patra oprire de gradient la 63% și schimbați culoarea la #ffc99b.

• Poziția: 63
• Culoare: #ffc99b

A cincea oprire în gradient

Setați ultimul Gradient Stop la 78% și schimbați culoarea la #ffb67f.

• Poziția: 78
• Culoare: #ffb67f

Setări de gradient

Apoi, setați ajustările gradientului . Schimbați Tipul în Circular și setați Poziția în dreapta sus. Activați Repeat Gradient, selectați Pixeli pentru unitate și activați Plasați Gradient deasupra imaginii de fundal. Închideți modulul și salvați setările.

• Tip: circular
• Poziție: Sus dreapta
• Repetare gradient: Da
• Unitate de gradient: Procent
• Plasați gradient deasupra imaginii de fundal: da

Forma circulară de fundal trei

Pentru a treia formă circulară de fundal, vom folosi cele cinci opriri de gradient cu două stivuite. Acest lucru va crea un cerc centrat.

Prima oprire în gradient

Plasați primul Gradient Stop la 7% și schimbați culoarea la #ffb482.

• Poziția: 7
• Culoare: #ffb482

A doua oprire în gradient

Plasați al doilea Gradient Stop la 51% și schimbați culoarea la #a84321.

• Poziția: 51
• Culoare: #a84321

A treia oprire în gradient

Plasați a treia oprire de gradient la 51%, peste cea de-a doua și schimbați culoarea la #ffc99b.

• Poziția: 51
• Culoare: #ffc99b

Al patrulea gradient oprire

Plasați a patra oprire de gradient la marcajul de 63% și schimbați culoarea la #ffc99b.

• Poziția: 63
• Culoare: #ffc99b

A cincea oprire în gradient

În cele din urmă, plasați ultimul Gradient Stop la marcajul de 78% și schimbați culoarea la #ffb67f.

• Poziția: 78
• Culoare: #ffb67f

Setări de gradient

În cele din urmă, schimbați Tipul de gradient în circular și Poziția în centru. Activați Repeat Gradient, selectați Procent pentru unitate și activați Plasați Gradient deasupra imaginii de fundal. Închideți setările și salvați-vă munca.

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

Forma circulară de fundal patru

Ultimul nostru exemplu folosește cinci opriri de gradient și arată un sfert dintr-un model circular.

Prima oprire în gradient

Setați primul Gradient Stop la marcajul de 51%. Le vom schimba în vh în setările noastre. Schimbați culoarea la #a84321.

• Poziția: 51
• Culoare: #a84321

A doua oprire în gradient

Plasați următorul Gradient Stop deasupra primului, la 51%. Schimbați culoarea la #ffc99b.

• Poziția: 51
• Culoare: #ffc99b

A treia oprire în gradient

Plasați a treia oprire de gradient la marcajul de 63% și schimbați-i culoarea la #ffb482.

• Poziția: 63
• Culoare: #ffb482

Al patrulea gradient oprire

Poziționați a patra oprire de gradient deasupra celei de-a treia opriri de gradient la marcajul de 63%.

• Poziția: 63
• Culoare: #ffc99b

A cincea oprire în gradient

Plasați a cincea oprire de gradient la marcajul de 78% și schimbați-i culoarea la #ffb67f.

• Poziția: 78
• Culoare: #ffb67f

Setări de gradient

În cele din urmă, schimbați Tipul în Circular și setați Poziția în dreapta jos. Activați Repeat Gradient, schimbați Unitatea la vh și activați Plasați Gradient deasupra imaginii de fundal. Închideți setările și salvați-vă munca.

• Tip: circular
• Poziție: dreapta jos
• Repetare gradient: Da
• Unitate de gradient: Înălțimea ferestrei (vh)
• Plasați gradient deasupra imaginii de fundal: da

Rezultate

Prima formă circulară de fundal

Desktop

Telefon

A doua formă circulară de fundal

Desktop

Telefon

A treia formă circulară de fundal

Desktop

Telefon

A patra formă circulară de fundal

Desktop

Telefon

Gânduri de sfârșit

Acesta este modul nostru de a folosi Divi Gradient Builder pentru a proiecta forme circulare unice de fundal. Gradient Builder este un instrument excelent pentru a crea fundaluri interesante. Formele circulare ies în evidență și adaugă un design vizual unic oricărei secțiuni sau coloane. Folosind metodele pe care le-am arătat aici, oricine poate crea modele circulare interesante în câteva minute. Vă recomand să vă jucați cu comenzile și ordinea de stivuire pentru a vedea ce puteți crea.

Vrem sa auzim de la tine. Ați folosit Divi Gradient Builder pentru a crea forme circulare de fundal? Spune-ne despre experiența ta în comentarii.