5 Mască de fundal și suprapuneri de model pe care le puteți aplica imaginii de fundal

Publicat: 2022-08-08

Cu cea mai recentă versiune de mască de fundal și model de fundal de la Divi, puteți crea câteva secțiuni de eroi unice pentru site-ul dvs. O secțiune erou este prima secțiune a site-ului dvs. și este primul lucru pe care vizitatorii dvs. îl văd înainte de a parcurge site-ul dvs., așa că este important să fiți atrăgător! Combinarea opțiunilor de imagine de fundal, masca de fundal și model de fundal ale Divi ne permite să creăm secțiuni de eroi convingătoare, astfel încât site-ul dvs. să facă o primă impresie grozavă.

Această postare vă va arăta cum să creați cinci măști de fundal unice și suprapuneri de modele pe care le puteți aplica unei imagini de fundal pentru a crea secțiuni de eroi cu adevărat uimitoare. Acest tutorial va acoperi pașii esențiali necesari pentru a crea fiecare secțiune de eroi și vă va oferi instrumentele de care aveți nevoie pentru a crea o secțiune de erou uimitoare pentru site-ul dvs. în câteva minute.

În acest exemplu, vom folosi fotografii gratuite din pachetul de aranjare a cursurilor online. Pentru a utiliza aceleași imagini, derulați până la capătul acestei postări pentru a descărca imaginile la rezoluție completă.

Să începem!

Ce creăm

Iată o privire rapidă asupra celor cinci secțiuni de eroi pe care le vom crea astăzi în această postare.

Design-urile sunt subtile, simple și totuși de impact.

Descărcați aspectul GRATUIT

Dacă doriți să descărcați designul de aspect pre-proiectat din acest tutorial, mai întâi va trebui să îl descărcați folosind butonul de mai jos. Pentru a obține acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily utilizând formularul de mai jos. Ca nou abonat, vei primi și mai multă bunătate Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „reabonat” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele
Descarcă gratis

Descarcă gratis

Alăturați-vă buletinului informativ Divi și vă vom trimite prin e-mail o copie a pachetului Divi Landing Page Layout, plus o mulțime de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmăriți-vă și veți deveni un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți adresa de e-mail mai jos și faceți clic pe descărcare pentru a accesa pachetul de layout.

Te-ai abonat cu succes. Vă rugăm să vă verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele săptămânale gratuite de layout Divi!

Cum să descărcați și să utilizați layout-urile

Pentru a importa aspectul secțiunii în Biblioteca Divi, procedați în felul următor:

  1. Navigați la Biblioteca Divi.
  2. Faceți clic pe butonul Import din partea de sus a paginii.
  3. În fereastra pop-up de portabilitate, selectați fila de import.
  4. Alegeți fișierul de descărcare de pe computer (asigurați-vă că dezarhivați mai întâi fișierul și utilizați fișierul JSON).
  5. Apoi faceți clic pe butonul de import.

După ce ați importat cu succes machetele, acestea vor fi văzute în Biblioteca dvs. Divi și vor fi disponibile pentru utilizare în Divi Builder.

Acum, să trecem la tutorial!

Ce aveți nevoie pentru a începe

Înainte de a începe, va trebui să:

  1. Instalați și activați tema Divi.
  2. Creați o pagină nouă, publicați-o și faceți clic pe butonul „Utilizați Divi Builder” pentru a edita pagina din front-end folosind Visual Builder.
  3. Alegeți opțiunea „Construiți de la zero”.

Acum avem o pânză goală pentru a începe proiectarea!

Cum să creați 5 suprapuneri de măști de fundal și model pentru a le aplica unei imagini de fundal

Mai întâi, să creăm secțiunea Eroi

Toate exemplele noastre de design folosesc aceeași structură de secțiune, rând și coloană, așa că haideți să le setăm acum.

1. Creați o structură de aspect

Adăugați un rând în pagina dvs. și apoi faceți clic pe pictograma verde „+” pentru a afișa structura coloanei și selectați prima coloană, o coloană cu lățime completă.

2. Adăugați spațiere între secțiuni

Acum că avem rândul și coloana setate, este timpul să adăugați spațiere la secțiune.

Sub fila Spațiere, actualizați următoarele:

  • Desktop: 400px de sus și 400px de jos
  • Tabletă: 200px de sus și 200px de jos; 25px la stânga și la dreapta
  • Telefon: 50px sus și 50px jos; 25px la stânga și la dreapta

Cum să proiectați secțiunea Hero #1

Să proiectăm prima secțiune de eroi.

1. Adăugați text pentru titlu

Faceți clic pe pictograma gri „+” pentru a afișa biblioteca de module. Derulați la text și faceți clic pentru a încărca.

Tastați textul titlului și apoi sub fila Textul titlului, configurați aceste setări:

  • Familia de fonturi: Work Sans
  • Culoare font: alb #ffffff
  • Marimea fontului:
    • Desktop: 3 rem
    • Tabletă: 2,2 rem
    • Telefon: 1,4 rem

2. Adăugați modul de buton

Adăugați un buton și configurați aceste setări:

  • Sub fila Text tip: Aflați mai multe
  • Sub fila Aliniere, alegeți: Center
  • Faceți clic pe Utilizați stiluri personalizate și apoi configurați:
    • Dimensiunea textului butonului:
      • Desktop: 20px
      • Tabletă: 16px
      • Telefon: 14px
    • Culoarea textului butonului: alb #ffffff
    • Culoare de fundal pentru buton: negru #1d1d1d
    • Lățimea chenarului butonului: 0
    • Raza marginii butonului: 0
    • Spațiere între litere butoane: 3pt
    • Font pentru buton: Work Sans
    • Stilul fontului butonului: majuscule

3. Adăugați o imagine de fundal

Acum că avem conținutul configurat, este timpul să începem să proiectăm fundalul secțiunii.

  1. Navigați la comutatorul de fundal și faceți clic pe a treia filă, pe fila imagine, apoi faceți clic pe „Adăugați imagine de fundal”.
  2. Aceasta vă va afișa biblioteca media, unde puteți selecta o fotografie sau puteți încărca una nouă.
  3. După ce fotografia dvs. este selectată, faceți clic pe butonul „Încărcați o imagine” din colțul din dreapta jos.

4. Adăugați un model de fundal

Acum că avem imaginea de fundal configurată, să adăugăm un model.

  • În fila Fundal, navigați la a cincea filă, fila Modele, apoi faceți clic pe „Adăugați model de fundal”.
  • Selectați Tufted din meniul derulant și configurați aceste setări:
    • Culoare model – rgba(255,255,255,0.31)
    • Transformare model: niciuna
    • Dimensiune model: Dimensiune reală
    • Repetare model Origine: Sus stânga
    • Repetare model: Repetare
    • Mod de amestecare: Normal

5. Adăugați mască de fundal

Acum că avem imaginea de fundal și modelul configurate, să adăugăm o mască de fundal.

  • În fila Fundal, navigați la a șasea filă, fila Mască și faceți clic pe „Adăugați mască de fundal”.
  • Selectați Bean din meniul derulant și configurați aceste setări:
    • Culoare masca: rgba(0,0,0,0.36)
    • Mask Aspect Ration: dreptunghi orizontal
    • Mărimea măștii: se întinde până la umplere

Voila! Acum aveți o secțiune de eroi frumos proiectată.

Cum să proiectați secțiunea Hero #2

Acum, să proiectăm a doua secțiune de eroi.

1. Adăugați o imagine de fundal și setați modul de amestecare la suprapunere

Selectați imaginea de fundal, setați modul de amestec la Overlay și adăugați o culoare de suprapunere de rgba (10,10,10,0.64).

2. Adăugați un model de fundal

Acum că avem imaginea de fundal configurată, să adăugăm un model de fundal.

  • În fila Fundal, navigați la a cincea filă, fila Modele și faceți clic pe „Adăugați model de fundal”.
  • Selectați Tufted din meniul derulant și configurați aceste setări:
    • Culoare model – rgba(255,255,255,0.09)
    • Transformare model: niciuna
    • Dimensiune model: coperta
    • Repetare model Origine: Sus stânga
    • Repetare model: Repetare
    • Mod de amestecare: Normal

3. Adăugați mască de fundal

Acum că avem imaginea de fundal și modelul configurate, să adăugăm o mască de fundal.

  • În fila Fundal, navigați la a șasea filă, fila Mască și faceți clic pe „Adăugați mască de fundal”.
  • Selectați Caret din meniul derulant și configurați aceste setări:
    • Culoare masca: rgba(0,0,0,0.36)
    • Transformarea măștii: Niciuna
    • Mask Aspect Ration: dreptunghi orizontal
    • Mărimea măștii: se întinde până la umplere
    • Mod de amestecare a mască: Normal

Cum să proiectați secțiunea Hero #3

Acum, să proiectăm a treia secțiune de eroi.

1. Adăugați o imagine de fundal și setați modul de amestecare la suprapunere

Selectați imaginea de fundal, setați modul de amestec la Overlay și adăugați o culoare de suprapunere de rgba (10,10,10,0.39).

2. Adăugați un model de fundal

Acum că avem imaginea de fundal configurată, să adăugăm un model de fundal.

  • În fila Fundal, navigați la a cincea filă, fila modele și faceți clic pe „Adăugați model de fundal”.
  • Selectați Diagonal Stripes 2 din meniul derulant și configurați aceste setări:
    • Culoare model – rgba(0,0,0,0.06)
    • Transformare model: niciuna
    • Dimensiune model: Dimensiune reală
    • Repetare model Origine: Sus stânga
    • Repetare model: Repetare
    • Mod de amestecare: Normal

3. Adăugați mască de fundal

Acum că avem o imagine de fundal și un model adăugate, să adăugăm o mască de fundal.

  • În fila Fundal, navigați la a șasea filă, fila Mască și faceți clic pe „Adăugați mască de fundal”.
  • Selectați Triunghiuri din meniul derulant și configurați aceste setări:
    • Culoare masca: rgba(10,10,10,0.61)
    • Transformare model: niciuna
    • Mask Aspect Ration: dreptunghi orizontal
    • Mărimea măștii: se întinde până la umplere
    • Mod de amestecare a mască: Normal

Cum să proiectați secțiunea Hero #4

Acum, să proiectăm a patra secțiune de eroi.

1. Adăugați o imagine de fundal

Selectați imaginea de fundal.

2. Adăugați un model de fundal

Acum că ne-am adăugat imaginea de fundal, să adăugăm un model de fundal.

  • În fila Fundal, navigați la a cincea filă, fila Modele și faceți clic pe „Adăugați model de fundal”.
  • Selectați Zâmbete din meniul drop-down și configurați aceste setări:
    • Culoare model – rgba(0,0,0,0.2)
    • Transformare model: niciuna
    • Dimensiune model: coperta
    • Repetare model Origine: Sus stânga
    • Repetare model: Repetare
    • Mod de amestecare: Normal

3. Adăugați mască de fundal

Acum că ne-am aplicat imaginea de fundal și modelul, să adăugăm o mască de fundal.

  • În fila Fundal, navigați la a șasea filă, fila Mască și faceți clic pe „Adăugați mască de fundal”.
  • Selectați Corner Lake din meniul drop-down și configurați aceste setări:
    • Culoare masca: rgba(10,10,10,0.61)
    • Transformarea măștii: orizontală
    • Raportul aspect al măștii: dreptunghi orizontal
    • Dimensiune masca: capac
    • Poziția măștii: centru stânga
    • Mod de amestecare a mască: Normal

3. Configurați setările rândurilor

Înainte de a merge, această secțiune de eroi are stiluri de rând unice. Să setăm asta.

  • Dimensiuni:
    • Latime: 80%
    • Lățimea maximă: 800 px
  • Alinierea rândurilor:
    • Desktop: implicit
    • Tabletă: Centru
    • Telefon: Centru
  • Spațiere:
    • Stânga: 20vw

Cum să proiectați secțiunea Hero #5

Acum, să proiectăm a cincea secțiune de eroi.

1. Adăugați o imagine de fundal

Selectați imaginea de fundal.

2. Adăugați un model de fundal

Acum că avem imaginea de fundal configurată, să aplicăm un model de fundal.

  • În fila Fundal, navigați la a cincea filă, fila Modele și faceți clic pe „Adăugați model de fundal”.
  • Selectați Cruci din meniul drop-down și configurați aceste setări:
    • Culoare model – #ffffff
    • Transformare model: niciuna
    • Dimensiune model: Dimensiune personalizată
    • Lățimea modelului: 10px
    • Înălțimea modelului: 10px
    • Repetare model Origine: Sus stânga
    • Repetare model: Repetare
    • Mod de amestecare: Normal

3. Adăugați mască de fundal

Acum că avem o imagine de fundal și un model aplicat, să adăugăm o mască de fundal.

  • În fila Fundal, navigați la a șasea filă, fila Mască și faceți clic pe „Adăugați mască de fundal”.
  • Selectați Diagonal Pills din meniul drop-down și configurați aceste setări:
    • Culoare masca: rgba(10,10,10,0.61)
    • Transformarea măștii: orizontală
    • Raportul aspect al măștii: dreptunghi orizontal
    • Dimensiune masca: capac
    • Poziția măștii: centru stânga
    • Mod de amestecare a mască: Normal

3. Configurați setările rândurilor

Înainte de a merge, această secțiune de eroi are stiluri de rând unice. Să setăm asta.

  • Dimensiuni:
    • Latime: 80%
    • Lățimea maximă: 800 px
  • Alinierea rândurilor:
    • Desktop: implicit
    • Tabletă: Centru
    • Telefon: Centru
  • Spațiere:
    • Dreapta: 18vw

Obțineți mai multe modele de mască de fundal și modele!

Dacă doriți mai multe modele ca acesta, consultați aceste 12 modele de măști de fundal și modele gratuite pentru descărcare.

Gânduri finale

Crearea unei secțiuni de eroi unice și atrăgătoare pentru site-ul dvs. este ușoară cu noua mască de fundal și opțiuni de model Divi. Fiecare caracteristică are multe opțiuni care vă permit să creați modele de fundal cu adevărat creative. În plus, puteți adăuga modele de fundal și măști la orice element Divi Builder! Opțiunile de design sunt nesfârșite.