Compararea tipurilor de gradient din Divi's Gradient Builder

Tipurile de gradient fac parte din noul Divi Gradient Builder. Noile tipuri de gradient Divi vă oferă posibilitatea de a adăuga diferite forme și culori fundalurilor dvs. În această postare, vom compara aceste tipuri de gradient și vă vom arăta cum să le folosiți pentru a crea fundaluri unice!

Să începem.

Ce sunt tipurile de gradient Divi?

Noul Gradient Builder de la Divi adaugă câteva caracteristici noi de gradient care includ tipuri de gradient. Există patru tipuri de gradient din care puteți alege:

• Liniar
• Circular
• Eliptic
• Conic

Fiecare dintre tipuri afișează gradientul în mod diferit. Sunt folosite pentru a modela gradientul pentru a fi afișat ca un model de culoare liniar, într-un cerc, o elipsă sau un con. Le vom vedea în detaliu în exemplele noastre.

Tipurile de gradient sunt, de asemenea, afectate de celelalte comenzi, cum ar fi poziția, dacă se repetă sau nu, unitatea de măsură pentru bara glisantă pentru gradient și plasarea gradientului deasupra fundalului.

Fiecare ajustare poate avea un impact mic sau mare asupra gradientului. Gradientul poate fi subtil sau poate ieși în evidență. Se pot face modificări mici sau mari cu o singură ajustare.

Având în vedere acest lucru, să ne uităm la câteva exemple de gradienți folosind fiecare dintre tipurile de gradient. Vom arăta trei exemple pentru fiecare tip de gradient. Primul va fi un tip standard de gradient pe care l-ați vedea pe web. Următoarele două vor fi puțin mai experimentale, doar pentru a vedea ce se poate face cu tipurile de gradient.

Exemple de tipuri de gradient

Pentru exemplele de tip gradient, folosesc secțiunea eroi din pagina de destinație a pachetului gratuit de amenajare Bed and Breakfast, care este disponibil în Divi. Această secțiune are deja un gradient, dar o vom înlocui și vom face câteva experimente. Putem fie șterge gradientul original de fundal, fie îl putem modifica. Rezultatele sunt aceleași. Pentru simplitate, o voi modifica.

Am personalizat textul titlului, schimbându-l din negru în alb.

Tip de gradient liniar

Gradienții liniari afișează gradientul ca și cum ar fi întinși pe pagină.

Primul exemplu de gradient liniar

Iată o privire la primul nostru exemplu. Afișează o culoare mai deschisă în stânga ecranului și o culoare mai închisă în dreapta, cu o tranziție lină între ele.

Pentru a crea acest exemplu, adăugați două culori. Primul este rgba(92,158,82,0.76) la poziția 0%. Al doilea este rgba(0,10,4,0.76) la poziția de 97%.

• Culoare 1: rgba(92,158,82,0,76) (la poziția 0%)
• Culoare 2: rgba(0,10,4,0.76) (la poziția 97%)

Apoi, schimbați Tipul de gradient la Linear și setați Direcția la 131 de grade. Să nu se repete . Setați Unitatea la Procent. Plasați gradientul deasupra imaginii de fundal.

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

Al doilea exemplu de gradient liniar

Iată o privire la al doilea exemplu de gradient liniar. Funcționează ca primul, dar are o oprire grea în stânga unde o nuanță mai închisă preia.

Pentru a crea acesta, adăugați trei opriri de gradient. Primul este rgba(18,76,41,0.76) la poziția de 13%. Al doilea este rgba(92,158,82,0.76) la poziția de 13%. Culoarea 3 este rgba(18,76,41,0.76) la poziția de 34%.

• Culoare 1: rgba(18,76,41,0.76) (la poziția de 13%)
• Culoare 2: rgba(92,158,82,0,76) (la poziția de 13%)
• Culoare 3: rgba(18,76,41,0.76) (la poziția de 34%)

Apoi, setați Tipul de gradient la Linear și setați Direcția la 90 de grade. Să nu se repete . Schimbați unitatea în Procent. Așezați-l deasupra imaginii de fundal.

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

Al treilea exemplu de gradient liniar

Al treilea exemplu plasează o linie deschisă de culoare în diagonală în colțul din dreapta sus, atingând o linie de culoare mai întunecată.

Acesta are trei culori. Culoarea 1 este rgba(92,158,82,0,76) la poziția de 13%. Culoarea 2 este rgba(92,158,82,0,76) la poziția de 23%. A treia culoare este rgba(18,76,41,0.76) la poziția de 32%.

• Culoare 1: rgba(92,158,82,0,76) (la poziția de 13%)
• Culoare 2: rgba(92,158,82,0,76) (la poziția de 23%)
• Culoare 3: rgba(18,76,41,0.76) (la poziția de 32%)

Setați tipul de gradient la liniar la o direcție de 209 de grade. Nu se repeta și setați Unitatea la Procent. Plasați gradientul deasupra imaginii de fundal.

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

Tip de gradient circular

Tipul de gradient circular creează un cerc cu culorile.

Primul exemplu de gradient circular

Primul nostru exemplu de gradient circular plasează o culoare deschisă în centru și o culoare mai închisă în jurul marginilor.

Acesta are 2 culori. Primul este rgba(92,158,82,0.76) la poziția 0%. Al doilea este rgba(0,10,4,0.76) la poziția de 62%.

• Culoare 1: rgba(92,158,82,0,76) (la poziția 0%)
• Culoare 2: rgba(0,10,4,0.76) (la poziția de 62%)

Setați Tipul de gradient la Circular. Centrați direcția . Nu se repeta , schimbați Unitatea în Procent și plasați-o deasupra imaginii de fundal.

• Tip gradient: circular
• Direcția: Centru
• Repet: Nu
• Unitate: procente
• Plasați gradient deasupra imaginii de fundal: da

Al doilea exemplu de gradient circular

Acest gradient plasează o margine circulară clară în centrul ecranului.

Are patru culori. Două culori sunt stivuite. Primul este rgba(18,76,41,0.76) la poziția de 13%. Al doilea este rgba(92,158,82,0.76) la poziția de 33%. Culoarea 3 este rgba(92,158,82,0,76) la poziția de 51%. Culoarea 4 este rgba (18,76,41,0,76). Este plasat la poziția de 51%, deasupra Culoarei 3.

• Culoare 1: rgba(18,76,41,0.76) (la poziția de 13%)
• Culoare 2: rgba(92,158,82,0,76) (la poziția de 33%)
• Culoare 3: rgba(92,158,82,0,76) (la poziția de 51%)
• Culoare 4: rgba(18,76,41,0.76) (la poziția de 51%)

Setați tipul de gradient la Circular și plasați direcția în stânga sus. Nu se repeta , schimbați Unitatea în Procent și plasați-o deasupra imaginii de fundal.

• Tip gradient: circular
• Direcție: Sus Stânga
• Repet: Nu
• Unitate: procente
• Plasați gradient deasupra imaginii de fundal: da

Al treilea exemplu de gradient circular

Acest exemplu plasează mai multe cercuri deschise în culoarea mai închisă, începând din mijlocul cercului.

Acesta stivuiește și două culori într-o anumită ordine pentru a obține acest design. Prima culoare este rgba(18,76,41,0.76) la poziția de 13%. Culoarea 2 este rgba(18,76,41,0.76) la poziția de 44%. A treia culoare se stivuiește deasupra celei de-a doua culori. Este rgba(92,158,82,0.76) la poziția de 44%. Culoarea 4 este rgba(92,158,82,0,76) la poziția de 51%.

• Culoare 1: rgba(18,76,41,0.76) (la poziția de 13%)
• Culoare 2: rgba(18,76,41,0.76) (la poziția de 44%)
• Culoare 3: rgba(92,158,82,0,76) (la poziția de 44%)
• Culoare 4: rgba(92,158,82,0,76) (la poziția de 51%)

Schimbați tipul de gradient la circular. Plasați direcția în partea de jos. Repetă -l pe acesta. Setați Unitatea la Procent și plasați gradientul deasupra imaginii de fundal.

• Tip gradient: circular
• Direcție: jos
• Repet: Da
• Unitate: procente
• Plasați gradient deasupra imaginii de fundal: da

Tip de gradient eliptic

Gradienții eliptici plasează culorile într-o formă de elipsă.

Primul exemplu de gradient eliptic

Primul nostru exemplu eliptic plasează o elipsă cu o culoare deschisă în centrul ecranului cu o culoare mai închisă în jurul ei.

Acesta are două culori. Primul este rgba(92,158,82,0.76) la poziția 0%. Al doilea este rgba(0,10,4,0.76) la poziția de 50%.

• Culoare 1: rgba(92,158,82,0,76) (la poziția 0%)
• Culoare 2: rgba(0,10,4,0.76) (la poziția de 50%)

Schimbați tipul de gradient la eliptic. Setați direcția în centru. Nu repeta aceasta, setați Unitatea la Procent și plasați-o deasupra imaginii de fundal.

• Tip gradient: eliptic
• Direcția: Centru
• Repet: Nu
• Unitate: procente
• Plasați gradient deasupra imaginii de fundal: da

Al doilea exemplu de gradient eliptic

Al doilea exemplu plasează o mulțime de linii circulare fine pe tot gradientul.

Are doua culori. Primul este rgba(92,158,82,0.76) la poziția 34pt. Al doilea este rgba(0,10,4,0.76) la poziția 39pt.

• Culoare 1: rgba(92,158,82,0.76) (la poziția 34pt)
• Culoare 2: rgba(0,10,4,0.76) (la poziția 39pt)

Schimbați tipul de gradient la eliptic și setați direcția la stânga. Pune-o pe aceasta de repetat . Schimbați unitatea în Puncte. Așezați-l deasupra imaginii de fundal.

• Tip gradient: eliptic
• Direcție: Stânga
• Repet: Da
• Unitate: Puncte
• Plasați gradient deasupra imaginii de fundal: da

Al treilea exemplu de gradient eliptic

Al treilea exemplu plasează o mulțime de semicercuri în gradient.

Acesta are două culori. Primul este rgba(32,68,35,0.73) la poziția 34vmin. Al doilea este rgba(0,10,4,0.76) la poziția 39vmin.

• Culoare 1: rgba(32,68,35,0.73) (la poziția 34vmin)
• Culoare 2: rgba(0,10,4,0.76) (la poziția 39vmin)

Schimbați tipul de gradient la eliptic și setați direcția în sus. Pune-o pe aceasta de repetat . Schimbați unitatea la Viewport Minimum. Așezați-l deasupra imaginii de fundal.

• Tip gradient: eliptic
• Direcție: Sus
• Repet: Da
• Unitate: Viewport Minimum
• Plasați gradient deasupra imaginii de fundal: da

Tip de gradient conic

Tipul de gradient conic afișează gradientul într-o formă de con, ca și cum conul ar fi văzut de sus.

Primul exemplu de gradient conic

Acest exemplu plasează o linie diagonală din centrul gradientului la stânga cu o culoare deschisă pe o parte și o culoare închisă pe cealaltă.

Are doua culori. Primul este rgba(92,158,82,0.76) la poziția 0%. Al doilea este rgba(0,10,4,0.76) la poziția de 50%.

• Culoare 1: rgba(92,158,82,0,76) (la poziția 0%)
• Culoare 2: rgba(0,10,4,0.76) (la poziția de 50%)

Schimbați tipul de gradient la conic. Setați direcția la 221 de grade. Centrați poziția și nu lăsați-o să se repete . Plasați gradientul deasupra imaginii.

• Tip de gradient: conic
• Direcție: 221 de grade
• Poziție: Centru
• Repet: Nu
• Plasați gradient deasupra imaginii de fundal: da

Al doilea exemplu de gradient conic

Acest exemplu este similar cu cel anterior, dar plasează linia de la centru în sus.

Acesta are patru culori. Primul este rgba(20,40,20,0.76) la poziția de 7%. Culoarea 2 este rgba(30,73,25,0.68) la poziția de 24%. Culoarea 3 este rgba(103,132,30,0.68) la poziția de 65%. A patra culoare este rgba(38,86,26,0.68) la poziția de 85%.

• Culoare 1: rgba(20,40,20,0.76) (la poziția 7%)
• Culoare 2: rgba(30,73,25,0.68) (la poziția de 24%)
• Culoare 3: rgba(103,132,30,0.68) (la poziția de 65%)
• Culoare 4: rgba(38,86,26,0.68) (la poziția de 85%)

Setați tipul de gradient la conic și direcția la 0°. Centrați Poziția . Nu lăsați-o să se repete și plasați-o deasupra imaginii.

• Tip de gradient: conic
• Direcție: 0°
• Poziție: Centru
• Repet: Nu
• Plasați gradient deasupra imaginii de fundal: da

Al treilea exemplu de gradient conic

Ultimul nostru exemplu plasează o rafală de linii din centrul de sus al gradientului spre exterior în toate direcțiile.

Acesta are două culori. Primul este rgba(30,73,25,0.68) la poziția de 5 grade. Al doilea este rgba(20,40,20,0.76) la poziția 7deg.

• Culoare 1: rgba(30,73,25,0.68) (la poziția 5deg)
• Culoare 2: rgba(20,40,20,0.76) (la poziția 7deg)

Setați eth Gradient Type la Conic și Direcția la 221deg. Plasați poziția în partea de sus. Repetă -l pe acesta și plasează-l deasupra imaginii de fundal.

• Tip de gradient: conic
• Direcție: 221 de grade
• Poziție: Top
• Repet: Da
• Plasați gradient deasupra imaginii de fundal: da

Gânduri de sfârșit

Acesta este aspectul nostru despre compararea tipurilor de gradient în Gradient Builder al Divi. După cum puteți vedea în aceste exemple, setările sunt simple, dar oricare dintre ele poate face o diferență majoră în designul gradientului. Pentru cele mai bune rezultate, încercați tipurile de gradient cu direcții și poziții diferite și activați sau dezactivați opțiunea de repetare pentru a vedea ce puteți crea.

Vrem sa auzim de la tine. Ați folosit diferite tipuri de gradient în Divi Gradient Builder? Spune-ne despre experiența ta în comentarii.