Divi: Kako koristiti "Gradient Builder" za uljepšavanje vaših slika

Želite li svojim slikama dati oblike pomoću generatora gradijenata? Divi ?

Maske slika često se koriste za dodavanje zanimljivih oblika slikama. Omogućuju da slika vidi kroz oblik, dajući stranici jedinstven element dizajna.

s Gradijent graditelj de Divi, ne morate nužno koristiti maske za stvaranje oblika. Umjesto toga, možete koristiti Gradijent zaustavljanja i parametri za njihovo stvaranje!

U ovom ćemo članku vidjeti kako uljepšati svoje slike Gradient Builderom Divi kako bismo vam pomogli dodati jedinstvene dizajne svojim slikama.

Počnimo.

pregled

Prvo, da vidimo što ćemo stvoriti u ovom vodiču na različitim veličinama zaslona.

Prvi primjer – kružni oblik slike

Stolno računalo

dajte oblike svojim slikama pomoću Divijevog generatora gradijenata

tableta

Telefon

Drugi primjer – Linearni oblik slike

Biro

tableta

Telefon

Treći primjer – Eliptični oblik slike

Stolno računalo

tableta

Telefon

Četvrti primjer – stožasti oblik slike

Stolno računalo

tableta

Telefon

Dizajn izgleda uz Divi

Započnimo stvaranjem izgleda koji ćemo koristiti u svim primjerima. Ovaj izgled može se koristiti kao odjeljak heroja.

Sadržat će naslov i opis na jednoj strani i sliku na drugoj. Zatim ćemo koristiti ovaj izgled i sliku za primjere.

Prilagodite odjeljak

Najprije izradite novu Divi stranicu i prilagodite odjeljak. Otvorite postavke odjeljka i promijenite boja pozadina za #f0f3fb.

Pozadina: #f0f3fb

Zatim idite na karticu dizajn i promijenite postavke razmaka na sljedeći način:.

Podstava (gornji i donji dio): 10%

Dodaj liniju

Zatim dodajte a linija sa strukturom stupaca ispod.

Pristupite parametrima linije, u kartici dizajn, dođite do opcije dimenzioniranje i modificirati parametre dimenzioniranja.

Koristi prilagođenu širinu oluka: DA
Maksimalna širina: 1 px

Postavke prvog stupca

U kartici Sadržaj retka, otvorite postavke prvog stupca retka, idite na karticu dizajn. Izmijenite razmak na sljedeći način.

Ispuna (lijevo i desno): 9% lijevo, desno

Parametri prvog tekstualnog modula

Zatim dodajte a Tekstualni modul u lijevi stupac.

odabrati Naslov 4 za tekst od sadržaj i dodajte sadržaj svog tijela.

Tekst: "Dobro došli u BlogPasCher"

Zatim idite na karticu dizajn i promijenite postavke naslova.

Font: Montserrat
Težina fonta: Podebljano
Stil: TT
Boja teksta: #1d4eff

Veličina teksta: stolno računalo 16px, tablet 14px, telefon 12px
Razmak između slova: 0,3 em
Visina linije: 1,6 em

Pomaknite se do Razmještanje i promijenite donju marginu.

Margina (donja): 0px

Parametri drugog tekstualnog modula

Zatim dodajte a Tekstualni modul pod prvim.

Postavite vrstu teksta na "Naslov 1" i dodajte sadržaj svog tijela.

Sadržaj: “Planirajte svoju financijsku budućnost”

Zatim odaberite karticu dizajn i izmijenite opcije naslova.

Font: Montserrat
Težina fonta: Podebljano
Boja teksta: #0f1154

Veličina: 80px stolno računalo, 40px tablet, 24px telefon
Visina reda: 110%

Parametri trećeg tekstualnog modula

Zatim dodajte a Tekstualni modul pod drugom.

Ostavite vrstu teksta na "Odlomak" i dodajte svoj sadržaj.

Tijelo: sadržaj

Zatim idite na karticu Začeće i promijenite postavke teksta.

Font teksta: Roboto
Težina fonta: srednja
Boja teksta: #000000

Veličina teksta: 18 px (stolno računalo i tablet), 14 px (telefon)
Visina linije: 180%

Na kraju, pomaknite se dolje do razmak i postavite donju marginu. Zatvorite postavke modula.

Margina (donja): 0px

Postavke slikovnog modula

Sada dodajte a Modul slike u desni stupac.

Prvo, uklonite lažnu sliku klikom na kantu za smeće ili ikonu resetiranja iznad slike.

Zatim se pomaknite prema dolje Bakground , odaberite karticu Slikajte i dodajte svoju sliku. Ostavite sve postavke slike na zadanim vrijednostima. Slika u početku neće pokazati mnogo. Riješit ćemo ovo u hodu.

Zatim odaberite karticu Stil i pomaknite se do Razmještanje.

Margina (radna površina): -10% (gore), -30% (lijevo), 10% (desno)
Razmak (gornji i donji dio): 300 px

Margina (tablet/telefon): 0% (gore), 0% (lijevo i desno)

Ispuna (telefon): 150 px (gore i dolje)

Primjeri slika oblikovanih Divi Gradient Builderom

Prvi primjer – Kružni oblik

Naš prvi primjer daje slici kružni oblik s rupom u sredini.

Otvorite postavke modula za slike i pomaknite se prema dolje do pozadina . Odaberite Kartica Gradijent pozadine i postavite 6 graničnika gradijenta:

Prvo zaustavljanje: 0%, #f0f3fb
Drugo: 45%, #f0f3fb
Treći (iznad drugog): 45%, rgba(41,196,169,0)
Četvrto: 69%, rgba(250,255,214,0)
Peti (iznad četvrtog): 69%, #f0f3fb
Šesto: 100%, #f0f3fb

Tip: Okrugli
Pozicija: Centar
Jedinica: postotak
Kvadratni gradijent iznad pozadinske slike: DA

Drugi primjer – Linearni oblik

Ovdje je pregled drugog primjera oblika slike. Ovaj primjer postavlja dijagonalne linije preko slike.

Otvorite postavke, pomaknite se prema dolje do Pozadina i odaberiteKartica Gradijent pozadine. Dodajte četiri stupnja gradijenta:

Prvo zaustavljanje: 0%, #f0f3fb
Drugo: 5%, #f0f3fb
Treći (iznad drugog): 5%, rgba(175,175,175,0)
Četvrto: 13%, rgba(41,196,169,0)

Tip: linearni
Upravljanje: 150 stupnjeva
Ponovi gradijent: DA
Jedinica gradijenta: postotak
Kvadratni gradijent iznad pozadinske slike: DA

Treći primjer – Eliptičan oblik

Ovo je naš treći primjer oblika slike. Ovo koristi eliptični oblik.

Otvorite postavke modula za slike i pomaknite se prema dolje do pozadina . Odaberite karticu Gradijent pozadine i stvorite četiri gradijenta:

Prvo zaustavljanje: 0%, #f0f3fb
Drugo: 9%, #f0f3fb
Treći (iznad drugog): 9%, rgba(175,175,175,0)
Četvrto: 21%, rgba(41,196,169,0)

Vrsta: Eliptična
Položaj gradijenta: gore lijevo
Ponovi gradijent: DA
Jedinica gradijenta: postotak
Kvadratni gradijent iznad pozadinske slike: DA

Četvrti primjer – Stožasti oblik

Naš četvrti primjer koristi "Stožast" za stvaranje jednog oblika slike.

Otvorite postavke modula slike, pomaknite se prema dolje do pozadina i odaberite karticu Pozadinska slika. Ovaj ima 5 stupnjeva gradijenta:

Prvo zaustavljanje: 23%, #f0f3fb
Drugo: 35%, #f0f3fb
Treći (iznad drugog): 35%, rgba(41,196,169,0)
Četvrto: 65%, rgba(250,255,214,0)
Peti (iznad četvrtog): 65%, #f0f3fb

Tip: suženi
Smjer gradijenta: 180 stupnjeva
Položaj gradijenta: dolje
Jedinica: postotak
Kvadratni gradijent iznad pozadinske slike: DA