Divi: 5 mbivendosje maskash dhe modelesh të zbatueshme për një imazh të sfondit

Dëshironi të përdorni maskën e Divi dhe mbivendosjen e modelit të sfondit?

Me të fundit versioni i veçorisë së maskës së sfondit dhe modelit të sfondit e Divi, ju mund të krijoni seksione unike Hero për tuaj Site Web. Një seksion hero është seksioni i parë i juaj Site Web dhe kjo është gjëja e parë jote vizitorët shikoni përpara se të lëvizni Site Web, prandaj është e rëndësishme të bini në sy!

Ky artikull do t'ju tregojë se si të krijoni pesë maska ​​unike të sfondit dhe mbivendosjet e modeleve që mund t'i aplikoni në një imazh të sfondit për të krijuar seksione heroike vërtet mahnitëse. 

Ky tutorial do të mbulojë hapat thelbësorë të nevojshëm për të krijuar çdo seksion Hero dhe do t'ju japë mjetet që ju nevojiten për të krijuar një seksion të mrekullueshëm Hero për faqen tuaj të internetit në pak minuta.

Le të fillojmë!

studim

Këtu është një përmbledhje e shpejtë e pesë seksioneve të heronjve që do të krijojmë në këtë artikull sot.

Shkarkoni DIVI tani!!!

Modelet janë delikate, të thjeshta dhe megjithatë me ndikim.

Lexo gjithashtu: Divi: Si të përdorni "Gradient Builder" për të zbukuruar imazhet tuaja

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.

Pesë shembuj të maskave të sfondit dhe mbivendosjeve të modelit për t'u aplikuar në një imazh të sfondit

Së pari, le të krijojmë seksionin Hero

Të gjitha modelet tona të mostrave përdorin të njëjtën strukturë seksioni, rreshti dhe kolone, kështu që le t'i vendosim ato tani.

1. Krijoni një strukturë paraqitjeje

Shtoni një rresht në faqen tuaj, më pas klikoni ikonën e gjelbër "+" për të treguar strukturën e kolonës dhe zgjidhni kolonën e parë, kolonën me gjerësi të plotë.

2. Shto ndarjen e seksioneve

Tani që kemi përcaktuar rreshtin dhe kolonën tonë, është koha për të shtuar pak hapësirë ​​në seksion.

Në skedën Hapësirë, përditësoni sa vijon:

• Desktop: 400 piksel (lart dhe poshtë)
• Tableti: 200 piksel (lart dhe poshtë); 25 px (majtas dhe djathtas)
• Telefoni: 50 piksel (lart dhe poshtë); 25 px (majtas dhe djathtas)

Dizajni i Seksionit Hero #1

Le të dizajnojmë seksionin e parë Hero.

Shkarkoni DIVI tani!!!

1. Shtoni tekstin e kokës

Klikoni në ikonën gri "+" për të shfaqur bibliotekën e modulit. Shkoni te teksti dhe klikoni për të ngarkuar.

Futni tekstin e titullit, pastaj nën skedën Titull Tekst, konfiguroni këto cilësime:

• Fonti i titullit: Work Sans
• Ngjyra e tekstit: E bardhë #ffffff
• Madhësia e tekstit të titullit:
  • Desktop: 3 em
  • Tabletë: 2,2 em
  • Telefoni: 1.4:XNUMX

2. Shto Modulin e Butonit

Shtoni një buton dhe konfiguroni këto cilësime:

• Nën skedinë përmbajtjas: Zbuloni më shumë
• Nën skedinë Bashkim, zgjidhni: Qendra
• Kliko në Përdorni stilet e personalizuara për butonin pastaj konfiguro:
  • Madhësia e tekstit të butonit:
    • Desktop: 20 px
    • Tableti: 16 px
    • Telefoni: 14 px
  • Ngjyra e tekstit të butonit: #ffffff
  • Sfondi: #1d1d1d
  • Gjerësia e kufirit të butonit: 0
  • Rrezja kufitare: 0
  • Hapësira e shkronjave: 3 pikë
  • Fonti i butonit: Work Sans
  • Stili i shkronjave: TT

3. Shtoni një imazh të sfondit

Tani që tona përmbajtje është konfiguruar, është koha për të filluar dizajnimin e sfondit të seksionit.

• Shkoni në ndryshimin e sfondit dhe klikoni në skedën e tretë, skedën e imazhit, pastaj klikoni në "Shto imazhin e sfondit".
• Kjo do të shfaqë bibliotekën tuaj të mediave, ku mund të zgjidhni një foto ose të ngarkoni një të re.
• Pasi të keni zgjedhur foton tuaj, klikoni butonin "Ngarko një imazh" në këndin e poshtëm djathtas.

4. Shtoni një model sfondi

Tani që kemi vendosur imazhin tonë të sfondit, le të shtojmë një model.

• Në skedë Sfond, lundroni te skeda e 5-të, skeda Modeli i sfondit, pastaj klikoni "Shto modelin e sfondit".
• zgjedh tufa-tufa nga menyja rënëse dhe konfiguroni këto cilësime:
  • Ngjyra e modelit – rgba (255,255,255,0.31)
  • Transformimi i modelit: asnjë
  • Madhësia: Madhësia aktuale
  • Origjina e Përsëritjes së Modelit: Nga lart poshtë
  • Modeli Përsërit: Përsërit
  • Modaliteti i përzierjes: Normal

5. Shto maskë sfondi

Tani që kemi vendosur imazhin dhe modelin tonë të sfondit, le të shtojmë një maskë sfondi.

• Në skedë Sfond, lundroni te skeda e 6-të, skeda Maska e sfondit, pastaj klikoni "Shto një maskë sfondi".
• zgjedh Bathë nga menyja rënëse dhe konfiguroni këto cilësime:
  • Ngjyra e maskës: rgba(0,0,0,0.36)
  • Raporti i pamjes së maskës: drejtkëndësh horizontal
  • Madhësia: Shtrihet për të mbushur

Kështu që ! Tani keni një seksion Hero të dizajnuar bukur.

Dizajni i Seksionit Hero #2

Tani le të hartojmë seksionin e dytë të heroit.

1. Shtoni një imazh të sfondit dhe vendosni modalitetin e përzierjes në Mbivendosje

Zgjidhni imazhin tuaj të sfondit, vendosni modalitetin e përzierjes në Mbivendosje dhe shtoni një ngjyrë mbivendosjeje prej rgba (10,10,10,0.64).

2. Shtoni një model sfondi

Tani që kemi vendosur imazhin e sfondit, le të shtojmë një model sfondi.

• Në skedën Sfondi, shkoni te skeda e 5-të, skeda Modeli i sfondit, pastaj klikoni "Shto modelin e sfondit".
• zgjedh tufa-tufa nga menyja rënëse dhe konfiguroni këto cilësime:
  • Ngjyra e modelit – rgba (255,255,255,0.09)
  • Transformimi i modelit: asnjë
  • Madhësia: Mbulesa
  • Origjina e përsëritjes së modelit: majtas lart
  • Modeli Përsërit: Përsërit
  • Modaliteti i përzierjes: Normal

3. Shto maskë sfondi

Tani që kemi vendosur imazhin dhe modelin tonë të sfondit, le të shtojmë një maskë sfondi.

• Në skedë Sfond, lundroni te skeda e 6-të, skeda Maska e sfondit, më pas klikoni "Shto maskën e sfondit".
• zgjedh shenjë për të futur diçka në tekst nga menyja rënëse dhe konfiguroni këto cilësime:
  • Ngjyra e maskës: rgba(0,0,0,0.36)
  • Transformimi i maskës: Asnjë
  • Raporti i pamjes: drejtkëndësh horizontal
  • Madhësia e maskës: Shtrihet për të mbushur
  • Modaliteti i përzierjes së maskës: Normal

Dizajni i Seksionit Hero #3

Tani le të hartojmë seksionin e tretë Hero.

1. Shtoni një imazh të sfondit dhe vendosni modalitetin e përzierjes në Mbivendosje

Zgjidhni imazhin tuaj të sfondit, vendosni modalitetin e përzierjes në Mbivendosje dhe shtoni një ngjyrë mbivendosjeje prej rgba (10,10,10,0.39).

2. Shtoni një model sfondi

Tani që kemi vendosur imazhin tonë të sfondit, le të shtojmë një model sfondi.

• Në skedë Sfond, lundroni te skeda e 5-të, skeda Modeli i sfondit, pastaj klikoni "Shto modelin e sfondit".
• zgjedh Vija diagonale 2 nga menyja rënëse dhe konfiguroni këto cilësime:
  • Ngjyra e modelit – rgba (0,0,0,0.06)
  • Transformimi i modelit: asnjë
  • Madhësia: Madhësia aktuale
  • Origjina e përsëritjes së modelit: majtas lart
  • Modeli Përsërit: Përsërit
  • Modaliteti i përzierjes: Normal

3. Shto maskë sfondi

Tani që kemi shtuar një imazh të sfondit dhe një model, le të shtojmë një maskë sfondi.

• Në skedë Sfond, lundroni te skeda e 6-të, skeda Maska e sfondit, më pas klikoni "Shto maskën e sfondit".
• zgjedh Trekëndëshat nga menyja rënëse dhe konfiguroni këto cilësime:
  • Ngjyra e maskës: rgba (10, 10, 10, 0,61)
  • Transformimi i maskës: asnjë
  • Raporti i pamjes: drejtkëndësh horizontal
  • Madhësia e maskës: Shtrihet për të mbushur
  • Modaliteti i përzierjes së maskës: Normal

Dizajni i Seksionit Hero #4

Tani le të dizajnojmë seksionin e katërt të Heroit.

1. Shtoni një imazh të sfondit

Zgjidhni imazhin tuaj të sfondit.

2. Shtoni një model sfondi

Tani që kemi shtuar imazhin tonë të sfondit, le të shtojmë një model sfondi.

• Në skedë Sfond, lundroni te skeda e 5-të, skeda Modeli i sfondit, pastaj klikoni "Shto modelin e sfondit".
• zgjedh Smiles nga menyja rënëse dhe konfiguroni këto cilësime:
  • Ngjyra e modelit – rgba (0,0,0,0.2)
  • Transformimi i modelit: asnjë
  • Madhësia: Mbulesa
  • Përsëritni origjinën: lart majtas
  • Modeli Përsërit: Përsërit
  • Modaliteti i përzierjes së modeleve: Normal

3. Shto maskë sfondi

Tani që kemi aplikuar imazhin dhe modelin tonë të sfondit, le të shtojmë një maskë sfondi.

• Në skedë Sfond, lundroni te skeda e 6-të, skeda Maska e sfondit, më pas klikoni "Shto maskën e sfondit".
• zgjedh Liqeni i këndit  nga menyja rënëse dhe konfiguroni këto cilësime:
  • Ngjyra e maskës: rgba (10, 10, 10, 0,61)
  • Transformimi i maskës: horizontale
  • Raporti i pamjes: Drejtkëndësh horizontal
  • Madhësia: Mbulesa
  • Pozicioni i maskës: në qendër të majtë
  • Modaliteti i përzierjes së maskës: Normal

3. Konfiguro parametrat e linjës

Para se të shkojmë, ky seksion Hero ka stile unike linjash. Le ta vendosim këtë.

• Madhësia:
  • Gjerësia: 80%
  • Gjerësia maksimale: 800 px
• Shtrirja e rreshtit:
  • Desktop: i parazgjedhur
  • Tableti: Qendër
  • Telefoni: Qendër
• Margjinat:
  • Majtas: 20vw

Dizajni i Seksionit Hero #5

Tani le të hartojmë seksionin e pestë të Heroit.

Shkarkoni DIVI tani!!!

1. Shtoni një imazh të sfondit

Zgjidhni imazhin tuaj të sfondit.

2. Shtoni një model

Tani që kemi vendosur imazhin tonë të sfondit, le të aplikojmë një model sfondi.

• Në skedë Sfond, lundroni te skeda e 5-të, skeda Modeli i sfondit, pastaj klikoni "Shto modelin e sfondit".
• zgjedh Kalon nga menyja rënëse dhe konfiguroni këto cilësime:
  • Ngjyra e modelit – #ffffff
  • Transformimi i modelit: asnjë
  • Madhësia: Madhësia e personalizuar
  • Gjerësia e modelit: 10 px
  • Lartësia e modelit: 10 px
  • Origjina e përsëritur: nga lart poshtë
  • Modeli Përsërit: Përsërit
  • Modaliteti i përzierjes së modeleve: Normal

3. Shto maskë sfondi

Tani që kemi një imazh të sfondit dhe një model të aplikuar, le të shtojmë një maskë sfondi.

• Në skedë Sfond, lundroni te skeda e 6-të, skeda Maska e sfondit, më pas klikoni "Shto maskën e sfondit".
• zgjedh Pilula diagonale  nga menyja rënëse dhe konfiguroni këto cilësime:
  • Ngjyra e maskës: rgba (10, 10, 10, 0,61)
  • Transformimi i maskës: horizontale
  • Raporti i pamjes: Drejtkëndësh horizontal
  • Madhësia: Mbulesa
  • Pozicioni i maskës: në qendër majtas
  • Modaliteti i përzierjes së maskës: Normal

3. Konfiguro parametrat e linjës

Para se të shkojmë, ky seksion Hero ka gjithashtu stile unike linjash. Le ta vendosim këtë.

• Madhësia:
  • Gjerësia: 80%
  • Gjerësia maksimale: 800 px
• Shtrirja e rreshtit:
  • Desktop: i parazgjedhur
  • Tableti: Qendër
  • Telefoni: Qendër
• Hapësira:
  • Margjina (djathtas): 18vw

Shiko gjithashtu: Divi: Si të shtoni maska ​​dhe modele sfondi në një kokë

Përfundim

Dizenjimi i një seksioni unik dhe tërheqës të Heroit për faqen tuaj të internetit është i lehtë me opsionet e reja maskë e sfondit dhe modelit nga Divi. Çdo veçori ka shumë opsione që ju lejojnë të krijoni sfonde vërtet krijuese. 

Plus, mund të shtoni modele dhe maska ​​sfondi në çdo artikull Divi Builder! Opsionet e dizajnit janë të pafundme.

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.

...