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 (lo hacemos 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 publicidad 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, repasaremos cómo implementar esas imágenes de fondo en una publicidad para que se enciendan. 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 por adelantado y luego atraerá a los usuarios cada vez que interactúen con el contenido.
Empecemos.
Descargue el fondo GIF en el diseño Hover 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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:
- El tema Divi instalado y activo
- Software de captura de pantalla (o una combinación de herramientas) que le permitirá tomar capturas de pantalla, grabar videos de 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.
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
Después de eso, tendrás un lienzo en blanco para comenzar a crear 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 mostrarla como imagen de fondo fija para un módulo publicitario. 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 por encima.
Una vez creadas las dos imágenes, podemos utilizar 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, usaré Snagit. Aunque no es un software gratuito, es realmente fácil de usar y le permite crear capturas de pantalla, grabar su pantalla y convertir grabaciones de pantalla encubiertas en GIF, todo en un solo lugar.
Creación de 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 capturarla como una imagen. Para inicializar 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.
Guarde la imagen en su computadora. Luego abra el cuadro Captura de Snagit nuevamente y elija capturar un video seleccionando una región de su pantalla. Para inicializar 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 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 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 Create 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 tienes una imagen fija y una imagen gif listas para agregar a tu diseño en Divi.
Parte 2: crear una publicidad que cambie la imagen de fondo con la imagen GIF animada al pasar el mouse por encima
Si aún no lo ha hecho, cree una nueva página e implemente Divi Builder para construir en el front-end. Luego crea 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 publicidad 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)
Agregue 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.
Dar estilo al módulo de Blurb
Continúe diseñando el módulo de propaganda actualizando la siguiente configuración de diseño:
Color del icono: #6bb962
Icono del círculo: SÍ
Color del círculo: #ffffff
Alineación del texto: centro
Fuente del título: Lora
Tamaño del texto del título: 34 px
Relleno: 50 % arriba, 5 % abajo, 3 % a la izquierda, 3 % a la derecha
La verdadera clave de este diseño es el relleno. Para colocar el fondo sobre el contenido de la publicidad, debe agregar alrededor del 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 sobre el contenido y responderá a los anchos del navegador.
Por último, dale a la publicidad una sombra de cuadro al pasar el mouse de la siguiente manera:
Sombra de cuadro: vea la captura de pantalla
Posición vertical de sombra de cuadro: 0px
Intensidad de desenfoque de sombra de cuadro: 0px (predeterminado), 24px (pasar el cursor)
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 anuncios publicitarios 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 darle 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 al pasar el mouse. Esta solución puede proporcionar un diseño que distraiga menos por adelantado y que realmente atraiga al usuario cuando interactúe con su contenido. Espero que te sea útil para tu próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!