Cum să creați fundaluri de gradient frumos Plasați tranzițiile cu Divi

Recent, au fost adăugate la Divi câteva opțiuni de hover suplimentare - permițându-vă să creați efecte și mai interesante fără a fi nevoie să atingeți o singură linie de cod. Acum, de exemplu, puteți crea tranziții uimitoare de deplasare în fundal. Combinând gradiente de coloană, rând și secțiune, puteți realiza modele unice. În acest tutorial, vă vom arăta exact cum să faceți acest lucru. Vom începe prin parcurgerea unor pași generali. Odată ce ați terminat, ne vom concentra pe trei exemple de proiectare individual. De asemenea, 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 celor trei exemple diferite pe care le vom recrea pe parcursul acestui tutorial.

Exemplul nr. 1

Exemplul nr. 2

Exemplul nr. 3

Descărcați secțiunile Hero gratuit

Abonați-vă la canalul nostru Youtube

Pentru a pune mâna pe aceste secțiuni gratuite despre eroi, va trebui mai întâi să le 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.

DESCARCA

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!

Pași generali

Adăugați o secțiune nouă

Spațiere

Să începem prin parcurgerea unor pași generali. Adăugați o nouă secțiune la pagina la care lucrați și eliminați toate umpluturile implicite. Eliminarea tuturor căptușelilor superioare și inferioare ne va ajuta, mai târziu, să combinăm fundalurile de gradient pentru coloane, rânduri și secțiuni.

• 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 folosind următoarea structură de coloane:

Dimensionare

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

• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Treceți la setările de spațiere și eliminaț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 de text nr. 1 în coloană

Adăugați conținut H1

Să începem să adăugăm module! Primul de care avem nevoie este un modul text cu un conținut H1.

Setări text H1

Treceți la fila de proiectare și modificați setările de text H1 în consecință:

• Titlu Font: Montserrat
• Alinierea textului de antet: centru
• Culoare text antet: # 000000
• Dimensiune text antet: 3vw (desktop), 6vw (tabletă și telefon)
• Distanța între litere: 0,7vw

Dimensionare

Deschideți apoi setările de dimensionare și modificați lățimea împreună cu alinierea modulului.

• Lățime: 48% (desktop), 60% (tabletă și telefon)
• Alinierea modulului: centru

Spațiere

Finalizați proiectarea modulului adăugând o marjă superioară.

• Marja superioară: 10vw

Adăugați modulul divizor în coloană

Vizibilitate

Treci la modulul următor! Adăugați un modul divizor și asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Schimbați culoarea liniei în continuare.

• Culoare linie: # 000000

Dimensionare

Treceți la setările de dimensionare și aplicați următoarele setări:

• Greutatea divizorului: 0,1vw
• Lățime: 10% (desktop), 16% (tabletă), 25% (telefon)
• Alinierea modulului: centru

Spațiere

Adăugați și câteva valori de umplere personalizate pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 2vw (desktop), 4vw (tabletă), 6vw (telefon)
• Căptușeală inferioară: 2vw (desktop), 4vw (tabletă), 6vw (telefon)

Adăugați modulul de text nr. 2 în coloană

Adauga continut

Treceți la modulul următor, care este un alt modul de text. Adăugați un conținut de paragraf la alegere.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Deschideți Sans
• Alinierea textului: justificați
• Înălțimea liniei textului: 2.3em

Dimensionare

Modificați lățimea și alinierea modulului în setările de dimensionare de mai jos:

• Lățime: 30% (desktop), 54% (tabletă), 70% (telefon)
• Alinierea modulului: centru

Adăugați un modul buton în coloană

Adăugați o copie

Următorul și ultimul modul de care avem nevoie în coloană este un modul buton. Adăugați o copie la alegere.

Aliniere

Treceți la fila de proiectare și schimbați alinierea butonului.

• Aliniere buton: centru

Setări buton

Modificați și setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0,8vw (desktop), 2vw (tabletă), 2,8vw (telefon)
• Culoarea textului butonului: # 000000
• Lățimea chenarului butonului: 1 px
• Raza chenarului butonului: 1 px
• Buton Font: Montserrat

Spațiere

Și adăugați câteva valori de spațiere personalizate pe diferite dimensiuni de ecran.

• Marja superioară: 2vw (desktop), 8vw (tabletă și telefon)
• Marja inferioară: 10vw
• Căptușeală superioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală stângă: 3vw (desktop), 6vw (tabletă), 8vw (telefon)
• Căptușeală dreaptă: 3vw (desktop), 6vw (tabletă), 8vw (telefon)

Clonează secțiunea de două ori

După ce ați finalizat secțiunea, o puteți clona de două ori; câte unul pentru fiecare exemplu.

Recreați tranziția de deplasare pe fundalul gradientului nr. 1

Secțiune

Fundal de gradient implicit

Să începem să creăm prima tranziție de zbor! Deschideți setările secțiunii și adăugați următorul fundal implicit de gradient:

• Culoare 1: # d1d1ff
• Culoarea 2: # f7f7f7
• Direcția gradientului: 90 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Plasați cursorul pe fundalul gradientului

Modificați fundalul de gradient la cursor.

• Culoare 1: # f7f7f7
• Culoare 2: # ffc1c7
• Direcția gradientului: 90 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Rând

Fundal de gradient implicit

Deschideți apoi setările rândului și aplicați următoarele setări implicite de fundal de gradient:

• Culoare 1: # 7032ff
• Culoare 2: rgba (255,255,255,0)
• Direcția gradientului: 90 grade
• Poziția inițială: 10%
• Poziție finală: 10%

Plasați cursorul pe fundalul gradientului

Modificați fundalul de gradient la cursor.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: # ff324a
• Direcția gradientului: 90 grade
• Poziția inițială: 90%
• Poziție finală: 90%

Recreați trecerea de deplasare a cursorului de fundal gradient nr. 2

Secțiune

Fundal de gradient implicit

Trecem la al doilea exemplu! Deschideți setările secțiunii și adăugați următorul fundal de gradient:

• Culoare 1: # f7f7f7
• Culoarea 2: #eceaff
• Direcția gradientului: 156 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Plasați cursorul pe fundalul gradientului

Adăugați un fundal de gradient diferit la cursor:

• Culoare 1: #ffeaec
• Culoarea 2: # f7f7f7
• Direcția gradientului: 204 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Rând

Fundal de gradient implicit

Deschideți apoi setările rândurilor și aplicați următoarele setări de fundal de gradient:

• Culoare 1: # a932ff
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: jos stânga
• Poziția inițială: 14%
• Poziție finală: 14%

Plasați cursorul pe fundalul gradientului

Schimbați fundalul de gradient al rândului în cursă în mod corespunzător:

• Culoare 1: # ff324a
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: stânga sus
• Poziția inițială: 14%
• Poziție finală: 14%

Coloană

Fundal de gradient implicit

Treceți la setările coloanei și adăugați următorul fundal de gradient:

• Culoare 1: # a932ff
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: dreapta sus
• Poziția inițială: 14%
• Poziție finală: 14%

Plasați cursorul pe fundalul gradientului

Modificați fundalul de gradient al coloanei la cursor:

• Culoare 1: # ff324a
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: jos dreapta
• Poziția inițială: 14%
• Poziție finală: 14%

Recreați trecerea de deplasare a cursorului de fundal gradient # 3

Secțiune

Fundal de gradient implicit

Trecem la următorul și ultimul exemplu! Deschideți setările secțiunii și aplicați următorul fundal de gradient:

• Culoare 1: # ffc1c7
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: sus
• Poziția inițială: 45%
• Poziție finală: 45%

Plasați cursorul pe fundalul gradientului

Modificați fundalul de gradient al secțiunii la cursor.

• Culoare 1: # ffc1c7
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: stânga
• Poziția inițială: 20%
• Poziție finală: 20%

Rând

Fundal de gradient implicit

Deschideți apoi setările rândului și adăugați următorul fundal de gradient:

• Culoare 1: # d3dfff
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: jos
• Poziția inițială: 45%
• Poziție finală: 45%

Plasați cursorul pe fundalul gradientului

Modificați fundalul de gradient în consecință:

• Culoare 1: # d3dfff
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: dreapta
• Poziția inițială: 20%
• Poziție finală: 20%

Coloană

Fundal de gradient implicit

Nu în ultimul rând, adăugați un fundal de gradient de coloană și ați terminat!

• Culoare 1: # f7f7f7
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 41%
• Poziție finală: 41%

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului tuturor celor trei exemple pe care le-am recreat de-a lungul acestui tutorial!

Exemplul nr. 1

Exemplul nr. 2

Exemplul nr. 3

Gânduri finale

În această postare, v-am arătat cum să utilizați în mod creativ opțiunile suplimentare de deplasare a fundalului pentru gradientul Divi pentru a crea tranziții de trecere frumoase numai cu opțiunile încorporate ale Divi. Am început cu câțiva pași generali și am continuat recreând fiecare dintre cele trei exemple. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.