Cum să creați tranziții de secțiune frumoase utilizând noile caracteristici de proiectare ale Divi

În acest tutorial Divi, vă vom arăta cum să creați tranziții de secțiune frumoase folosind altceva decât opțiunile Divi încorporate.

Secțiunile reprezintă fundamentul întregului conținut pe care îl partajați pe site-ul dvs. web. Fiecare secțiune este un capitol și trecerea de la o secțiune la alta face parte din procesul de povestire. Dacă faceți această tranziție cât mai ușoară, se va sublinia mesajul pe care încercați să îl articulați. Pentru a vă ajuta în acest sens, vă vom arăta cum puteți crea tranziții de secțiuni frumoase pentru următorul dvs. proiect de site.

Trage cu ochiul

Înainte de a vă scufunda individual în toate tranzițiile secțiunilor, să aruncăm o privire la ce vă puteți aștepta:

Cum să creați tranziții de secțiune frumoase utilizând noile caracteristici de proiectare ale Divi

Abonați-vă la canalul nostru Youtube

Recreați secțiuni

Vom începe prin a recrea cele două secțiuni pe care le vom folosi în toate exemplele. În aceste două secțiuni, am folosit umplutura necesară pentru a obține cele mai bune rezultate din tranziții. Cu toate acestea, dacă utilizați secțiuni cu o înălțime diferită, ar putea fi posibil să reglați ușor fundalele de gradient care sunt utilizate pentru a se potrivi perfect cu secțiunile.

Creați prima secțiune

Începeți prin crearea primei secțiuni standard și alegerea unui rând cu lățime completă.

Setări secțiune

Vom avea nevoie de o căptușeală superioară și inferioară de „300 px” pe care o puteți adăuga în subcategoria Spațiu din fila Proiectare.

Primul modul de text

Apoi, vom adăuga un modul de text la rândul nostru de lățime completă. Tastați în jos textul pe care doriți să îl afișați și accesați fila Proiectare. În fila Proiectare, utilizați următoarele setări pentru subcategoria Text:

• Font text: Comfortaa
• Dimensiunea fontului textului: 50
• Înălțimea liniei textului: 1.7em
• Orientare text: centru

Al doilea modul de text

Faceți același lucru pentru al doilea modul de text, dar utilizați în schimb următoarele setări:

• Font text: Comfortaa
• Dimensiunea fontului textului: 16
• Înălțimea liniei textului: 1.7em
• Orientare text: centru

Modul buton

În cele din urmă, vom adăuga și un modul buton. Începeți prin alegerea alinierii centrale în fila Proiectare.

Apoi, deschideți subcategoria Buton, activați opțiunea „Utilizați stiluri personalizate pentru buton” și alegeți „20” ca dimensiune text buton.

În timp ce vă aflați încă în subcategoria Buton, utilizați următorul fundal de gradient pentru buton:

• Prima culoare: # 2b87da
• A doua culoare: # 29c4a9
• Tipul gradientului: liniar
• Direcția gradientului: 162 grade
• Poziția inițială: 0%
• Poziție finală: 100%

Creați a doua secțiune

Adăugați o altă secțiune standard, dar alegeți un rând cu trei coloane.

Setări secțiune

A doua secțiune va folosi o căptușeală „300px” și pentru partea de sus și de jos.

Modul Blurb

Apoi, vom adăuga un modul Blurb la prima coloană a rândului. După ce ați decis textul pe care doriți să-l apăreați, derulați în jos fila Conținut, activați opțiunea „Utilizați pictograma” și selectați o pictogramă.

După ce ați făcut acest lucru, treceți la fila Design și utilizați următoarele setări pentru subcategoria pictogramă:

• Culoare pictogramă: # 515151
• Plasare imagine / pictogramă: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 55 px

Apoi, asigurați-vă că următoarele setări se aplică subcategoriei Text antet:

• Font antet: Comfortaa
• Aliniere text antet: centru
• Dimensiune font antet: 18

Și, în sfârșit, acestea sunt setările pentru subcategoria Text de corp:

• Font corp: Comfortaa
• Alinierea textului corpului: centru
• Dimensiunea fontului corpului: 14
• Înălțimea liniei corpului: 1.7em

Modul Clone Blurb

Odată ce ați creat modulul Blurb, clonați-l de două ori și puneți-l în celelalte două coloane ale rândului.

1. Diagonală în întregime

Acum că am creat secțiunile, este timpul să începeți să adăugați tranzițiile secțiunii. Primul exemplu pe care îl vom arăta cum să creați constă din linii diagonale simple.

Setări de fundal de gradient pentru prima secțiune

Deschideți setările primei secțiuni și adăugați următorul fundal de gradient:

• Prima culoare: #dddddd
• A doua culoare: # f7f7f7
• Tipul gradientului: liniar
• Direcția gradientului: 183 grade
• Poziția inițială: 85%
• Poziție finală: 70,05%

Setările de fundal ale gradientului secțiunii a doua

A doua secțiune va avea nevoie de următoarele setări de fundal de gradient:

• Prima culoare: # f7f7f7
• A doua culoare: #dddddd
• Tipul gradientului: liniar
• Direcția gradientului: 183 grade
• Poziția inițială: 85%
• Poziție finală: 69,05%

Îndepărtați căptușeala superioară a secțiunii a doua

Ultimul lucru pe care va trebui să-l faceți pentru acest exemplu este eliminarea căptușelii superioare a celei de-a doua secțiuni.

2. Întâlnește-mă pe jumătate

Următorul exemplu pe care am dori să îl împărtășim este unul foarte elegant în care sunt utilizate două fundaluri de gradient opus. Folosind acest efect, secțiunile simt că se urmăresc una pe cealaltă.

Setări de fundal de gradient pentru prima secțiune

Pentru prima secțiune, vom avea nevoie de următoarele setări de fundal pentru gradient:

• Prima culoare: rgba (255,255,255,0)
• A doua culoare: rgba (224,43,32,0.07)
• Tipul gradientului: radial
• Direcție radială: stânga sus
• Poziția inițială: 60%
• Poziție finală: 50%

Setările de fundal ale gradientului secțiunii a doua

A doua secțiune se va bucura de următorul gradient de fundal:

• Prima culoare: rgba (255,255,255,0)
• A doua culoare: rgba (224,43,32,0.33)
• Tipul gradientului: radial
• Direcție radială: jos dreapta
• Poziția inițială: 58%
• Poziție finală: 50%

3. Fuziune

Următorul exemplu este puțin diferit de restul. Va avea nevoie de o secțiune suplimentară între ambele secțiuni pentru a obține rezultatul pe care îl puteți observa în imaginea de mai jos.

Setări de fundal de gradient pentru prima secțiune

Pentru prima secțiune, veți avea nevoie de următorul fundal de gradient:

• Prima culoare: rgba (12.113.195,0.19)
• A doua culoare: rgba (255.255.255,0.39)
• Tipul gradientului: radial
• Direcție radială: jos stânga
• Poziția inițială: 50%
• Poziție finală: 50%

Setările de fundal ale gradientului secțiunii a doua

Pentru a doua secțiune, vom utiliza următoarele setări de fundal de gradient:

• Prima culoare: rgba (224,43,32,0.17)
• A doua culoare: rgba (255.255.255,0.39)
• Tipul gradientului: radial
• Direcție radială: dreapta sus
• Poziția inițială: 50%
• Poziție finală: 50%

Adăugați o nouă secțiune standard între

După ce ați adăugat fundalurile de gradient la ambele secțiuni, este timpul să adăugați o secțiune chiar între ele.

Adăugați o culoare de fundal de gradient la secțiunea nouă

Această nouă secțiune va avea nevoie și de un fundal de gradient, utilizând următoarele setări:

• Prima culoare: rgba (12.113.195,0.19)
• A doua culoare: rgba (224,43,32,0.17)
• Tipul gradientului: liniar
• Direcția gradientului: 92 grade
• Poziția inițială: 43%
• Poziție finală: 62%

4. Invers

Apoi, avem și o tranziție de secțiune care nu este la fel de izbitoare ca celelalte, dar reușește totuși să adauge o notă subtilă secțiunilor tale.

Setări de fundal de gradient pentru prima secțiune

Fundalul de gradient pentru prima secțiune este următorul:

• Prima culoare: # f2f2f2
• A doua culoare: rgba (104.153.193,0.58)
• Tipul gradientului: radial
• Direcție radială: jos dreapta
• Poziția inițială: 7,9%
• Poziție finală: 7,9%

Setările de fundal ale gradientului secțiunii a doua

Și al doilea fundal de gradient va avea nevoie de următoarele setări de fundal de gradient:

• Prima culoare: rgba (104.153.193,0.58)
• A doua culoare: # f2f2f2
• Tipul gradientului: radial
• Direcție radială: dreapta sus
• Poziția inițială: 8%
• Poziție finală: 8%

5. Indicații

Al cincilea exemplu arată un pic mai curat și minimalist decât celelalte. Puteți percepe tranziția în două moduri, văzând fie indicatorii, fie cercurile (sau ambele).

Setări de fundal de gradient pentru prima secțiune

Utilizați următorul fundal de gradient pentru prima secțiune:

• Prima culoare: # f4f4f4
• A doua culoare: #ffffff
• Tipul gradientului: radial
• Direcție radială: sus
• Poziția inițială: 88%
• Poziție finală: 88,05%

Setările de fundal ale gradientului secțiunii a doua

În cele din urmă, aplicați următoarele setări de fundal de gradient pentru a doua secțiune:

• Prima culoare: rgba (43.135.218,0)
• A doua culoare: rgba (12.113.195,0.43)
• Tipul gradientului: radial
• Direcție radială: jos
• Poziția inițială: 87%
• Poziție finală: 87%

6. Puzzle

Ultimul exemplu face ca secțiunile să se simtă ca și cum ar fi împreună.

Setări de fundal de gradient pentru prima secțiune

Deschideți setările primei secțiuni și utilizați următorul fundal de gradient:

• Prima culoare: rgba (160.181.193,0.46)
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: sus
• Poziția inițială: 56,3%
• Poziție finală: 43%

Setările de fundal ale gradientului secțiunii a doua

Apoi, utilizați următoarele setări de fundal de gradient pentru a doua secțiune:

• Prima culoare: rgba (242.242.242,0)
• A doua culoare: rgba (160.181.193,0.46)
• Tipul gradientului: radial
• Direcție radială: sus
• Poziția inițială: 56%
• Poziție finală: 40%

Schimbați căptușirea primei secțiuni

Pentru ca cele două secțiuni să se potrivească mai bine, vom schimba căptușeala superioară și inferioară a primei secțiuni în „150 px”.

Îndepărtați căptușeala superioară a secțiunii a doua

În cele din urmă, vom elimina și căptușeala superioară a celei de-a doua secțiuni.

Gânduri finale

Tranzițiile secțiunilor ajută la conectarea diferitelor secțiuni și a scopului acestora. În această postare, am împărtășit 6 exemple pe care le puteți recrea folosind altceva decât opțiunile încorporate Divi. Dacă aveți întrebări sau sugestii; nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de NikVector / shutterstock.com