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

Vistazo

Aquí hay un adelanto del diseño que construiremos 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 los efectos 3D para videos GIF y 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 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.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a 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 crear 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 integrada de Divi. Pero tenga cuidado, los GIF con una duración más larga y una velocidad de fotogramas más alta pueden generar tamaños de archivo realmente grandes. Por lo tanto, es mejor que sus GIF sean 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 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 abreviado 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 inserción a un módulo Divi, también puede usar el constructor 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 usar 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.

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 usará 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).
3. El tema Divi instalado y activo
4. 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 diseñar en Divi.

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

Antes de profundizar demasiado 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.

Crear 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 cómo funciona 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 que se crea 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 sobre él .

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:

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 Rotar Eje Y: 8 grados

Transformar Rotar Eje X: 28 grados

Transformar eje Y sesgado: 10 grados

Transformar eje X sesgado: -8 grados

Escala de transformación (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. Vamos a repasar 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.

No tienes que saber mucho sobre HTML para ver lo que está haciendo este código. Dentro del <video>elemento, tiene dos <source>elementos que contienen la ruta/URL de 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 obtener la máxima compatibilidad con el 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, 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 srcatributo.

Si carga los archivos de video en su sitio de WordPress, puede obtener las direcciones URL de la biblioteca de medios.

Luego pegue las URL del video dentro de los paréntesis después del srcatributo.

Debería verse algo como esto 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(para que el video se repita), 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 de la <video>etiqueta de inicio.

Ahora el código se verá así.

Nota: normalmente, aplicaría el controlsatributo 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 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 rotar eje Y: 8 grados

Transformar rotar eje X: 28 grados

Transformar sesgar eje Y: 10 grados

Transformar sesgar eje X: -8 grados

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 más pequeño 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.

Personalización de la sección y la fila

Abra la configuración de la sección y actualice lo siguiente.

Relleno: 15% arriba, 15% abajo

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

Color de fondo degradado a la izquierda: #ba7fe8

Color de fondo degradado a la derecha: #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 cuadro interior semitransparente para un elemento de diseño único.

Sombra de cuadro: ver captura de pantalla

Posición horizontal de sombra de cuadro: 0px

Posición vertical de sombra de cuadro: 0px

Fuerza de propagación de sombra de cuadro: 40px

Color de sombra: rgba(255,255,255,0.89)

Colocación del módulo de código

Ahora levantemos 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)

Adición de un módulo de llamada 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 excelente 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 del 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,8 em

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: 100px Espaciado entre letras del botón: 2px

Fuente del botón: Lato

Peso de la fuente del botón: Heavy

Estilo de fuente del botón: TT

Relleno del botón: 12px arriba, 12px abajo, 20px izquierda, 20px derecha

Sombra de cuadro: ver captura de pantalla

Posición vertical de sombra de cuadro: 0px

Fuerza de propagación de sombra de cuadro: 40px

Color de sombra: rgba(103,151,255,0.11)

Margen: 10% derecho

Transformar traducir el eje Y: -33 % (escritorio), -15 % (teléfono)

Transformar traducir el eje X: -5 %

Resultado final

Escritorio

Tableta

Teléfono

Pensamientos finales

Agregar el efecto 3D a los videos GIF y 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, 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 en un tamaño de archivo compatible con la web. Los videos HTML5 requieren el uso de un código de inserción, pero pueden funcionar muy bien como reemplazo de GIF para animaciones más largas.

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

Espero escuchar de usted en los comentarios.

¡Salud!