Cum să schimbați un fundal de gradient pe Hover cu Divi

Crearea de site-uri web este despre a vă asigura că fiecare detaliu este corect. Acordarea atenției la detaliile mici din designul dvs. va adăuga rapid și va crește calitatea site-ului dvs. web. Cu noile opțiuni de plutire ale Divi, puteți adăuga fără efort interacțiuni mici pe site-ul dvs. web. Opțiunile de deplasare se aplică aproape tuturor setărilor de proiectare. Puteți, de exemplu, să schimbați indirect un fundal de gradient pe hover pentru a crea o tranziție frumoasă. Exact asta vă vom arăta în această postare de blog. În afară de realizarea tranziției în gradient, vom crea, de asemenea, un exemplu de design uimitor de la zero, pe care îl puteți utiliza gratuit pentru orice tip de site web pe care îl creați.

Să ajungem la asta!

previzualizare

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

Static

Planare

Descarcă Ilustrațiile GRATUIT

Pentru a pune mâna pe ilustrațiile gratuite care provin din pachetul de aspect pentru jocuri video, 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 mult bunătate Divi și un pachet Divi Layout gratuit în fiecare luni și vineri! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail de 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!

Să începem să creăm!

Abonați-vă la canalul nostru Youtube

Adăugați secțiunea nr. 1

Spațiere

Primul lucru pe care va trebui să-l faceți este să creați o pagină nouă sau să deschideți una existentă și să adăugați o nouă secțiune obișnuită. Deschideți setările și adăugați niște margini personalizate în partea de sus și de jos.

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

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Coloana 1 Culoare de fundal implicită

Fără a adăuga încă module, deschideți setările rândului și adăugați următoarea culoare de fundal implicită în coloana 1:

• Culoare fundal: # e7ffa0

Coloana 1 Plasați cursorul pe fundal

Schimbați această culoare de fundal la cursor.

• Culoare fundal: # 00020c

Coloana 1 Gradient Background

Adăugați o culoare de fundal de gradient și la coloana 1. Veți observa că folosim o culoare complet transparentă. Această culoare va permite să se afișeze culoarea de fundal, care la rândul său se schimbă la plimbare.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: rgba (16,0201,0,8)
• Coloana 1 Tip de gradient: Liniar
• Coloana 1 Direcție gradient: 50deg
• Coloana 1 Poziție de start: 20%

Coloana 2 Culoare fundal

Adăugați și o culoare de fundal a coloanei 2.

• Coloana 2 Culoare fundal: #ffffff

Dimensionare

Apoi, accesați fila de proiectare și modificați setările de dimensionare.

• Utilizați lățimea personalizată: da
• Unitate: PX
• Lățime personalizată: 2000 px
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Continuați adăugând câteva valori de umplere personalizate în setările de spațiere.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 2 Căptușeală superioară: 6vw (Desktop), 120 px (tabletă și telefon)
• Coloana 2 Căptușeală inferioară: 6vw (Desktop), 120 px (tabletă și telefon)
• Coloana 2 Padding stânga: 5vw (Desktop), 80px (tabletă), 50px (telefon)
• Coloana 2 Căptușeala dreaptă: 5vw (Desktop), 80 px (tabletă), 50 px (telefon)

Box Shadow

Și dați rândului o umbră subtilă de cutie.

• Puterea neclarității umbrei cutiei: 100 px
• Puterea răspândirii umbrei cutiei: -10px

Tranziții

Nu în ultimul rând, vom crea o tranziție de fundal cu gradient lin, mărind durata tranziției în fila avansată.

• Durata tranziției: 1100ms

Adăugați modulul de imagine în coloana 1

Incarca imaginea

E timpul să începeți să adăugați module! Adăugați un modul de imagine în prima coloană și încărcați fișierul „ divi-gradient-background-on-hover-illustration-1.png ” pe care îl puteți găsi în folderul zip pe care l-ați descărcat la începutul acestei postări.

Fundal de gradient

Accesați setările de fundal ale acestui modul de imagine și adăugați un fundal degradat. Folosim din nou o culoare complet transparentă pentru a permite celorlalte culori să se afișeze.

• Culoare 1: rgba (50,217,255,0,66)
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: sus
• Poziție finală: 57%

Spațiere

Apoi, adăugați câteva umpluturi personalizate la modul.

• Căptușeală superioară: 14vw

Adăugați modulul de text al titlului în coloana 2

Adauga continut

Trecem la a doua coloană! Primul modul de care avem nevoie este un titlu Modul text. Continuați și adăugați un conținut de antet la alegere.

Setări text antet

Apoi, accesați setările de text pentru antet și faceți câteva modificări.

• Font de titlu: Abril Fatface
• Culoare text antet: # 000000
• Dimensiune text antet: 4vw (desktop), 60 px (tabletă), 40 px (telefon)

Adăugați modulul de descriere a textului în coloana 2

Adauga continut

Al doilea modul de care avem nevoie este un alt modul de text. Adăugați un conținut la alegere.

Setări text

Apoi, accesați setările pentru text și modificați orientarea textului.

• Orientare text: justificați

Dimensionare

Reglați lățimea și în setările de dimensionare.

• Lățime: 73% (desktop), 100% (tabletă și telefon)

Spațiere

În cele din urmă, adăugați niște margini personalizate de sus și de jos la modul pentru a crea spațiu alb.

• Marja superioară: 2,5 vw (desktop), 50 px (tabletă și telefon)
• Marja inferioară: 2,5 vw (desktop), 50 px (tabletă și telefon)

Adăugați un modul buton la coloana 2

Adăugați o copie

Al treilea și ultimul modul de care vom avea nevoie în a doua coloană este un modul buton. Adăugați o copie la alegere.

Setări buton

Modificați apoi setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1,2vw (Desktop), 14 px (tabletă și telefon)
• Culoarea textului butonului: #ffffff
• Culoare degrade 1: # 9ea6ff
• Culoare gradient 2: rgba (16,0201,0,8)
• Direcția gradientului: 78 grade
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 30 px
• Distanța dintre litere și butoane: -1 px
• Greutatea fontului: Ultra Bold
• Stilul fontului: majuscule

Spațiere

Adăugați și câteva valori de umplere personalizate.

• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px
• Garnitura stânga: 40 px
• Căptușeală dreaptă: 40 px

Box Shadow

Și aplicați o umbră de casetă subtilă butonului.

• Puterea neclarității umbrei cutiei: 40 px

Adăugați secțiunea 2

Spațiere

Acum că am terminat prima secțiune, vom trece la următoarea. Adăugați o nouă secțiune obișnuită folosind următoarele valori de umplere personalizate:

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

Adăugați rândul # 2

Structura coloanei

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

Coloana 1 Culoare fundal

Fără a adăuga încă module, deschideți setările rândului și adăugați următoarea culoare de fundal în coloana 1:

• Coloana 1 Culoare fundal: #ffffff

Coloana 2 Culoare implicită de fundal

Adăugați următoarea culoare de fundal în coloana 2.

• Coloana 2 Culoare fundal: #ffffff

Coloana 2 Plasați cursorul pe fundal

Și schimbați această culoare de fundal la cursor.

• Coloana 2 Culoare fundal: # 3d02ff

Coloana 2 Fundal gradient

Adăugați și un fundal de gradient la coloană.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: # ff7700
• Coloana 2 Poziția inițială: 20%

Dimensionare

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

• Utilizați lățimea personalizată: da
• Unitate: PX
• Lățime personalizată: 2000 px
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Continuați adăugând valori de umplere personalizate în setările de spațiere.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 1 Căptușeală superioară: 6vw (desktop), 120 px (tabletă și telefon)
• Coloana 1 Căptușeală inferioară: 6vw (Desktop), 120 px (tabletă și telefon)
• Coloana 1 Padding stânga: 5vw (Desktop), 80px (tabletă), 50px (telefon)
• Coloana 1 Căptușeala dreaptă: 5vw (Desktop), 80 px (tabletă), 50 px (telefon)

Box Shadow

Și adăugați o umbră de casetă subtilă și la acest rând.

• Puterea neclarității umbrei cutiei: 100 px
• Puterea răspândirii umbrei cutiei: -10px

Tranziții

Nu în ultimul rând, creați o tranziție lină prin creșterea duratei tranziției în fila avansată.

• Durata tranziției: 1100ms

Duplicați modulele de text și modulul buton al rândului # 1

Deoarece avem deja toate modulele de care avem nevoie în secțiunea anterioară, vom economisi timp clonându-le.

Plasați duplicatele în coloana 1 a rândului # 2

Și plasând duplicatele în prima coloană a noului rând.

Schimbați conținutul

Asigurați-vă că schimbați conținutul modulelor dvs.

Schimbați fundalul gradientului butonului

Schimbați și fundalul de gradient al butonului.

• Culoare 1: # ff653f
• Culoare 2: # 0066ff
• Direcția gradientului: 39 grade

Clonați modulul de imagine al rândului # 2

Clonați modulul de imagine pe care îl puteți găsi și în prima coloană a rândului anterior.

Plasați Duplicate în coloana 2 din rândul # 2

Și așezați duplicatul în a doua coloană a noului rând.

Schimbați imaginea

Schimbați imaginea în fișierul „ divi-gradient-background-on-hover-illustration-2.png ” pe care îl puteți găsi în folderul zip pe care l-ați descărcat la începutul acestei postări.

Schimbați fundalul de gradient

Nu în ultimul rând, modificați fundalul de gradient al modulului de imagine.

• Culoare 1: rgba (0,2,12,0,66)
• Culoare 2: rgba (255,255,255,0)
• Poziție finală: 57%

previzualizare

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

Static

Planare

Gânduri finale

În această postare, v-am arătat cum să schimbați un fundal de gradient pe hover folosind Divi. De asemenea, am creat de la zero un exemplu de design uimitor care utilizează această abordare. Ești liber să folosești designul și ilustrațiile pentru orice tip de site web pe care îl construiești. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!