Utilizarea noilor setări de filtrare a coloanelor Divi pentru a crea efecte de amestecare uimitoare

Publicat: 2019-08-09

Noile setări de filtrare a coloanelor Divi pot fi utilizate în mai multe moduri creative. În această postare, vă vom arăta cum să amestecați o imagine de fundal pe un rând principal cu conținutul coloanei. Vom adăuga diferite gradiente de culoare modulelor și un mod de amestecare coloană „ecran” pentru a crea un efect uimitor. Sperăm că acest design vă va inspira să utilizați modurile de amestecare a coloanelor în următorul dvs. proiect Divi. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

moduri de amestecare previzualizare desktop

Mobil

moduri de amestecare gif receptiv

Descărcați aspectul Modurilor de amestecare a coloanei GRATUIT

Pentru a pune mâna pe aspectul modurilor de amestecare a coloanei gratuite, va trebui mai întâi să o descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Să începem să recreăm!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă cu rândul cu 3 coloane

Porniți proiectarea adăugând o nouă secțiune cu un rând cu trei coloane.

adăugați un rând cu trei coloane

Secțiunea Spațierea

Deschideți setările secțiunii și reglați spațiul.

Marja stânga și dreapta: 3vw
Căptușeală superioară și inferioară: 84 px

stilizați secțiunea

Setări rând

fundal

Înainte de a adăuga module, vom modifica setările rândurilor. Începeți prin adăugarea unei culori de fundal.

Culoare fundal: Gri mediu # c4c4c4

adăugați culoare gri pe fundal

Apoi, încărcați o imagine de fundal și amestecați culoarea de fundal cu imaginea utilizând un mod de amestecare.

Amestec de imagine de fundal: înmulțiți

adăugați imagine și setați modul de amestecare la multiplicare

Dimensionare

Reglați apoi setările de dimensionare ale rândului.

Utilizați lățimea personalizată a jgheabului: da
Lățimea jgheabului: 1
Egalizați înălțimea coloanei: Da
Lățime: 100%
Lățime maximă: 100%

stilizați fundalul secțiunii

Spațiere

Eliminați și umplutura implicită a rândurilor.

Căptușeală superioară și inferioară: 0 px

stilizați fundalul rândului

Box Shadow

Continuați adăugând o umbră simplă la rând.

Box Shadow: Prima opțiune

adăugați o umbră de cutie la secțiune

Vizibilitate

Reglați indexul Z în fila de vizibilitate.

Z-Index: 1

indicele de vizibilitate al rândului

Coloana de stil 1

Introduceți setările primei coloane.

Selectați coloana 1

Filtre

Aplicați un mod de amestecare a ecranului coloanei din fila filtre.

Blend Mode: ecran

aplicați modul de amestecare a ecranului

Scala de transformare a cursorului

Introduceți grupul de opțiuni de transformare și modificați setările scalei de transformare.

Scala de transformare: 105% pe ambele axe x și y

transformați hover sau coloana unu

Vizibilitate

Introduceți fila de vizibilitate a coloanei și reglați setările de revărsare.

Overflow orizontal: vizibil
Overflow vertical: vizibil

vizibilitatea rândului

Tranziții

Treceți la fila tranziții și reglați durata tranziției pentru a crea o tranziție lină.

Durata tranziției: 500 ms

durata tranziției

Adăugați un modul de text în coloana 1

Fiecare coloană conține trei module de text. Adăugați un prim modul de text în coloana 1 cu un conținut H2 la alegere și reglați setările după cum urmează.

introduceți modulul text în coloana unu