Cum să utilizați setările pentru masca de fundal și transformarea modelului Divi

Modelele de fundal sunt o modalitate excelentă de a oferi site-ului dvs. un fler vizual și de a ieși în evidență din mulțime. Noile setări de mască de fundal și de transformare a modelului Divi pot fi combinate în mai multe moduri pentru a crea acele modele de fundal. În această postare, vom vedea cum să folosiți masca de fundal Divi și setările de transformare a modelului pentru a crea fundaluri interesante pentru machetele dvs. Divi.

Să începem.

previzualizare

Mai întâi, iată o privire la fiecare exemplu cu desktop, telefon și opțiuni alternative pentru fiecare.

Exemplul 1 Rezultate

Versiune obișnuită Desktop

Telefon versiunea obișnuită

Versiune alternativă pentru desktop

Telefon cu versiune alternativă

Exemplu două rezultate

Versiune obișnuită Desktop

Telefon versiunea obișnuită

Versiune alternativă pentru desktop

Telefon cu versiune alternativă

Exemplul trei rezultate

Versiune obișnuită Desktop

Telefon versiunea obișnuită

Versiune alternativă pentru desktop

Telefon cu versiune alternativă

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

Noua mască de fundal și caracteristicile modelului Divi includ mai multe opțiuni pentru a le ajusta. Ajustările includ răsturnare orizontală și verticală, rotire și inversare. Pentru a vedea opțiunile, accesați setările de fundal ale unei secțiuni sau rând și selectați filele Model de fundal sau Mască de fundal.

Odată ce adăugați un model sau o mască, vor apărea 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ările implicite.

Am adăugat o mască Layer Blog în imaginea de mai jos. Să le folosim pentru a demonstra cum funcționează setările pentru masca de fundal și transformarea modelului.

Întoarcerea orizontală

Acesta este Horizontal Flipping. Am aplicat setările de transformare atât modelului, cât și măștii.

Întoarcerea verticală

Aceasta este inversarea verticală pentru model și mască.

Rotire

Acesta arată Rotirea pentru model și mască.

Inversarea

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

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

Desigur, putem folosi și setările de transformare în diferite combinații. Iată câteva exemple.

Acesta rotește modelul și inversează masca.

Acest exemplu folosește răsturnarea verticală, rotirea și inversarea pentru modelul de fundal. Masca de fundal folosește răsturnare orizontală, răsturnare verticală și rotire.

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

Exemple de setări pentru mască de fundal și 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. Îl vom stila și apoi vom folosi setările de transformare pentru a-l schimba pentru fiecare exemplu.

Pentru exemplele mele, folosesc o versiune modificată a secțiunii eroi din pagina de destinație Estate Planning, care este disponibilă în Divi. Iată o privire la secțiunea mea. Modificarea simplifică secțiunea eroi pentru nevoile noastre. Folosește culoarea de fundal de fundal: #92a5ab.

• Fundal: #92a5ab

Mască de fundal și setări de transformare a modelului Exemplul unu

Primul nostru exemplu ne oferă un arc care se află vertical în centrul ecranului. O parte a ecranului are un model cu smocuri. Apoi, 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 Fundal și selectați fila Model de fundal . Alegeți Tufted pentru modelul de fundal și inversarea pentru transformarea modelului.

• Model de fundal: tufted
• Transformare model: inversare

Mască de fundal

Selectați fila Mască de fundal și alegeți Arch pentru Mască de fundal. Schimbați culoarea măștii la #616d72 și setați Transformarea măștii la inversare. Aceasta termină prima noastră versiune a arcului cu smocuri.

• Mască de fundal: Arh
• Culoare: #616d72
• Transformare masca: inversare

Exemplu o variație

În continuare, să creăm o variație a designului nostru. Pur și simplu schimbați Transformarea măștii pentru modelul de fundal la Rasturnare orizontală și Rasturnare verticală. Acest lucru schimbă arcul pentru a fi orientat în cealaltă direcție și schimbă modelul, astfel încât să nu arate doar ca o imagine în oglindă.

• Transformarea măștii: răsturnare orizontală, răsturnare verticală

Mască de fundal și setări de transformare a modelului Exemplul doi

Pentru al doilea exemplu, vom crea un oval în centrul ecranului cu un model în interiorul ovalului. Apoi, 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 model. Setați Transformarea modelului la inversare.

• Model de fundal: Shippo
• Transformare model: inversare

Mască de fundal

Apoi, selectați fila Mască de fundal . Alegeți Eclipse pentru Masca de fundal și plasați cursorul peste opțiunile de fundal. Selectați pictograma tabletă care apare. Aceasta deschide setările dispozitivului. Pentru setările desktopului, setați culoarea la #758489. Pentru Mask Transform, alegeți Horizontal Flipping and Rotating. Aceasta termină versiunea desktop. Să-l schimbăm pentru versiunea mobilă.

• Mască de fundal: Eclipse
• Culoare: #758489
• Transformarea măștii: răsturnare orizontală, rotire

Tabletă și telefon

Tableta și telefonul vor folosi ambele aceleași setări, așa că va trebui doar să schimbăm setările pentru tabletă. Selectați fila Tabletă și schimbați Transformarea măștii în Rasturnare orizontală.

• Transformarea măștii: răsturnare orizontală, inversare

Exemplul doi Variație

Î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 Rasturnare orizontală, Rotire și inversare pentru Transformarea măștii.

• Transformarea măștii: răsturnare orizontală, rotire, inversare

Tabletă și telefon

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

• Transformarea măștii: răsturnare orizontală, inversare

Mască de fundal și setări de transformare a modelului Exemplul trei

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

Model de fundal

Mai întâi, alegeți fila setări dispozitiv și selectați pictograma desktop . Selectați fila Model de fundal și alegeți Fagure pentru modelul de fundal. Schimbați culoarea în rgba(0,0,0,0.42). Pentru aceasta, vom lăsa opțiunile de transformare a modelului dezactivate. Le vom adăuga pentru versiunea alternativă.

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

Mască de fundal

Apoi, selectați fila Mască de fundal . Alegeți Vopsea pentru Masca de fundal. Schimbați culoarea la #697b82. Alegeți Vertical Flipping pentru Mask Transform.

• Mască de fundal: Vopsea
• Culoare: #697b82
• Transformarea măștii: răsturnare verticală

Apoi, selectați Copertă pentru dimensiune. Aceasta deschide mai multe opțiuni. Alegeți dreapta jos pentru poziție. Asta e pentru versiunea desktop. În continuare, vom crea versiunea mobilă.

• Dimensiune: Coperta
• Poziție: dreapta jos

Tabletă și telefon

Apoi, selectați fila tabletei și schimbați Transformarea măștii de fundal în Întoarcere și rotire pe verticală. Acest lucru completează stilul pentru al treilea exemplu. În continuare, vom crea versiunea alternativă.

• Transformarea măștii de fundal: răsturnare verticală, rotire

Exemplul trei Variația

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 Rasturnare orizontală, Rasturnare verticală și Rotire.

• Culoare model: rgba(0,0,0,0.11)
• Transformare model: răsturnare orizontală, răsturnare verticală, rotire

Mască de fundal

Apoi, selectați fila Mască de fundal . Schimbați culoarea în alb și Mask Transform în Horizontal Flipping, Vertical Flipping și Inversing.

• Culoare: #ffffff
• Transformarea măștii: răsturnare orizontală, răsturnare verticală, inversare

Apoi, modificați Dimensiunea măștii la Acoperire și apoi alegeți Centru pentru Poziția măștii.

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

Tabletă și telefon

În cele din urmă, alegeți fila tabletă pentru a crea versiunea mobilă. Alegeți fila Mască de fundal și selectați toate cele patru opțiuni pentru Mask Transform. Aceasta completează versiunea alternativă a celui de-al treilea exemplu.

• Transformare mască de fundal: răsturnare orizontală, răsturnare verticală, rotire, inversare

Rezultate

Iată o privire la fiecare exemplu cu desktop, telefon și opțiuni alternative pentru fiecare.

Exemplul 1 Rezultate

Versiune obișnuită Desktop

Telefon versiunea obișnuită

Versiune alternativă pentru desktop

Telefon cu versiune alternativă

Exemplu două rezultate

Versiune obișnuită Desktop

Telefon versiunea obișnuită

Versiune alternativă pentru desktop

Telefon cu versiune alternativă

Exemplul trei rezultate

Versiune obișnuită Desktop

Telefon versiunea obișnuită

Versiune alternativă pentru desktop

Telefon cu versiune alternativă

Gânduri de sfârșit

Acesta este modul nostru de a folosi masca de fundal Divi și setările de transformare a modelului pentru a crea o mulțime de modele de fundal interesante. Deoarece modelele și măștile pot fi utilizate împreună, setările lor de transformare pot fi, de asemenea, utilizate împreună. Acest lucru deschide o mulțime de opțiuni de design, oferindu-vă și mai multe instrumente pentru a adăuga eleganță fundalurilor dvs. Divi. Cel mai bun mod de a învăța să le folosești este să te joci cu ajustările și să vezi ce poți crea.

Vrem sa auzim de la tine. Ați încercat masca de fundal Divi și setările de transformare a modelului în machetele dvs. Divi? Spune-ne despre asta în comentarii.