Dëshironi të kombinoni cilësimet e maskës së sfondit dhe opsionet e transformimit të modelit Divi për të krijuar sfonde unike?
Modelet e sfondit janë një mënyrë e shkëlqyer për të dhënë tuajën Site Web dhunti vizuale dhe dallohet nga turma. Cilësimet e reja të maskës së sfondit dhe transformimit të modelit nga Divi mund të kombinohen në shumë mënyra për të krijuar këto modele sfondi.
Në këtë artikull, ne do të shohim se si të përdorim cilësimet e maskës së sfondit dhe transformimit të modelit Divi për të krijuar sfonde interesante për paraqitjet tuaja Divi.
Le të fillojë.
studim
Së pari, këtu është një pamje paraprake e secilit shembull në madhësi të ndryshme të ekranit (telefon dhe desktop).
Lexo gjithashtu: Divi: Si të përdorni efektet e hijes dhe të pezullimit për të krijuar përmbajtje interaktive
Shembull 1
Versioni 1 në desktop
Versioni 1 në telefon
Shkarkoni DIVI Tani!!!
Versioni 2 në desktop
Versioni 2 në telefon
Shembull 2
Versioni 1 në desktop
Versioni 1 në telefon
Shkarkoni DIVI Tani!!!
Versioni 2 në desktop
Versioni 2 në telefon
Shembull 3
Versioni 1 në desktop
Versioni 1 në telefon
Shkarkoni DIVI Tani!!!
Versioni 2 në desktop
Versioni 2 në telefon
Maska e sfondit Divi dhe opsionet e transformimit të modelit
Karakteristikat e reja të maskës dhe modelit të sfondit të Divi përfshijnë disa opsione për t'i rregulluar ato. Rregullimet përfshijnë rrokullisjen horizontale dhe vertikale, rrotullimin dhe përmbysjen. Për të parë opsionet, shkoni te cilësimet e sfondit të një seksioni ose rreshti dhe zgjidhni skedat Modeli i sfondit ose maska e sfondit.
Pasi të keni shtuar një model ose maskë, shfaqen cilësimet e transformimit. Thjesht klikoni mbi opsionet që dëshironi të përdorni. Mund t'i përdorim së bashku dhe në çdo kombinim që duam.
Si funksionojnë cilësimet e transformimit të maskës dhe modelit të Divi
Modeli më poshtë është Zig Zag me cilësimet e paracaktuara.
Ne shtojmë një maskë të blogut të shtresave në imazhin më poshtë. Le t'i përdorim ato për të demonstruar se si funksionojnë cilësimet e maskës së sfondit dhe të transformimit të modelit.
Rrotullimi horizontal
Është kthimi horizontal. Ne aplikuam cilësimet e transformimit si në model ashtu edhe në maskë.
Kthimi vertikal
Ky është rrokullisja vertikale për modelin dhe maskën.
Rrotullim
Kjo tregon Rrotullimin për modelin dhe maskën.
Anasjelltas
Ky shembull tregon Invert për modelin dhe maskën.
Kombinimet e transformimit të maskës së sfondit dhe modelit
Sigurisht, ne mund të përdorim edhe parametrat e transformimit në kombinime të ndryshme. Ketu jane disa shembuj.
Kjo rrotullon modelin dhe përmbys maskën.
Ky shembull përdor rrokullisje vertikale, rrotullim dhe përmbysje për modelin e sfondit. Maska e sfondit përdor rrokullisje horizontale, rrokullisje vertikale dhe rrotullim.
Për këtë shembull, ne përdorëm rrokullisje dhe rrotullim horizontal për modelin e sfondit, dhe rrokullisje vertikale dhe rrotullim për maskën e sfondit.
Shembuj të cilësimeve të transformimit të maskës së sfondit dhe modelit
Më pas, le të shohim se si mund të përdoren këto cilësime me paraqitjet Divi. Ne do të përdorim një seksion si pikënisje dhe do të krijojmë tre shembuj. Ne do ta personalizojmë atë dhe më pas do të përdorim cilësimet e transformimit për ta modifikuar atë për çdo shembull.
Për shembujt tanë, ne po përdorim një version të modifikuar të seksionit Hero të faqes së uljes së paraqitjes Planifikimi i Pasurive në dispozicion në Divi.
Këtu është një pasqyrë e seksionit në fjalë. Përdor ngjyrën e sfondit: #92a5ab.
- Sfondi: #92a5ab
Parametrat e transformimit të maskës së sfondit dhe modelit Shembull 1
Shembulli ynë i parë na jep një hark që qëndron vertikalisht në qendër të ekranit. Njëra anë e ekranit ka një model me tufa. Më pas, ne do të krijojmë një version alternativ me harkun e kthyer nga ana tjetër.
model sfondi
Hapni cilësimet e seksionit, lëvizni poshtë te Sfond dhe zgjidhni skedën Modeli i sfondit. Zgjidhni Tufted për modelin e sfondit dhe Inverting për transformimin e modelit.
- Modeli i sfondit: Tufa
- Transformimi i modelit: Reverse
Maska e sfondit
Zgjidhni skedën Maska e sfondit dhe zgjidhni Hark për maskën e sfondit. Ndryshoni ngjyrën e maskës në #616d72 dhe vendosni transformimin e maskës në Invert. Kjo plotëson versionin tonë të parë të harkut me tufa.
- Maska e sfondit: Arch
- Ngjyra e maskës: #616d72
- Transformimi i maskës: Invert
Shembulli 1 Versioni 2
Tjetra, le të krijojmë një variant të dizajnit tonë. Thjesht modifikoni transformimi i maskës për modelin e sfondit në rrokullisje horizontale dhe rrokullisje vertikale. Kjo e ndryshon harkun për t'u kthyer në drejtimin tjetër dhe kompenson modelin, kështu që nuk duket thjesht si një imazh pasqyre.
- Transformimi i maskës: rrokullisje horizontale, rrokullisje vertikale
Parametrat e transformimit të maskës së sfondit dhe modelit Shembull 2
Për shembullin tonë të dytë, ne do të krijojmë një ovale në qendër të ekranit me një model brenda ovalit. Më pas, ne do të ndryshojmë vendosjen e modelit. Ne gjithashtu do ta modifikojmë këtë për madhësi të ndryshme ekrani.
Modeli i sfondit
Në cilësimet e sfondit, zgjidhni skedën Modeli i sfondit dhe zgjidhni Shippo për motivin. Vendosni transformimin e modelit në Invert.
- Sfondi i modelit: Shippo
- Transformimi i modelit: Reverse
Maska e sfondit
Pastaj zgjidhni skedën Maska e sfondit dhe ndryshoni cilësimet e mëposhtme.
- Maska e sfondit: Ellipse
- Ngjyra: #758489
- Transformimi i maskës: rrokullisje horizontale, rrotullim
Tableti dhe telefoni
Si tableti ashtu edhe telefoni do të përdorin të njëjtat cilësime, kështu që do të na duhet vetëm të ndryshojmë cilësimet e tabletit. Zgjidhni Skeda e tabletit dhe modifikoni transformimi i maskës në kthimin horizontal.
- Transformimi i maskës: rrokullisje horizontale, përmbysje
Shembulli 2 Versioni 2
Më pas, ne do të krijojmë variacionin për shembullin tonë të dytë. Së pari, zgjidhni skedën Modeli i sfondit dhe vendosim ngjyrën e modelit në rgba(0,0,0,0.06).
- Ngjyra e modelit: rgba(0,0,0,0.06)
Pastaj zgjidhni skedën Maska e sfondit dhe zgjidhni Flip Horizontal, Rotate dhe Invert për transformimin e maskës.
- Transformimi i maskës: rrokullisje horizontale, rrotullim, përmbysje
Tableti dhe telefoni
Për opsionet e tabletit dhe telefonit, zgjidhni ikonën e Tabletë . Modifikoni transformimi i maskës në kthimin dhe përmbysjen horizontale. Versioni alternativ i shembullit dy tani është i plotë.
- Transformimi i maskës: rrokullisje horizontale, përmbysje
Parametrat e transformimit të maskës së sfondit dhe modelit Shembull 3
Për shembullin tonë të tretë të cilësimeve të transformimit të maskës dhe modelit, ne do të përdorim një model huall mjalti me një maskë bojë. Ne gjithashtu do të krijojmë një version celular për këtë.
model sfondi
Së pari, zgjidhni skedën Cilësimet e pajisjes dhe zgjidhni ikonën Device. zyrë. Zgjidhni skedën Modeli i sfondit dhe zgjidhni Honeycomb për modelin e sfondit. Ndrysho ngjyrën në rgba (0,0,0,0.42). Për këtë do të lëmë opsionet Transformimi i modelit çaktivizohet. Ne do t'i shtojmë ato për versionin alternativ.
- Modeli i sfondit: huall mjalti
- Ngjyra e modelit: rgba(0,0,0,0.42)
- Transformimi i modelit: asnjë
Maska e sfondit
Pastaj zgjidhni skedën BackgroundMask. Zgjedh Pikturoj për maskën e sfondit. Ndrysho ngjyrën në #697b82. Zgjidhni Flip Vertical për transformimin e maskës.
- Maska e sfondit: Bojë
- Ngjyra e maskës: #697b82
- Transformimi i maskës: rrokullisje vertikale
Pastaj zgjidhni Cover për madhësinë. Kjo hap disa opsione të tjera. Zgjidhni Fundi djathtas për vendndodhjen. Kjo është ajo për versionin desktop. Më pas, ne do të krijojmë versionin celular.
- Madhësia e maskës: Mbulesa
- Pozicioni i maskës: Poshtë djathtas
Tableti dhe telefoni
Pastaj zgjidhni skedën tabletë dhe modifikoni transformimin e maskë sfond në rrokullisje vertikale dhe rrotullim. Kjo plotëson stilin për shembullin tonë të tretë. Më pas, ne do të krijojmë versionin alternativ.
- Transformimi i maskës: rrokullisje vertikale, rrotullim
Shembulli 3 Versioni 2
Për versionin alternativ të këtij shembulli, ne do të rregullojmë modelin e sfondit dhe maskën e sfondit.
model sfondi
Për modelin e sfondit, ndryshoni ngjyrën e modelit në rgba(0,0,0,0.11). Ndrysho transformimin e modelit në rrokullisje horizontale, rrokullisje vertikale dhe rrotullo.
- Ngjyra e maskës: rgba(0,0,0,0.11)
- Transformimi i maskës: rrokullisje horizontale, rrokullisje vertikale, rrotullim
maskë sfondi
Pastaj zgjidhni skedën BackgroundMask. Ndryshoni ngjyrën në të bardhë dhe transformimin e maskës në rrokullisje horizontale, rrokullisje vertikale dhe përmbysje.
- Ngjyra e maskës: #ffffff
- Transformimi i maskës: rrokullisje horizontale, rrokullisje vertikale, përmbysje
Më pas, ndryshoni madhësinë e maskës për të mbuluar, më pas zgjidhni Qendrën për pozicionin e maskës.
- Madhësia e maskës: Mbulesa
- Pozicioni i maskës: Qendër
Tableti dhe telefoni
Më në fund zgjidhni skedën tablette për të krijuar versionin celular. Zgjidhni skedën maskë sfondi dhe zgjidhni katër opsionet e transformimit të maskës. Kjo plotëson versionin alternativ të shembullit të tretë.
- Transformimi i maskës: rrokullisje horizontale, rrokullisje vertikale, rrotullim, përmbysje
Rezultatet Përfundimtare
Këtu është një përmbledhje e secilit shembull me madhësi të ndryshme të ekranit (Desktop dhe Telefon)
Shembull 1
Versioni 1 në desktop
Versioni 1 në telefon
Versioni 2 në Desktop
Versioni 2 në telefon
Shembull 2
Versioni 1 në Desktop
Versioni 1 në telefon
Versioni 2 në Desktop
Versioni 2 në telefon
Shembull 3
Versioni 1 në desktop
Versioni 1 në telefon
Versioni 2 në Desktop
Versioni 2 në telefon
Shkarkoni DIVI Tani!!!
Shiko gjithashtu: Divi: Si të krijoni një seksion të anëtarëve të ekipit si një karusel
Përfundim
Ky është vështrimi ynë se si të përdorim cilësimet e maskës së sfondit dhe të transformimit të modelit të Divi për të krijuar shumë modele interesante të sfondit.
Meqenëse modelet dhe maskat mund të përdoren së bashku, cilësimet e tyre të transformimit mund të përdoren gjithashtu së bashku. Kjo hap shumë opsione dizajni, duke ju dhënë edhe më shumëoutils për t'i shtuar elegancë prejardhjeve tuaja Divi.
Mënyra më e mirë për të mësuar se si t'i përdorni ato është të luani me rregullimet dhe të shihni se çfarë mund të krijoni.
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.
...
