Vrei să știi cum să schimbi o imagine la hover cu DIVI?
Efectele de hover sunt unele dintre cele mai simple micro interacțiuni pe care un utilizator le poate avea cu un site-ul web. cel Divi Theme Builder oferă un set de efecte de hover incredibil de simple pe care le puteți folosi pentru a crea o interacțiune captivantă pentru fiecare persoană care vă vizitează site-ul web.
Unul dintre cele mai izbitoare și utile efecte ale Divi este posibilitatea de a modifica o imagine atunci când un utilizator trece cursorul peste ea.
Vă arătăm în acest tutorial cum să obțineți o schimbare frumoasă a imaginii când treceți cursorul mouse-ului peste ea.
studiu
Înainte de a începe, să aruncăm o privire asupra rezultatului pe care vrem să-l obținem.
Creați o pagină cu Divi Theme Builder
Începeți prin a adăuga o nouă pagină la site-ul web din tabloul de bord WordPress.
Apoi, dați un titlu paginii dvs., apoi faceți clic pe „ Utilizați Divi Builder ".
Apoi faceți clic pe " Alegeți aspectul«
Găsiți și alegeți " Pagina principală pentru îngrijirea câinilor »
Alegeți un aspect și faceți clic pe „ Alegeți aspectul »
Găsiți-vă imaginile
Când sunteți în Divi Builder, localizați pur și simplu imaginile la care doriți să adăugați efectul.
Rețineți că îl puteți folosi pe orice element care conține o imagine
Deschideți setările modulului
După ce ați luat decizia, faceți clic pe pictograma roată și introduceți parametrii modulului care contine imaginea.
Citiți și: Cum pot afișa postările de blog în DIVI?
În cazul acestui pachet de aspect, imaginea căreia îi vom aplica efectul de hover este fundalul coloanei din dreapta a primului rând.
Introduceți setările coloanei.
Găsiți imaginea în setări
Odată ce vă aflați în setările de coloană corect, asigurați-vă că selectați fila Conținut. Derulați în jos până când găsiți opțiunea Partea de jos.
sub fundal, Divi vă oferă opțiunea de a utiliza fie o culoare solidă, fie un gradient, fie o imagine sau un videoclip în format .mp4.
Și deși efectele hover pot fi aplicate la oricare dintre ele, lucrăm în filă Imagine, a treia din stânga.
Activați Efectele Hover
Deplasați mouse-ul peste cuvânt fundal (cel mai mic subtitrare) și căutațipictograma săgeată în opțiunile care apar. Acesta este comutatorul pentru Efecte Hover Divi.
Când această opțiune este activată, apar două file noi. Fila din stânga este imaginea de bază care apare fără interacțiune.
Alege noua ta imagine
Când mutați cursorul în jos peste imagine, veți avea opțiunile normale: pentru a înlocui imaginea ou pentru a șterge poza.
Dacă alegeți pictograma coș de gunoi, aceasta va activa efectul de hover, dar va face imaginea să dispară.
Din moment ce vrem Schimbare imaginea de pe hover, fie noi faceți clic pe imaginea în sine, fie pepictograma roții .
Alegeți imaginea hover (înlocuire)
Aceasta vă va deschide biblioteca media. Puteți alege apoi noua imagine pe care doriți să o vadă utilizatorii dvs. când trec cu mouse-ul peste originală. Click pe 'Încărcați o imagine"
Verificați dacă există erori cu imaginea originală
Vă sugerăm întotdeauna să vă asigurați că imaginea originală rămâne aceeași. Deci, pentru a verifica, faceți clic pe fila din stânga și asigurați-vă că imaginea originală este încă pe loc.
Dacă totul este bine, vă puteți salva setările.
- Salvați setările coloanei
- Apăsați din nou pe căpușă verde pentru a salva setările liniei.
Salvați setările generale generale și publicați pagina.
rezultat
Dacă ați urmat toți pașii din acest tutorial, ar trebui să obțineți acest lucru.
Descărcați DIVI acum!!!
Concluzie
Divi's Theme Builder este plin de instrumente puternice pe care oricine le poate folosi creați un site web interesant și interactiv. Schimbarea imaginii de trecere cu mouse-ul pe care v-am arătat-o în acest ghid este doar un instrument dintre multe.
Dacă aveți nevoie de mai multe elemente pentru a finaliza proiectele dvs. de creare a site-ului web, răsfoiți și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii să vorbesc despre asta. Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
