Imazhet e kufirit dhe sfondit vazhdojnë të jenë elementë të njohur të dizajnit gjatë ndërtimit të faqeve të internetit. Përdorimi i imazheve të duhura të sfondit mund të shtojë personalitet dhe stil në faqen tuaj pa shpenzuar kohë dhe para për grafika të personalizuara. Dhe kufijtë janë të dobishëm për të shtuar strukturën tuaj përmbajtje.
Sot ne do t'i bashkojmë këto dy gjëra duke dizajnuar imazhet e sfondit si kufij. Divi ka një sërë opsionesh të dobishme për personalizimin e imazheve të sfondit, duke e bërë të lehtë dizajnimin e imazheve të sfondit për dizajne unike të kufirit. Kjo na lejon të kombinojmë ngjyrat, gradientët, hijet e kutive dhe mënyrat e përzierjes në të gjitha llojet e mënyrave krijuese.
Le të fillojë.
Çfarë duhet të filloni
Për të filluar, ju nevojiten këto:
- Le Tema divi i instaluar dhe aktiv
- Një faqe e re e krijuar për të ndërtuar nga e para në pjesën e përparme (konstruktor vizual)
- Imazhet për t'u përdorur përmbajtje fiktive
Pas kësaj do të keni një kanavacë bosh për të filluar dizajnimin Divi.
Këshilla të përgjithshme për krijimin e modeleve të kufijve në sfond
Para se të filloni ndërtimin, këtu janë disa këshilla të përgjithshme për tu mbajtur në mend kur krijoni modele kufijsh të imazhit në sfond.
# 1 Zgjidhni imazhe me shumë cilësi
Shumicën e kohës, do të dëshironi që kufijtë tuaj të jenë më të ngushtë. Kjo do të thotë që ju nuk do të jeni në gjendje të shihni shumë nga imazhi. Prandaj është e dobishme të përdoren imazhe që kanë shumë strukturë. Për shembull, mund të përdorni një foto të një peizazhi, një tufë lulesh ose një kullë të lartë. Këtu janë disa imazhe që po përdor për këtë manual.
# 2 përdorni gradientët dhe transparencën me kufijtë e imazhit të sfondit
Imazhet e sfondit ndonjëherë mund të jenë një kufi i shkëlqyeshëm më vete për ju përmbajtje. Por shumicën e kohës do të dëshironi të shtoni mbivendosje në imazhin tuaj të sfondit për të arritur ngjyrën ose për t'i bërë sfondet më të errëta ose më të lehta. Gradientët e sfondit janë një mënyrë e shkëlqyeshme për të shtuar shtresa në imazhet tuaja të sfondit dhe për të krijuar modele unike të kufirit.
# 3 Përdorni mënyrat e shkrirjes
Përdorimi i mënyrave të përzierjes në imazhet tuaja të sfondit mund të aplikojë ngjyra dhe struktura unike në modelet kufitare. E tëra çfarë ju duhet të bëni është të shtoni një ngjyrë sfondi ose gradient me imazhin tuaj të sfondit dhe më pas të zgjidhni një mënyrë përzierjeje për imazhin e sfondit. Ngjyra, Ndriçimi, Shumëzimi dhe Ekrani janë disa mënyra të shkëlqyera të përzierjes për kufijtë e imazhit në sfond.
Përdorni opsione të rrumbullakosura të qosheve për forma unike
Jo të gjithë kufijtë duhet të kenë skaje të drejta. Përziejini pak! Opsionet e qosheve të rrumbullakosura Divi ju lejon të formoni këto qoshe në mënyrë krijuese.
Përdorni imazhe paralaksi në sfond si kufij
Gjëja më e mirë për paralaksën është se ajo sjell në jetë dizajnin me lëvizje. Për më tepër, nëse përdorni imazhe në sfond me paralaksë për planet tuaja kufitare, mund të krijoni lëvizje delikate që bie në sy dhe e bën përmbajtjen tuaj të spikasë.
Dizajni i kufirit të imazhit në Divi
Tani që ne e kuptojmë idenë e përgjithshme që qëndron në krijimin e modeleve të kufirit të imazhit në sfond, le të imagjinojmë disa së bashku. Ne do të ndërtojmë modele të ndryshme 2. Secila do të ketë një modul bazë prezantimi për të shërbyer si përmbajtje fiktive. Dhe ne do të përdorim parametrat e kolonës për të shtuar kufirin e imazhit në sfond të modulit.
Le të fillojmë me modelin tonë të parë.
#1 imazh i sfondit të kufirit
Ky dizajn i parë përmban një kufi të ngushtë të imazhit në sfond me një hije zone për ta bërë atë të duket më shumë si një kornizë për përmbajtjen.
Ja se si ta hartoni.
Së pari, shtoni një rresht me dy kolona në një seksion të rregullt.
Shtoni Modulin Përmbledhës
Pastaj shtoni një modul të paqartë në kolonën e majtë.
Sapo blurb të jetë në vend, hapni cilësimet e blurb dhe nxirrni imazhin e paracaktuar në mënyrë që të shikohen vetëm titulli dhe përmbajtja e trupit.
Pastaj jepni tekstit tuaj një sfond të bardhë.
Pastaj azhurnoni parametrat e dizajnit të prezantimit si më poshtë:
- Titulli i tekstit: Oswald
- Policia e Trupit: Lato
- Margjina 5% në krye, 5% në fund, 5% në të majtë, 5% në të djathtë
- Tapiceri: 7% në krye, 7% në fund, 10% në të majtë, 10% në të djathtë
- Qoshet e rrumbullakosura: 20px në pjesën e sipërme të djathtë, 20px në pjesën e poshtme të majtë
- Shadow Box: shih screenshot
Shtoni imazhin e sfondit në kolonë
Kjo kujdeset për modulin tonë të prezantimit. Tani le të shtojmë kufirin tonë të imazhit në sfond. Për ta bërë këtë, ne do të shtojmë një imazh sfondi në kolonën që përmban modulin Blurb. Hapni cilësimet e rreshtit, pastaj cilësimet për kolonën 1 dhe shtoni sfondin e mëposhtëm:
- Imazhi i sfondit: [ngarkoni imazhin e zgjedhjes suaj]
- Ngjyra e sfondit: #303a7a
- Imazhi i Sfondit të Përzierjes: Shkëlqim
Pastaj azhurnoni qoshet e rrumbullakosura dhe hijen e kutisë si më poshtë:
- Qoshet e rrumbullakosura: 20px në pjesën e sipërme të djathtë, 20px në pjesën e poshtme të majtë
- Shadow Box: shih screenshot
Rezultati përfundimtar
Tani, kontrolloni modelin përfundimtar.
Imazhi i sfondit kufitar # 2
Ky dizajn tjetër nënvizon faktin se përdorimi i imazheve me shumë tekstura mund të krijojë kufij të bukur, veçanërisht kur i kombinoni ato me mënyra të përzierjes së imazheve.
Ja se si ta hartoni.
Shtoni modulin Blurb
Për të krijuar modelin, ne do të shtojmë tekstin blurb në kolonën 2 të së njëjtës rresht që përmban modelin # 1. Shkoni përpara dhe kopjoni modulin e paraqitjes së dizajnit # 1 dhe ngjisni atë në kolonën 2. Pastaj, azhurnoni cilësimet e modulit të prezantimit si më poshtë:
- Qoshet e rrumbullakosura: rivendosni cilësimet e paracaktuar
- Margjina: 10% në krye, 10% në fund, 10% në të majtë, 10% në të djathtë
- Tapiceri: 15% në krye, 15% në fund, 10% në të majtë, 10% në të djathtë
- Gjerësia e kufirit: 1px
- Ngjyra kufitare: #ffffff
Shtoni imazhin e sfondit në kolonë
Me modulin tonë në vend, hapni cilësimet e linjës dhe shtoni një gradient të sfondit në kolonën 2.
- Shkalla e majtë e sfondit: #f7e0a5
- Ngjyra e gradientit të gradientit të sfondit: rgba (237,240,0,0.79)
- Drejtimi Gradient: 90deg
- Pozicioni fillestar: 50%
- Pozicioni përfundimtar: 0%
Pastaj shtoni një imazh të sfondit me një efekt të këndshëm gradient.
- Imazhi i sfondit: [shkarkoni imazhin]
- Përzierja e imazhit në sfond: Ngjyra
Siç mund ta shihni, modaliteti i përzierjes së ngjyrave ruan shkëlqimin e dy gradientëve të ngjyrave prapa figurës për të krijuar një model të këndshëm kufiri imazhi me ngjyra të buta.
Rezultati përfundimtar
Zbuloni rezultatin përfundimtar të projektimit.
Mendimet e fundit
Krijimi i kufijve me fotografi është një mënyrë e thjeshtë për të shtuar bukurinë dhe personalitetin në modelin tuaj. Dizajni i theksuar në këtë tutorial është bërë për të nxjerrë në pah mundësitë e disponueshme me Divi në hartimin e kufijve unikë. Prandaj, me kombinimet e ndryshme të ngjyrave, dizenjot janë të pakufishme. Pra, merrni disa imazhe dhe eksploroni më shumë dizajnin e kufijve me imazhe në Divi.
Për shëndetin tuaj.
