¿Cómo cambiar una imagen al pasar el ratón por encima?

Publicado el 12/01/2022 | 4 comentarios

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:

  1. Añade un módulo de imagen dentro de tu diseño con el Visual Builder
  2. Importe su primera imagen, la llamaremos imagen "A".
  3. Active la opción hover haciendo clic en el icono de la flecha.
  4. Seleccione la pestaña Hover, traducido erróneamente) e importe su segunda imagen, la imagen "B".
Ajouter un module image
Añade un módulo de imagen a tu diseño
importer l'image A
En primer lugar, importa la imagen "A"
importer image B
Activar las opciones de hover e importar 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.

activer les bons onglets
Compruebe las imágenes de cada ficha

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:

image hover divi ok
image survol divi ok

736 palabras

3

Puede que a ti también te guste:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio web? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener al usuario que pasa por su sitio en el mismo. Descubre el tutorial paso a paso + vídeo.

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

4 Commentaires

  1. Meyer Michel

    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

  2. Meyer Michel

    Finalement ça passe bien avec l’essaie que j’ai fait, la transition est fluide 😉

  3. Lycia Diaz

    Oui je vois ce que tu veux dire… tu as certainement raison

  4. Lycia Diaz

    Ah super !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto