Cómo cambiar una imagen de fondo con un GIF animado al pasar el mouse por encima


Cambiar una imagen de fondo con un GIF animado al pasar el mouse puede ser una excelente manera de darle vida a su contenido y al mismo tiempo proporcionar una ilustración genial para productos o servicios. Por ejemplo, si está promocionando las características de un producto de software en particular, un GIF animado puede ayudar a ilustrar aspectos de la funcionalidad de los productos (hacemos esto para los productos aquí en Elegant Themes). Pero, en lugar de mostrar ese GIF inicialmente, es posible que desee mostrar una captura de pantalla fija de esa función que se reemplaza con una versión animada (o GIF) al pasar el mouse por encima.

En este tutorial, voy a mostrarle cómo crear una propaganda que cambie una imagen de fondo (fija) con un GIF animado al pasar el mouse. Comenzaremos repasando cómo crear una captura de pantalla y un GIF usando Snagit (un software de captura de pantalla). Luego, veremos cómo implementar esas imágenes de fondo en una propaganda para que se activen. El cambio real de las imágenes es extremadamente fácil con las opciones de desplazamiento del fondo de Divi.

Este diseño ayudará a mantener el diseño estático por adelantado y luego atraerá a los usuarios cada vez que interactúen con el contenido.

Empecemos.

Vistazo

gif animado al pasar el mouse

gif animado al pasar el mouse

Descargue el fondo GIF en Hover Layout GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a una nueva página con Divi Builder activo.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

(incrustar) https://www.youtube.com/watch?v=JJj70tHsHyQ (/ incrustar)

Suscríbase a nuestro canal de Youtube

Para comenzar, necesitará lo siguiente:

  1. El tema Divi instalado y activo
  2. Software de captura de pantalla (o una combinación de herramientas) que le permitirá tomar capturas de pantalla, grabar videos en pantalla y crear GIF. En este tutorial estaré usando Snagit principalmente porque es una solución todo en uno que uso todos los días para mis publicaciones de blog y tutoriales.
  3. Una nueva página creada para construir desde cero en el front-end (generador visual)

Después de eso, tendrá un lienzo en blanco para comenzar a construir algunas pestañas de desplazamiento en Divi.

Parte 1: Crear capturas de pantalla y GIF

Para este diseño, queremos crear una captura de pantalla para mostrar como imagen de fondo fija para un módulo publicitario. Luego, queremos crear un GIF (una imagen animada) que dé vida a esa imagen de fondo fija con una breve ilustración de cómo funciona el producto. El truco consiste en crear imágenes y GIF que se parezcan lo suficiente como para que tengan una transición suave al cambiar una imagen con la otra al pasar el mouse.

Una vez que se crean las dos imágenes, podemos usar la imagen fija como imagen de fondo inicial. Luego podemos cambiar la imagen de fondo a la imagen gif al pasar el mouse sobre el módulo de publicidad.

Para crear las capturas de pantalla y los GIF, utilizaré Snagit. Aunque no es un software gratuito, es realmente fácil de usar y le permite crear capturas de pantalla, grabar su pantalla y grabaciones encubiertas en GIF en un solo lugar.

Crear la imagen fija de captura de pantalla

Para crear la captura de pantalla, abra Snagit y abra el cuadro de captura. Luego, asegúrese de elegir capturar una imagen seleccionando una región de su pantalla. Esto le permitirá arrastrar un área en su pantalla para ser capturada como una imagen. Para iniciar la captura de pantalla, haga clic en el botón de captura.

gif animado al pasar el mouse

Luego haga clic y arrastre el área de captura alrededor del área de la pantalla que desea capturar como imagen.

gif animado al pasar el mouse

Guarda la imagen en tu computadora. Luego abra nuevamente el cuadro Captura de Snagit y elija capturar un video seleccionando una región de su pantalla. Para iniciar la captura de pantalla, haga clic en el botón de captura.

gif animado al pasar el mouse

Luego haga clic y arrastre el área de captura alrededor del área de la pantalla que desea capturar y grabar como un videoclip. Para crear una transición más fluida entre la imagen fija y el gif, querrás capturar la misma área para el video que para la imagen (o lo más cerca posible).

gif animado al pasar el mouse

Cuando esté listo, haga clic en el botón de grabación y realice la demostración que desea grabar.

gif animado al pasar el mouse

Cuando haya terminado, haga clic en detener para detener la grabación. Luego puede editar el videoclip en el editor Snagit. Cuando haya terminado la edición, haga clic en el botón Gif junto al video para crear un Gif a partir de su video.

gif animado al pasar el mouse

En la ventana emergente Crear GIF, modifique la configuración de salida según sea necesario. Asegúrate de habilitar el bucle para que tu gif se repita. Luego haga clic en el botón Crear.

gif animado al pasar el mouse

Una vez que se haya creado el gif, guárdelo en su computadora.

Ahora tiene una imagen fija y una imagen gif lista para agregar a su diseño en Divi.

Parte 2: crear una propaganda que cambie la imagen de fondo con la imagen animada de GIF al pasar el mouse

Si aún no lo ha hecho, cree una nueva página e implemente Divi Builder para construir en el front-end. Luego, cree una nueva sección regular con una fila de dos columnas.

En la columna 1, agregue un módulo de publicidad.

gif animado al pasar el mouse

Luego actualice la configuración de contenido de la siguiente manera:

Cuerpo: "El texto del cuerpo va aquí"
Use el icono: SÍ
Icono: nube (ver captura de pantalla)

gif animado al pasar el mouse

Agregar la imagen de fondo predeterminada

A continuación, agregue la imagen de fondo predeterminada a la propaganda de la siguiente manera:

Imagen de fondo: cargue la imagen de fondo (la captura de pantalla fija) que creó.
Tamaño de imagen de fondo: Ajustar (esto asegurará que toda la imagen permanezca a la vista)
Posición de la imagen de fondo: Centro superior (esto mantendrá la imagen en la parte superior de la publicidad)

gif animado al pasar el mouse

Agregar la imagen GIF de fondo de desplazamiento

Después de tener la imagen de fondo inicial en su lugar, implemente la opción de desplazamiento del fondo y seleccione la pestaña de desplazamiento. Luego agregue la imagen GIF para que sirva como una nueva imagen de fondo en el estado de desplazamiento.

gif animado al pasar el mouse

Diseñando el módulo Blurb

Siga diseñando el módulo de publicidad actualizando la siguiente configuración de diseño:

Color del icono: # 6bb962
Icono de círculo: SÍ
Color del círculo: #ffffff
Alineación de texto: centro
Fuente del título: Lora
Tamaño del texto del título: 34 px
Relleno: 50% superior, 5% inferior, 3% izquierda, 3% derecha

La verdadera clave de este diseño es el relleno. Para colocar el fondo sobre el contenido publicitario, debe agregar aproximadamente el 50% del relleno superior. Y dado que el tamaño de la imagen de fondo se establece en "ajuste" y la posición se establece en "centro superior", se ubicará muy bien por encima del contenido que responde a los anchos del navegador.

gif animado al pasar el mouse

Por último, dale a la propaganda una sombra de cuadro al pasar el cursor de la siguiente manera:

Box Shadow: ver captura de pantalla
Posición vertical de la sombra de la caja: 0px
Box Shadow Blur Strength: 0px (predeterminado), 24px (pasar el mouse)

gif animado al pasar el mouse

Resultado final

Aquí esta el resultado final.

gif animado al pasar el mouse

Y aquí está el diseño en tableta y teléfono.

gif animado al pasar el mouse

gif animado al pasar el mouse

Y así es como se vería con borrones adicionales con diferentes capturas de pantalla y colores.

gif animado al pasar el mouse

Pensamientos finales

Si no está familiarizado con el uso de GIF en su sitio web, definitivamente debería considerarlo. Realmente pueden dar vida a su contenido y proporcionar ilustraciones extremadamente útiles para sus visitantes. Y, con las opciones de desplazamiento del fondo de Divi, puede cambiar fácilmente una imagen fija con un GIF en el desplazamiento. Esta solución puede proporcionar un diseño por adelantado menos molesto que realmente atrae al usuario cuando interactúa con su contenido. Espero que les sea útil para su próximo proyecto.

Espero tener noticias suyas en los comentarios.

¡Salud!