Doriți să creați imagini de fundal unice folosind modul de amestecare a modelelor Divi ?
Setările de model de fundal încorporate ale Divi vă permit să creați modele atrăgătoare și să adăugați stil imaginilor de fundal ale dvs site-ul web. Puteți utiliza setările modului de amestecare pentru a regla modul în care modelul se îmbină cu imaginea de fundal.
În acest tutorial, vă vom arăta câteva exemple despre cum să adăugați un mod de amestecare a modelelor la imaginile de fundal ale paginii dvs. Urmați-le pentru a recrea aceste look-uri pe cont propriu sau folosiți-le ca inspirație pentru a vă crea propriile modele personalizate.
Să începem!
studiu
Iată o previzualizare a ceea ce vom proiecta în acest tutorial.
Primul aspect
Al doilea aspect
Al treilea aspect
Cum să utilizați modurile de amestecare a modelelor pe imaginile de fundal Divi
Creați o pagină nouă cu un aspect predefinit
Vom începe prin a folosi un aspect predefinit din bibliotecă Divi. Pentru acest design vom folosi « Pagina de destinație pentru Marina "de Pachet de amenajare Marina .
Adăugați o pagină nouă la dvs site-ul web și dați-i un titlu, apoi selectați opțiunea Utilizați Divi Builder.
Vom folosi un aspect prestabilit din biblioteca Divi pentru acest exemplu, așa că selectați Răsfoiți Aspecte.
Găsiți și selectați aspectul Pagina de destinație pentru Marina.
selecta Utilizați acest aspect pentru a adăuga aspectul paginii dvs.
Acum suntem gata de proiectare.
Primul aspect
Pentru primul nostru design, vom adăuga un model chevron la prima imagine de antet. Acest lucru va adăuga un oarecare interes vizual antetului.
Citiți și: Divi: Cum să personalizați modulul „Timer numărătoare inversă” cu un GIF
Datorită modului de amestecare pe care îl vom aplica, modelul va fi mai subtil și va permite totuși imaginea de fundal să fie vizibilă.
Mai întâi, deschideți setările secțiunii și accesați secțiunea Context. Faceți clic pe filă Model de fundal și selectați Adăugați un model de fundal.
Apoi, selectați tipul de model. După cum puteți vedea, există multe șabloane diferite din care puteți alege și toate pot fi personalizate în continuare prin setările șablonului de mai jos.
- Tip de model: țesut inversat 2
S-a adăugat modul „Amestecare de modele”.
În cele din urmă, setați modul de amestecare al modelului. Vom folosi modul de amestecare Lumina slaba pentru acest exemplu. Acest mod de amestecare face modelul mai subtil, astfel încât să nu distragă atenția de la imaginea de fundal.
- Mod de amestecare a modelelor: lumină moale
rezultat
Iată designul final al primului nostru exemplu.
Iată versiunea mobilă.
Al doilea aspect
Pentru al doilea aspect, vom folosi un model de valuri suprapus pe imaginea de fundal și pe gradient, care se potrivește bine cu tema nautică a paginii.
Mai întâi, navigați la secțiune "Cum functioneaza" și deschideți setările secțiunii.
Deschide setările Context, apoi selectați fila Model de fundalşi faceți clic Adăugați un model de fundal.
Pentru acest design vom folosi tipul de model Valuri.
- Tip de model: Valuri
Apoi schimbați culoarea modelului în alb.
- Culoare model: #FFFFFF
S-a adăugat modul de amestecare a modelelor
Acum putem adăuga modul de amestecare modelului nostru. Setați modul de amestecare a modelelor la Acoperire.
Descoperiți și: Divi: Cum să personalizați coșul și pictogramele de căutare ale modulului „Fullwidth Menu”.
Acest mod de amestecare întunecă culorile întunecate din imaginea de fundal și luminează culorile deschise.
- Mod de amestecare a modelelor: Suprapunere
rezultat
Iată rezultatul final al celui de-al doilea exemplu aplicat secțiunii "Cum functioneaza".
Și aici este versiunea mobilă.
Al treilea aspect
Să începem al treilea aspect.
Pentru acest aspect, vom adăuga dungi diagonale opace pe fundalul „ Chemare la acțiune".
Începeți prin a deschide setările secțiunii și accesați secțiunea Context. Faceți clic pe filă Model de fundal, apoi selectați Adăugați un model de fundal.
Selectați modelul Dungi diagonale.
Apoi, setați culoarea modelului.
- Culoare model: rgba(255,255,255,0.25)
Întoarceți modelul orizontal utilizând setările Transform Pattern. Acesta este un alt parametru care vă poate ajuta să reglați modelul după bunul plac.
- Transformarea modelului: orizontală
S-a adăugat modul de amestecare a modelelor
În cele din urmă, setați modul de amestecare al modelului. Pentru acest design, vom folosi modul de amestecare Luminozitate.
Citiți și ghidul nostru despre: Divi: Cum să utilizați „Gradient Builder” pentru a vă înfrumuseța imaginile
Acest lucru, combinat cu culoarea modelului nostru, adaugă un ecran luminos imaginii, permițând fotografiei să se arate. Cu acest design, imaginea bărcii iese mai mult în evidență din fundal, deoarece modelul adaugă un contrast distinctiv.
- Mod de amestecare a modelelor: Luminozitate
rezultat
Iată designul final pentru această secțiune.
Și iată versiunea sa mobilă.
Rezultat final
Acum să aruncăm o privire asupra designului întregii pagini cu moduri de amestecare a modelelor.
Descărcați DIVI acum!!!
Concluzie
Adăugarea unui model poate fi o modalitate excelentă de a adăuga interes vizual imaginii de fundal, dar uneori modelul poate copleși imaginea de fundal. Din fericire, Divi vine cu o mulțime de moduri de amestecare, astfel încât să puteți personaliza modelele cât de mult doriți.
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.
...
