Hola bienvenido a este nuevo tutorial de divi y wordpress. En este tutorial aprenderás a crear un impresionante efecto hover con divi. El efecto consiste en que al pasar el cursor sobre una columna la sección principal cambiará su imagen de fondo o background.
En otras palabras, haremos una sección con una fila de 4 columnas y al ir pasando el cursor sobre cada columna, la sección que contiene la fila con las columnas irá cambiando de imagen de fondo. La verdad es un efecto hover sencillo pero muy lindo que podrás aplicar en cualquiera de tus proyectos.
Para realizar este efecto solo vamos a necesitar de un fragmento de código jQuery que te dejo a continuación. Este fragmento de código nos servirá para activar la imagen de fondo al pasar el cursor sobre las columnas.
<script>
(function($) {
$("#columna1").on({
mouseover: function() { $('#fondoFila').css('background-image', 'url(URL_DE_LA_IMAGEN_HOVER)'); },
mouseout: function() { $('#fondoFila').css('background-image', 'url(URL_DE_LA_IMAGEN_POR_DEFECTO)'); }
});
$("#columna2").on({
mouseover: function() { $('#fondoFila').css('background-image', 'url(URL_DE_LA_IMAGEN_HOVER)'); },
mouseout: function() { $('#fondoFila').css('background-image', 'url(URL_DE_LA_IMAGEN_POR_DEFECTO)'); }
});
$("#columna3").on({
mouseover: function() { $('#fondoFila').css('background-image', 'url(URL_DE_LA_IMAGEN_HOVER)'); },
mouseout: function() { $('#fondoFila').css('background-image', 'url(URL_DE_LA_IMAGEN_POR_DEFECTO)'); }
});
$("#columna4").on({
mouseover: function() { $('#fondoFila').css('background-image', 'url(URL_DE_LA_IMAGEN_HOVER)'); },
mouseout: function() { $('#fondoFila').css('background-image', 'url(URL_DE_LA_IMAGEN_POR_DEFECTO)'); }
});
})( jQuery );
</script>Para que sepas dónde tienes que pegar el código y que otras configuraciones necesitas hacer, no esperes más y dale play al video..
Hola buen día, quería hacerte una pregunta hay forma de que al momento de que pases el cursor y cambien de imagen pueda aparecer un texto?
Hola Christian, puedes intentar colocando el siguiente código CSS en ajustes de la pagina / Avanzado / CSS personalizado:
#columna1 .titulo {opacity: 0;
}
#columna1:hover .titulo {
opacity: 1;
}
Importante:
1. Debes colocarle el nombre de clase «titulo» a todos los módulos de texto.
2. Debes repetir ese código para las columnas 2,3 y 4.
Muchas gracias por el gran aporte que nos haces y felicitaciones oscar, tengo una pregunta por favor: en el caso de que tengamos 2 filas y en la fila 1 al pasar el mouse por encima de la columna 1, se afecte el texto que esta en la columna 1 pero de la fila 2 , esto se puede?
Hola Holman,¡woow! Está interesante lo que propones. No lo he intentado pero estoy seguro que se puede hacer, habría que jugar con el código, aunque debe ser la misma lógica, inténtalo guiándote de este tutorial a ver si lo logras. Si tienes el ejercicio en línea me escribes y te puedo echar una mano.
Hola oscar, muchas gracias por responder, si he jugado con el código pero no se me dio, pero encontré otra forma de hacer lo que me estaba propongo (aun no lo implemento pero»creo que si» ), te quería consultar, sabes como hacer el efecto flotar? quiero que una imagen suba y baje como si levitara, si puedes ayudarme te agradezco porfa.
Genial que hayas encontrado otra alternativa. ¿Efecto flotar? 🤔 Tendrás un ejemplo para que me dé una ida mejor?
Pero ahora ya se puede hacer con las opciones de Divi, no hace falta agregar código. Igualmente, aunque estos efectos son muy vistosos, hay que pensar que en el móvil no se van a ver. Así que es buena idea valorar si tus usuarios entran desde el móvil mayormente igual mejor buscar otras cosas.
Un saludo!
Hola Taisa ☺️
Con divi lo que se puede hacer es cambiar una imagen al pasar el cursor solamente de la misma sección, fila, columna o módulo dónde se encuentre la imagen, pero no que cambie la imagen de otra sección, fila o columna diferente, por eso hemos usado jQuery 😀
El efecto funciona en móviles, lo he probado, pero concuerdo con lo que dices, siempre tenemos que valorar si vale la pena implementar un efecto o no. Lo vistozo, el «wooow» también genera una buena experiencia de usuario.
También se puede trabajar para que el efecto solo se aplique en escritorio y en móvil desactivarlo por si éste está afectando los tiempos de carga.
Un abrazo Taisa 🤗
muchas gracias por tu gran aporte, y quisiera hacerte una pregunta.
y si quisiera reemplazar el pasar el mouse, por un click en el texto y cambiara solo al hacer click en los otros textos?
Hola Rául, no logro entender bien tu pregunta. Creo que no la has expresado correctamente 🤔
Hola Óscar
Desde hace unos días cuando paso el cursor por las secciones no se cambia la imagen.
No se si será por alguna actualizacion de WordPress o por qué
Antes funcionaba de miedo
Hola Fernando qué tal, si antes funcionaba y ahora con divi 4.10.x ya no intenta esto: Dirigete a divi > Opciones del tema > General > Performance y deshabilita la opción: Defer jQuery And jQuery Migrate…
Si el problema persiste desactiva todas las opciones de Divi Performance y ve activando una por una hasta que encuentres cual da el conflicto.
Hola Oscar, realice este efecto en mi página web, pero dejo de funcionar con las nuevas actualizaciones. Sabrás cómo corregirlo?
Hola Christian, dirigete a Divi > Opciones del tema > General > Performance y deshabilita la opción: Defer jQuery And jQuery Migrate
Con eso debe quedar resuelto para las versiones recientes de divi 🙂
Hola Oscar,
Que Dios te bendiga, me funciono tu idea.
Gracias y un abrazo
Genial Francisco. Un abrazo 🙂
Hola buenas, se que comento un poco tarde hehehe, pero segui los pasos y funciono. Osea pude hacer el ejercicio. Pero cuando trato de chequearlo la vista desde el smartphone ( en mi celular que es un iPhone XR) no sale bien y quiero saber si hay una forma de arreglarlo.
Excelente William 🙂
Me puedes compartir la url de tu ejercicio para revisar en mi iPhone como es que se ve? A ver si me sucede lo mismo que a ti
Hey Oscar! Disculpa por responder tan tarde. El url es autonetworkrd.com
Veo que tienes definido un ancho máximo de 67vw en la fila en móvil. Debes quitar ese valor y ponerle 100% para teléfonos
Hola! muchas gracias por tu vídeo, muy muy interesante!! me surge una duda, y si en lugar de una imagen fija de fondo ponemos un fondo de color, se podría hacer?
Hola Claudia, el ejercicio está adaptado a imágenes. ¿Tienes un ejemplo de como te gustaría mostrar el fondo de color? Probablemente se pueda modificar el código para adaptarlo a un color de fondo.