Cum să utilizați Divi Gradient Builder pentru a amesteca mai multe culori cu gradient fără efort

Publicat: 2022-05-18

Noul Gradient Builder de la Divi este un instrument puternic care creează orice tip de fundal gradient dorit. Este ușor de utilizat și puteți adăuga mai multe culori pentru a crea degrade interesante și unice. Cu toate acestea, adăugarea mai multor culori poate necesita mai multă atenție în procesul de proiectare. În această postare, vom vedea cum să folosiți Divi Gradient Builder pentru a amesteca mai multe culori de gradient fără efort, pentru a vă ajuta să începeți să vă creați propriile gradiente multicolore.

Previzualizare mai multe culori gradient

Mai întâi, să aruncăm o privire la ceea ce vom construi în acest tutorial. Vom crea patru degrade diferite folosind același aspect.

Primul exemplu de rezultate

Al doilea exemplu de rezultate

Al treilea exemplu de rezultate

Al patrulea exemplu de rezultate

Cele mai bune practici pentru combinarea mai multor culori gradiente

Ca toate principiile de design, există câteva lucruri de care trebuie să țineți cont atunci când combinați mai multe culori gradiente. Iată câteva lucruri de reținut atunci când combinați mai multe culori gradiente pentru a obține cel mai bun aspect și senzație pentru site-ul dvs.

Concentrați-vă pe familiile de culori

Rămâneți în aceeași familie de culori în timp ce utilizați diferite nuanțe ale aceleiași culori. Acest lucru menține un contrast mai scăzut între culorile de fundal, ceea ce împiedică fundalul să devină prea distrat. Vom folosi această tehnică pentru primul nostru exemplu.

Încercați Culorile Tonate

Încercați diferite nuanțe de culori atenuate cu același nivel. Acest lucru vă oferă mai multă culoare, păstrând contrastul dintre ele scăzut. Pastelurile sunt un bun exemplu în acest sens. Acest lucru oferă fundalului dvs. mai multe nuanțe de culoare fără ca acesta să distrage atenția de la primul plan. Vom folosi această metodă în al doilea exemplu.

Prioritizează lizibilitatea

Prioritizează întotdeauna lizibilitatea în designul tău. Când proiectați culori și modele cu degrade, asigurați-vă că conținutul este întotdeauna lizibil. O modalitate de a face acest lucru este să împingeți gradientul într-o parte a ecranului. Acest lucru vă permite să proiectați un gradient care să iasă în evidență fără a sta în calea conținutului. Vom folosi această metodă pentru al treilea exemplu.

Utilizați degrade intersectați și amestecați

Combinați degradeuri care se intersectează cu degrade amestecați pentru a crea linii dure și tonuri moi. Acest lucru poate crea modele interesante fără a vă împiedica conținutul. Încercați diferite direcții și puncte de oprire în gradient pentru a vedea ce funcționează cel mai bine pentru aspectul dvs. Utilizați aceste setări pentru a crea cercuri, linii dure și multe altele. Vom folosi această metodă și pentru al treilea exemplu.

Utilizați diferite tipuri de gradient

Experimentați cu diferite tipuri de gradient pentru a obține rezultate unice. De exemplu, conic este un tip de gradient excelent pentru a crea un aspect unic cu diferite culori de gradient. Vom folosi conica în al patrulea exemplu.

Nu folosiți prea multe culori

Nu folosi mai multe culori doar de dragul de a avea mai multe culori. Două până la trei culori sunt de obicei ideale, dar poți folosi mai multe dacă ești atent. Când folosiți și mai multe culori, păstrați-le cât mai asemănătoare posibil, astfel încât să devină nuanțe, mai degrabă decât contraste puternice.

Nu alegeți aleatoriu culorile

Folosiți culori care funcționează bine cu conținutul și site-ul dvs. Acest lucru nu numai că vă menține conținutul lizibil, dar arată și că aparține site-ului.

Ține minte UX

Luați în considerare întotdeauna experiența utilizatorului. Verificați gradientul cu conținut peste el pentru a vedea cât de bine funcționează. Puneți mai mulți utilizatori să se uite la conținut și gradient pentru a vă asigura că funcționează bine pentru ei.

Testați-vă gradienții

Încercați mai multe tipuri și culori de gradienți cu testarea a/b pentru a vedea ce obține cele mai bune rezultate.

Exemple de culori gradient multiple

Acum, să ne uităm la câteva exemple de Gradient Builder. Pentru aceste exemple, am modificat eroul din pagina Despre din pachetul gratuit de amenajare a podelei care este disponibil în Divi. I-am dat o nouă culoare de fundal, #6294d1, și o nouă culoare pentru buton, #c1fff4.

Culoare de fundal: #6294d1
Culoarea butonului: #c1fff4

Exemple Divi Gradient Builder

Cum să creați mai multe culori gradient cu Divi Gradient Builder

Mai întâi, să vedem cum să facem ajustările în Divi Gradient Builder. Vom adăuga gradientul pe fundalul unei secțiuni. Pentru a începe, faceți clic pe pictograma de setări a secțiunii .

Cum să creați mai multe degrade cu Divi Gradient Builder

Apoi, derulați în jos la Fundal . Selectați fila Gradient de fundal și faceți clic pe Adăugare gradient de fundal .

Cum să creați mai multe degrade cu Divi Gradient Builder

Gradientul începe cu două culori. Selectați degradeurile din bara Gradient Stops pentru a le schimba culorile și trageți-le într-o nouă poziție de pornire. Adăugați câte degrade doriți. Puteți să adăugați mai multe, să le ștergeți, să le editați etc.

Cum să creați mai multe degrade cu Divi Gradient Builder

Reglați Tipul , Direcția , Repetarea , Unitatea și dacă doriți sau nu acest lucru peste imaginea de fundal pentru a obține designul dorit.

Cum să creați mai multe degrade cu Divi Gradient Builder

Pentru o prezentare detaliată a Divi Gradient Builder, consultați articolul Introducerea Advanced Gradient Builder pentru Divi.

Culori gradient multiple Exemplul unu

Pentru primul nostru exemplu, vom crea patru opriri de gradient. Deschideți fila Gradient de fundal și selectați primul gradient . Lăsați Poziția Gradientului la 0% și schimbați Culoarea Gradientului la #6294d1.

Poziția primului punct oprește gradient: 0%
Culoare: #6294d1

Divi Gradient Builder Exemplul unu

Apoi, adăugați o nouă oprire de culoare făcând clic pe bara Gradient Stop. Mutați-i Poziția Gradientului la 29% și schimbați-i Culoarea la #b5bfd1,

Gradient Stops Poziția al doilea punct: 29%
Culoare: #b5bfd1

Divi Gradient Builder Exemplul unu

Apoi, adăugați a treia oprire de gradient și mutați-i Poziția la 84%. Schimbați-i culoarea la #8eacd1.

Gradient Stops Poziția al treilea punct: 84%
Culoare: #8eacd1

Divi Gradient Builder Exemplul unu

În cele din urmă, schimbați culoarea celei de-a patra opriri de gradient la #b5bfd1. Vom lăsa această Poziție Gradient la 100%.

Poziția al patrulea punct se oprește cu gradient: 100%
Culoare: #b5bfd1

Divi Gradient Builder Exemplul unu

În continuare, vom ajusta setările gradientului. Schimbați direcția la 225 de grade. Lăsați restul setărilor la valorile implicite. Voi include aceste setări aici, astfel încât să le puteți vedea. Acum puteți închide setările modulului și vă puteți salva munca.

Tip: Linear
Direcție: 225 de grade
Repetare gradient: Nu
Unitate de gradient: Procent
Plasați gradient deasupra imaginii de fundal: nr

Divi Gradient Builder Exemplul unu

Culori gradient multiple Exemplul doi

Pentru al doilea exemplu, vom crea trei opriri de gradient. Deschideți setările Gradient de fundal și schimbați Culoarea primei opriri de gradient la #bffffc. Lăsați poziția sa la 0%.

Prima poziție de oprire a gradientului: 0%
Culoare: #bffffc

Divi Gradient Builder Exemplul doi

Adăugați o nouă oprire de gradient și mutați-i Poziția la 42%. Schimbați-i culoarea la #bbc7f9.

A doua poziție de oprire a gradientului: 42%
Culoare: #bbc7f9

Divi Gradient Builder Exemplul doi

Apoi, schimbați culoarea celei de-a treia opriri de gradient la #adbdd1. Vom lăsa Poziția Gradientului la 100%.

A treia poziție de oprire a gradientului: 100%
Culoare: #adbdd1

Divi Gradient Builder Exemplul doi

Apoi, schimbați Tipul de gradient în Circular. Lăsați restul setărilor la valorile implicite. Acest lucru creează un punct fierbinte în centrul secțiunii. Închideți setările și salvați-vă munca.

Tip gradient: circular

Divi Gradient Builder Exemplul doi

Culori gradient multiple Exemplul trei

Pentru al treilea exemplu, vom folosi trei opriri de gradient pentru a ne construi gradientul. Mutați Poziția pentru primul gradient la 15% și schimbați-i culoarea la #afc3ed.

Prima poziție de oprire a gradientului: 15%
Culoare: #afc3ed

Divi Gradient Builder Exemplul trei

Apoi, mutați a doua oprire a gradientului la 33% și schimbați-i culoarea la #adbdd1.

A doua poziție de oprire a gradientului: 33%
Culoare: #bffffc

Divi Gradient Builder Exemplul trei

Apoi, mutați a treia oprire de gradient la 33%, direct deasupra celei de-a doua opriri de gradient și schimbați-i culoarea la #adbdd1. Va arăta ca și cum ați avea două degrade pe bara Gradient Stop.

A treia poziție de oprire în gradient: 33%
Culoare: #adbdd1

Divi Gradient Builder Exemplul trei

Acesta va avea un arc interesant pe care îl vom crea cu setările. Schimbați tipul de gradient la circular și poziția gradient la dreapta. Închideți setările și salvați-vă munca.

Tip: circular
Poziție: dreapta

Divi Gradient Builder Exemplul trei

Culori gradient multiple Exemplul patru

Al patrulea exemplu include cinci opriri de gradient. Pentru prima oprire a gradientului , schimbați culoarea la #878ebc. Lăsați-l pe acesta la 0% pentru Poziție.

Prima poziție de oprire a gradientului: 0%
Culoare: #878ebc