Efectos al poner el ratón sobre un elemento web con Divi – Efectos hover como: cambiar imagen, cambiar color icono y añadir sombreado + VÍDEOS

Vamos a ver en este post diferentes efectos al poner el ratón sobre un elemento de la web con WordPress. Este tipo de efectos se denominan técnicamente como efectos “hover” (hover effects), habitualmente se implementan vía CSS y pueden ser muy variados.

En nuestro caso, con la plantilla Divi no vamos a tener que implementar ningún CSS, ya que el constructor de elementos de Divi ya incluye opciones de este tipo.

Vamos a ver 3 ejemplos: cambio de color al poner el ratón sobre un icono, cambio de imagen al poner el ratón sobre una imagen y mostrar sombreado al poner el ratón sobre una imagen

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES

VER CURSOS

➡️1.- Opciones hover de la plantilla Divi y transiciones – Efectos hover al poner el ratón

La plantilla Divi incluye opciones hover en el page builder o constructor de páginas (Divi builder). Es decir, incluye opciones de personalización de acciones que se visualizan al poner el ratón sobre un elemento, sin tener que añadir ningún tipo de CSS.

Distinguirás que opciones de personalización disponen de acciones tipo “hover” al ver un icono en forma de puntero de ratón sobre dicho selector. Al hacer clic en el icono te aparecerán dos pestañas:

• a.- Escritorio: aquí estableceremos el parámetro normal del elemento
• b.- Flotar: aquí estableceremos el parámetro del elemento cuando el usuario pone el cursor del ratón sobre él.

El icono en forma de puntero de ratón es el responsable del efecto hover en Divi

Para ver este efecto “hover” deberás realizar una previsualización completa de la página.

En la configuración del módulo “Avanzado > Transiciones”, en la opción “Duración de la transición” podrás establecer la velocidad en que se produce el cambio del parámetro establecido en “Escritorio” hacia el establecido en “Flotar”.

Para entender todo esto «como Dios manda» y que comprendas la potencia de este recurso, lo mejor será ver una serie de ejemplos concretos.

Con esta herramienta y con tu imaginación puedes conseguir efectos increíbles.

✅2.- Efecto de cambio de color al poner el ratón sobre un icono con Divi

Vamos a ver un efecto de cambio de color de un icono cuando el usuario pone el ratón sobre dicho icono. Para ello, lo primero que haremos será añadir un módulo “anuncio” de Divi y elegiremos un icono a mostrar.

Para establecer el color normal y el color en posición hover, iremos a: “Diseño > Imagen e icono > color de icono”.

A continuación, haremos clic en el icono en forma de puntero de ratón y se nos mostrarán las pestañas: Escritorio y Flotar.

En la pestaña “Escritorio” estableceremos el color principal del icono y en la pestaña “Flotar” estableceremos el color del icono en posición “hover”. Es decir, el color en el momento en el que el visitante ponga el puntero del ratón sobre el icono.

Posteriormente, desde la configuración del módulo anuncio iremos a “Avanzado > transiciones > duración de la transición” donde estableceremos la duración del cambio de color.

Para ver el efecto, guarda la configuración y haz una vista previa completa de la página.

✅3.- Efecto añadir sombreado al poner el ratón sobre una imagen con Divi

En este caso vamos a ver como podemos hacer que al poner el ratón sobre una imagen aparezca una sombra con wordpress y Divi. Pero, con un borde nítido y un color diferente al habitual de una sombra.

Lo primero que haremos será añadir un módulo imagen de Divi y subir una imagen al módulo.

A continuación, iremos en la configuración del módulo imagen de Divi y a: “Diseño > Sombra de la caja”. Seleccionaremos el diseño de sombra situado en la tercera posición de la fila superior (contando de izquierda a derecha).

Para que el borde de la sombra sea nítido, en la opción “Box shadow Blur Strength” pondremos 0px.

Ahora jugaremos con los siguientes 3 selectores para ocultar la sombra en su posición inicial. Por ejemplo con estos valores:

• I.- Cuadro de sombra de posición inicial (desplazamiento horizontal sombra): 52px
• ii.- Posición Inicial (desplazamiento vertical sombra): 52 px
• iii.- Fuerza de propagación de la sombra de la caja: -52px (hasta ocultar la sombra)

Ahora estableceremos la sombra en la posición hover. Para lo que modificaremos los siguientes parámetros.

• i.- Cuadro de la sombra de posición inicial (desplazamiento horizontal sobra): haremos clic en el icono del puntero de ratón y en la pestaña “Flotar” pondremos: 80px
• ii.- Posición inicial (desplazamiento vertical sombra): haremos clic en el icono del puntero de ratón y en la pestaña “Flotar” pondremos: 80px

A continuación, guardaremos los cambios, guardaremos la página y realizaremos una previsualización.

✅4.- Efecto con Divi de cambiar de imagen al poner el ratón con Divi (efecto hover sobre imagen).

Vamos a ver ahora un efecto muy interesante. Vamos a hacer ahora que al poner el ratón sobre una imagen, ésta cambie y se muestre otra imagen diferente. Este efecto es muy usado en tiendas online y otros tipos de webs. Algunas plantillas como Flatsome ya incluye esta funcionalidad por defecto en los listados de productos de las categorías y la home

En primer lugar, añadiremos una fila con dos columnas con el constructor de Divi.

Entraremos en la configuración de la fila y después, accederemos a la configuración de la columna en la que vayamos a incluir la imagen.

En la configuración de la columna, iremos al apartado “fondo” (en la pestaña contenido) y subiremos una imagen. Esta será la imagen que se mostrará al poner el ratón sobre el elemento. Nos aseguraremos, que bajo esta opción, el selector “Repetición de la imagen de fondo” está establecido en “No repetir” y guardaremos.

A continuación, añadiremos un módulo imagen en la columna que estamos trabajando. Accederemos a la configuración del módulo imagen de Divi y añadiremos la imagen principal (la imagen que se mostrará antes de la acción hover).

En la configuración del módulo imagen, iremos a “Diseño > Filtrar”. En selector opacidad, haremos clic en el icono en forma de puntero de ratón, y en la pestaña “Flotar” estableceremos 0%. Es decir, haremos que al poner el ratón sobre la imagen, ésta se haga totalmente transparente y se muestre la imagen que hay detrás (la que colocamos de fondo en la columna).

Guardamos módulo, página y realizamos previsualización.

Como antes te he comentado, desde el módulo imagen, puedes ir a “Avanzado > transiciones”, y en la duración de la transición modificar la velocidad con el que se pasa de una imagen a otra.