Dëshironi të krijoni kalime në sfond midis elementeve Divi ?
Krijoni tranzicione pa probleme të dizajnit të sfondit midis elementeve Divi është një mënyrë e shkëlqyer për të përmirësuar dizajnin tuaj Site Web Divi.
Kjo ju lejon të kaloni pa probleme një gradient, model dhe maskë sfondi midis një rreshti dhe një seksioni në një mënyrë krijuese.
Për shembull, mund të keni një tranzicion model ose maskë me ngjyra të ndryshme pa humbur shtrirjen e përgjithshme dhe pamjen simetrike të dizajnit.
Në këtë tutorial, ne do të përdorim opsionet e integruara të dizajnit të sfondit të Divi për të krijuar një tranzicion të pandërprerë të dizajnit të sfondit midis një seksioni dhe rreshti Divi. Aplikimi dhe shkathtësia e këtij dizajni është e pakufishme, duke çuar opsionet e dizajnit të sfondit të Divi në një nivel krejtësisht të ri!
Le të fillojë.
studim
Ja një vështrim i shpejtë i dizajnit që do të ndërtojmë në këtë tutorial.
Këtu janë disa modele të tjera mostër që janë të mundshme me vetëm disa ndryshime të thjeshta në maskat dhe modelet e sfondit.
Krijo një faqe të re me Divi Builder
Për të filluar, do t'ju duhet të bëni sa më poshtë:
Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Krijimi i një tranzicioni pa probleme në sfond midis një seksioni Divi dhe një linje
Krijimi i një titulli si përmbajtje mbajtëse vendesh
Lexo gjithashtu: Divi: Si të krijoni skeda me efekt hover nga linjat
Para se të hidhemi, duhet të shtojmë një kokë si përmbajtje fiktive. Për të filluar, shtoni një rresht me një kolonë në seksionin e paracaktuar të faqes.
Pastaj shtoni një modul Teksti në rresht.
Shto tekst me madhësi H1.
Nën skedinë Projektimi, përditësoni dizajnin e tekstit të kokës sipas dëshirës.
- Fonti: Roboto Condensed
- Pesha e shkronjave: Bold
- Stili: TT
- Rreshtimi i tekstit: në qendër
- Ngjyra e tekstit: #000000
- Madhësia e tekstit të titullit: 4vw
- Hapësira e shkronjave: 0.1em
- Lartësia e linjës: 1.3em
Dizajni i sfondit të seksionit
Shtimi i mbushjes në seksion
Pasi të jetë vendosur titulli i rremë, hapni cilësimet e seksionit dhe përditësoni ndarjen si më poshtë:
- Mbushje (sipër dhe poshtë): 15vw
Shtoi gradientin e sfondit në seksion
Tani që kemi më shumë hapësirë për të punuar, jemi gati të shtojmë dizajnin tonë të sfondit në seksion. Nën skedën Gradient i sfondit, shtoni pikat e mëposhtme të gradientit:
- Ndalesat e gradientit:
- 0%: #4f0f75 (në 0%)
- 25%: #2843c9 (në 25%)
- 50%: #4ae2e0 (në 50%)
- 75%: #3881ff (në 75%)
- 100%: #4f0f75 (në 100%)
Shtimi i një modeli sfondi në seksion
Nën skedinë Modeli i sfondit, përditësoni sa vijon:
- Modeli: vija diagonale
- Ngjyra e modelit: rgba (79,15,117,0.23)
- Transformimi: Rrotulloni
- Madhësia e modelit: Madhësia e personalizuar
- Gjerësia: 7vw
- Lartësia: 5vw
- Origjina e përsëritjes së modelit: Qendra
Shënim: Sigurohuni që të përdorni njësinë e gjatësisë VW për gjerësinë dhe lartësinë e modelit. Dhe, gjithashtu sigurohuni që të vendosni origjinën e përsëritur në "qendër". Kjo do ta mbajë modelin e sfondit në të njëjtin vend me modelin e sfondit që do të shtojmë në rresht më vonë.
Shtimi i një maskë sfondi në seksion
Nën skedinë Maska e sfondit, shtoni sa vijon:
- Maska e sfondit: Shtresa e pikës
- Ngjyra e maskës: rgba(0,0,0,0.7)
- Gjerësia e maskës: 100 vw
- Pozicioni: Qendër
Shënim: Ashtu si me modelin, ne duhet të përmasojmë maskën duke përdorur njësinë e gjatësisë VW. Ne gjithashtu duhet t'i japim maskës një pozicion qendror.
Dizajni i sfondit të linjës
Kopjoni dhe ngjisni sfondin e seksionit në sfondin e rreshtit
Për të shpejtuar procesin e dizajnimit të sfondit të linjës, kopjoni cilësimet e sfondit të seksionit.
Pastaj ngjitni sfondin në linjën ekzistuese.
Në këtë pikë tashmë mund të shihni se si modeli i sfondit dhe maska në linjë bëjnë një tranzicion të qetë në sfondin e seksionit.
Duket sikur linja ka një sfond transparent, por në fakt është i njëjti model dhe maskë e përdorur në seksion me të njëjtën madhësi dhe pozicion.
Rregulloni madhësinë e rreshtit dhe mbushjen duke përdorur VW
Më pas, duhet t'i japim rreshtit tonë një gjerësi të personalizuar duke përdorur njësinë e gjatësisë VW. Përditësoni sa vijon:
- Gjerësia: 75vw
- Gjerësia maksimale: 75 vw
- Mbushje (sipër, poshtë, majtas dhe djathtas): 10vw
Rregulloni ndalesat e gradientit në linjë
Më pas, ne duhet të rregullojmë ndalesat e gradientit në sfondin e linjës për një kalim pa probleme në gradientin e sfondit të seksionit.
Nën skedinë Gradienti i Sfondit, do të mbajmë tre pikat e gradientit të mesëm të trashëguara nga sfondi i seksionit) dhe do të heqim ndalesat e para dhe të fundit të gradientit.
Më pas vendosni ndalesën e parë në 0% dhe ndalesën e tretë në 100%. Pasi të keni përfunduar, duhet të keni gradientët e mëposhtëm.
- Ndalesa e gradientit
- 0%: #2843c9
- 50%: #4ae2e0
- 100%: #3881ff
Shtoni hijen e kutisë në rresht
Për ta ngritur pak dizajnin dhe për të theksuar tranzicionin pa probleme të sfondit, mund të shtojmë një hije kutie në rresht.
- Box Shadow: shikoni pamjen e ekranit
- Pozicioni vertikal: 0px
- Fuqia e turbullimit të hijes së kutisë: 4vw
- Ngjyra e hijes: rgba (0,0,0,0.5)
Rregullo ngjyrën e modelit të sfondit të linjës
Tani që kemi të gjithë elementët e sfondit në vend, mund të fillojmë të rregullojmë ngjyrat për një dizajn më kreativ.
Nën opsionin Modeli i sfondit rresht, përditësoni sa vijon:
- Ngjyra e modelit: rgba (255,255,255,0.23)
Rregullo ngjyrën e maskës së sfondit të linjës
Ne gjithashtu mund të përditësojmë ngjyrën e maskës për linjën për ta bërë me të vërtetë dizajnin të dallohet.
Nën skedinë Maska e sfondit, përditësoni sa vijon:
- Ngjyra e maskës: #ffffff
- Transformimi i maskës: i përmbysur
Rezultati përfundimtar
Le të shohim rezultatin përfundimtar.
Shkarkoni DIVI tani!!!
Më shumë mundësi
Këtu janë disa modele të tjera mostër që janë të mundshme me vetëm disa ndryshime të thjeshta në maskat dhe modelet e sfondit.
Shiko gjithashtu: Divi: Si të përdorni "Gradient Builder" për të zbukuruar imazhet tuaja
Shkarkoni DIVI tani!!!
Përfundim
Çelësi për krijimin e tranzicioneve pa probleme të dizajnit të sfondit në Divi është përdorimi i mençur i këtyre njësive të gjatësisë VW.
Së pari, ne duhet të krijojmë një dizajn të sfondit të seksionit që i përshtatet gjerësisë së portës së pamjes së shfletuesit (nga një pozicion në qendër në faqe). Pasi të kemi përfunduar, ne mund të përdorim të njëjtin dizajn të sfondit me një rresht. Pas kësaj, ne kemi vetëm disa ndryshime në gradient dhe ngjyra për një dizajn të mahnitshëm.
Shpresojmë që kjo teknikë të shtojë një aftësi tjetër të dobishme të projektimit për projektet e ardhshme.
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ë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.
Mos hezitoni të konsultoheni edhe 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.
...
