Los "Hover Effects" nos permiten ejecutar una acción sobre un elemento cuando pasamos el ratón por encima. El caso más común puede ser el de los enlaces de un menú, cuando cambian de color al colocarnos encima. Gracias a las librerías "jQuery" vamos a crear un efecto especial sobre las imágenes, muy llamativo, sobre todo en galerías.
"Hover Effect" continuo al seleccionar una imagen en el tema DIVI
El tema Divi nos brinda un montón de posibilidades a la hora de configurar nuestra página web, por eso es considerado uno de los 10 mejores temas para WordPress.
Gracias al "Divi Builder" y a la posibilidad de colocar código dentro de las páginas o entradas, el trabajo que vamos a realizar será coser y cantar.
Primero voy a explicar a grandes rasgos el proceso que vamos a seguir, es cierto que existen plugins que pueden hacer el efecto sin complicaciones, pero suelen ser de pago. Y si son gratuitos no ofrecen lo que queremos.
Para todo aquel que no quiera seguir el tutorial y no le importe rascarse el bolsillo, puede echar un vistazo a los siguientes plugins, que seguro le serán muy útiles:
- Smart Grid Gallery - Tras buscar y buscar en Google, es el único que he encontrado para WordPress y que implementa el efecto que vamos a realizar, utiliza JavaScript y CSS. Su precio es de unos 16€ ($19).
- Marvelous-Hover-Effects - Aunque no tiene el efecto del slider deslizante en todas direcciones, contiene un montón de efectos que harán las galerías más atractivas. Cuesta alrededor de 12€ ($14)
Algunos de los enlaces que podrás encontrar en este artículo son de afiliado, por lo que si decides comprar alguno de estos productos te agradecería que lo hicieras a través de ellos, gracias.
Pros y contras de implementar un efecto dinámico en DIVI
Antes de empezar hay que dejar claro un par de cuestiones que harán que nos decidamos a seguir o no.
Todos sabemos que DIVI goza de una gran cantidad de efectos visuales que otros temas no tienen. Pero basta que nos den muchas opciones para no encontrar la que queremos.
Para añadir este efecto, necesitamos colocar en el servidor unos archivos "JS", que tendrá que cargar la página antes de mostrar el resultado, y que harán que se ralentice la carga un poco.
Una solución sería colocar un módulo de código dentro del artículo o página, utilizando el "Constructor DIVI" (Divi Builder), así no tendremos que tocar la cabecera de la web, y sólo se cargará cuando accedamos a dicha página o artículo. De esta forma evitamos que afecte a toda la web.
Si no disponéis del tema DIVI para realizar la prueba, podéis adquirirlo en Elegant Themes.
Al entrar a la Zona Premium tendréis acceso a todo el contenido que vaya colocando en esa sección, cursos, temas premiun, layuots...
Preparar el diseño o layout para aplicar el Hover Effect en DIVI
Primero crearemos una galería fotográfica dentro de una sección estándar, que nos permitirá crear varias columnas para disponer de las imágenes a nuestro antojo.
Esta sección puede crearse nueva en una página o entrada, o formar parte de un artículo ya creado. Dentro de la sección colocaremos una fila con las columnas que queramos. Para no tener que estar ajustando espacios, lo mejor es elegir que todas las columnas tengan el mismo ancho.
A la hora de seleccionar los módulos, tendremos que elegir si utilizamos la "Galería", uno de "Imagen" o de "Texto", dependiendo de si queremos tener un enlace activo o no.
El módulo imagen bloquea el link al aplicar este efecto, pero podemos añadir una imagen a un módulo de texto y aplicarle el efecto de la misma manera.
La configuración básica la realizaremos sobre un único módulo, de esta forma sólo hacemos los cambios una una vez y sólo habrá que cambiar la fotografía y el título cunado los repliquemos en el resto de columnas.
Configurar el MÓDULO DE IMAGEN de DIVI
Aquí entra ya un poco las preferencias que tenga cada uno, y el aspecto que queramos conseguir.
PESTAÑA CONTENIDO:
- URL de imagen: Selecciona la imagen que quieres mostrar.
- Enlace: Queda anulado.
PESTAÑA DISEÑO:
- Capa superpuesta: Apagado
- Alineación: Centro
- Borde: Si queremos usar un borde lo activamos y lo configuramos, en mi caso SI
- Color del borde: #cccccc
- Anchura del borde: 1px
- Estilo del borde: Sólido
- Hacer que tenga anchura completa: Sí
- Separación: Sí
- Margen personalizado (margin): Superior-3px Derecha-3px Base-3px Izquierda-3px
- Relleno personalizado (padding): Superior-10px Derecha-10px Base-10px Izquierda-10px
- Animación: None
PESTAÑA AVANZADO:
- ID y clases de CSS
- Identificador CSS: Lo dejamos en blanco.
- Clase CSS: Una palabra que haga referencia a la galería y que sea única, no debe tener espacios ni caracteres especiales, yo pondré galeriaivw. Apuntarla porque la necesitaremos más adelante.
- Texto del título de la imagen: Texto que aparecerá sobre la imagen al colocar el ratón encima, en blanco no saldrá nada.
Este es el aspecto que tendrán todas las imágenes que incluya en mi galería.
Configurar la FILA de DIVI
Ahora toca duplicar el módulo de la imagen tantas veces como necesitemos, no tienen por qué ser del mismo tamaño, pero sí lo son conseguiremos que queden alineadas en la parte inferior.
Vamos abriendo cada módulo y sustituimos la imagen por la que queramos colocar. También modificamos el nombre del título, en la pestaña "Avanzado" de cada módulo.
Para configurar la fila vamos a modificar o configurar los siguientes valores:
PESTAÑA DISEÑO:
- Uso Personalizado de Canalón de Ancho: Sí
- Espacio entre columnas: 1px
- Igualar las alturas de las columnas: Sí
El resto de las opciones las dejamos por defecto como están.
Por supuesto, esta es una configuración personal, si utilizáis el módulo de galería, tendréis que adaptarla a vuestro gusto. Para aplicar el efecto sólo tendréis que colocar el identificador CSS una vez en lugar de repetirlo en cada imagen. Y aquí si podréis asignar un enlace desde la configuración de la galería en la pestaña medios.
Subir los archivos .js al servidor de la web
Hay dos maneras de hacer este proceso, subir los archivos de forma manual o a través de un plugin que los cargue en la web.
Subir los archivos .js de forma manual
Este método permite cargar los archivos únicamente donde vamos a realizar el efecto, liberando al resto de la web de procesar código innecesario. Necesitamos acceder al servidor y colocar dos archivos en la carpeta "uploads" de nuestro WordPress.
Para acceder al servidor podemos hacerlo desde el panel de control del hosting o a través de un cliente FTP como FileZilla. Podéis ver este vídeo para ver como configurar una conexión con este cliente FTP.
- Este efecto es obra de "wayou", que liberó el código para implementarlo en HTML, pero yo lo he extraído para adaptarlo a DIVI. Seguramente también se pueda utilizar en otros temas de WordPress.
- Navegamos hasta la ruta "wp-content/uploads" y creamos una nueva carpeta que llamaremos "js_hovereffects".
- Descargamos los archivos y los descomprimimos en nuestro ordenador.
- El enlace permanece activo por un tiempo limitado desde que se visita la página, si en el momento de la descarga aparece un error, basta con refrescar el navegador para volver a tener el enlace activo otra vez.
- Copiamos los archivos .js en la carpeta que hemos creado en el servidor y apuntamos la ruta, que sería algo así "http://www.tudominio.com/wp-content/uploads/js_hovereffects/", junto con el identificador del módulo que os dije que recordarais.
Aplicar la acción sobre las imágenes
Volvemos a la página o entrada donde estamos configurando la galería y añadimos una nueva fila debajo de las imágenes con un módulo de "código".
Lo editamos y escribimos tal cual el siguiente código, se trata de los "scripts" que nos permitirán configurar los efectos.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script src="***ruta del archivo***/jquery-1.11.1.min.js"></script> <script src="***ruta del archivo***/jquery.sliphover.min.js"></script> <script type="text/javascript"> $(function(){ $('.***contenedor***').sliphover({ height:'100%', // tamaño del efecto en altura reverse:false, // dirección del efecto, false, true duration:200, // en milisegundos, fast, slow, 200-600 backgroundColor:'rgba(0,0,0,0.5)', // color de la cortinilla fontColor:'#ffffff', // color de la cortinilla }); }) </script> |
En este código hay que cambiar unas líneas para que actúe sobre las imágenes, si las hemos apuntado antes no tendremos ningún problema:
- Sustituir "***ruta del archivo***" por la ruta donde hemos copiado los archivos .js en el servidor.
- Cambiar "***contenedor***" por la Clase que le pusimos a la fila del Divi Builder
Si todo ha ido bien, tendremos un efecto muy chulo al pasar el ratón por las imágenes. Podemos cambiar algunas variables para modificar la acción según nos convenga. Un poco más abajo os lo explico.
Subir los archivos .js a través de un plugin
El proceso anterior requiere de unos conocimientos mínimos de utilización del servidor, acceder a los archivos y colocar la ruta en el código correctamente para que funcione.
Si estamos trabajando en un servidor local y utilizamos la URL completa para llamar a los archivos .js, tendremos que modificarla cuando pongamos la web en producción en un servidor online.
Para ahorrarnos este quebradero de cabeza, he realizado una opción alternativa para subir los archivos JavaScript a través de la instalación de un plugin que sólo contiene los archivos.
El proceso lo he simplificado al máximo:
- Descargamos el archivo que contiene los JavaScript.
- Vamos a "Plugins > Añadir nuevo" y subimos el archivo como si fuera un plugin normal. Lo activamos.
- Esta instalación no crea ninguna pestaña de administración, tan solo instala los JavaScript en DIVI o EXTRA.
- Desde el ordenador, descomprimimos el archivo descargado y abrimos uno llamado "código para las opciones". Seleccionamos y copiamos el código en el porta-papeles (Ctrl+C).
- Desde la administración de WordPress, Vamos a "DIVI > Opciones del tema > Integración" y pegamos el código en el apartado de "Agregar código al <body>" (Ctrl+V).
- Nos aseguramos que el botón de este apartado se encuentre activo.
- Sustituimos .***contenedor*** por una palabra que sea única dentro del sitio web. (Ej.: .galeriafotosivw). NO BORRAR EL PUNTO.
- Ahora sólo queda editar la página o la entrada, y añadir al los módulos utilizados, en el apartado "Avanzado > ID y clases de CSS > Clase CSS", la palabra que nos hemos inventado en el código, si aún no lo hemos hecho.
Ventajas e inconvenientes de este sistema
Este sistema tiene sus pros y sus contras, como punto positivo está la facilidad de implementación, sin tener que tocar los archivos del servidor ni buscar las rutas exactas de los archivos, los cuales no varían estemos en local o en internet.
Por contra, el código tiene que cargarse con la web, en lugar de en la página o entrada concreta, lo que supone una posible ralentización (inapreciable) de la web, lo que se suma al resto de complementos que tengamos.
Configurar el tipo de efecto a mostrar
En el código que hemos pegado en el módulo, tenemos unas variables que podemos modificar, de esta forma podemos cambiar la forma de actuar del script a la hora de pasar el ratón por encima.
Tamaño de la cortinilla
Cambiando este valor, conseguimos reducir la zona que cubre la cortinilla o slider sobre la fotografía. El 100% cubriría el total de la imagen, según vayamos reduciendo el porcentaje, la zona a cubrir también se reducirá.
1 | height:'100%', // tamaño del efecto en altura |
Movimiento contrario de la cortinilla
Podemos elegir que la imagen se cubra en la dirección del movimiento del ratón o en dirección contraria.
1 | reverse:false, // dirección del efecto, false, true |
Tiempo de ejecución de la acción
Esta variable puede modificar la velocidad con la que aparece el efecto. Los valores pueden ser numéricos en milisegundos (de 200 a 600) o variables (fast=200, slow=600)
1 | duration:200, // en milisegundos, fast, slow, 200-600 |
Color de la cortinilla
Admite cualquier valor de color web, tanto hexadecimal (#000000), rgb (0,0,0), rgba (0,0,0,0.5) o nombre (black, yellow,...). De esta forma podemos elegir un color sólido o una transparencia.
1 | backgroundColor:'rgba(0,0,0,0.5)', // color de la cortinilla |
Color del texto
Al igual que la cortinilla, podemos elegir entre todos los colores web que necesitemos.
1 | fontColor:'#ffffff', // color de la cortinilla |
Añadir deslizador de diapositivas en DIVI adaptable- La mejor forma de personalizar la página de producto de Woocommerce con Divi Builder
- Cómo configurar una anchura personalizada de columnas en DIVI
- Zonas activas con DIVI en la página principal
- Personalizar el menú de WordPress usando Extra de ejemplo
- Carrusel a pantalla completa en WordPress con Divi
Juan el archivo que tengo que descargarme da error no se si me puedo descargarlo de otro sitio..
Hola Aitor,
Los enlaces de descarga sólo están activos durante un periodo de tiempo desde que se carga la página, refresca la página o vuelve a cargarla y se activarán de nuevo.
Buenas,
Gran artículo. Tengo una duda, este mismo efecto hover se podría aplicar a una columna en vez de a las imágenes?
Graciias.
Hola David,
Depende a lo que te refieras con columna, el efecto se aplica sobre un módulo, por lo tanto supongo que tal vez pueda funcionar sobre uno que no sea de imagen. Habría que realizar alguna prueba.
Hola
Francamente es muy bueno este artículo, estoy empezando con DIVI y cualquier ayuda es bienvenida
Hola Juan,
Gracias por el tutorial, esta muy chulo.
Me he dado cuenta de que los enlaces no funcionan, parece que el código lo deja anulado de alguna manera.
Lo has probado configurando los enlaces en Divi, y a tí te funciona¿?
M;uchas gracias,
Hola kiko,
En la versión anterior del tema Divi funcionaba perfectamente, no me dio problemas a la hora de realizar el tutorial. Pare que al actualizarlo a la última versión han incluido elementos gráficos adicionales, como los bordes redondeados y otras funciones en el módulo de imagen en constructor Divi, y de alguna forma el link queda debajo.
Puedes utilizar el módulo de texto para realizar el efecto, añades la imagen y seleccionas el enlace sobre ella.
Parece que el efecto sobre el módulo de la galería si que funciona aún.
AMIGO EN EL ENLACE PARA DESCARGAR LOS ARCHIVOS JS SALE UN ERROR PARA QUE EXAMINES ESTO.
Hola dOUGLAS, la descarga del enlace está activo durante un tiempo limitado, pasado ese tiempo se desactiva y hay que refrescar la página para que vuelva a estar activo.
Presionas F5 o actualiza la página y podrás descargarlo. Es un sistema de seguridad para evitar las descargas masivas realizadas por robots y me saturen el servidor S3.
Si sigues teniendo problemas, dímelo y te mando el archivo por e-mail
Gracias, ahora si que funcionó. Solo un comentario y creo lo haré en tu canal de youtube también, Eres excelente maestro enseñando claro y conciso y eso me gusta y es bueno, solo en mi caso muy particular lamento no poder hacer los cursos que ofreces en Premium sobre WordPress porque de seguro deben ser muy buenos ambos y digo lo lamento porque yo vivo en Venezuela y la situación que vivimos en el país es demasiado fuerte, mucho más de lo que se imaginan. Le cuento que hoy viernes 27 de octubre Un Euro cuesta Bs 47.581,72 y el salario mensual que recibo (en mi caso) es de Bs 200.000 y la canasta básica está en Bs 2.000.000 mensuales...eso es para que más o menos tengan una idea de lo que ocurre en Venezuela. Pero yo les diría a todos los que lean mi comentario que les animo a comprar estos cursos Premiun en Blog porque de seguro aprenderán muchísimo con claridad y precisión, sin mucho bla bla bla y bien explicado y concreto.