Doriți să utilizați Gradient Builder de Divi dar nu știi ce tip de gradient să alegi?
Tipurile de gradient fac parte din nou Divi Generator de gradient . Noi tipuri de gradienți Divi vă permit să adăugați diferite forme și culori fundalurilor dvs.
În acest articol, vom compara aceste tipuri de degrade și vă vom arăta cum să le folosiți pentru a crea fundaluri unice!
Să începem.
Care 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 gradienți din care puteți alege:
- Liniar
- circulară
- Eliptic
- Conic
Fiecare dintre tipuri afișează gradientul în mod diferit. Acestea sunt folosite pentru a modela gradientul care urmează să fie afișat ca un model de culoare liniar, într-un cerc, elipsă sau con. Le vom vedea în detaliu în exemplele noastre.
Tipurile de gradient sunt, de asemenea, afectate de alte comenzi, cum ar fi poziția, dacă se repetă sau nu, unitatea de măsură pentru bara de defilare a gradientului și plasarea gradientului deasupra fundalului.
Fiecare ajustare poate avea un impact mic sau mare asupra gradientului. Gradientul poate fi subtil sau iese î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 de gradient standard pe care îl veți vedea pe web. Următoarele două vor fi puțin mai experimentale, doar pentru a vedea ce puteți face cu tipurile de gradienți.
Exemple de tipuri de gradient
Pentru exemple de tip gradient, folosim secțiunea Hero a paginii de pornire a Pachet și mic dejun gratuit disponibil în Divi. Această secțiune are deja un gradient, dar o vom înlocui și vom face câteva experimente.
Putem fie elimina gradientul de fundal original, fie îl putem modifica. Rezultatele sunt aceleași. Pentru simplitate, îl vom modifica.
Am personalizat textul titlului schimbându-l din negru în alb.
Tip de gradient liniar
Citiți și: Divi: Cum să utilizați amestecarea modelelor pe imaginile de fundal
Gradienții liniari afișează gradientul ca și cum ar fi răspândit pe pagină.
Primul exemplu de tip gradient liniar
Iată o previzualizare a primului 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. cel premier este rgba(92,158,82,0.76) la poziția 0%. cel al doilea este rgba(0,10,4,0.76) la poziția de 97%.
- Opriri de gradient:
- 0%: rgba(92,158,82,0.76)
- 97%: rgba(0,10,4,0.76)
Apoi schimbați Tip gradient la Linear și setați Direcţie peste 131 de grade. că el nu repeta. Seteazaunitate pe Procent. Plasați gradientul deasupra imaginii de fundal.
- Tip de gradient: Linear
- Direcția gradientului: 131 de grade
- Repetare gradient: NU
- Unitate de gradient: Procent
- Gradient pătrat deasupra imaginii de fundal: DA
Al doilea exemplu de tip gradient liniar
Iată o previzualizare a celui de-al doilea exemplu de gradient liniar. Funcționează ca prima, 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. cel premier este rgba(18,76,41,0.76) la poziția 13%. cel 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%.
- Opriri de gradient:
- 13%: rgba(18,76,41,0.76)
- 13%: rgba(92,158,82,0.76)
- 34%: rgba(18,76,41,0.76)
Apoi setați Tip gradient la Linear și setați Direcţie peste 90 de grade. că el nu repeta . Schimbaunitate procent. Așezați-l deasupra imaginii de fundal.
- Tip de gradient: Linear
- Direcția gradientului: 90 de grade
- Repetare gradient: NU
- Unitate de gradient: Procent
- Gradient pătrat deasupra imaginii de fundal: DA
Al treilea exemplu de tip gradient liniar
Al treilea exemplu plasează o linie de culoare deschisă în diagonală în colțul din dreapta sus, atingând o linie de culoare mai închisă.
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%. The a treia culoare este rgba(18,76,41,0.76) la poziția de 32%.
- Opriri de gradient:
- 13%: rgba(92,158,82,0.76)
- 23%: rgba(92,158,82,0.76)
- 32%: rgba(18,76,41,0.76)
Definiți Tip gradient la Linear în a direcţie de 209 grade. Născut în nu repeta și setațiunitate pe Procent. Plasați gradientul deasupra imaginii de fundal.
- Tip de gradient: Linear
- Direcția gradientului: 209 de grade
- Repetare gradient: NU
- Unitate de gradient: Procent
- Gradient pătrat deasupra imaginii de fundal: DA
Tip de gradient circular
Tipul de gradient circular creează un cerc cu culorile.
Primul exemplu de tip 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. cel premier este rgba(92,158,82,0.76) la poziția 0%. cel al doilea este rgba(0,10,4,0.76) la poziția de 62%.
- Opriri de gradient:
- 0%: rgba(92,158,82,0.76)
- 62%: rgba(0,10,4,0.76)
Definiți Tip gradient pe Circular. Centrați direcţie . Asigură-te că el nu repeta , schimbaunitate ca procent și plasați-l deasupra imaginii de fundal.
- Tip gradient: circular
- Poziție gradient: Centru
- Repetare gradient: NU
- Unitate de gradient: Procent
- Gradient pătrat deasupra imaginii de fundal: DA
Al doilea exemplu de tip gradient circular
Acest gradient plasează o margine circulară clară în centrul ecranului.
Are patru culori. Două culori sunt suprapuse. cel premier este rgba(18,76,41,0.76) la poziția 13%. cel 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 51%, deasupra culorii 3.
- Opriri de gradient:
- 13%: rgba(18,76,41,0.76)
- 33%: rgba(92,158,82,0.76)
- 51%: rgba(92,158,82,0.76)
- 51%: rgba(18,76,41,0.76)
Definiți Tip gradient la Circular și plasați Direcţie în colțul din stânga sus. Asigură-te că el nu repeta , schimba unitate ca procent și plasați-l deasupra imaginii de fundal.
- Tip gradient: circular
- Poziție gradient: sus stânga
- Repetare gradient: NU
- Unitate de gradient: Procent
- Gradient pătrat deasupra imaginii de fundal: DA
Al treilea exemplu de tip gradient circular
Acest exemplu plasează mai multe cercuri deschise în cea mai închisă culoare, începând cu mijlocul cercului.
Acesta stivuiește și două culori într-o anumită ordine pentru a realiza acest design. The premiera culoarea 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%. The treilea culoarea se suprapune pe a doua culoare. Acesta 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%.
- Opriri de gradient:
- 13%: rgba(18,76,41,0.76)
- 44%: rgba(18,76,41,0.76)
- 44%: rgba(92,158,82,0.76)
- 51%: rgba(92,158,82,0.76)
schimba-l tip gradient în circulară. Așezați direcţie în partea de jos. repeta Aceasta. Seteazaunitate pe Procent și plasați gradientul deasupra imaginii de fundal.
- Tip gradient: circular
- Poziție gradient: jos
- Repetare gradient: DA
- Unitate de gradient: Procent
- Gradient pătrat deasupra imaginii de fundal: DA
Tip gradient eliptic
Gradienții eliptici plasează culorile sub forma unei elipse.
Primul exemplu de tip gradient eliptic
Primul nostru exemplu eliptic plasează o elipsă de culoare deschisă în centrul ecranului cu o culoare mai închisă în jurul ei.
Acesta are două culori. cel premier este rgba(92,158,82,0.76) la poziția 0%. cel al doilea este rgba(0,10,4,0.76) la poziția de 50%.
- Opriri de gradient:
- 0%: rgba(92,158,82,0.76)
- 50%: rgba(0,10,4,0.76)
schimba-l tip gradient în eliptică. Seteaza direcţie pe Centru. Asigurați-vă că acesta nu repeta , Ajusteazăunitate pe Procent și plasați-l deasupra imaginii de fundal.
- Tip gradient: eliptic
- Poziție gradient: Centru
- Repetare gradient: NU
- Unitate de gradient: Procent
- Gradient pătrat deasupra imaginii de fundal: DA
Al doilea exemplu de tip gradient eliptic
Al doilea exemplu plasează multe linii circulare subțiri de-a lungul gradientului.
Are doua culori. cel premier este rgba(92,158,82,0.76) la poziția 34pt. cel al doilea este rgba(0,10,4,0.76) la poziția 39pt.
- Opriri de gradient:
- 34 pt: rgba(92,158,82,0.76)
- 39 pt: rgba(0,10,4,0.76)
schimba-l Tip gradient la Eliptic și ajustați Direcţie pe stânga. Aveți asta la repeta. Schimbaunitate în puncte. Așezați-l deasupra imaginii de fundal.
- Tip gradient: eliptic
- Poziție gradient: dreapta
- Repetare gradient: DA
- Unitate de gradient: puncte (pt)
- Gradient pătrat deasupra imaginii de fundal: DA
Al treilea exemplu de tip gradient eliptic
Al treilea exemplu plasează o mulțime de semicercuri în gradient.
Acesta are două culori. cel premier este rgba(32,68,35,0.73) la poziția 34vmin. cel al doilea este rgba(0,10,4,0.76) la poziția 39vmin.
- Opriri de gradient:
- 34vmin: rgba(32, 68, 35, 0.73)
- 39vmin: rgba(0,10,4,0.76)
schimba-l Tip gradient la Eliptic și ajustați Direcţie la inaltime. Aveți asta la repeta. SchimbaUnité în Viewport Minimum. Așezați-l deasupra imaginii de fundal.
- Tip gradient: eliptic
- Poziție gradient: Sus
- Repetare gradient: DA
- Unitate de gradient: Viewport Minimum (vmin)
- Gradient pătrat deasupra imaginii de fundal: DA
Tip de gradient conic
Vezi si: Divi: Cum să creați tranziții de fundal între elemente
Tipul de gradient conic afișează gradientul ca un con, ca și cum conul ar fi văzut de sus.
Primul exemplu de tip 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. cel premier este rgba(92,158,82,0.76) la poziția 0%. cel al doilea este rgba(0,10,4,0.76) la poziția de 50%.
- Opriri de gradient:
- 0%: rgba(92,158,82,0.76)
- 50%: rgba(0,10,4,0.76)
schimba-l tip gradient în conic. Ajustează direcţie peste 221 de grade. Centrați poziţie et nu o repeta . Plasați gradientul deasupra imaginii.
- Tip de gradient: conic
- Direcția gradientului: 221 de grade
- Poziție: Centru
- Repetare gradient: NU
- Gradient pătrat deasupra imaginii de fundal: DA
Al doilea exemplu de tip gradient conic
Acest exemplu este similar cu cel anterior, dar plasează linia centrală în sus.
Acesta are patru culori. cel premier 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%. The al patrulea culoarea este rgba(38,86,26,0.68) la poziția de 85%.
- Opriri de gradient:
- 7%: rgba(20,40,20,0.76)
- 24%: rgba(30,73,25,0.68)
- 65%: rgba(103,132,30,0.68)
- 85%: rgba(38,86,26,0.68)
Definiți tip gradient pe conic și cel direcţie la 0 grade. Centrați poziţie . Născut în nu repeta și plasați-l deasupra imaginii.
- Tip de gradient: conic
- Direcția gradientului: 0 de grade
- Poziție: Centru
- Repetare gradient: NU
- Gradient pătrat deasupra imaginii de fundal: DA
Al treilea exemplu de tip gradient conic
Ultimul nostru exemplu plasează o explozie de linii din centrul de sus al gradientului spre exterior în toate direcțiile.
Acesta are două culori. cel premier este rgba(30,73,25,0.68) la poziția 5deg. cel al doilea este rgba(20,40,20,0.76) la poziția 7deg.
- Opriri de gradient:
- 5deg: rgba(30,73,25,0.68)
- 7deg: rgba(20,40,20,0.76)
Seteaza Tip gradient pe Conic și cel Direcţie la 221 de grade. Așezați poziţie în partea de sus. Repeta acesta și plasați-l deasupra imaginii de fundal.
- Tip de gradient: conic
- Direcția gradientului: 221 de grade
- Poziție: Top
- Repetare gradient: DA
- Gradient pătrat deasupra imaginii de fundal: DA
Descărcați DIVI acum!!!
Concluzie
Aceasta este privirea noastră asupra comparației tipurilor de gradient din Divi's Gradient Builder.
După cum puteți vedea din aceste exemple, setările sunt simple, dar oricare dintre ele poate face o diferență majoră în designul gradientului.
Pentru cele mai bune rezultate, experimentați cu tipuri 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.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.
Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
