Divi: Folosiți setările de mască de fundal și opțiunile de transformare a modelului

Doriți să combinați setările măștii de fundal și opțiunile de transformare a modelului Divi pentru a crea fundaluri unice?

Modelele de fundal sunt o modalitate excelentă de a vă oferi site-ul web fler vizual și ieși în evidență din mulțime. Noile setări de mască de fundal și de transformare a modelului de la Divi pot fi combinate în mai multe moduri pentru a crea aceste modele de fundal.

În acest articol, vom vedea cum să folosim setările de mască de fundal și de transformare a modelului din Divi pentru a crea fundaluri interesante pentru machetele dvs Divi.

Să începem.

studiu

În primul rând, iată o previzualizare a fiecărui exemplu pe diferite dimensiuni de ecran (telefon și desktop).

Citiți și: Divi: Cum să utilizați efectele de umbră și hover pentru a crea conținut interactiv

Exemplu 1

Versiunea 1 pe desktop

Versiunea 1 pe telefon

Descărcați DIVI acum!!!

Versiunea 2 pe desktop

Versiunea 2 pe telefon

Exemplu 2

Versiunea 1 pe desktop

Versiunea 1 pe telefon

Descărcați DIVI acum!!!

Versiunea 2 pe desktop

Versiunea 2 pe telefon

Exemplu 3

Versiunea 1 pe desktop

Versiunea 1 pe telefon

Descărcați DIVI acum!!!

Versiunea 2 pe desktop

Versiunea 2 pe telefon

Opțiuni pentru masca de fundal și transformarea modelului Divi

Noile caracteristici ale modelului de mască și fundal ale Divi includ mai multe opțiuni pentru a le ajusta. Ajustările includ rotire orizontală și verticală, rotație și inversare. Pentru a vedea opțiunile, accesați setările de fundal ale unei secțiuni sau linii și selectați filele Model de fundal sau Mască de fundal.

După ce ați adăugat un model sau o mască, apar setările de transformare. Pur și simplu faceți clic pe opțiunile pe care doriți să le utilizați. Le putem folosi împreună și în orice combinație dorim.

Cum funcționează setările de transformare a măștii și modelului Divi

Modelul de mai jos este Zig Zag cu setări implicite.

Opțiuni pentru masca de fundal și transformarea modelului Divi

Adăugăm o mască Layer Blog în imaginea de mai jos. Să le folosim pentru a demonstra cum funcționează setările Masca de fundal și Transformarea modelului.

Flip orizontal

Este inversarea orizontală. Am aplicat setările de transformare atât modelului, cât și măștii.

Flip vertical

Aceasta este răsturnarea verticală pentru model și mască.

Rotație

Acesta arată Rotația pentru model și mască.

Verso

Acest exemplu arată inversare pentru model și mască.

Combinații de mască de fundal și transformare a modelului

Desigur, putem folosi și parametrii de transformare în diverse combinații. Aici sunt cateva exemple.

Aceasta rotește modelul și inversează masca.

Combinații de mască de fundal și transformare a modelului

Acest exemplu utilizează răsturnare verticală, rotație și inversare pentru modelul de fundal. Masca de fundal folosește răsturnare orizontală, răsturnare verticală și rotație.

Pentru acest exemplu, am folosit rotire orizontală și rotire pentru modelul de fundal și rotire verticală și rotație pentru masca de fundal.

Exemple de setări de mască de fundal și de transformare a modelului

În continuare, să vedem cum aceste setări pot fi utilizate cu aspectele Divi. Vom folosi o secțiune ca punct de plecare și vom crea trei exemple. O vom personaliza și apoi vom folosi setările de transformare pentru a o modifica pentru fiecare exemplu.

Pentru exemplele noastre, folosim o versiune modificată a secțiunii Hero a paginii de destinație cu aspect Estate Planificare disponibil în Divi.

Iată o prezentare generală a secțiunii în cauză. Folosește culoarea de fundal: #92a5ab.

Fundal: #92a5ab

Exemple de setări de mască de fundal și de transformare a modelului

Masca de fundal și parametrii de transformare a modelului Exemplul 1

Primul nostru exemplu ne oferă un arc care se află vertical în centrul ecranului. O parte a ecranului are un model cu smocuri. În continuare, vom crea o versiune alternativă cu arcul îndreptat în cealaltă direcție.

model de fundal

Deschideți setările secțiunii, derulați în jos la Context și selectați fila Model de fundal. Alegeți Tufted pentru modelul de fundal și Inversing pentru Pattern Transform.

Model de fundal: tufted
Transformare model: invers

Masca de fundal și parametrii de transformare a modelului Exemplul 1

Mască de fundal

Selectați fila Mască de fundal și alegeți Arc pentru masca de fundal. Schimbați culoarea măștii la #616d72 și setați transformarea măștii la Inversare. Aceasta completează prima noastră versiune a arcului cu smocuri.

Mască de fundal: Arh
Culoare măști: #616d72
Transformarea măștii: inversează

Exemplul 1 Versiunea 2

În continuare, să creăm o variație a designului nostru. Doar modificați masca transforma pentru modelul de fundal în flip orizontal și vertical. Acest lucru schimbă arcul pentru a fi orientat în cealaltă direcție și compensează modelul, astfel încât să nu arate doar ca o imagine în oglindă.

Transformarea măștii: întoarcere orizontală, răsturnare verticală

Masca de fundal și parametrii de transformare a modelului Exemplul 2

Pentru al doilea exemplu, vom crea un oval în centrul ecranului cu un model în interiorul ovalului. În continuare, vom schimba plasarea modelului. De asemenea, îl vom modifica pe acesta pentru diferite dimensiuni de ecran.

Model de fundal

În setările de fundal, selectați fila Model de fundal și alegeți Shippo pentru motiv. Setați transformarea modelului la Inversare.

Model de fundal: Shippo
Transformare model: invers

Masca de fundal și parametrii de transformare a modelului Exemplul 2

Mască de fundal

Apoi selectați fila Mască de fundal și modificați următoarele setări.

Mască de fundal: Elipse
Culoare: #758489
Mask Transform: flip orizontal, rotație

Tabletă și telefon

Atât tableta, cât și telefonul vor folosi aceleași setări, așa că nu va trebui decât să schimbăm setările tabletei. Selectează Fila tabletă și modificați fișierul transformarea măștii în inversare orizontală.

Mask Transform: flip orizontal, inversare

Exemplul 2 Versiunea 2

În continuare, vom crea variația pentru al doilea exemplu. Mai întâi, selectați fila Model de fundal și setați culoarea modelului la rgba(0,0,0,0.06).

Culoare model: rgba(0,0,0,0.06)

Apoi selectați fila Mască de fundal și alegeți Întoarcerea orizontală, Rotire și Inversare pentru transformarea măștii.

Mask Transform: flip orizontal, rotație, inversare

Tabletă și telefon

Pentru opțiunile pentru tabletă și telefon, selectați pictograma Tableta . Modificați transformarea măștii în inversare şi inversare orizontală. Versiunea alternativă a exemplului doi este acum completă.

Mask Transform: flip orizontal, inversare

Masca de fundal și parametrii de transformare a modelului Exemplul 3

Pentru al treilea exemplu de setări de transformare a măștii și a modelului, vom folosi un model de tip fagure cu o mască de vopsea. Vom crea și o versiune mobilă pentru aceasta.

model de fundal

Mai întâi, alegeți fila Setări dispozitiv și selectați pictograma Dispozitiv. birou. Selectați fila Model de fundal și alegeți Honeycomb pentru modelul de fundal. Schimbați culoarea în rgba(0,0,0,0.42). Pentru aceasta vom lăsa opțiunile Transformarea modelului dezactivat. Le vom adăuga pentru versiunea alternativă.

Model de fundal: Fagure
Culoare model: rgba(0,0,0,0.42)
Transformare model: niciuna

Masca de fundal și parametrii de transformare a modelului Exemplul 3

Mască de fundal

Apoi selectați fila Mască de fundal. Alege Vopsea pentru masca de fundal. Schimbați culoarea la #697b82. Alegeți Flip Vertical pentru transformarea măștii.

Mască de fundal: Vopsea
Culoare măști: #697b82
Mask Transform: răsturnare verticală

Apoi selectați Acoperi pentru dimensiune. Acest lucru deschide mai multe opțiuni. Alege Dreapta-jos pentru localizare. Asta e pentru versiunea desktop. În continuare, vom crea versiunea mobilă.

Dimensiune masca: capac
Poziția măștii: dreapta jos

Tabletă și telefon

Apoi selectați fila tabletă și modificați transformarea masca fundal în flip verticală și rotație. Acest lucru completează stilul pentru al treilea exemplu. În continuare, vom crea versiunea alternativă.

Mask Transform: inversare verticală, rotație

Exemplul 3 Versiunea 2

Pentru versiunea alternativă a acestui exemplu, vom ajusta atât modelul de fundal, cât și masca de fundal.

model de fundal

Pentru modelul de fundal, schimbați culoarea modelului în rgba(0,0,0,0.11). Schimbați transformarea modelului în răsturnare orizontală, întoarcere verticală și rotire.

Culoare masca: rgba(0,0,0,0.11)
Mask Transform: flip orizontal, vertical, rotatie

Opțiuni de transformare a modelului Divi

masca de fundal

Apoi selectați fila Mască de fundal. Schimbați culoarea în alb și transformarea măștii în flip orizontal, flip vertical și inversare.

Culoarea măștii: #ffffff
Mask Transform: flip orizontal, flip vertical, inversare

Apoi, modificați dimensiunea măștii de acoperit, apoi alegeți Centru pentru poziția măștii.

Dimensiune masca: capac
Poziția măștii: Centru

Tabletă și telefon

În sfârșit, alegeți fila Tablette pentru a crea versiunea mobilă. Alegeți fila masca de fundal și selectați cele patru opțiuni de transformare a măștii. Aceasta completează versiunea alternativă a celui de-al treilea exemplu.

Mask Transform: răsturnare orizontală, răsturnare verticală, rotație, inversare