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
SUPER DESCUENTO DIVI
EFECTOS HOVER - AL PONER EL RATÓN - PLANTILLA DIVI
- ➡️1.- Opciones hover de la plantilla Divi y transiciones – Efectos hover al poner el ratón
- ✅2.- Efecto de cambio de color al poner el ratón sobre un icono con Divi
- ✅3.- Efecto añadir sombreado al poner el ratón sobre una imagen con Divi
- ✅4.- Efecto con Divi de cambiar de imagen al poner el ratón con Divi (efecto hover sobre imagen).
➡️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.
SUPER DESCUENTO DIVI
✅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.
SUPER DESCUENTO DIVI
✅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.
SUPER DESCUENTO DIVI
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joaquín,
muchas gracias por los tutoriales.
En este caso yo quiero eliminar los títulos de las imágenes cuando pasas el ratón por encima. (No sé si me explico, cuando paso el ratón por encima de la imagen me aparece el nombre del archivo y no quiero que aparezca).
Probé con este código CSS:
img:hover {
pointer-events: none;
}
pero no está funcionando, me puedes ayudar?.
Gracias
Buenas,
Pero ¿qué módulo estás usando? con el módulo imagen no ocurre eso, no aparece el nombre del archivo al poner el ratón sobre él
Me gustaría también a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc.
Buenas tardes, ¿y cómo se puede hacer para que aparezca un texto al pasar el ratón por una imagen? se podría también mostrar texto al pasar ratón sobre el módulo anuncio?
Buenas elísabet.
Prueba en un módulo anuncio a poner el texto del mismo color del fondo (para que no se vea) y al pasar el ratón que cambie el color del texto y por tanto aparezca.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Buenos dias,
Estoy construyendo una web y intento implementar el efecto hover en el actual divi pero no me da las opciones que especificas… ¿sabes cómo se hace en la nueva versión?
Muchas gracias
Un saludo
Buenas
El post y el vídeo está realizado con una de las últimas versiones de la plantilla Divi. ¿Qué es exactamente lo que no te aparece? ¿qué versión de la plantilla divi estás utilizando? Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). Lógicamente, a través del soporte de la plataforma se puede llegar mucho más y mejor que el limitado soporte que puedo ofrecer en el blog. En la plataforma tienes cursos sobre WordPress, Cursos sobre Divi, SEO, Analytics, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, sobre Mailchimp, blog WordPress, etc. etc.****