Puedes jugar fácilmente con las opciones de hover que ofrece Divi. Esto se llama "hovering " en diseño web... Por ejemplo, puedes hacer un ampliar una imagen como vimos en un tutorial anterior. Puedes cambiar el color de un texto o de un fondo... Pero hoy, te mostraré cómo cambiar una imagen al pasar el ratón.
👉 Dificultad: ¡cero!
👉 Duración: ¡la hora del café!
Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.
1 - ¿Qué es el "hover" o "mouse-over"?
¿Es realmente necesario explicar qué es HOVER? Si eres diseñador web, ya sabes lo que es... Pero si eres de la edad de hielo, aquí tienes una pequeña definición:
Pasar por encima es el acto de mostrar un estado diferente a un elemento cuando el usuario pasa por encima de él.
Es muy común crear diseños originales: cambiar el color, cambiar el tamaño, cambiar la posición, etc.
¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA
2 - Cambiar una imagen al pasar el ratón por encima en 3 clics
La ventaja es que Divi ofrece opciones de hover en cada módulo y el Módulo de imagen no es una excepción a la regla, por supuesto.
¿Has pensado alguna vez en cambiar una imagen al mover el ratón? Es posible y muy fácil:
- Añade un módulo de imagen dentro de tu diseño con el Visual Builder
- Importe su primera imagen, la llamaremos imagen "A".
- Active la opción hover haciendo clic en el icono de la flecha.
- Seleccione la pestaña Hover, traducido erróneamente) e importe su segunda imagen, la imagen "B".
¡Eso es!
Nada podría ser más sencillo, ¿verdad?
No dude en comprobar ambas pestañas (la del Escritorio y la del Flotador) para asegurarse de que ambas imágenes están en los lugares correctos.
3 - Consejos para un efecto exitoso
Verás que para que el efecto tenga éxito, lo mejor es utilizar dos imágenes que se superpongan perfectamente.
Para mi ejemplo, he duplicado la misma imagen dos veces y luego he cambiado el color y añadido elementos gráficos. Lo hice utilizando dos programas de software:
- Affinity Photo para recortar la imagen y cambiar el color
- Affinity Designer para añadir elementos gráficos
Como explico en el siguiente vídeo, me llevó más tiempo hacer estas imágenes que integrarlas en Divi.
Esto nos recuerda que una buena maquetación y un buen diseño no dependen exclusivamente de la parte técnica de la creación del sitio... Al contrario: su contenido -sus textos e imágenes- marcarán la diferencia. Entonces, Divi le permitirá integrarlos fácilmente...
4 - Cambiar la imagen al pasar el ratón por encima: el video tutorial
Aquí está la recapitulación del vídeo... Como se trata de un tutorial de Divi muy corto, he aprovechado para añadir, como extra, el diseño de estas dos imágenes al final del vídeo... Así que si tienes curiosidad, ¡mira el vídeo completo!
No se demore. Descubra el tema Divi aquí !
5 - Opciones Hover disponibles en todos los módulos de Divi
Como recordatorio, las opciones de hover están disponibles en todos los módulos de Divi. Basta con pasar el ratón por encima del título del módulo para que aparezcan los iconos de desplazamiento y otras opciones... ¡Así que no dude en utilizarlos!
Por cierto, aquí también puedes activar el icono del teléfono que te permite gestión perfecta de la respuesta de cada módulo. No me canso de decirlo: busca bien, todas las opciones están ahí, delante de ti 😉 .
¿Quieres personalizar Divi como un profesional? Consulta todos los tutoriales.
6 - Para ir más lejos
Para ir más allá con la función Hover de Divi, aquí hay una pequeña lista de tutoriales:
- Otra forma de cambiar la imagen al pasar por encima
- Cómo desplazar una imagen al pasar el ratón por encima
- Cómo añadir un efecto de inclinación al hover (¡vaya, me encanta!)
- Cómo mostrar el resumen de un artículo al pasar el ratón por encima
- ¿Cómo se crea un efecto de zoom al pasar el ratón por encima de una imagen con un texto clicable en la parte superior?
- ¿Cómo sustituir el logotipo de un cliente por un testimonio del cliente al pasar el ratón por encima?
Hello Licia, voilà tu as fait un nouveau adepte 😉 en tous cas c’est chouette ton aide que tu apportes et un grand Merci pour tes nombreux tutos.
Ici sur ce tuto, je pourrais être tenté, sauf ce qui me gène au passage de la souris pour le changement d’image, c’est ce petit « flash » blanc qu’il y à et ça donne un rendu pas du tout fluide entre les deux images. Dommage l’idée est intéressante !
Cordialement
Michel
Finalement ça passe bien avec l’essaie que j’ai fait, la transition est fluide 😉
Oui je vois ce que tu veux dire… tu as certainement raison
Ah super !
Bonjour Lycia,
J’aimerais mettre une image survolée (donc deux images,) dans mon menu entête à la place du mot boutique et dans un de mes menus pied de page, ou si pas possible à côté du menu entête.
L’astuce image Visual Builder module n’est pas applicable dans ce cas.
Avez vous une solution à me proposer svp ?
Oui je vois. Pas d’idées à part bidouiller avec du CSS
Bonjour !
Après quelques années chez shopify, je commence à me familiariser avec Divi que je trouve intéressant au niveau seo. Mais je désespère à ne pas trouver une astuce ou module pour savoir comment afficher une seconde image au survol d’un produit !
Avec le thème Dawn de shopify, cette fonction est proposée naturellement mais là avec Divi, je n’ai rien trouvé sur ce sujet. Auriez-vous une info sur ce sujet ou faudra-t-il retourner à l’âge de glace ? 😉
Merci d’avance pour votre aide.
Eh bien non, il n’y a pas d’option pour ça. D’où ce tutoriel. Peut-être qu’un plugin tiers propose ça ? Peut-être Divi Suprême ? À voir…
J ai un soucis avec mes images sur Divi, mes image sont grisées a 50 % . Que faire
Je ne sais pas, je suppose qui faut inspecter votre site pour mieux comprendre ce qu’il se passe. Il doit y avoir un dégradé de paramétré quelque part.