Agregar efectos 3D a GIF y videos HTML5 para mostrar animaciones de productos únicos en Divi


Los GIF animados y los videos HTML5 pueden ser excelentes para animar el funcionamiento de un producto en su sitio web. Estas animaciones cortas comunican información valiosa al visitante de una manera que se digiere más fácilmente 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 únicas.

En este tutorial, le mostraré cómo agregar efectos 3D a GIF y videos HTML5 para mostrar animaciones de productos únicas en Divi. Este diseño funciona muy bien para aquellos que buscan un diseño creativo para exhibir un producto o servicio destacado. Para hacer esto, primero necesitaremos comprender 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 de Divi para crear un hermoso diseño de sección que vaya con esos GIF y videos en 3D.

Empecemos.

Vistazo

Aquí hay un adelanto del diseño que crearemos en este tutorial. El diseño es similar cuando se usa un GIF y un video HTML5 para crear las animaciones del producto.

gif y animaciones de productos de video html5

gif y animaciones de productos de video html5

gif y animaciones de productos de video html5

Descargue los efectos 3D para GIF y video HTML5 Animaciones de productos Divi 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 al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

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

Suscríbase a nuestro canal de Youtube

Uso de GIF para animaciones cortas de productos

Los GIF han existido por mucho tiempo. Esto se debe probablemente a que los GIF son fáciles de hacer y son ampliamente compatibles en todos los navegadores. Y pueden funcionar bien para animaciones de producto realmente cortas. 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 toda la potencia de la configuración integrada de Divi. Pero tenga en cuenta que los GIF con una mayor duración y una mayor velocidad de fotogramas 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 popular de GIF, especialmente para animaciones de productos más largas. Es posible que haya notado que se usan en el nuevo Sitio web de Elegant Themes diseño. Son significativamente más pequeños en tamaño que los GIF y, por lo tanto, tardan menos en cargarse. Y agregar un video HTML5 a su sitio Divi es simple. Todo lo que necesitas 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, bucles 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 la incrustación a un módulo Divi, también puede usar el generador Divi para diseñar el video de manera creativa.

Mira esta publicación para más información sobre ¿Por qué deberías considerar usar HTML5 Video sobre GIFs regulares?.

Ahora que entendemos un poco más sobre el uso de GIF y videos HTML5, estamos listos para comenzar a usarlos en Divi.

Lo que necesitas para este tutorial

Para comenzar, necesitará lo siguiente:

  1. Una imagen GIF
  2. Un archivo de video MP4 (y la URL de ese archivo de video) que se utilizará en la incrustació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).
  3. El tema Divi instalado y activo
  4. 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 diseñar en Divi.

Agregar un efecto 3D a un GIF animado o video HTML5

gif y animaciones de productos de video html5

Antes de llegar demasiado lejos en el diseño del diseño de sección completo para este tutorial, pensé que sería mejor mostrarle cómo agregar el efecto 3D a un video GIF y HTML5. Una vez que hayamos terminado, puliremos el resto del diseño de la sección con un diseño moderno y agradable.

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 quieres aprender cómo crear un GIF usando Snagit, mira nuestra publicación en Cómo cambiar una imagen de fondo con un GIF animado al pasar el mouse por encima.

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.

gif y animaciones de productos de video html5

Antes de agregar un módulo, necesitamos 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;

gif y animaciones de productos de video html5

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 en Cómo usar la perspectiva con opciones de transformación para diseñar paredes fotográficas 3D.

Ahora agregue un módulo de imagen a la columna 1.

gif y animaciones de productos de video html5

Sube el GIF al módulo de imagen. Para este diseño, el GIF debe tener alrededor de 600 px por 700 px.

gif y animaciones de productos de video html5

Luego use las opciones de transformación para escalar, rotar y sesgar el GIF en el espacio 3D.

Transformar Girar Eje Y: 8deg
Transformar rotar eje X: 28 grados

gif y animaciones de productos de video html5

Transformar el eje Y oblicuo: 10 grados
Transformar el eje X sesgado: -8 grados

gif y animaciones de productos de video html5

Escala de transformación (tableta): 80%

gif y animaciones de productos de video html5

Ahora veamos el resultado.

gif y animaciones de productos de video html5

Agregar un efecto 3D a un video HTML5 en Divi

Antes de agregar el efecto 3D, primero debemos crear nuestro video HTML5. Veremos los pasos sobre cómo hacer esto a continuación. Pero si quieres una explicación más completa, mira nuestra publicación en Cómo usar video HTML5 para crear gifs animados en tamaños de archivo más pequeños.

Crear el código de inserción de video HTML5

El elemento de video HTML5 tiene la siguiente estructura básica.


No tiene que saber mucho sobre HTML para ver qué está haciendo este código. Dentro de elemento, tienes dos elementos que contienen la ruta / url a los archivos de video que desea mostrar. Cada elemento fuente tiene un video en un formato de archivo diferente (webm y mp4). Ambos son necesarios para el máximo soporte del navegador. El orden también es importante. El video webm se coloca sobre el 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, utilizará el formato de video mp4 debajo de él. No es necesario incluir ambos formatos de video, pero es la mejor práctica. Y si va a usar solo uno, use el formato mp4 porque es más ampliamente 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 Video le permite agregar un archivo de video mp4 y webm.

Para usar el código para su propio video, simplemente necesita agregar la URL del video dentro de los paréntesis después de src atributo.

Si sube los archivos de video a su sitio de WordPress, puede obtener las URL de la biblioteca de medios.

gif y animaciones de productos de video html5

Luego pegue las URL del video dentro de los paréntesis después de src atributo.
gif y animaciones de productos de video html5

Debería verse así cuando hayas terminado.


A continuación, agregaremos cuatro atributos para controlar la visualización y la 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 comience automáticamente), loop (entonces el video se repite), muted (para que el video no reproduzca audio) y playsinline (para que el video se reproduzca dentro del área de reproducción del elemento). Para aplicar estos atributos al video, agregue cada uno de los atributos dentro de los corchetes del comienzo etiqueta.

Ahora el código se verá así.


Nota: Normalmente, aplicaría el controls atributo 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.

Incrustar el video HTML5

Para insertar 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, vamos a seguir y duplicar toda la sección para que podamos mantener nuestro ejemplo GIF. En la sección duplicada, elimine el módulo de imagen y agregue un módulo de texto en su lugar.

gif y animaciones de productos de video html5

Luego pegue el código de inserción de video HTML5 en el cuadro de entrada de código.

gif y animaciones de productos de video html5

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: 8deg
Transformar rotar eje X: 28 grados
Transformar el eje Y oblicuo: 10 grados
Transformar el eje X sesgado: -8 grados
Escala de transformación (tableta): 80%

gif y animaciones de productos de video html5

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 más pequeño que el tamaño del GIF. Aquí está el resultado.

gif y animaciones de productos de video html5

Completando el diseño del diseño de 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, voy a 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.

Acolchado: 15% superior, 15% inferior

gif y animaciones de productos de video html5

Luego abra la configuración de la fila y actualice lo siguiente:

Gradiente de fondo Color izquierdo: # ba7fe8
Gradiente de fondo Color correcto: # 4b84ff

Altura máxima: 300 px (escritorio), ninguno (tableta y teléfono)

Relleno: 0px arriba, 0px abajo

gif y animaciones de productos de video html5

A continuación, podemos darle a la fila una sombra de caja interna semitransparente para un elemento de diseño único.

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra de la caja: 0px
Posición vertical de la sombra de la caja: 0px
Box Shadow Spread Strength: 40px
Color de sombra: rgba (255,255,255,0.89)

gif y animaciones de productos de video html5

Colocación del módulo de código

Ahora vamos a subir un poco el módulo de código con el video ajustando la propiedad de transformación de la siguiente manera:

Transformar Traducir Y Eje: -20% (escritorio), -7% (teléfono)

gif y animaciones de productos de video html5

Agregar un llamado a la acción del módulo

Para completar el diseño, agreguemos un módulo de llamado a la acción en la columna 2. Este será un excelente lugar para agregar una descripción del producto destacado con un botón.

gif y animaciones de productos de video html5

Agregue una URL de enlace de botón para que aparezca el botón.

gif y animaciones de productos de video html5

Continúe actualizando la configuración de la siguiente manera:

Color de fondo: #ffffff
Alineación de texto: izquierda
Color del texto: oscuro

gif y animaciones de productos de video html5

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

gif y animaciones de productos de video html5

Tamaño del texto del botón: 12 px
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
Espaciado entre letras de botones: 2px
Fuente del botón: Lato
Peso de fuente del botón: pesado
Estilo de fuente del botón: TT
Relleno de botones: 12 píxeles superior, 12 píxeles inferior, 20 píxeles izquierda, 20 píxeles derecha

gif y animaciones de productos de video html5

Box Shadow: ver captura de pantalla
Posición vertical de la sombra de la caja: 0px
Box Shadow Spread Strength: 40px
Color de sombra: rgba (103,151,255,0.11)

gif y animaciones de productos de video html5

Margen: 10% correcto

Transformar Traducir Y Eje: -33% (escritorio), -15% (teléfono)
Transformar Traducir Eje X: -5%

gif y animaciones de productos de video html5

Resultado final

Escritorio

gif y animaciones de productos de video html5

Tableta

gif y animaciones de productos de video html5

Teléfono

gif y animaciones de productos de video html5

Pensamientos finales

Agregar el efecto 3D a GIF y videos HTML5 realmente ofrece una visualización única para esas animaciones de productos. Las opciones de transformación de Divi (combinadas con la propiedad de perspectiva) facilitan agregar los efectos 3D a sus GIF y videos.

Y, con suerte, has 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 amigable para 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.

Siéntase libre de explorar formas nuevas y emocionantes de usar este diseño para exhibir animaciones para productos y servicios en su próximo proyecto.

Espero tener noticias suyas en los comentarios.

¡Salud!