Agregar efectos 3D a GIF y videos HTML5 para mostrar animaciones de productos únicos en Divi
Publicado: 2019-06-20Los GIF animados y los videos HTML5 pueden ser excelentes para animar cómo funciona un producto en su sitio web. Estas animaciones breves comunican información valiosa al visitante de una manera que es más fácil de digerir que un video normal. Agregar este tipo de GIF y videos HTML5 se puede hacer con bastante facilidad con Divi. Y con un poco de creatividad, puede agregar efectos 3D para animaciones de productos únicos.
En este tutorial, le mostraré cómo agregar efectos 3D a GIF y videos HTML5 para mostrar animaciones de productos únicos en Divi. Este diseño funciona muy bien para aquellos que buscan un diseño creativo para mostrar un producto o servicio destacado. Para hacer esto, primero necesitaremos entender cómo agregar GIF e incrustaciones de video HTML5 a su página usando Divi. Luego, podremos usar las opciones de transformación de Divi para colocar y rotar el GIF (o video) en el espacio 3D. Para terminar, usaremos algunas técnicas de diseño Divi para crear un hermoso diseño de sección que combine con esos GIF y videos en 3D.
Empecemos.
Vistazo
Aquí hay un adelanto del diseño que crearemos en este tutorial. El diseño se ve similar cuando se usa un GIF y un video HTML5 para crear las animaciones del producto.
Descargue GRATIS los efectos 3D para video GIF y HTML5 Animaciones de productos Divi Layout
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.
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.
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 al Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Suscríbete a nuestro canal de Youtube
Uso de GIF para animaciones de productos cortos
Los GIF existen desde hace mucho tiempo. Probablemente esto se deba a que los GIF son fáciles de hacer y son ampliamente compatibles con todos los navegadores. Y pueden funcionar bien para animaciones de productos realmente breves. Debido a que un GIF es una imagen, puede usarlo en un módulo Divi Image como lo haría con cualquier otro jpg o png. Esto le permite diseñar el GIF con todo el poder de la configuración incorporada de Divi. Pero tenga cuidado, los GIF con una duración más larga y una velocidad de fotogramas más alta pueden dar como resultado tamaños de archivo realmente grandes. Por lo tanto, es mejor mantener sus GIF cortos y lo más pequeños posible.
Uso de video HTML5 como reemplazo de GIF
Los videos HTML5 se están convirtiendo en un reemplazo de GIF popular, especialmente para animaciones de productos más largas. Es posible que haya notado que se utilizan en el nuevo diseño del sitio web de Elegant Themes. Son significativamente más pequeños en tamaño en comparación con los GIF y, por lo tanto, tardan menos en cargarse. Y agregar un video HTML5 a su sitio Divi es simple. Todo lo que necesita hacer es agregar el elemento de video HTML5 para incrustar el video en su página (similar a cómo agregaría un código corto de video en WordPress). También puede personalizar el video con controles ocultos, bucle y reproducción automática, lo que da como resultado una animación de alta calidad que funciona como un GIF. Además, al agregar el incrustado a un módulo Divi, también puede usar el generador Divi para diseñar el video de manera creativa.
Consulte esta publicación para obtener más información sobre por qué debería considerar el uso de video HTML5 en lugar de GIF normales.
Ahora que entendemos un poco más sobre el uso de GIF y videos HTML5, estamos listos para comenzar a usarlos en Divi.
Qué necesitas para este tutorial
Para comenzar, necesitará lo siguiente:
- Una imagen GIF
- Un archivo de video MP4 (y la URL de ese archivo de video) que se utilizará en la inserción del elemento de video HTML5. Para obtener la máxima compatibilidad con el navegador, también puede incluir el mismo video en formato webm (más sobre esto más adelante).
- El tema Divi instalado y activo
- 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 diseñar en Divi.
Agregar un efecto 3D a un video GIF animado o HTML5
Antes de llegar demasiado lejos en el diseño del diseño de la sección completa para este tutorial, pensé que sería mejor mostrarle cómo agregar el efecto 3D tanto a un GIF como a un video HTML5. Una vez que hayamos terminado, puliremos el resto del diseño de la sección con un bonito diseño moderno.
Por ahora, comencemos agregando el efecto 3D a un GIF en Divi.
Creando un GIF
Hay muchas formas de crear un GIF en la web. Dado que este tutorial trata sobre la creación de un GIF para animar el funcionamiento de un producto, querrá grabar una sección de su pantalla (usando una grabadora de pantalla) y luego convertir el archivo de video en un archivo GIF. Recuerde crear el GIF lo más pequeño posible para limitar el tamaño del archivo y el tiempo de carga. Una vez creado el GIF, podrá usarlo como lo haría con cualquier otra imagen en Divi.
Si desea aprender cómo crear un GIF usando Snagit, consulte nuestra publicación sobre Cómo cambiar una imagen de fondo con un GIF animado al pasar el mouse.
Agregar un efecto 3D a un GIF en Divi
Ahora es el momento de agregar el GIF a Divi para que podamos diseñarlo con un efecto 3D genial.
Para comenzar, agregue una nueva sección regular con una fila de dos columnas.
Antes de agregar un módulo, debemos agregar la propiedad de perspectiva a la columna que contendrá nuestro GIF. Para hacer esto, abra la configuración de la fila y agregue el siguiente fragmento de CSS al elemento principal de la columna 1:
perspective: 1000px;
Esta propiedad de perspectiva es necesaria para agregar perspectiva al elemento dentro de la columna. Un elemento necesita perspectiva para que podamos obtener un efecto 3D al usar las opciones de transformación de Divi. Para una mejor comprensión, consulte nuestra publicación sobre cómo usar la perspectiva con opciones de transformación para diseñar paredes de fotos en 3D.
Ahora agregue un módulo de imagen a la columna 1.
Sube el GIF al módulo de imagen. Para este diseño, el GIF debe tener alrededor de 600 px por 700 px.
Luego, use las opciones de transformación para escalar, rotar y sesgar el GIF en el espacio 3D.
Transformar Girar eje Y: 8 grados
Transformar Girar Eje X: 28 grados
Transformar Skew Eje Y: 10deg
Transformar Skew X Axis: -8deg
Transformar escala (tableta): 80%
Ahora veamos el resultado.
Agregar un efecto 3D a un video HTML5 en Divi
Antes de agregar el efecto 3D, primero debemos crear nuestro video HTML5. Repasaremos los pasos sobre cómo hacer esto a continuación. Pero si desea una explicación más completa, consulte nuestra publicación sobre Cómo usar video HTML5 para crear GIF animados en tamaños de archivo más pequeños.
Creación del código de inserción de video HTML5
El elemento de video HTML5 tiene la siguiente estructura básica.
<video>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
No es necesario saber mucho sobre HTML para ver lo que hace este código. Dentro del elemento <video> , tiene dos elementos <source> que contienen la ruta / url a los archivos de video que desea mostrar. Cada elemento de origen tiene un video en un formato de archivo diferente (webm y mp4). Ambos son necesarios para la máxima compatibilidad con el navegador. El orden también es importante. El video webm se coloca encima del video mp4 en el código porque es un formato de video de mayor calidad pero es menos compatible con los navegadores. Entonces, si un navegador admite video webm, lo mostrará. Pero si el navegador no admite video webm, usará el formato de video mp4 debajo. No es necesario incluir ambos formatos de video, pero es una buena práctica. Y si va a usar solo uno, use el formato mp4 porque es más compatible.
De hecho, cada vez que usa el módulo de video de Divi para mostrar videos autohospedados, Divi crea este mismo elemento de video HTML5 para mostrar videos. Es por eso que el módulo de video le permite agregar un archivo de video mp4 y webm.
Para usar el código para su propio video, simplemente debe agregar la URL del video entre paréntesis después del atributo src .
Si carga los archivos de video en su sitio de WordPress, puede obtener las URL de la biblioteca de medios.
Luego pegue las URL del video entre paréntesis después del atributo src . 
Debería verse algo así cuando haya terminado.
<video>
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>
A continuación, agregaremos cuatro atributos para controlar la visualización y funcionalidad del video. Este tipo de control es la razón principal para insertar el video HTML5 manualmente en lugar de usar el módulo de video Divi. Estos atributos incluyen autoplay (para que el video se inicie automáticamente), loop (para que el video se repita), muted (para que el video no reproduzca audio) y playsinline (para que el video se playsinline dentro del área de reproducción del elemento). Para aplicar estos atributos al video, agregue cada uno de los atributos dentro de los corchetes de la etiqueta <video> inicial.
Ahora el código se verá así.
<video autoplay loop muted playsinline>
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>
Nota: Normalmente, aplicaría el atributo de controls para videos HTML5, pero en este caso lo dejaremos fuera para que el video funcione como un GIF.
Ahora está listo para incrustar el código.
Insertar el video HTML5
Para incrustar un video HTML5 en su página, podemos usar el módulo de código.
Antes de reemplazar el módulo de imagen GIF con nuestro módulo de código, sigamos adelante y dupliquemos toda la sección para que podamos mantener nuestro ejemplo de GIF. En la sección duplicada, elimine el módulo de imagen y agregue un módulo de texto en su lugar.
Luego, pegue el código de inserción de video HTML5 en el cuadro de entrada de código.
Luego copie los estilos de transformación del módulo de imagen y pegue los estilos de transformación en el módulo de código. O puede actualizar los estilos de transformación de la siguiente manera:
Transformar Girar eje Y: 8 grados
Transformar Girar Eje X: 28 grados
Transformar Skew Eje Y: 10deg
Transformar Skew X Axis: -8deg
Transformar escala (tableta): 80%
Como estoy usando el mismo video que usé para crear el GIF, el diseño se verá muy similar. Sin embargo, el tamaño del video es significativamente menor que el tamaño del GIF. Aquí está el resultado.
Completar el diseño del diseño de la sección
Ahora que tenemos el GIF 3D (o video HTML5) en su lugar. Podemos terminar el diseño de nuestro diseño de sección. Para este diseño, usaré la sección con el video HTML5 en la columna 1.
Personalizar la sección y la fila
Abra la configuración de la sección y actualice lo siguiente.
Relleno: 15% superior, 15% inferior
Luego abra la configuración de la fila y actualice lo siguiente:
Color de degradado de fondo a la izquierda: # ba7fe8
Gradiente de fondo Color derecho: # 4b84ff
Altura máxima: 300 px (escritorio), ninguno (tableta y teléfono)
Relleno: 0px arriba, 0px abajo
A continuación, podemos darle a la fila una sombra de caja interior semitransparente para un elemento de diseño único.
Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 0px
Posición vertical de la sombra del cuadro: 0px
Fuerza de propagación de la sombra de caja: 40px
Color de sombra: rgba (255,255,255,0.89)
Colocación del módulo de código
Ahora mejoremos un poco el módulo de código con el video ajustando la propiedad transform translate de la siguiente manera:
Transform Translate Y Axis: -20% (escritorio), -7% (teléfono)
Agregar un módulo de llamado a la acción
Para completar el diseño, agreguemos un módulo de llamado a la acción en la columna 2. Este será un gran lugar para agregar una descripción del producto destacado con un botón.
Agregue una URL de enlace de botón para que aparezca el botón.
Continúe actualizando la configuración de la siguiente manera:
Color de fondo: #ffffff
Alineación de texto: izquierda
Color del texto: oscuro
Fuente del título: Lato
Peso de la fuente del título: negrita
Color del texto del título: # 20292f
Fuente del cuerpo: Lato
Color del texto del cuerpo: # 6d7c90
Tamaño del texto del cuerpo: 17px
Altura de la línea del cuerpo: 1.8em
Tamaño del texto del botón: 12px
Color del texto del botón: #ffffff
Color de fondo del botón: # 4b84ff
Ancho del borde del botón: 0px
Radio del borde del botón: 100 px
Espacio entre letras del botón: 2px
Fuente del botón: Lato
Peso de la fuente del botón: Pesado
Estilo de fuente del botón: TT
Relleno de botones: 12px en la parte superior, 12px en la parte inferior, 20px a la izquierda, 20px a la derecha
Box Shadow: ver captura de pantalla
Posición vertical de la sombra del cuadro: 0px
Fuerza de propagación de la sombra de caja: 40px
Color de sombra: rgba (103,151,255,0.11)
Margen: 10% a la derecha
Transform Translate Y Axis: -33% (escritorio), -15% (teléfono)
Transformar trasladar eje X: -5%
Resultado final
Escritorio
Tableta
Teléfono
Pensamientos finales
Agregar el efecto 3D a GIF y videos HTML5 realmente brinda una visualización única para esas animaciones de productos. Las opciones de transformación de Divi (combinadas con la propiedad de perspectiva) facilitan la adición de efectos 3D a sus GIF y videos.
Y, con suerte, ha aprendido algunas cosas sobre cómo usar GIF y videos HTML5 con Divi. Los GIF son fáciles de usar, pero más difíciles de mantener el tamaño del archivo compatible con la web. Los videos HTML5 requieren el uso de un código de inserción, pero pueden funcionar extremadamente bien como reemplazo de GIF para animaciones más largas.
No dude en explorar formas nuevas y emocionantes de utilizar este diseño para mostrar animaciones de productos y servicios en su próximo proyecto.
Espero tener noticias tuyas en los comentarios.
¡Salud!