Hover Effect en DIVI. Cómo aplicar un efecto de superposición a las imágenes

por | 10 Comentarios

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.

Suscríbete a mi canal:

«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 por unos 75€ ($89) o descargarlo de mi ZONA PREMIUM.

Al entrar a la Zona Premium tendréis acceso a todo el contenido que vaya colocando en esa sección, cursos, temas premiun, layuots…

10,00 / mesMe Suscribo

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.

hover effect en DIVI. diseño de plantilla o layout

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:
  • Separación:
    • 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.

hover effect en DIVI. presentación de la imagen

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.

hover effect en DIVI. duplicar módulos

Para configurar la fila vamos a modificar o configurar los siguientes valores:

PESTAÑA DISEÑO:

  • Uso Personalizado de Canalón de Ancho:
  • Espacio entre columnas: 1px
  • Igualar las alturas de las columnas:

El resto de las opciones las dejamos por defecto como están.

hover effect en DIVI. duplicar módulos front end

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.

  1. 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.
  2. Navegamos hasta la ruta «wp-content/uploads» y creamos una nueva carpeta que llamaremos «js_hovereffects«.
  3. Descargamos los archivos desde este enlace 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.
  4. 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«.

hover effect en DIVI. 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.

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:

  1. Sustituir «***ruta del archivo***» por la ruta donde hemos copiado los archivos .js en el servidor.
  2. 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.

Suscríbete a mi canal:

El proceso lo he simplificado al máximo:

  1. Descargamos el archivo que contiene los JavaScript en forma de plugin desde aquí.
  2. 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.
  3. 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).
  4. 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.
  5. 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á.

hover effect en DIVI 1

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.

hover effect en DIVI 3

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)

hover effect en DIVI 4

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.

hover effect en DIVI 5

Color del texto

Al igual que la cortinilla, podemos elegir entre todos los colores web que necesitemos.

hover effect en DIVI 6

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

10 Comentarios

  1. Aitor

    Juan el archivo que tengo que descargarme da error no se si me puedo descargarlo de otro sitio..

    Responder
    • Juan

      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.

      Responder
  2. David

    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.

    Responder
    • Juan

      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.

      Responder
  3. Pascual

    Hola

    Francamente es muy bueno este artículo, estoy empezando con DIVI y cualquier ayuda es bienvenida

    Responder
  4. kiko

    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,

    Responder
    • Juan

      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.

      Responder
  5. dOUGLAS

    AMIGO EN EL ENLACE PARA DESCARGAR LOS ARCHIVOS JS SALE UN ERROR PARA QUE EXAMINES ESTO.

    Responder
    • Juan

      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

      Responder
      • DOUGLAS

        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.

        Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Banner AzonPress

Esta web funciona gracias a:

Hosting WordPress de SiteGround

Pin It on Pinterest

Share This
Ir al contenido