Doriți să aveți un gradient de fundal Divi care se schimbă atunci când hover?
Construirea de site-uri web înseamnă să vă asigurați că fiecare detaliu este corect. Acordarea atenției micilor detalii ale designului dvs. va crește rapid calitatea dvs site-ul web.
Cu noile opțiuni de hover ale Divi, puteți adăuga cu ușurință interacțiuni mici pe dvs site-ul web. Opțiunile de trecere cu mouse-ul se aplică aproape tuturor parametrilor de proiectare. Puteți, de exemplu, să schimbați indirect un fundal degradat la trecerea cursorului pentru a crea o tranziție plăcută.
Este exact ceea ce vă vom arăta în acest tutorial. Pe lângă realizarea tranziției gradientului, vom crea și un exemplu de design uimitor de la zero, pe care îl veți putea folosi liber pentru orice tip de site-ul web pe care le creezi.
Să mergem!
studiu
Înainte de a te scufunda în tutorial, să aruncăm o privire la rezultatul final.
Să începem să proiectăm cu Divi
Adăugați secțiunea # 1
spaţierea
Primul lucru pe care trebuie 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 margini personalizate de sus și de jos.
- Umplutură (sus și jos): 100px
Adăugați linia 1
Structura coloanei
Continuați prin adăugarea unui nou rând folosind următoarea structură de coloane:
Culoarea implicită de fundal (desktop) a coloanei 1
Fără a adăuga încă module, deschideți setările rândului și adăugați următoarea culoare de fundal implicită la coloana 1:
- Fundal (desktop): #e7ffa0
Culoarea de fundal pentru coloana 1 la trecerea cursorului
Schimbați această culoare de fundal la trecerea cursorului.
- Fundal: #00020c
Degradat de fundal pentru coloana 1
Adăugați, de asemenea, o culoare de fundal gradient la coloana 1. Observați că folosim o culoare complet transparentă. Această culoare va permite culoarea de fundal să apară, care la rândul său se schimbă la trecerea cu mouse-ul.
- Culoare 1 (20%): rgba(255,255,255,0)
- Culoare 2 (100%): rgba(16,0,201,0.8)
- Tip de gradient: Linear
- Direcția gradientului: 50 de grade
Culoare de fundal pentru coloana 2
De asemenea, adăugați o culoare de fundal la coloana 2.
- Fundal: #ffffff
dimensionarea
Apoi accesați fila Amenajări și modificați setările de dimensionare din opțiune dimensionarea.
- Utilizați lățimea jgheab personalizată: DA
- Lățimea jgheabului: 1
- Latime: 2000px
spaţierea
Continuați prin adăugarea unor valori personalizate de umplutură în setările de spațiere.
- Umplutură (sus și jos): 0px
Spațiere (coloana 2)
- Umplutură (sus și jos): 6vw (desktop), 120px (tabletă și telefon)
- Umplutură (stânga și dreapta): 5vw (desktop), 80px (tabletă), 50px (telefon)
Box Shadow
Și, de asemenea, dă rândului o umbră subtilă de casetă.
- Intensitatea estomparii umbrei casetei: 100px
- Intensitatea răspândirii umbrei casetei: -10px
tranziţii
În cele din urmă, vom crea o tranziție lină de fundal cu gradient prin creșterea duratei tranziției în filă Avansat.
- Durata tranziției: 1100 ms
Adăugați un modul Imagine la coloana 1
Încărcați o imagine
Este timpul să începeți să adăugați module! Adăugați un modul Imagine în prima coloană.
Fundal gradient
Accesați setările de fundal ale acestui modul Imagine și adăugați un fundal gradient. Utilizăm din nou o culoare complet transparentă pentru a permite celorlalte culori să apară.
- Culoare 1(57%): rgba(50,217,255,0.66)
- Culoare 2(100%): rgba(255,255,255,0)
- Tip gradient: circular
- Poziție gradient: Sus
spaţierea
Apoi, adăugați o umplutură superioară personalizată la modul.
- Captuseala (sus): 14vw
Adăugați modulul Text în coloana 2
Adăugați conținut
Să trecem la a doua coloană! Primul modul de care vom avea nevoie este un Modul Text pentru titlu. Continuați și adăugați un cuprins titlul la alegere.
Setări pentru textul antetului
Apoi, accesați setările textului antetului și faceți câteva modificări.
- Font: Abril Fatface
- Culoare text: #000000
- Dimensiune text: 4 vw (desktop), 60 px (tabletă), 40 px (telefon)
Adăugați un al doilea modul Text la coloana 2
Adăugați conținut
Al doilea modul de care vom avea nevoie este un alt modul Text. Adauga ceva cuprins la alegere.
Setări text
Apoi, accesați setările textului și modificați alinierea textului.
- Alinierea textului: justificată
dimensionarea
De asemenea, reglați lățimea în setările de dimensionare.
- Lățime: 73% (desktop), 100% (tabletă și telefon)
spaţierea
În cele din urmă, adăugați margini personalizate de sus și de jos la modul pentru a crea spații.
- Marja (sus și jos): 2,5 vw (desktop), 50 px (tabletă și telefon)
Adăugați modul Button în coloana 2
Adăugați o descriere
Al treilea și ultimul modul de care vom avea nevoie în a doua coloană este un modul Button. Adăugați o copie la alegere.
Setări buton
Apoi modificați setările butonului.
- Utilizați stiluri personalizate pentru buton: DA
- Dimensiunea textului butonului: 1,2 vw (desktop), 14 px (tabletă și telefon)
- Culoarea textului butonului: #ffffff
- Opriri de gradient 1 (0%): #9ea6ff
- Gradient Stops 2 (100%): rgba(16,0,201,0.8)
- Direcție: 78 de grade
- Lățimea chenarului butonului: 0 pixeli
- Raza chenarului: 30px
- Spațiere între litere: -1px
- Greutatea fontului: Ultra Bold
- Stil font: TT -(Majuscule)
spaţierea
Adăugați, de asemenea, valori de umplere personalizate.
- Umplutură (sus și jos): 10px
- Umplutură (stânga și dreapta): 40px
Box Shadow
Și aplicați o umbră subtilă de casetă butonului.
- Intensitatea estomparii umbrei casetei: 40px
Citiți și: Cum să personalizați modulul „Timer numărătoare inversă” cu un GIF
Adăugați secțiunea # 2
spaţierea
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 personalizate de umplutură:
- Umplutură (sus și jos): 100px
Adăugați un rând la două coloane
Structura coloanei
Continuați adăugând un nou rând la secțiune folosind următoarea structură de coloane:
Fundalul coloanei 1
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:
- Fundal: #ffffff
Fundal coloana 2 (desktop)
Adăugați următoarea culoare de fundal la coloana 2.
- Fundal (desktop): #ffffff
Culoarea de fundal a coloanei 2 la trecerea cursorului
Și schimbați această culoare de fundal la trecerea cursorului.
- Fundal (Hover): #3d02ff
fundal gradient cu 2 coloane
De asemenea, adăugați un fundal gradient la coloană.
- Gradient Stops 1 (20%): rgba(255,255,255,0)
- Gradient Stops 2 (100%): #ff7700
dimensionarea
Apoi, accesați setările de dimensionare și faceți câteva modificări.
- Utilizați lățimea jgheab personalizată: DA
- Lățimea jgheabului: 1
- Latime: 2000px
Spațiere (linie)
Continuați prin adăugarea unor valori personalizate de umplutură în setările de spațiere.
- Umplutură (sus și jos): 0px
Spațiere (coloana 1)
Modificați setările de spațiere pentru coloana 1
- Umplutură (sus și jos): 6vw (desktop), 120px (tabletă și telefon)
- Umplutură (stânga și dreapta): 5vw (desktop), 80px (tabletă), 50px (telefon)
Box Shadow
Și adăugați, de asemenea, o umbră subtilă de casetă acestui rând.
- Intensitatea estomparii umbrei casetei: 100px
- Intensitatea răspândirii umbrei casetei: -10px
tranziţii
În cele din urmă, creați o tranziție lină prin creșterea duratei tranziției în filă Avansat.
- Durata tranziției: 1100 ms
Module duplicat linia 1
Deoarece avem deja toate modulele de care avem nevoie în secțiunea anterioară, vom economisi timp prin clonarea acestora.
Plasați duplicatele în rândul 2 coloane
Și plasați duplicatele în noua linie, după cum urmează:
Editare conținut
Asigurați-vă că schimbați cuprins a modulelor dvs.
Schimbați fundalul gradient al butonului
Schimbați și gradientul de fundal al butonului.
- Gradient se oprește 0%: #ff653f
- Gradient se oprește 100%: #0066ff
- Direcție: 39 de grade
Schimbați imaginea
Înlocuiește imaginea.
Schimbați gradientul de fundal
În cele din urmă, modificați gradientul de fundal al modulului Imagine.
- Se oprește gradient 0%: rgba(0,2,12,0.66)
- Se oprește gradient 57%: rgba(255,255,255,0)
studiu
Acum că am parcurs toți pașii, să aruncăm o ultimă privire la rezultatul final.
Descărcați DIVI acum!!!
Concluzie
În acest articol, v-am arătat cum să schimbați un fundal gradient la trecerea cu mouse-ul Divi. De asemenea, am creat un exemplu grozav de la zero care utilizează această abordare.
Sunteți liber să utilizați designul și opera de artă pentru orice tip de site web pe care îl creați.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
