Uso de las animaciones de Divi para mostrar su contenido

Bienvenido a la parte 5 de esta serie de 6 partes que le enseñará cómo usar las nuevas opciones de animación de Divi para diseñar secciones de página increíbles. Lo guiaré a través de cómo construir las diferentes secciones de nuestra página de demostración en vivo para mostrarle técnicas para agregar animaciones a su sitio web. Las funciones de animación son realmente divertidas y fáciles de usar. Y con Visual Builder, puede ver cómo su creación cobra vida en cada etapa del camino. Ven y únete a mí mientras exploramos el poder de las animaciones Divi.

En nuestra última publicación, creamos la sección 6 de nuestra página de demostración de animación. Le mostré cómo diseñar un diseño para mostrar descargas de productos con colores brillantes, sombras brillantes y animaciones precisas.

Hoy, vamos a crear la Sección 7 de nuestra página de demostración de animación, que es un ejemplo perfecto de cómo usar el efecto de animación de rollo para agregar un movimiento realista a su contenido. El producto final dará la impresión de que el texto y los teléfonos celulares se deslizan y giran para que se vean desde diferentes ángulos a medida que se desplaza hacia abajo en la página.

Esta es una de mis animaciones favoritas. Empecemos.

Aquí hay un adelanto del diseño y la animación que crearemos en la publicación de hoy

Preparación de los elementos de diseño

Necesitará tres imágenes para este tutorial. Las primeras dos imágenes verticales deben tener alrededor de 580 × 950 rotadas en un ángulo del 10% en sentido contrario a las agujas del reloj. La imagen horizontal debe ser de 1250 × 608 (también girada en un ángulo del 10% en sentido contrario a las agujas del reloj) con aproximadamente 300 px de espacio de fondo transparente adicional a la derecha de la imagen para que encaje perfectamente en la columna provista. Asegúrese de que las imágenes del teléfono estén en formato png con un fondo transparente. Aquí están las imágenes que usé para la publicación de hoy.

Imagen de teléfono vertical n. ° 1

Imagen de teléfono vertical n. ° 2

Imagen de teléfono vertical n. ° 3

Uso de las animaciones de Divi para mostrar su contenido

Suscríbete a nuestro canal de Youtube

Construyendo la Sección 7 de la Demo

Antes de comenzar el proceso de construcción, aquí hay un vistazo a la vista de estructura alámbrica del diseño de la sección que crearemos usando el constructor visual.

Usando Visual Builder, comencemos agregando otra sección regular a nuestro diseño. Luego agregue una fila de tres columnas (un cuarto, un cuarto y la mitad) a su sección.

Actualizar la configuración de la fila

Antes de agregar nuestro primer módulo, vaya a la configuración de la fila y actualice lo siguiente:

En la pestaña Diseño…

Usar ancho personalizado: SÍ
Ancho personalizado: 91%
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 1

Columna 2 Relleno personalizado: 5% superior
Columna 3 Acolchado personalizado: 24% superior

Adición de imagen n. ° 1

En la primera columna (en el extremo izquierdo) de nuestro diseño, agregue un Módulo de imagen y actualice la configuración de la imagen de la siguiente manera:

En la pestaña Contenido ...

URL de la imagen: [cargar imagen n. ° 1]

En la pestaña Diseño…

Forzar ancho completo: SÍ

Estilo de animación: rollo
Dirección de animación: Derecha
Intensidad de la animación: 16%
Opacidad inicial de la animación: 100%

Guardar ajustes

Adición de texto animado con los módulos Divider y Call to Action

Ahora muévase a la columna del medio (un cuarto) donde se usará el módulo divisor para agregar una línea divisoria corta sobre el texto.

Agregue un módulo divisor a la columna.

Luego actualice la configuración de la siguiente manera:

En la pestaña Contenido ...

Mostrar divisor: SÍ

En la pestaña Diseño…

Color: # e0c48f
Peso del divisor: 3px
Ancho: 60px (debe ingresar este valor ya que el predeterminado es el porcentaje)
Alineación del módulo: predeterminado (izquierda)
Relleno personalizado: 80 px arriba, 80 px izquierda

Estilo de animación: Doblar
Dirección de animación: Derecha
Duración de la animación: 1200ms
Retraso de animación: 50 ms
Intensidad de la animación: 70%
Opacidad inicial de la animación: 0%

Guardar ajustes

Debajo del módulo divisor, agregue un módulo de llamada a la acción con la siguiente configuración:

En la pestaña Contenido ...

Título: "1000 palabras"
Texto del botón: "Más información"
Contenido: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id. "
Enlace: #
Usar color de fondo: NO

En la pestaña Diseño…

Color del texto: oscuro
Orientación del texto: izquierda
Fuente de encabezado: Lato, negrita (B) mayúscula (TT)
Tamaño de fuente del encabezado: 38px
Color del texto del encabezado: # 33454f
Espaciado de letras de encabezado: 0.2em
Altura de la línea de encabezado: 1.4em

Fuente del cuerpo: Lato
Tamaño de fuente del cuerpo: 18px
Color del texto del cuerpo: # 9b9b9b
Altura de la línea del cuerpo: 1.8em

Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 15px
Color del texto del botón: # f2733c
Color de fondo del botón: rgba (225,225,225,0)
Ancho del borde del botón: 0px
Espacio entre letras del botón: 2px
Fuente del botón: Lato, Negrita (B), Mayúscula (TT)
Icono de botón: flecha derecha
Mostrar solo el icono al pasar el mouse para el botón: NO
Espacio entre letras del botón de desplazamiento: 0px

Estilo de animación: Doblar
Dirección de animación: Derecha
Duración de la animación: 1200ms
Retraso de animación: 50 ms
Intensidad de la animación: 70%
Opacidad inicial de la animación: 0%

Guardar ajustes

Agregar imagen n. ° 2

A continuación, agregue un módulo de imagen en el módulo de llamada a la acción que acaba de crear. Actualice la configuración de la imagen de la siguiente manera:

En la pestaña Contenido ...

URL de la imagen: [cargar imagen n. ° 2]

En la pestaña Diseño…

Forzar ancho completo: SÍ

Estilo de animación: rollo
Dirección de animación: izquierda
Intensidad de la animación: 13%
Opacidad inicial de la animación: 100%

Agregar imagen n. ° 3

Eso es todo para nuestra segunda columna (del medio). Ahora agreguemos la imagen n. ° 3 en la tercera columna (en el extremo derecho). Para hacer esto, podemos duplicar / copiar el módulo de imagen que acaba de agregar al final de la segunda columna y pegarlo en la tercera columna. Dado que los estilos de animación son los mismos, todo lo que necesita actualizar para el nuevo módulo de imagen es la URL de la imagen real.

Duplique y personalice el divisor y el módulo de llamada a la acción

Después de agregar la nueva URL de la imagen a la imagen duplicada en la columna tres, siga adelante y duplique / copie tanto el Módulo divisor como el Módulo de llamada a la acción que creó en la parte superior de la segunda columna y arrastre / pegue los dos módulos debajo de la imagen. # 3 en la tercera columna.

Para el módulo divisor, cambie la configuración de Dirección de animación en la pestaña Diseño a "Izquierda".

Para nuestro nuevo Módulo de llamada a la acción, continúe y actualice la siguiente configuración:

En la pestaña Contenido ...

Título: Una nueva forma de construir

En la pestaña Diseño…

Relleno personalizado: 80 px derecha, 80 px abajo, 80 px izquierda

Dirección de animación: izquierda

Ahora echemos un vistazo a nuestro resultado final ...

Bono: descargue estas secciones para una fácil importación

Como beneficio adicional, hemos empaquetado las secciones integradas en el tutorial de hoy en una descarga gratuita que puede obtener utilizando el formulario de suscripción por correo electrónico a continuación. Simplemente ingrese su correo electrónico y aparecerá el botón de descarga. No se preocupe por "volver a suscribirse" si ya es parte de nuestro Boletín Divi. Vuelva a ingresar su correo electrónico no resultará en más correos electrónicos o duplicados. Simplemente revelará la descarga.

¡Disfrutar!

Descargar el paquete de diseño

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 usar estas descargas, comience por ubicar el archivo comprimido llamado Animation_Effects_Part_5.zip en nuestra carpeta de descargas. Descomprímalo para revelar las siguientes importaciones.

Efectos de animación, parte 5 (sección 1) .json

Efectos de animación, parte 5 (sección 2) .json

Navegue en su administrador de WordPress a Divi> Biblioteca Divi> Importar y exportar. Cuando aparezca el modal de portabilidad, haga clic en la pestaña de importación y en el botón etiquetado como elegir archivo.

Seleccione el archivo json que prefiera y haga clic en "Importar diseños de Divi Builder". Una vez que se complete la importación, navegue hasta la publicación o página a la que le gustaría agregar una de las secciones anteriores.

Activa el constructor visual. Navegue a la parte de la página a la que le gustaría agregar una de las secciones anteriores. Al hacer clic en el icono de agregar una nueva sección, se le presentará la opción "Agregar desde la biblioteca". Elija esta opción y seleccione el diseño que desee.

Terminando

Este diseño es un poco complicado de lograr. Pero, una vez que obtiene las imágenes correctas y el espaciado correcto, la animación reúne muy bien todo el diseño. El movimiento realista de las imágenes del teléfono casi parece como si alguien las estuviera deslizando sobre una mesa blanca a nuestra vista mientras nos desplazamos hacia abajo en la página. Este ejemplo de animación de rollo es definitivamente uno que se destaca.

Subiendo

En la próxima publicación, terminaré nuestra serie con la parte 6. Le mostraré cómo usar la animación de diapositivas con algunas imágenes personalizadas y CSS para crear un diseño impresionante para presentar recetas de cocina. Sin embargo, el mismo diseño podría modificarse y usarse para muchos elementos destacados diferentes.

Espero tener noticias tuyas en los comentarios.