Îmbinarea mai multor imagini poate fi utilă pentru a crea fundaluri profesionale pentru dvs site-ul web. Ideea este să luați două sau trei imagini separate și să le suprapuneți. Apoi utilizați un mod de amestecare pentru a amesteca straturile împreună pentru a crea un design unitar și fără întreruperi.

Fiecare element din Divi Builder are un mod de îmbinare încorporat și opțiuni de filtrare, facilitând îmbinarea elementelor în constructorul Divi. Desigur, puteți amesteca imagini în Photoshop (sau un alt editor de fotografii), dar pentru cei care caută o soluție practică Divi, acest tutorial ar trebui să vă ajute, deoarece cu Divi este destul de ușor. Odată ce aveți imaginile la locul potrivit, le puteți amesteca cu doar câteva clicuri. Și, desigur, aveți un arsenal de opțiuni Divi pentru a face ultimele atingeri și pentru a da o nouă dimensiune creativă designului.

Să începem.

studiu

Iată o imagine de ansamblu asupra designului pe care îl vom construi împreună.

Ce ai nevoie pentru a începe

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

1. Dacă nu ați făcut-o deja, instalați și activați Divi tema instalat (sau pluginul Divi Builder dacă nu utilizați Divi tema).
2. Creați o pagină nouă în WordPress și folosiți Divi Builder pentru a edita pagina din partea frontală (constructor vizual).
3. Încărcați câteva imagini fictive în biblioteca media pentru a le utiliza pentru tutorial. Folosesc imagini de la Pachetul de dispunere a medicului ochilor .

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

Cum se amestecă mai multe imagini pentru a crea un design de fundal personalizat în Divi

Să începem cu secțiunea și linia

Pentru a finaliza lucrurile, adăugați un rând al unei coloane la secțiunea obișnuită.

Adăugarea de imagini cu modulul de imagine

Imaginea nr. 1

După ce rândul și coloana sunt definite, adăugați un modul de imagine la linie.

Încărcați o imagine de aproximativ 500 pixeli pe 700 pixeli. Folosesc unul din pachetul de machete pentru ochi.

Odată ce imaginea este încărcată, faceți lățimea maximă a imaginii folosind unitatea de lungime vw, astfel încât să se potrivească bine cu celelalte imagini pe care urmează să le îmbinăm, apoi aliniați-o la stânga după cum urmează. :

• Lățimea maximă: 33vw
• Alinierea modulului: stânga

Vrem ca următoarea imagine pe care o adăugăm să se alinieze la dreapta imaginii respective. Deci, trebuie să plutim această imagine spre stânga. Pentru a face acest lucru, adăugați următorul CSS la elementul principal:

float: left;

Imaginea nr. 2

Apoi adăugați un nou modul de imagine sub imaginea curentă.

După aceea, descărcați o nouă imagine ale cărei dimensiuni sunt apropiate de pixeli 1000 de pixeli 667.

Apoi dați imaginii o lățime nouă și o nouă aliniere maximă.

• Lățimea maximă: 40vw
• Alinierea modulului: dreapta

Întrucât prima imagine plutește spre stânga, a doua imagine trebuie să fie acum adiacentă la dreapta.

Vom reveni pentru a pune câteva atingeri finale acestor imagini, dar deocamdată să trecem la setările din secțiune.

Setări secțiune

Deschideți setările secțiunii și adăugați o imagine de fundal și un gradient după cum urmează:

• Imagine de fundal: [descărcați imaginea aproximativ 1920px cu 1280px]
  

• Culoare de fundal stânga Culoare: rgba (1,16,63,0.64)
• Culoare gradient dreapta fundal: rgba (12,113,195,0.82)
• Plasați gradientul deasupra imaginii de fundal: DA

Apoi, reglați puțin umplutura.

• Tapițerie (birou): 0px în partea de sus, 0px în partea de jos
• Padding (telefon): 0px în partea de sus, 10vw în partea de jos

Setări de linie

Când secțiunea este completă, deschideți setările liniei și actualizați următoarele elemente:

• Lățime: 100%;
• Lățime maximă: 100%;
• Tapițerie: 0px în partea de sus, 0px în partea de jos

Adăugați modul de îmbinare la linie

Acum linia ar trebui să acopere toată partea inferioară a secțiunii. Acest lucru ne va permite să adăugăm un mod de îmbinare la linie pentru a îmbina cele două imagini cu fundalul secțiunii. Pentru a face acest lucru, adăugați următorul mod de amestecare.

• Mod de fuziune: înmulțiți

De ce să înmulțiți?

Modul de amestecare multiplică înmulțește stratul / rândul curent (inclusiv imaginile din el) cu stratul de sub acesta (fundalul secțiunii). O modalitate ușoară de a vă gândi la efect este să vă imaginați două diapozitive într-un proiector de diapozitive stivuite unul în spatele celuilalt. Dacă proiectați cele două imagini pe un ecran, veți obține un amestec ușor mai întunecat al celor două.

Centrați imaginile pe verticală

Nu este necesar, dar dacă doriți să vă asigurați că ambele imagini din rând rămân centrate vertical, puteți adăuga un fragment CSS în coloană. Pentru a face acest lucru, deschideți setările rândului și apoi faceți clic pe setările coloanei. Apoi adăugați următorul cod CSS la elementul principal.

afișare: flex; align-items: centru;

Atingere finală la cele două cele mai bune imagini

În acest moment, cele două imagini de top ale noastre se împerechează bine, dar pot folosi câteva modificări de design pentru a face să pară ceva mai profesional. Putem folosi o umbră de cutie albă pentru a înmuia marginile imaginilor și putem folosi comanda Transformare pentru a le poziționa exact unde vrem să rămână.

Imagine # 1 Taste finale

Deschideți setările modulului imagine din stânga și actualizați următoarele:

• Box Shadow: vezi captura de ecran
• Box Shadow Blur Force: 6vw
• Grosimea nuanței cutiei: 6vw
• Culoare umbră: #ffffff
  

• Traducerea transformatorului: 5vw (axa X), 11vw (axa Y)

Imagine # 2 Taste finale

După ce ați terminat de manipulat imaginea # 1 din stânga, deschideți setările pentru imaginea # 2 din dreapta și efectuați următoarele modificări:

• Box Shadow: vezi captura de ecran
• Box Shadow Blur Force: 3vw
• Box Shadow Spread Force: 3vw
• Culoare umbră: #ffffff

Putem adăuga chiar și câteva filtre pentru a face imaginea mai accentuată.

• Saturație: 30%
• Opacitate: 60%

Adăugați conținut text

Acum, că secțiunea noastră este completă cu trei imagini frumos amestecate, putem adăuga noastre cuprins în partea de sus a secțiunii. Pentru a face acest lucru, adăugați o nouă secțiune sub secțiunea curentă.

Apoi adăugați un rând al unei coloane la secțiunea obișnuită.

Apoi adăugați un modul text la linie.

Conținutul corpului

Actualizați cuprins a modulului de text cu cuprins din următorul organism:

Rezervați un examen ocular Conținutul dvs. merge aici. Editați sau eliminați acest text în linie sau în modul Setări de conținut. De asemenea, puteți stiliza fiecare aspect al acestui conținut în setările de proiectare a modulului și chiar aplicați CSS personalizat acestui text în setările avansate ale modulului

Formatarea textului

După ce conținutul corpului este în poziție, actualizați parametrii de proiectare după cum urmează:

• Culoarea textului textului: #ffffff
• Font: Poppins
• Culoarea textului titlului: #ffffff
• Text Dimensiune titlu: 5vw
• Lățime: 60vw (desktop), 100% (telefon)
• Marja (desktop): -35% în creștere, 35% mai mic
• Marja (telefon): -70% în creștere, 70% mai mic

Proiect final

Iată proiectul final.

Ultimele gânduri

Modul de amestecare și opțiunile de filtrare ale Divi vă oferă tot ce aveți nevoie pentru a combina imaginile pentru a crea fundaluri profesionale. Trucul este de a poziționa imaginile folosind unități de lungime vw, astfel încât designul de fundal să fie, de asemenea, receptiv pe mobil. Dar odată ce imaginile sunt în poziție, putem experimenta tot felul de moduri de amestecare și nenumărate alte opțiuni de design pentru a crea modele extrem de armonioase.

Sper că acest articol v-a oferit puțină inspirație și sper să auziți de la dvs. în comentarii.

Pentru sănătatea ta!