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

Cambiar una imagen de fondo con un GIF animado al pasar el mouse puede ser una excelente manera de darle vida a su contenido al mismo tiempo que proporciona 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 del producto (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.

En este tutorial, le mostraré 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 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 de fondo de Divi.

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

Empecemos.

Vistazo

Descargue el fondo GIF en el diseño de desplazamiento GRATIS

Para poner sus manos sobre 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 formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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

Suscríbete 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 usaré 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 (constructor visual)

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

Parte 1: Creación de 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 de propaganda. Luego, queremos crear un GIF (una imagen animada) que le 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 GIFS 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 creadas 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 cursor sobre el módulo de propaganda.

Para crear las capturas de pantalla y los GIF, usaré Snagit. Aunque no es un software gratuito, es muy fácil de usar y te permite crear capturas de pantalla, grabar tu pantalla y convertir grabaciones de pantalla encubiertas en GIF, todo en un solo lugar.

Creación de la imagen fija de la 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.

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

Guarda la imagen en tu computadora. Luego, abra el cuadro Captura de Snagit nuevamente 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.

Luego haga clic y arrastre el área de captura alrededor del área de su 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á capturar la misma área para el video que hizo para la imagen (o lo más cerca posible).

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

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

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.

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

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

Parte 2: Creación de una propaganda que cambia la imagen de fondo con la imagen GIF animada al pasar el mouse

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

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

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

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

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 la 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 propaganda)

Agregar la imagen GIF de fondo flotante

Una vez que tenga la imagen de fondo inicial en su lugar, implemente la opción de desplazamiento de 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.

Diseñar el módulo Blurb

Continúe diseñando el módulo de propaganda 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: 34px
Relleno: 50% arriba, 5% abajo, 3% izquierda, 3% derecha

La verdadera clave de este diseño es el acolchado. Para colocar el fondo sobre el contenido de la propaganda, debe agregar aproximadamente el 50% del relleno superior. Y dado que el tamaño de la imagen de fondo está configurado para "encajar" y la posición está configurada en "centro superior", se ubicará bien encima del contenido en respuesta a los anchos del navegador.

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

Box Shadow: ver captura de pantalla
Posición vertical de la sombra del cuadro: 0px
Fuerza del desenfoque de la sombra del cuadro: 0 px (predeterminado), 24 px (desplazamiento)

Resultado final

Aquí esta el resultado final.

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

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

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 de fondo de Divi, puede cambiar fácilmente una imagen fija con un GIF en movimiento. Esta solución puede proporcionar un diseño que distraiga menos y que realmente atraiga al usuario cuando interactúe con su contenido. Espero que lo encuentre útil para su próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!