Cum se utilizează noile structuri de coloane Divi pentru a crea tranziții de secțiune uimitoare

Î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.

Săptămâna aceasta, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să utilizați noile structuri de coloane Divi pentru a crea tranziții de secțiune uimitoare. Vom combina diferite structuri de coloane cu unele dintre opțiunile încorporate ale Divi pentru a duce designul paginii la nivelul următor.

Să ajungem la asta!

previzualizare

Să începem prin a arunca o privire asupra celor trei exemple diferite pe care le vom crea de la zero folosind doar opțiunile încorporate ale Divi. Aceste exemple arată la fel de bine la dimensiuni mai mici de ecran.

Folosiți pagina de destinație a pachetului de machiaj pentru artist Divi

Vom folosi pagina de destinație a pachetului de machetare a artistului Divi. Dacă doriți să verificați pachetul de aspect, accesați următoarea postare de blog. Deși demonstrăm acest tutorial folosind un pachet de aspect specific, puteți utiliza cu ușurință tehnicile și pe alte machete.

Secțiunea Tranziție # 1

Adăugați o secțiune nouă

Localiza

Deschideți pagina de destinație a Makeup Artist Layout Pack folosind Divi's Visual Builder. Apoi, adăugați o nouă secțiune obișnuită chiar sub secțiunea erou:

Spațiere

Eliminați toate spațiile implicite ale secțiunii dvs. în continuare:

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

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune cu următoarea structură de coloane:

Dimensionare

Măriți și lățimea rândului:

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

Spațiere

Eliminați umplutura implicită de sus și de jos în continuare:

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

Filtru

Pentru a face rândul mai vibrant, creșteți saturația în setările Filtru:

• Saturație: 200%

Adăugați modulul divizor # 1 în coloana 1

Ascundeți divizorul

Pentru a crea primul pătrat din designul nostru, vom adăuga un modul divizor în coloana 1. Dezactivați opțiunea „Afișați divizorul”.

Fundal de gradient

Apoi, adăugați un fundal de gradient la modulul divizor:

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: rgba (176,182,219,0,34)

Spațiere

Pentru a crea pătratul, modificați valorile de spațiere:

• Marja superioară: -120 px
• Căptușeală superioară: 120 px
• Căptușeală inferioară: 120 px

Clonați modulul și locația divizorului în coloana 2

După ce ați terminat modificarea modulului DIvider, clonați-l și plasați-l în a doua coloană.

Schimbați fundalul de gradient

Unele modificări trebuie făcute acestui duplicat, începând cu fundalul de gradient:

• Culoare 1: rgba (228.237.234,0.58)
• Culoare 2: rgba (255,255,255,0)

Schimbați spațiul

Modificați și setările de spațiu. Aceasta va crește distanța dintre acest modul divizor și cel din prima coloană.

• Marja superioară: 142 px
• Căptușeală superioară: 120 px
• Căptușeală inferioară: 120 px

Clonați modulul divizor nr. 1 de două ori și plasați în coloanele 3 și 5

Clonați modulul divizor violet de două ori și plasați duplicatele în coloana 3 și 5.

Clonați modulul divizor # 2 și plasați în coloana 4

Clonați și modulul divizor verde și plasați-l în coloana 4.

Ascundeți modulul divizor în coloanele 3, 4 și 5 de pe tabletă și telefon

Deschideți modulul divizor în coloana 3

Desigur, dorim ca aceste tranziții de secțiuni să arate la fel de bine la dimensiuni mai mici de ecran. De aceea, vom ascunde câteva dintre modulele pe care le-am folosit. Începeți prin deschiderea setărilor modulului divizor în coloana 3.

Ascundeți pe tabletă și telefon

Accesați fila Advanced și dezactivați modulul de pe telefon și tabletă.

Copiați stilurile de vizibilitate

Va trebui să ascundem și separatoarele din coloana 4 și 5. Pentru a accelera procesul, copiați setările de vizibilitate ale divizorului din coloana 3:

Inserați stilurile de vizibilitate

Și lipiți-le în modulele divizoare din coloana 4 și 5.

Secțiunea Tranziție # 2

Adăugați o secțiune nouă

Localiza

Pentru a crea a doua secțiune de tranziție, adăugați o nouă secțiune aici:

Divizor de top

Deschideți setările secțiunii și adăugați următorul separator superior:

• Stil divizor: Găsiți în listă
• Culoare divizor: #ffffff
• Înălțimea împărțitorului: 236px
• Flip divizor: vertical
• Aranjament de împărțire: în partea de sus a conținutului secțiunii

Separator inferior

În mod similar, adăugați și un divizor inferior:

• Stil divizor: Găsiți în listă
• Culoare divizor: #ffffff
• Înălțimea împărțitorului: 236px
• Aranjament divizor: Conținutul din partea de sus a secțiunii

Spațiere

Modificați setările de spațiu în continuare:

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

Adăugați un rând nou

Structura coloanei

E timpul să adăugați un rând la noua secțiune! Alegeți următoarea structură de coloane:

Dimensionare

Fără a adăuga module, deschideți setările rândului și modificați lățimea:

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

Spațiere

Eliminați și toate umpluturile implicite, de sus și de jos:

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

Adăugați modulul divizor # 1 în coloana 1

Culoare de fundal

Apoi, adăugați un modul divizor în prima coloană. Deschideți setările și adăugați o culoare de fundal:

• Culoare fundal: rgba (176,182,219,0,34)

Culoare divizor

Schimbați și culoarea separatorului:

• Culoare divizor: #ffffff

Stil divizor

Apoi, accesați setările Stiluri și utilizați următorul stil divizor:

• Stil divizor: Dublu

Greutatea divizorului

Greutatea separatorului trebuie să fie după cum urmează:

• Greutatea divizorului: 18 px

Spațiere

Nu în ultimul rând, măriți dimensiunea modulului divizor folosind padding personalizat:

• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px

Clonați modulul și locația divizorului în coloana 2

După ce ați terminat cu modulul divizor din prima coloană, clonați-l și plasați duplicatul în a doua coloană.

Schimbați culoarea de fundal

Modificați culoarea de fundal a acestui duplicat în consecință:

• Culoare fundal: # e4edea

Clonați modulul divizor # 1 și plasați în coloanele 3 și 5

Continuați clonând modulul divizor violet de două ori și plasând duplicatele în coloanele 3 și 5.

Clonați modulul divizor # 2 și plasați în coloana 4

Clonați și modulul divizor verde și plasați duplicatul în coloana 4.

Ascundeți modulul divizor în coloanele 3, 4 și 5 de pe tabletă și telefon

Ascundeți pe tabletă și telefon

Vom face același lucru pe care l-am făcut pentru primul exemplu de tranziție a secțiunii. Deschideți setările modulului divizor din coloana 3 și ascundeți-l pe telefon și tabletă.

Copiați stilurile de vizibilitate

Copiați aceste stiluri de vizibilitate.

Inserați stilurile de vizibilitate

Și lipiți-le în modulele divizoare din coloana 4 și 5.

Secțiunea Tranziție # 3

Adăugați o secțiune nouă

Localiza

Pentru a adăuga ultima secțiune de tranziție la pagina dvs., adăugați o nouă secțiune aici:

Divizor de top

Deschideți setările secțiunii și adăugați un divizor de top:

• Stil divizor: Găsiți în listă
• Culoare divizor: #ffffff
• Înălțimea împărțitorului: 150 px
• Aranjament de împărțire: în partea de sus a conținutului secțiunii

Separator inferior

Adăugați una de jos în continuare:

• Stil divizor: Găsiți în listă
• Culoare divizor: #ffffff
• Înălțimea împărțitorului: 150 px
• Flip divizor: vertical
• Aranjament de împărțire: în partea de sus a conținutului secțiunii

Spațiere

Apoi, accesați setările Spațiu și faceți câteva modificări:

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

Adăugați un rând nou

Structura coloanei

Rândul de care vom avea nevoie în această secțiune are următoarea structură de coloane:

Dimensionare

Fără a adăuga module, deschideți setările rândului și măriți lățimea rândului:

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

Spațiere

Eliminați toate căptușelile implicite de sus și de jos în continuare:

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

Adăugați modulul divizor # 1 în coloana 1

Ascundeți divizorul

Continuați adăugând un modul divizor în prima coloană. Dezactivați opțiunea „Afișați divizorul”.

Culoare de fundal

În schimb, adăugați o culoare de fundal la divizor:

• Culoare fundal: rgba (176,182,219,0,34)

Spațiere

Măriți dimensiunea modulului utilizând umplutura de sus și de jos:

• Căptușeală superioară: 100 px
• Căptușeală inferioară: 100 px

Clonați modulul și locația divizorului în coloana 2

Schimbați culoarea de fundal

Clonați modulul divizor în prima coloană și plasați duplicatul în a doua. Deschideți setările și modificați culoarea de fundal:

• Culoare fundal: rgba (228.237.234,0.58)

Clonați modulul divizor # 1 și plasați în coloanele 3 și 5

Clonați modulul divizor violet de două ori și plasați-l în coloana 3 și 5.

Clonați modulul divizor # 2 și plasați în coloana 4

Clonați și modulul divizor verde și plasați duplicatul în coloana 4.

Ascundeți modulul divizor în coloanele 3, 4 și 5 de pe tabletă și telefon

Ascundeți pe tabletă și telefon

Ascundeți modulul divizor în coloana 3 de pe tabletă și telefon.

Copiați stilurile de vizibilitate

Copiați aceste stiluri de vizibilitate.

Inserați stilurile de vizibilitate

Și lipiți-le pe modulul divizor din coloana 4 și 5 și ați terminat!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra celor trei exemple diferite pe care le-am creat.

Gânduri finale

În această postare pe blogul de caz de utilizare, v-am arătat cum să utilizați noile structuri de coloane Divi pentru a crea tranziții uimitoare ale secțiunilor. Acest tutorial face parte din inițiativa noastră continuă de proiectare Divi, unde încercăm să introducem ceva în cutia de instrumente de proiectare în fiecare săptămână. Dacă aveți întrebări, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!