Dëshironi të përdorni maskat dhe modelet për seksionin tuaj Hero në Divi ?
Maskat e reja dhe modelet e sfondit të Divi janë një nga veçoritë tona më interesante të dizajnit deri më tani. Secila prej maskave dhe modeleve mund të kombinohet me elementë të tjerë të sfondit (si ngjyrat, imazhet dhe gradientët) për kombinime të panumërta unike me vetëm disa klikime.
Sot do t'ju tregojmë se si ta përdorni Divi dhe maskat e reja dhe modelet e sfondit për të hartuar një seksion heronj.
Në këtë tutorial, ne do të mbulojmë hapat e rëndësishëm të nevojshëm për të krijuar maska dhe modele sfondi.
Ne madje do të tregojmë se si të pozicionojmë imazhet e sfondit për t'iu përshtatur një modeli maskash. Kjo duhet t'ju japë outils ju duhet të krijoni seksionin e përsosur Hero për faqen tuaj në pak minuta.
studim
Ja një vështrim i shpejtë i dizajnit që do të krijojmë në këtë tutorial.
Lexo gjithashtu: Divi: Si të krijoni një rrjet imazhi të përgjegjshëm me lidhje dhe efekte pezullimi
Shembull seksioni i Heroit me një maskë dhe model të bardhë.
Këtu është një version i errët i të njëjtit seksion Hero me një maskë dhe model të zi.
Me këtë dizajn në vend, ju mund të ndryshoni lehtësisht maskat dhe pozicionet e maskave me vetëm disa klikime!
Krijo një faqe të re me Divi Builder
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ërdorim Divi Ndërtues
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj do të keni një kanavacë bosh për të filluar dizajnimin Divi.
Si të përdorni maskat e Divi dhe modelet e sfondit në seksionin tuaj të heroit
1. Krijo strukturën e paraqitjes
Për këtë seksion heronj, ne do të përdorim një strukturë klasike të paraqitjes me titullin dhe thirrjen për veprim në të majtë dhe një imazh (ose dizajn vizual) në të djathtë.
Për këtë shembull, dizajni ynë vizual do të krijohet duke përdorur opsionet e sfondit të Divi. Por, përpara se të arrijmë te gërryerja, duhet të krijojmë një rresht me dy kolona për të kursyer hapësirë në anën e djathtë të faqes për të shfaqur maskat tona të sfondit të seksionit dhe modelin e modelit.
2. Shtoni titullin dhe thirrjen për veprim
Në kolonën e majtë (kolona 1), shtoni një modul Teksti për titullin tuaj kryesor, një modul Teksti për tekstin e titrave dhe një modul Butoni për butonin tuaj.
3. Shtoni hapësirën vertikale në seksion
Për ta bërë dizajnin tonë të sfondit të duket i gjatë dhe i bukur, duhet të shtojmë lartësi vertikale në seksion. Një mënyrë e thjeshtë për ta bërë këtë është të shtoni mbushje në krye dhe në fund të seksionit. Mbani në mend se duhet të rregullojmë mbushjen në ekranin e tabletit dhe të telefonit për t'i lënë vend dizajnit tonë të sfondit pasi kolonat të vendosen vertikalisht.
Hap cilësimet e seksionit. Nën skedën e dizajnit, përditësoni mbushjen si më poshtë:
- Mbushje:
- Desktop: Top 20vw, Poshtë 20vw
- Tableti: Top 8vw, Poshtë 48vw
- Telefoni: Top 8vw, Bottom 70vw
4. Shtoni imazhin e sfondit dhe gradientin
Më pas, ne mund të shtojmë një imazh të sfondit dhe gradient në seksion. Mbani në mend se pika kryesore qendrore e imazhit të sfondit do të zbulohet në anën e djathtë të seksionit, kështu që përdorni një imazh që ka atë që dëshironi të shihni në anën e djathtë.
Për këtë shembull, ne po përdorim një imazh me një horizont të qytetit. Ana e djathtë e imazhit ka ndërtesa më të afërta dhe më të mira, kështu që funksionon vërtet mirë.
Nën skedinë Historiku i sfondit, ngarkoni imazhin në sfondin e seksionit.
Në Divi, mund të shtoni lehtësisht një gradient ngjyrash në imazhin e sfondit. Nën skedën Gradienti i Sfondit, shtoni gradientin e mëposhtëm në sfondin e seksionit:
- Ndalesat e gradientit:
- 0%: #3e22ff
- 100%: e qartë
- Gradient katror mbi sfond Imazhi: PO
5. Krijoni një model sfondi për seksionin
Tani që kemi gati imazhin e sfondit dhe gradientin, mund të shtojmë një model sfondi për të përfunduar dizajnin.
Në këtë shembull, ne do të përdorim një model delikate që thjesht shton pak teksturë për t'i dhënë një pamje më unike.
Nën skedinë Modelet e Sfondit, përditësoni sa vijon:
- Modeli i sfondit: Tufa
MASHTRIM : Me modelet e sfondit, zakonisht është më mirë ta mbani atë delikate. Provoni të përdorni madhësi të personalizuara për dizajne më të vogla, më pas ulni errësirën e ngjyrave.
6. Krijoni një maskë sfondi për seksionin
Me modelin tonë të sfondit në vend, më në fund jemi gati të testojmë një maskë të re sfondi për dizajnin tonë. Ka një mori opsionesh dhe variacionesh për të zgjedhur. Për këtë shembull, ne do të përdorim maskën e huallit.
Nën skedinë Maska e sfondit, përditësoni sa vijon:
- Maskë: huall mjalti
- Ngjyra e maskës: #ffffff
- Madhësia: Mbulesa
7. Rregulloni pozicionin e imazhit të sfondit
Meqenëse ne përdorim një maskë sfondi, një pjesë e imazhit tonë të sfondit është e maskuar (ose "e maskuar").
Në këtë shembull, do të sigurohemi që pjesa e poshtme djathtas e imazhit të jetë më e dukshme dhe do ta zhvendosim pak në të djathtë për të treguar më shumë ndërtesa.
Nën skedën Imazhi, përditësoni sa vijon:
- Pozicioni i imazhit në sfond: Poshtë djathtas
- Zhvendosja horizontale e imazhit të sfondit: -4vw
8. Përdorni një modalitet përzierjeje
Një mënyrë për t'u bërë krijues me të gjithë këta elementë të sfondit është të shtoni një modalitet përzierjeje. Modalitetet e përzierjes mund të shtohen në cilindo prej opsioneve të sfondit dhe ato mund të përdoren për të përzier shtresa të shumta të sfondit (imazh, gradient, maskë, etj.) në mënyra krijuese.
Për këtë shembull, ne do të përziejmë imazhin e sfondit me ngjyrën e gradientit. Për ta bërë këtë, klikoni në skedën Historiku i sfondit dhe shtoni një modalitet përzierjeje për të përzier ngjyrën e gradientit me imazhin e sfondit si më poshtë:
- Përzierja e imazheve të sfondit: Shumëzoni
9. Rregulloni maskën e sfondit për celularin
Është e rëndësishme të siguroheni që dizajni i maskës së sfondit të duket i shkëlqyeshëm edhe në pajisjet celulare. Për fat të mirë, opsionet e integruara e bëjnë këtë proces më të lehtë.
Mos harroni se tashmë kemi shtuar mbushjen shtesë në tablet dhe telefon për t'i lënë vend dizajnit tonë të sfondit.
Tani gjithçka që duhet të bëjmë është të përdorim opsionet e transformimit të sfondit dhe raportit të pamjes për të rregulluar maskën për celularin.
Nën skedinë Maska e sfondit, aktivizoni opsionet e përgjegjshme dhe përditësoni sa vijon:
Versioni i tabletit
- Transformimi i maskës: rrokullisje vertikale, rrokullisje horizontale, rrotullo
- Raporti i pamjes së maskës: katror
Versioni i telefonit
- Transformimi i maskës: rrokullisje vertikale, rrokullisje horizontale, rrotullo
- Raporti i pamjes së maskës: Portret
Rezultati
Shikoni dizajnin që kemi krijuar deri tani.
Kompjuter desktop
Versioni i tabletit
Edicioni i telefonit
10. Krijo një version të errët
Nëse dëshironi një version të errët të këtij dizajni, thjesht ndryshoni ngjyrën e maskës së sfondit në një ngjyrë të errët (si e zeza).
Pastaj ndryshoni ngjyrën e modelit në të zezë.
Pastaj ndryshoni titullin dhe tekstin e titrave në të bardhë. Dhe mund të dëshironi të përditësoni edhe ngjyrën e butonit.
Kështu duket versioni i errët.
Rezultatet përfundimtare
Shiko gjithashtu: Divi: Si të personalizoni lidhjen "Lexo më shumë" të një blogu
Ja një vështrim tjetër në rezultatet tona përfundimtare.
Shkarkoni DIVI Tani!!!
Përfundim
Dizenjoni një seksion Hero për tuajin Site Web është kënaqësi e madhe me maska dhe modele sfondi nga Divi. Opsionet e sfondit janë të lehta për t'u ndryshuar për të marrë dizajnin perfekt. Dhe ka shumë opsione të tjera që mund të përdorni (si mënyrat e përzierjes) për të krijuar sfonde edhe më unike.
Për më tepër, ju mund të shtoni maska dhe modele në çdo element Divi, jo vetëm në seksione. Pra, argëtohuni duke eksperimentuar!
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.
...
