Vuoi sapere come modificare un'immagine al passaggio del mouse con DIVI?
Gli effetti al passaggio del mouse sono alcune delle micro interazioni più semplici che un utente può avere con a sito web. Il Costruttore di temi Divi offre una serie di effetti al passaggio del mouse incredibilmente semplici che puoi utilizzare per creare un'interazione coinvolgente per tutti coloro che visitano il tuo sito web.
Uno degli effetti più sorprendenti e utili di Divi è la possibilità di cambiare un'immagine quando un utente passa il cursore su di essa.
In questo tutorial ti mostriamo come ottenere una bella modifica dell'immagine passandoci sopra con il cursore del mouse.
Panoramica
Prima di iniziare, diamo un'occhiata al risultato che vogliamo ottenere.
Crea una pagina con Divi Theme Builder
Inizia aggiungendo una nuova pagina a sito web dalla dashboard di WordPress.
Vedi anche: Come creare un menu scorrevole e a pressione in DIVI?
Quindi, dai un titolo alla tua pagina, quindi fai clic su " Usa Divi Builder ".
Quindi fare clic su " Scegli la disposizione«
Trova e scegli " Pagina iniziale di toelettatura dei cani »
Scegli un layout e fai clic su " Scegli la disposizione »
Trova le tue immagini
Quando sei in Divi Builder, individua semplicemente le immagini a cui vuoi aggiungere l'effetto.
Nota che puoi usarlo su qualsiasi elemento contenente un'immagine
Apri le impostazioni del modulo
Quando hai preso la tua decisione, fai clic sull'icona a forma di ingranaggio e inserisci il parametri del modulo contenente l'immagine.
Leggi anche: Come faccio a fluttuare i post del blog in DIVI?
Nel caso di questo pacchetto di layout, l'immagine a cui applicheremo l'effetto al passaggio del mouse è lo sfondo della colonna più a destra della prima riga.
Immettere le impostazioni della colonna.
Trova l'immagine nelle impostazioni
Una volta che sei nelle impostazioni di colonna corretto, assicurati di selezionare la scheda Contenuto. Scorri verso il basso fino a trovare l'opzione Parte inferiore.
sotto Sfondo, Divi ti offre la possibilità di utilizzare un colore solido, una sfumatura, un'immagine o un video in formato .mp4.
E sebbene gli effetti al passaggio del mouse possano essere applicati a qualsiasi di essi, lavoriamo nella scheda Immagine, terza da sinistra.
Abilita effetti al passaggio del mouse
Sposta il mouse sulla parola Sfondo (il sottotitolo più piccolo) e cerca ilicona della freccia nelle opzioni che appaiono. Questo è l'interruttore per Effetti al passaggio del mouse Divi.
Quando questa opzione è attivata, vengono visualizzate due nuove schede. La scheda a sinistra è l'immagine di base che appare senza interazione.
Scegli la tua nuova immagine
Quando sposti il cursore sull'immagine, avrai le normali opzioni: per sostituire l'immagine ou per eliminare l'immagine.
Se scegli l'icona del cestino, attiverà l'effetto al passaggio del mouse, ma farà scomparire l'immagine.
Dal momento che vogliamo cambiare l'immagine al passaggio del mouse, lo faremo anche noi clicca sull'immagine stessa, sia sulicona dell'ingranaggio .
Scegli l'immagine al passaggio del mouse (sostituzione)
Questo aprirà la tua libreria multimediale. Puoi quindi scegliere la nuova immagine che vuoi che i tuoi utenti vedano quando passano il mouse sopra l'originale. Clicca su 'Carica un'immagine'
Verifica la presenza di errori con l'immagine originale
Ti suggeriamo sempre di assicurarti che anche l'immagine originale rimanga la stessa. Quindi per verificare, fare clic su scheda sinistra e assicurati che l'immagine originale sia ancora a posto.
Se tutto va bene, puoi salvare le tue impostazioni.
- Salva le impostazioni della colonna
- Premere di nuovo il segno di spunta verde per salvare le impostazioni della linea.
Salva le impostazioni generali generali e pubblica la pagina.
Risultato
Se hai seguito tutti i passaggi di questo tutorial, dovresti ottenerlo.
Scarica DIVI ora!!!
Conclusione
Il Theme Builder di Divi è pieno di potenti strumenti che chiunque può utilizzare creare un sito Web interessante e interattivo. La modifica dell'immagine al passaggio del mouse che ti abbiamo mostrato in questa guida è solo uno strumento tra i tanti.
Se hai bisogno di più elementi per completare i tuoi progetti di creazione di siti web, sfoglia anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Se hai dubbi o suggerimenti, trovaci in la sezione commenti per parlarne. Ma intanto, condividi questo articolo sui tuoi diversi social network.
...
