Dëshironi t'u jepni forma imazheve tuaja duke përdorur gjeneratorin e gradientit? Divi ?
Maskat e imazhit shpesh përdoren për të shtuar forma interesante në imazhe. Ato lejojnë që imazhi të shihet përmes formës, duke i dhënë faqes një element unik të dizajnit.
me Ndërtues i gradientit de Divi, nuk keni nevojë të përdorni domosdoshmërisht maska për të krijuar forma. Në vend të kësaj, ju mund të përdorni Ndalesa e gradientit dhe parametrat për t'i krijuar ato!
Në këtë artikull do të shohim se si t'i zbukuroni imazhet tuaja me Gradient Builder of Divi për t'ju ndihmuar të shtoni dizajne unike në imazhet tuaja.
Le të fillojë.
studim
Së pari, le të shohim se çfarë do të krijojmë në këtë tutorial për madhësi të ndryshme ekrani.
Shembulli i parë - Forma rrethore e imazhit
Kompjuter desktop
tablette
Telefon
Shembulli i dytë – Forma lineare e imazhit
zyrë
tablette
Telefon
Shembulli i tretë - Forma eliptike e imazhit
Kompjuter desktop
tablette
Telefon
Shembulli i katërt - Forma konike e imazhit
Kompjuter desktop
tablette
Telefon
Dizajni i paraqitjes me Divi
Le të fillojmë duke krijuar paraqitjen që do të përdorim në të gjithë shembujt. Ky plan urbanistik mund të përdoret si një seksion hero.
Ai do të përfshijë një titull dhe përshkrim në njërën anë dhe imazhin në anën tjetër. Më pas do të përdorim këtë paraqitje dhe imazh për shembujt.
Personalizojeni seksionin
Së pari, krijoni një faqe të re Divi dhe personalizoni seksionin. Hapni cilësimet e seksionit dhe ndryshoni couleur sfond në #f0f3fb.
- Sfondi: #f0f3fb
Pastaj shkoni te skeda Projektimi dhe ndryshoni cilësimet e ndarjes si më poshtë:.
- Mbushje (sipër dhe poshtë): 10%
Shto rresht
Më pas shtoni një linjë me strukturën e kolonës më poshtë.
Hyni në parametrat e linjës, në skedën Projektimi, lundroni te opsioni sizing dhe modifikoni parametrat e madhësisë.
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Gjerësia maksimale: 1 px
Cilësimet e kolonës së parë
Në skedë Përmbajtja i rreshtit, hapni cilësimet e kolonës së parë të rreshtit, shkoni te skeda Projektimi. Ndryshoni ndarjen si më poshtë.
- Mbushje (majtas dhe djathtas): 9% majtas, djathtas
Parametrat e modulit të parë Tekst
Më pas shtoni një Moduli i tekstit në kolonën e majtë.
zgjedh Kreu 4 për tekstin e përmbajtje dhe shtoni përmbajtje të trupit tuaj.
- Teksti: "Mirëserdhe në BlogPasCher"
Pastaj shkoni te skeda Projektimi dhe ndryshoni cilësimet e titullit.
- Fonti: Montserrat
- Pesha e shkronjave: Bold
- Stili: TT
- Ngjyra e tekstit: #1d4eff
- Madhësia e tekstit: desktop 16 px, tablet 14 px, telefon 12 px
- Hapësira e shkronjave: 0,3em
- Lartësia e linjës: 1,6 em
Shkoni te ndarje dhe ndryshoni kufirin e poshtëm.
- Marzhi (poshtë): 0 px
Parametrat e modulit të dytë Text
Më pas shtoni një Moduli i tekstit nën të parën.
Vendosni llojin e tekstit në "Titulli 1" dhe shtoni përmbajtje të trupit tuaj.
- Përmbajtja: "Planifikoni të ardhmen tuaj financiare"
Pastaj zgjidhni skedën Projektimi dhe modifikoni opsionet e titullit.
- Fonti: Montserrat
- Pesha e shkronjave: Bold
- Ngjyra e tekstit: #0f1154
- Madhësia: 80px Desktop, 40px Tablet, 24px Telefon
- Lartësia e rreshtit: 110%
Parametrat e modulit të tretë Tekst
Më pas shtoni një Moduli i tekstit nën të dytën.
Lëreni llojin e tekstit në "Paragraf" dhe shtoni përmbajtjen e trupit tuaj.
- Trupi: përmbajtja
Pastaj shkoni te skeda Konceptim dhe ndryshoni cilësimet e tekstit.
- Fonti i tekstit: Roboto
- Pesha e shkronjave: mesatare
- Ngjyra e tekstit: #000000
- Madhësia e tekstit: 18 px (desktop dhe tablet), 14 px (telefon)
- Lartësia e linjës: 180%
Më në fund, lëvizni poshtë te ndarje dhe vendosni kufirin e poshtëm. Mbyllni cilësimet e modulit.
- Marzhi (poshtë): 0 px
Cilësimet e modulit të imazhit
Tani shtoni një Moduli i figurës në kolonën e djathtë.
Së pari, hiqni imazhin e rremë duke klikuar koshin e plehrave ose ikonën e rivendosjes mbi imazhin.
Pastaj lëvizni poshtë Bakground , zgjidhni skedën Imazhoni dhe shtoni imazhin tuaj. Lërini të gjitha cilësimet e imazhit në vlerat e tyre të paracaktuara. Imazhi nuk do të tregojë shumë në fillim. Ne do ta rregullojmë këtë ndërsa shkojmë.
Pastaj zgjidhni skedën Stili dhe shkoni te ndarje.
- Margjina (Desktop): -10% (lart), -30% (majtas), 10% (djathtas)
- Mbushje (lart dhe poshtë): 300 px
- Marzhi (Tableti/Telefon): 0% (lart), 0% (Majtas dhe Djathtas)
- Mbushje (telefon): 150 px (lart dhe poshtë)
Shembuj të imazheve të formuara me Divi's Gradient Builder
Shembulli i parë - Forma rrethore
Shembulli ynë i parë i jep imazhit një formë rrethore me një vrimë në qendër.
Hapni cilësimet e modulit të imazhit dhe lëvizni poshtë te Sfond . Zgjidhni Skeda e gradientit të sfondit dhe vendosni 6 ndalesa gradient:
- Ndalesa e parë: 0%, #f0f3fb
- Së dyti: 45%, #f0f3fb
- E treta (mbi të dytin): 45%, rgba (41,196,169,0)
- E katërta: 69%, rgba(250,255,214,0)
- E pesta (sipër e katërta): 69%, #f0f3fb
- E gjashta: 100%, #f0f3fb
- Lloji: Rrumbullakët
- Pozicioni: Qendër
- Njësia: Përqindje
- Gradient katror mbi sfond Imazhi: PO
Shembulli i dytë - Forma lineare
Këtu është një pamje paraprake e shembullit të formës së dytë të imazhit. Ky shembull vendos linja diagonale në të gjithë imazhin.
Hapni cilësimet, lëvizni poshtë te Sfondi dhe zgjidhniSkeda e gradientit të sfondit. Shtoni katër ndalesa gradient:
- Ndalesa e parë: 0%, #f0f3fb
- Së dyti: 5%, #f0f3fb
- E treta (mbi të dytin): 5%, rgba (175,175,175,0)
- E katërta: 13%, rgba(41,196,169,0)
- Lloji: Linear
- Drejtimi: 150 gradë
- Përsëriteni gradientin: PO
- Njësia e gradientit: Përqindje
- Gradient katror mbi sfond Imazhi: PO
Shembulli i tretë - Forma eliptike
Ky është shembulli ynë i tretë i formës së imazhit. Kjo përdor një formë eliptike.
Hapni cilësimet e modulit të imazhit dhe lëvizni poshtë te Sfond . Zgjidhni skedën Gradienti i Sfondit dhe krijoni katër ndalesa gradient:
- Ndalesa e parë: 0%, #f0f3fb
- Së dyti: 9%, #f0f3fb
- E treta (mbi të dytin): 9%, rgba (175,175,175,0)
- E katërta: 21%, rgba(41,196,169,0)
- Lloji: eliptik
- Pozicioni i gradientit: majtas lart
- Përsëriteni gradientin: PO
- Njësia e gradientit: Përqindje
- Gradient katror mbi sfond Imazhi : PO
Shembulli i katërt - Forma konike
Shembulli ynë i katërt përdor "Konike" për të krijuar një formë të vetme imazhi.
Hapni cilësimet e modulit të imazhit, lëvizni poshtë te Sfond dhe zgjidhni skedën Imazhi i sfondit. Ky ka 5 ndalesa të gradientit:
- Ndalesa e parë: 23%, #f0f3fb
- Së dyti: 35%, #f0f3fb
- E treta (mbi të dytin): 35%, rgba (41,196,169,0)
- E katërta: 65%, rgba(250,255,214,0)
- E pesta (sipër e katërta): 65%, #f0f3fb
- Lloji: Tapered
- Drejtimi i gradientit: 180 gradë
- Pozicioni i gradientit: Poshtë
- Njësia: Përqindje
- Gradient katror mbi sfond Imazhi: PO
Rezultatet përfundimtare
Të gjitha paraqitjet shkuan mirë. Format e imazhit dallohen dhe imazhet janë gjithmonë të lehta për t'u kuptuar. Të gjithë ata janë të përgjegjshëm, kështu që duken të shkëlqyera në çdo pajisje.
Shembulli i parë - Forma rrethore e imazhit
Kompjuter desktop
Shkarkoni DIVI Tani!!!
tablette
Telefon
Shembulli i dytë – Forma lineare e imazhit
Kompjuter desktop
Shkarkoni DIVI Tani!!!
tablette
Telefon
Shembulli i tretë - Forma eliptike e imazhit
Kompjuter desktop
Shkarkoni DIVI Tani!!!
tablette
Telefon
Shembulli i katërt - Forma konike e imazhit
Kompjuter desktop
Shkarkoni DIVI Tani!!!
tablette
Telefon
Përfundim
Ky është vështrimi ynë se si t'i formësoni imazhet tuaja me Divi's Gradient Builder.
Gradient Builder mund të krijojë forma interesante të imazhit. Të luash me ndalesa të gradientit, të provosh lloje të ndryshme gradientësh dhe të aktivizosh përsëritjen e gradientit janë mënyra të shkëlqyera për të krijuar dizajne të reja.
Sigurohuni që të kontrolloni modelet tuaja në të gjitha madhësitë e ekranit dhe të bëni rregullime nëse është e nevojshme.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
