Doriți să dați forme imaginilor dvs. folosind generatorul de gradient? Divi ?
Măștile de imagine sunt adesea folosite pentru a adăuga forme interesante imaginilor. Ele permit imaginii să vadă prin formă, oferind paginii un element de design unic.
Cu Generator de gradient de Divi, nu trebuie neapărat să folosiți măști pentru a crea forme. În schimb, puteți utiliza Se oprește gradient și parametrii pentru a le crea!
În acest articol vom vedea cum să vă înfrumusețați imaginile cu Gradient Builder of Divi pentru a vă ajuta să adăugați modele unice imaginilor dvs.
Să începem.
studiu
Mai întâi, să vedem ce vom crea în acest tutorial pe diferite dimensiuni de ecran.
Primul exemplu – Forma circulară a imaginii
Calculator desktop
tabletă
Telefon
Al doilea exemplu – Forma liniară a imaginii
Birou
tabletă
Telefon
Al treilea exemplu – Forma eliptică a imaginii
Calculator desktop
tabletă
Telefon
Al patrulea exemplu – Forma conică a imaginii
Calculator desktop
tabletă
Telefon
Design layout cu Divi
Să începem prin a crea aspectul pe care îl vom folosi în toate exemplele. Acest aspect poate fi folosit ca o secțiune erou.
Acesta va include un titlu și o descriere pe o parte și imaginea pe cealaltă. Vom folosi apoi acest aspect și imagine pentru exemple.
Personalizați secțiunea
Mai întâi, creați o nouă pagină Divi și personalizați secțiunea. Deschideți setările secțiunii și modificați culoare fundal pentru #f0f3fb.
- Fundal: #f0f3fb
Apoi accesați fila Amenajări și modificați setările de spațiere după cum urmează:.
- Umplutură (sus și jos): 10%
Adăugați linie
Apoi adăugați a linie cu structura coloanei de mai jos.
Accesați parametrii de linie, în tab Amenajări, navigați la opțiune dimensionarea și modificați parametrii de dimensionare.
- Utilizați lățimea jgheab personalizată: DA
- Lățimea maximă: 1 px
Setările primei coloane
În filă Conţinut al rândului, deschideți setările primei coloane a rândului, accesați fila Amenajări. Modificați spațierea după cum urmează.
- Umplutură (stânga și dreapta): 9% stânga, dreapta
Parametrii primului modul Text
Apoi adăugați a Modul text spre coloana din stânga.
selecta Rubrica 4 pentru textul de cuprins și adăugați cuprins a corpului tău.
- Text: „Bine ați venit la BlogPasCher”
Apoi accesați fila Amenajări și modificați setările titlului.
- Font: Montserrat
- Greutatea fontului: aldine
- Stil: TT
- Culoare text: #1d4eff
- Dimensiune text: desktop 16px, tabletă 14px, telefon 12px
- Spațiere între litere: 0,3 em
- Înălțimea liniei: 1,6 em
Derulați până la spațiere și modificați marginea de jos.
- Marja (jos): 0px
Parametrii celui de-al doilea modul Text
Apoi adăugați a Modul text sub primul.
Setați tipul de text la „Titlul 1” și adăugați cuprins a corpului tău.
- Conținut: „Planifică-ți viitorul financiar”
Apoi selectați fila Amenajări și modificați opțiunile titlului.
- Font: Montserrat
- Greutatea fontului: aldine
- Culoare text: #0f1154
- Dimensiune: desktop 80px, tabletă 40px, telefon 24px
- Înălțimea rândului: 110%
Parametrii celui de-al treilea modul Text
Apoi adăugați a Modul text sub al doilea.
Lăsați tipul de text la „Paragraf” și adăugați conținutul corpului.
- Corp: conținut
Apoi accesați fila Concepție și modificați setările textului.
- Font text: Roboto
- Greutatea fontului: medie
- Culoare text: #000000
- Dimensiunea textului: 18 px (desktop și tabletă), 14 px (telefon)
- Înălțimea liniei: 180%
În cele din urmă, derulați în jos la spaţierea și setați marginea de jos. Închideți setările modulului.
- Marja (jos): 0px
Setările modulului de imagine
Acum adăugați un Modul de imagine la coloana din dreapta.
În primul rând, eliminați imaginea falsă făcând clic pe coșul de gunoi sau pe pictograma de resetare de deasupra imaginii.
Apoi derulați în jos Bakground , selectați fila Imagine și adaugă imaginea ta. Lăsați toate setările de imagine la valorile implicite. Imaginea nu va arăta prea multe la început. Vom rezolva asta pe măsură ce mergem.
Apoi selectați fila Stil și derulați la spațiere.
- Marja (desktop): -10% (sus), -30% (stânga), 10% (dreapta)
- Umplutură (sus și jos): 300px
- Marja (tabletă/telefon): 0% (sus), 0% (stânga și dreapta)
- Umplutură (telefon): 150 px (sus și jos)
Exemple de imagini modelate cu Divi's Gradient Builder
Primul exemplu – formă circulară
Primul nostru exemplu oferă imaginii o formă circulară cu o gaură în centru.
Deschideți setările modulului Imagine și derulați în jos la Context . Selectează Fila Gradient de fundal și setați 6 opriri de gradient:
- Prima oprire: 0%, #f0f3fb
- Al doilea: 45%, #f0f3fb
- Al treilea (peste secundă): 45%, rgba(41,196,169,0)
- Al patrulea: 69%, rgba(250,255,214,0)
- Al cincilea (peste al patrulea): 69%, #f0f3fb
- Al șaselea: 100%, #f0f3fb
- Tip: rotund
- Poziție: Centru
- Unitate: procente
- Gradient pătrat deasupra imaginii de fundal: DA
Al doilea exemplu – formă liniară
Iată o previzualizare a celui de-al doilea exemplu de formă de imagine. Acest exemplu plasează linii diagonale peste imagine.
Deschideți setările, derulați în jos la fundal și selectațiFila Gradient de fundal. Adăugați patru opriri de gradient:
- Prima oprire: 0%, #f0f3fb
- Al doilea: 5%, #f0f3fb
- Al treilea (peste secundă): 5%, rgba(175,175,175,0)
- Al patrulea: 13%, rgba(41,196,169,0)
- Tip: Linear
- Direcție: 150 de grade
- Repetare gradient: DA
- Unitate de gradient: Procent
- Gradient pătrat deasupra imaginii de fundal: DA
Al treilea exemplu – formă eliptică
Acesta este al treilea exemplu de formă de imagine. Aceasta folosește o formă eliptică.
Deschideți setările modulului Imagine și derulați în jos la Context . Selectați fila Gradient de fundal și creați patru opriri de gradient:
- Prima oprire: 0%, #f0f3fb
- Al doilea: 9%, #f0f3fb
- Al treilea (peste secundă): 9%, rgba(175,175,175,0)
- Al patrulea: 21%, rgba(41,196,169,0)
- Tip: eliptică
- Poziție gradient: sus stânga
- Repetare gradient: DA
- Unitate de gradient: Procent
- Gradient pătrat Imaginea de deasupra fundalului: DA
Al patrulea exemplu – formă conică
Al patrulea exemplu folosește "Conic" pentru a crea o singură formă de imagine.
Deschideți setările modulului de imagine, derulați în jos la Context și selectați fila Imagine de fundal. Acesta are 5 opriri de gradient:
- Prima oprire: 23%, #f0f3fb
- Al doilea: 35%, #f0f3fb
- Al treilea (peste secundă): 35%, rgba(41,196,169,0)
- Al patrulea: 65%, rgba(250,255,214,0)
- Al cincilea (peste al patrulea): 65%, #f0f3fb
- Tip: Conic
- Direcție gradient: 180 de grade
- Poziție gradient: jos
- Unitate: Procent
- Gradient pătrat deasupra imaginii de fundal: DA
Rezultate finale
Toate layout-urile au mers bine. Formele imaginilor ies în evidență, iar imaginile sunt întotdeauna ușor de înțeles. Toate sunt receptive, așa că arată grozav pe orice dispozitiv.
Primul exemplu – Forma circulară a imaginii
Calculator desktop
Descărcați DIVI acum!!!
tabletă
Telefon
Al doilea exemplu – Forma liniară a imaginii
Calculator desktop
Descărcați DIVI acum!!!
tabletă
Telefon
Al treilea exemplu – Forma eliptică a imaginii
Calculator desktop
Descărcați DIVI acum!!!
tabletă
Telefon
Al patrulea exemplu – Forma conică a imaginii
Calculator desktop
Descărcați DIVI acum!!!
tabletă
Telefon
Concluzie
Acesta este aspectul nostru despre cum să vă modelați imaginile cu Divi's Gradient Builder.
Gradient Builder poate crea forme de imagine interesante. Jocul cu opriri de gradient, încercarea diferitelor tipuri de gradienți și activarea repetarea gradientului sunt modalități excelente de a crea modele noi.
Asigurați-vă că vă verificați desenele pe toate dimensiunile ecranului și faceți ajustări dacă este necesar.
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.
...
