Divi: 5 suprapuneri de măști și modele aplicabile unei imagini de fundal

Doriți să utilizați masca Divi și suprapunerea modelului de fundal?

Cu ultimul versiunea măștii de fundal și caracteristica modelului de fundal din Divi, puteți crea secțiuni unice Hero pentru dvs site-ul web. O secțiune erou este prima secțiune a ta site-ul web și acesta este primul lucru al tău vizitatori vezi înainte de a derula site-ul web, așa că este important să fii atrăgător!

Acest articol 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 eroi cu adevărat uimitoare. 

Acest tutorial va acoperi pașii esențiali necesari pentru a crea fiecare secțiune Ero și vă va oferi instrumentele de care aveți nevoie pentru a crea o secțiune Ero uimitoare pentru site-ul dvs. în câteva minute.

Să începem!

studiu

Iată o scurtă prezentare generală a celor cinci secțiuni eroi pe care le vom crea astăzi în acest articol.

Descărcați DIVI acum!!!

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

Citiți și: Divi: Cum să utilizați „Gradient Builder” pentru a vă înfrumuseța imaginile

Creați o pagină nouă cu Divi Builder

Pentru a începe, va trebui să faceți următoarele:

Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.

Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizați Divi Builder

Apoi faceți clic pe Începeți să construiți (Construiește de la zero)

După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.

Cinci exemple de mască de fundal și suprapuneri de model de aplicat unei imagini de fundal

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

Toate modelele noastre de modele 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., apoi faceți clic pe pictograma verde „+” pentru a afișa structura coloanei și selectați prima coloană, coloana cu lățime completă.

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

Acum că ne-am definit rândul și coloana, este timpul să adăugăm puțină spațiere la secțiune.

În fila Spațiere, actualizați următoarele:

• Desktop: 400 pixeli (sus și jos)
• Tabletă: 200 pixeli (sus și jos); 25 px (stânga și dreapta)
• Telefon: 50 pixeli (Sus și Jos); 25 px (stânga și dreapta)

Designul secțiunii Hero #1

Să proiectăm prima secțiune Hero.

Descărcați DIVI acum!!!

1. Adăugați textul antetului

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.

Introduceți textul titlului, apoi sub filă Titlu text, configurați aceste setări:

• Font de titlu: Work Sans
• Culoare text: alb #ffffff
• Dimensiunea textului titlului:
  • Desktop: 3 em
  • Tabletă: 2,2 em
  • Telefon: 1.4em

2. Adăugați modul de buton

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

• Sub filă Conţinuts: Aflați mai multe
• Sub filă Aliniere, alegeți: Center
• Faceți clic pe Utilizați stiluri personalizate pentru buton apoi configurati:
  • Dimensiunea textului butonului:
    • Desktop: 20px
    • Tabletă: 16px
    • Telefon: 14px
  • Culoarea textului butonului: #ffffff
  • Fundal: #1d1d1d
  • Lățimea chenarului butonului: 0
  • Raza marginii: 0
  • Spațiere între litere: 3 puncte
  • Font pentru buton: Work Sans
  • Stil font: TT

3. Adăugați o imagine de fundal

Acum că noastre cuprins este configurat, este timpul să începeți proiectarea fundalului secțiunii.

• Accesați comutatorul de fundal și faceți clic pe a treia filă, fila imagine, apoi faceți clic pe „Adăugați imagine de fundal”.
• Aceasta vă va afișa biblioteca media, unde puteți selecta o fotografie sau puteți încărca una nouă.
• După ce ați selectat fotografia, 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ă ne-am configurat imaginea de fundal, să adăugăm un model.

• În filă Context, navigați la a 5-a filă, fila Model de fundal, apoi faceți clic pe „Adăugați model de fundal”.
• selecta smocuri din meniul derulant și configurați aceste setări:
  • Culoare model – rgba(255,255,255,0.31)
  • Transformare model: niciuna
  • Dimensiune: Dimensiunea reală
  • Originea repetării modelului: Sus, jos
  • Repetare model: Repetare
  • Mod de amestecare: normal

5. Adăugați mască de fundal

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

• În filă Context, navigați la a șasea filă, fila Mască de fundal, apoi faceți clic pe „Adăugați o mască de fundal”.
• selecta Fasole din meniul derulant și configurați aceste setări:
  • Culoare masca: rgba(0,0,0,0.36)
  • Raport de aspect al măștii: dreptunghi orizontal
  • Dimensiune: se întinde pentru a umple

Asa de ! Acum aveți o secțiune Eroi frumos proiectată.

Design Hero #2 al secțiunii

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 amestecare 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ă am configurat imaginea de fundal, să adăugăm un model de fundal.

• În fila Fundal, accesați a cincea filă, fila Model de fundal, apoi faceți clic pe „Adăugați model de fundal”.
• selecta smocuri din meniul derulant și configurați aceste setări:
  • Culoare model – rgba(255,255,255,0.09)
  • Transformare model: niciuna
  • Dimensiune: 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 configurat imaginea și modelul de fundal, să adăugăm o mască de fundal.

• În filă Context, navigați la a șasea filă, fila Mască de fundal, apoi faceți clic pe „Adăugați mască de fundal”.
• selecta Semn de omisiune din meniul derulant și configurați aceste setări:
  • Culoare masca: rgba(0,0,0,0.36)
  • Transformarea măștii: Niciuna
  • Raport de aspect: dreptunghi orizontal
  • Dimensiunea măștii: se întinde pentru a umple
  • Mod de amestecare a mască: Normal

Design Hero #3 al secțiunii

Acum să proiectăm a treia secțiune Hero.

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 amestecare 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ă ne-am configurat imaginea de fundal, să adăugăm un model de fundal.

• În filă Context, navigați la a șasea filă, fila Model de fundal, apoi faceți clic pe „Adăugați model de fundal”.
• selecta dungi diagonale 2 din meniul derulant și configurați aceste setări:
  • Culoare model – rgba(0,0,0,0.06)
  • Transformare model: niciuna
  • Dimensiune: Dimensiunea reală
  • Repetare model Origine: Sus stânga
  • Repetare model: Repetare
  • Mod de amestecare: Normal

3. Adăugați mască de fundal

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

• În filă Context, navigați la a șasea filă, fila Mască de fundal, apoi faceți clic pe „Adăugați mască de fundal”.
• selecta Triunghiuri din meniul derulant și configurați aceste setări:
  • Culoare măști: rgba(10, 10, 10, 0,61)
  • Transformarea măștii: niciuna
  • Raport de aspect: dreptunghi orizontal
  • Dimensiunea măștii: se întinde pentru a umple
  • Mod de amestecare a mască: Normal

Design Hero #4 al secțiunii

Acum să proiectăm a patra secțiune din Hero.

1. Adăugați o imagine de fundal

Selectați imaginea de fundal.

2. Adăugați un model de fundal

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

• În filă Context, navigați la a șasea filă, fila Model de fundal, apoi faceți clic pe „Adăugați model de fundal”.
• selecta Smiles din meniul derulant și configurați aceste setări:
  • Culoare model – rgba(0,0,0,0.2)
  • Transformare model: niciuna
  • Dimensiune: Coperta
  • Repetați originea: stânga sus
  • Repetare model: Repetare
  • Mod de amestecare a modelelor: 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 filă Context, navigați la a șasea filă, fila Mască de fundal, apoi faceți clic pe „Adăugați mască de fundal”.
• selecta Lacul de colț  din meniul derulant și configurați aceste setări:
  • Culoare măști: rgba(10, 10, 10, 0,61)
  • Transformarea măștii: orizontală
  • Raport de aspect: dreptunghi orizontal
  • Dimensiune: Coperta
  • Poziția măștii: centru stânga
  • Mod Mask Blender: Normal

3. Configurați parametrii de linie

Înainte de a merge, această secțiune Hero are stiluri de linii unice. Să setăm asta.

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

Design Hero #5 al secțiunii

Acum să proiectăm cea de-a cincea secțiune Hero.

Descărcați DIVI acum!!!

1. Adăugați o imagine de fundal

Selectați imaginea de fundal.

2. Adăugați un model

Acum că ne-am configurat imaginea de fundal, să aplicăm un model de fundal.

• În filă Context, navigați la a șasea filă, fila Model de fundal, apoi faceți clic pe „Adăugați model de fundal”.
• selecta Cruce din meniul derulant și configurați aceste setări:
  • Culoare model – #ffffff
  • Transformare model: niciuna
  • Dimensiune: Dimensiune personalizată
  • Lățimea modelului: 10px
  • Înălțimea modelului: 10px
  • Repetați originea: sus jos
  • Repetare model: Repetare
  • Mod de amestecare a modelelor: 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 filă Context, navigați la a șasea filă, fila Mască de fundal, apoi faceți clic pe „Adăugați mască de fundal”.
• selecta Pastile diagonale  din meniul derulant și configurați aceste setări:
  • Culoare măști: rgba(10, 10, 10, 0,61)
  • Transformarea măștii: orizontală
  • Raport de aspect: dreptunghi orizontal
  • Dimensiune: Coperta
  • Poziția măștii: centru stânga
  • Mod de amestecare a mască: Normal

3. Configurați parametrii de linie

Înainte de a merge, această secțiune Hero are și stiluri de linii unice. Să setăm asta.

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

Vezi si: Divi: Cum să adăugați măști și modele de fundal la un antet

Concluzie

Crearea unei secțiuni Hero unică și atrăgătoare pentru site-ul dvs. este ușor cu noile opțiuni masca de fundal și model de Divi. Fiecare caracteristică are multe opțiuni care vă permit să creați fundaluri cu adevărat creative. 

În plus, puteți adăuga modele de fundal și măști la orice articol Divi Builder! Opțiunile de design sunt nesfârșite.

Sperăm că această tehnică va adăuga o altă abilitate de design utilă pentru proiectele viitoare.

Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.

De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.

Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...