Utilizarea modulelor Divider pentru a crea forme de fundal cu opțiunile de transformare ale lui Divi

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să utilizați modulele Divider pentru a crea forme de fundal cu opțiunile de transformare Divi și Pachetul de amenajare Paralegal. Modulele Divider sunt foarte versatile și pot ridica într-adevăr designul general al paginilor dvs. Deși vom recrea câteva exemple care se potrivesc în mod specific cu Paralegal Layout Pack, puteți utiliza această tehnică pentru orice fel de site web pe care îl creați cu Divi.

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

Mobil

Creați o pagină nouă utilizând pagina de destinație a Paralegal Layout Pack

Creați o pagină nouă și încărcați pagina de destinație a Paralegal Layout Pack.

Recreați exemplul nr. 1

Secțiunea Overflow

Să începem să creăm primul exemplu! Continuați și deschideți setările secțiunii erou și accesați fila de proiectare. Aici, vrem să ne asigurăm că nimic nu depășește containerul secțiunii. Pentru aceasta, vom adăuga o singură linie de cod CSS la elementul principal.

overflow: hidden;

Adăugați modulul divizor în coloana 2

Vizibilitate

Apoi, continuați și adăugați un modul divizor în a doua coloană a secțiunii de specialitate. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare de fundal

Vom folosi o culoare din paleta de culori a pachetului de layout ca culoare de fundal pentru divizor.

• Culoare fundal: # d94144

Culoare

Apoi, vom merge la fila de proiectare și vom schimba și culoarea separatorului.

• Culoare: # f3f1f2

Stiluri

Treceți la setările stilurilor și modificați stilul divizorului.

• Stil divizor: punctat

Dimensionare

Joacă-te și cu setările de dimensionare. Puteți face acest modul divizor să arate cum doriți, dar dacă doriți să arate exact așa cum a fost afișat în previzualizarea acestui post, utilizați următoarele setări:

• Greutatea divizorului: 4 px
• Înălțime: 0px

Spațiere

Acum, vom schimba poziția și dimensiunea modulului divizor folosind unele marje personalizate și valori de umplere. Asigurați-vă că modificați valorile în funcție de diferitele dimensiuni ale ecranului, astfel încât totul să rămână receptiv.

• Marja superioară: -30vw (desktop), -100vw (tabletă și telefon)
• Marja stângă: -100vw (desktop), -138vw (tabletă), -300vw (telefon)
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 1,3vw (desktop), 2,2vw (tabletă), 3vw (telefon)

Transforma

Scară de transformare

E timpul să transformați modulul! Primul lucru pe care îl vom face în setările de transformare este creșterea dimensiunii divizorului prin adăugarea următoarelor valori ale scalei de transformare:

• Jos: 153%
• Dreapta: 500%

Transformare Rotire

De asemenea, vom roti modulul divizor în setările de rotire a transformării. După cum puteți observa, modulul divizor nu depășește secțiunea datorită acelei linii de cod CSS pe care le-am adăugat la începutul acestui tutorial.

• Stânga: 348 grade

Recreați exemplul nr. 2

Secțiunea Overflow

Trecem la următorul exemplu! Din nou, vrem să ne asigurăm că nimic nu depășește containerul secțiunii adăugând o singură linie de cod CSS la elementul principal al secțiunii.

overflow: hidden;

Adăugați un rând nou la sfârșitul secțiunii

Structura coloanei

Continuați adăugând un rând nou la sfârșitul secțiunii folosind următoarea structură de coloane:

Spațiere

Pentru a micșora dimensiunea luată de rând, vom elimina umplutura implicită de sus și de jos din setările de spațiu.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un modul divizor

Vizibilitate

Este timpul să adăugați și să modelați modulul divizor! Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare de fundal

Din nou, folosim una dintre culorile din paleta de culori a pachetului de layout ca culoare de fundal.

• Culoare fundal: # d94144

Culoare

Treceți la fila de proiectare și schimbați și culoarea separatorului.

• Culoare: # f3f1f2

Dimensionare

Ne jucăm și cu setările de dimensionare.

• Greutatea divizorului: 10 px
• Înălțime: 0px

Spațiere

Și vom crea forma exactă pe care o dorim folosind niște umpluturi personalizate pe care le vom modifica pe diferite dimensiuni de ecran.

• Căptușeală superioară: 2vw
• Căptușeală inferioară: 2,5vw (desktop), 3vw (tabletă), 3,9vw (telefon)

Transforma

Scară de transformare

E timpul să te transformi! Primul lucru pe care îl vom face este să scalăm modulul divizor. Facem acest lucru pentru a ne asigura că nu există niciun decalaj la începutul sau la sfârșitul secțiunii. Nu vă faceți griji cu privire la scalarea prea mare a modulului dvs. divizor, tot ceea ce depășește secțiunea nu va apărea în design.

• Jos: 153%
• Dreapta: 153% (Desktop), 250% (Tabletă), 500% (Telefon)

Transformă Traducere

Apoi, vom schimba, de asemenea, poziția modulului divizor pentru a face să apară pe partea dreaptă. Asigurați-vă că potriviți aceste valori cu diferitele dimensiuni ale ecranului.

• Partea de jos: 25vw (desktop), 27vw (tabletă și telefon)
• Dreapta: 0 px (desktop), -32vw (tabletă și telefon)

Transformare Rotire

Nu în ultimul rând, vom transforma divizorul orizontal într-unul vertical jucându-ne cu setările de rotire a transformării.

• Stânga: 270 grade

Recreați exemplul nr. 3

Secțiunea Overflow

Trecem la următorul și ultimul exemplu! Din nou, asigurați-vă că nimic nu depășește containerul secțiunii adăugând o singură linie de cod CSS la elementul principal al secțiunii.

overflow: hidden;

Adăugați un rând nou la începutul secțiunii

Structura coloanei

Continuați adăugând un rând nou în partea de sus a secțiunii. Este important ca rândul să fie plasat în partea de sus, astfel încât să nu se suprapună conținutului de sub el mai târziu în tutorial.

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți coloanei să ocupe întreaga lățime a ecranului.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Adăugați un modul divizor

Vizibilitate

Adăugați modulul divizor în continuare. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare de fundal

Treceți la setările de fundal și adăugați o culoare de fundal la alegere.

• Culoare fundal: # d94144

Culoare

Modificați și culoarea separatorului.

• Culoare: # f3f1f2

Stiluri

Și schimbați stilul divizor în setările stilurilor.

• Stil divizor: punctat

Dimensionare

Apoi, accesați setările de dimensionare și efectuați câteva modificări.

• Greutatea divizorului: 4 px
• Înălțime: 0px

Spațiere

Și creați forma dorită folosind niște umpluturi de sus și de jos în setările de spațiere.

• Căptușeală superioară: 3vw
• Căptușeală inferioară: 3vw

Box Shadow

Vom adăuga, de asemenea, o oarecare profunzime paginii noastre, oferind separatorului o umbră subtilă de casetă.

• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0,3)

Transforma

Scară de transformare

Acum că am creat stilul divizorului, putem începe să-l transformăm. Primul lucru pe care îl vom face este să mărim dimensiunea modulului divizor în setările scalei de transformare.

• Jos: 140%
• Dreapta: 140%

Transformă Traducere

Apoi, vom merge la setările de traducere a transformării și vom schimba poziția modulului divizor. Plasarea rândului în partea de sus a secțiunii ne ajută să menținem un indice Z mai mic decât rândul care se află sub acesta, ceea ce creează această frumoasă suprapunere!

• Partea de jos: 4vw
• Dreapta: 16vw (desktop), 26vw (tabletă), 35vw (telefon)

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să utilizați modulul Divider și noile opțiuni de transformare ale Divi pentru a crea forme de fundal și pentru a îmbunătăți aspectul general al paginilor dvs. Acest tutorial face parte din inițiativa noastră continuă de proiectare Divi, unde încercăm să introducem ceva suplimentar în setul de instrumente de proiectare în fiecare săptămână. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!