Doriți să creați modele de fundal personalizate folosind opțiunea Repetare gradient a Divi ?
Opțiunile de fundal ale Divi oferă multe modalități de a crea modele de fundal. Puteți chiar să creați modele de fundal folosind doar degrade. Opțiunea Gradient Repeat face acest lucru simplu și ușor.
În acest articol vom vedea cum să folosiți opțiunea Repetare gradient a Divi pentru a crea modele de fundal personalizate.
Să începem.
Vezi si: Divi: Cum să creați un formular de contact care apare după ce faceți clic pe un buton
Ce este repetarea gradientului
Opțiunea Gradient Repeat creează un model bazat pe Gradient Stops. Opririle de gradient sunt măsurători care determină unde apar culorile și se opresc în gradient. Divi și Gradient Builder folosesc aceste opriri pentru a crea modelul.
Ultima culoare spune gradientului unde este punctul de întrerupere în gradient. Puteți avea câte culori doriți înainte de acest punct de întrerupere.
Le Generator de gradient o va repeta apoi pentru a umple ecranul care creează modelul. Opțiunea poate fi adăugată la orice secțiune, rând, coloană sau modul și pot fi utilizate împreună.
Activați opțiunea „Gradient de fundal”.
Pentru a activa opțiunea Repetare gradient, deschideți setările secțiunii făcând clic pe pictograma roată a acesteia. Funcționează și cu rânduri, coloane și module.
Derulați până la Context . Selectați fila Fundal de gradient și faceți clic Adăugați un gradient de fundal.
Sub bara de oprire a gradientului este o setare numită Repetare gradient . Aceasta este dezactivată în mod implicit. Doar faceți clic pe el pentru a-l activa.
Gradientul se va repeta acum, creând un model bazat pe opririle de gradient și pe celelalte setări ale gradientului, cum ar fi unitatea de gradient.
Unități de gradient
Unitatea de gradient este unitatea de măsură. Aceasta specifică ce indică numerele opririlor de gradient de pe bara de gradient, care determină modul în care sunt măsurate opririle de gradient. Acest lucru afectează modelul creat de opțiunea de repetare.
Generatorul de gradient de fundal al Divi oferă 15 unități. Să ne uităm la un exemplu cu cele mai populare patru opțiuni. După cum vom vedea în exemplele noastre, rezultatul se va schimba în funcție de numărul de opriri de gradient și de setările dvs.
Procent (procent)
Procentul măsoară opririle de gradient în procente. Aceasta calculează punctele de gradient pe baza elementului părinte. Cu cât ultima cusătură gradient este mai mică, cu atât modelul creat este mai strâns. Când reglați poziția uneia dintre culori, acea culoare se mișcă în timp ce celelalte rămân pe loc.
Pixeli (px)
Pixeli măsoară numărul de pixeli pentru fiecare oprire de gradient. Acest lucru oferă gradientului un model mai mic decât majoritatea celorlalte tipuri de unități. Mutarea poziției primei sau ultimei culori schimbă poziția fiecărei culori.
Înălțimea ferestrei (vh)
Vizualizarea este zona ferestrei browserului care este vizibilă. Se măsoară separat în înălțime și lățime. Înălțimea ferestrei folosește opriri de gradient pentru a măsura procentul din înălțimea dimensiunii ferestrei. Ajustarea poziției primei sau ultimei culori afectează toate culorile.
Lățimea ferestrei (vw)
Lățimea ferestrei folosește opriri de gradient pentru a măsura procentul din lățimea dimensiunii ferestrei (sau lățimea browserului). Ajustările se modifică în funcție de lățime. Pe măsură ce ajustați numărul mai mare sau mai mic, acea culoare specifică își schimbă poziția, în timp ce celelalte rămân aceleași.
Exemple de utilizare a opțiunii „Repetare gradient”.
Citiți și: Divi: Cum să creați o tabletă cu conținut teaser care poate fi derulat
Pentru exemplele noastre, folosim secțiunea Call-to-Action din pagina de pornire a pachet gratuit de aspect pentru acupunctură disponibil în Divi.
Va trebui să facem o ajustare la prima coloană a secțiunii. Deschide-i parametrii de linie făcând clic pe pictograma sa roată.
Apoi selectați pictograma roții pentru prima coloană.
coloana unu gradient
Prima coloană are propriul gradient de fundal. Face parte din aspect. Nu vom schimba asta. Vom folosi același gradient în cele patru exemple ale noastre. Iată setările în cazul în care aveți nevoie de ele.
- Opriri de gradient:
- 0px: #f4d5b8
- 100px: rgba(244,213,184,0)
Setări de gradient
- Tip de gradient: Linear
- Poziție în gradient: 180 de grade
- Repetare gradient: NU
- Unitate de gradient: Procent
- Gradient pătrat deasupra imaginii de fundal: NR
spaţierea
Vom adăuga spațiere în stânga coloanei. Accesați fila Amenajări, derulați la spațiere și selectați pictograma tabletei pentru a deschide opțiunile dispozitivului.
Adăugați 5% umplutură din stânga pentru filele desktop și tabletă. Alegeți fila telefon și ștergeți umplutura din stânga. Lăsați Sus și Dreapta la setările lor curente.
- umplutură
- Sus: 180 px
- Stânga: 5%
- Stânga: 80px
exemplu unul
Primul nostru exemplu creează un model care se repetă în diagonală cu linii subțiri.
Acesta are trei opriri de gradient.
- Opriri de gradient:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Utilizați următoarele setări.
- Tip de gradient: Linear
- Direcția gradientului: 156 de grade
- Repetare gradient: DA
- Unitate de gradient: pixeli
- Gradient pătrat deasupra imaginii de fundal: Nr
Al doilea exemplu
Al doilea exemplu creează un model care se repetă în diagonală cu linii mai mari.
Acesta are trei opriri de gradient.
- Opriri de gradient:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
Pentru setările de gradient,
- Tip de gradient: Linear
- Direcția gradientului: 156 de grade
- Repetare gradient: DA
- Unitate de gradient: pixeli
- Gradient pătrat deasupra imaginii de fundal: NR
Exemplul trei
Al treilea exemplu creează un model circular repetat cu cercuri de dimensiuni medii.
Acesta are trei opriri de gradient.
- Se oprește gradient
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Aplicați următoarele setări de gradient
- Tip gradient: circular
- Poziție gradient: jos
- Repetare gradient: DA
- Unitate de gradient: Procent
- Gradient pătrat deasupra imaginii de fundal: NR
Exemplu 4
Al patrulea exemplu creează un model circular cu cercuri mari.
Acesta are trei opriri de gradient.
- Opriri de gradient:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
Pentru setările Gradient, modificați după cum urmează:
- Tip gradient: circular
- Poziție gradient: Centru
- Repetare gradient: DA
- Unitate de gradient: Procent
- Gradient pătrat deasupra imaginii de fundal: Nr
Descărcați DIVI acum!!!
Concluzie
Aceasta este privirea noastră despre cum să folosim opțiunea pentru Repetare gradient de la Divi pentru a crea fundaluri personalizate. Multe ajustări ale setărilor de gradient afectează designul gradientului.
Gradient Repeat funcționează bine cu toate aceste modificări pentru a crea cu ușurință modele de fundal personalizate interesante.
Vă recomandăm să încercați exemplele pe care le-am oferit aici și să faceți modificări pentru a vedea cum sunt afectați gradienții și să vă creați propriile gradiente de fundal personalizate.
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, consultați ghidul nostru cu privire la 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.
...
