Uso de la animación de diapositivas de Divi para mostrar la progresión de un proceso
Publicado: 2017-10-15Bienvenido a la parte 3 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, le mostré algunas formas creativas de diseñar y animar secciones de su sitio web para mostrar productos y servicios a medida que creamos las secciones 3 y 4 de nuestra página de demostración de animación.
Hoy, abordaremos la Sección 5, que utiliza una gran animación para mostrar cuatro impresionantes módulos Blurb. La sincronización paso a paso de las animaciones de los anuncios publicitarios realmente complementa el proceso paso a paso en el que se utilizan los anuncios publicitarios.
¡Vamos a sumergirnos!
Aquí hay un adelanto de lo que estaremos construyendo en la publicación de hoy
Preparación de los elementos de diseño
Lo único que realmente necesita para este tutorial son los iconos de imagen 4207 × 188 utilizados para los módulos de Blurb. Aquí están las imágenes que usaré.
Uso de la animación de diapositivas de Divi para mostrar la progresión de un proceso
Suscríbete a nuestro canal de Youtube
Edificio de la Sección 5
Usando Visual Builder, agregue una sección regular (en la sección 4 si está siguiendo la serie). Antes de hacer cualquier otra cosa, agregue el color de fondo # f5f9fc a su sección y guarde su configuración.
Agregue el título de su sección usando dos módulos de texto
Luego agregue una fila de una columna. En la fila, agregue un módulo de texto y actualice la configuración de la siguiente manera.
En la pestaña Contenido ...
Contenido: "Configuración"
En la pestaña Diseño…
Fuente de texto: negrita (B), mayúscula (TT)
Tamaño de fuente de texto: 15px
Texto Color del texto: # 6a8091
Espaciado de letras de texto: 5px
Altura de la línea de texto: 1.9em
Orientación del texto: centro
Espaciado: 20px Inferior
Estilo de animación: diapositiva
Dirección de animación: Arriba
Duración de la animación: 850ms
Guardar ajustes
Ahora agreguemos el título de la sección agregando otro módulo de texto debajo del que acaba de crear. Actualice la configuración de texto de la siguiente manera:
En la pestaña Contenido ...
Agregue el siguiente html en la pestaña de texto del cuadro de contenido:
<h1>Say Hello to DIVI</h1>
En la pestaña Diseño…
Fuente del encabezado: negrita (B)
Alineación del texto del encabezado: centro
Tamaño de fuente del encabezado: 39px
Color del texto del encabezado: # 2f3a54
Nota: Dado que este es un encabezado h1, necesitamos editar la configuración del Texto del encabezado.
Ancho: 600px (escriba este valor)
Alineación del módulo: centro
Margen personalizado: 20px inferior
Estilo de animación: diapositiva
Dirección de animación: Arriba
Duración de la animación: 850ms
Intensidad de la animación: 12%
Curva de velocidad de animación: desaceleración
Guardar ajustes
Diseña los cuatro borrones
Ahora estamos listos para agregar nuestros módulos Blurb. Primero, cree una fila con una estructura de cuatro columnas (1/4 1/4 1/4 1/4).
Agregue un módulo Blurb a la primera columna (en el extremo izquierdo).
Luego actualiza la configuración de Blurb.
En la pestaña Contenido ...
Agregue el siguiente html en la pestaña de texto del cuadro de contenido:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida sed nec purus.</p> <p><a href="#" style="font-size: 12px;letter-spacing: 1px; color: #6a8091;"><strong>READ MORE ➔</strong></a></p>
Nota: agregué un enlace manualmente para darle al usuario otra opción para hacer clic. Asegúrese de que la URL del enlace manual coincida con el enlace que agrega a la URL del módulo de propaganda.
URL: [ingresar URL]
Imagen: [ingrese su imagen de 207 × 188]
Color de fondo: #ffffff
En la pestaña Diseño…
Orientación del texto: centro
Fuente de encabezado: Predeterminado, Negrita (B), Mayúsculas (TT)
Color del texto del encabezado: # 7969f4
Espaciado entre letras del encabezado: 3px
Altura de la línea de encabezado: 3em
Color del texto del cuerpo: # 6a8091
Altura de la línea del cuerpo: 1.9em
Relleno personalizado: 40 px arriba, 40 px derecha, 40 px abajo, 40 px izquierda
Estilo de animación: diapositiva
Dirección de animación: Arriba
Duración de la animación: 700 ms
Intensidad de animación: 4%
Animación de imagen / icono: sin animación
En la pestaña Avanzado…
Agregue el siguiente CSS personalizado en el cuadro Elemento principal:
border-radius: 6px; box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
Guardar ajustes
Ahora que ha completado un anuncio publicitario, podemos usarlo como plantilla para los siguientes tres anuncios publicitarios.
Continúe y haga clic derecho en el módulo y seleccione copiar módulo. Luego pegue (ctrl + v) el módulo en cada una de las tres columnas restantes.
Ahora todo lo que tenemos que hacer es agregar algunas actualizaciones a cada uno de los tres módulos duplicados.
Para el módulo Blurb en la segunda columna, actualice lo siguiente:
En la pestaña Contenido ...
Título: Paso 2
Contenido: [actualizar texto y URL del enlace manual]
URL: [actualizar la URL de la propaganda]
Imagen: [agregar nueva imagen de 207 × 188]
En la pestaña Diseño…
Color del texto del encabezado: # e944ff
Retraso de animación: 50 ms
Intensidad de la animación: 12%
Para el módulo Blurb en la tercera columna, actualice lo siguiente:
En la pestaña Contenido ...
Título: Paso 3
Contenido: [actualizar texto y URL del enlace manual]
URL: [actualizar la URL de la propaganda]
Imagen: [agregar nueva imagen de 207 × 188]
En la pestaña Diseño…
Color del texto del encabezado: # 3ebaef
Retraso de animación: 100 ms
Intensidad de animación: 20%
Para el módulo Blurb en la cuarta columna, actualice lo siguiente:
En la pestaña Contenido ...
Título: Paso 4
Contenido: [actualizar texto y URL del enlace manual]
URL: [actualizar la URL de la propaganda]
Imagen: [agregar nueva imagen de 207 × 188]
En la pestaña Diseño…
Color del texto del encabezado: # 95d624
Retraso de animación: 150 ms
Intensidad de animación: 30%
Una vez que haya actualizado todos sus Blurbs, actualice la configuración de Fila de la siguiente manera:
En la pestaña Diseño…
Usar ancho personalizado: SÍ
Ancho personalizado: 1366px
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 2
Estilo de animación: Zoom
Duración de la animación: 700 ms
Opacidad inicial de la animación: 100%
Guardar ajustes
Ahora ya ha terminado con esta sección. La página de demostración tiene otra imagen debajo de los anuncios, pero no pensé que fuera necesario incluirla aquí.
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.
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_3.zip en nuestra carpeta de descargas. Descomprímalo para revelar las siguientes importaciones.
Efectos de animación, parte 3 (sección 1) .json
Efectos de animación, parte 3 (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
El diseño y la animación de la sección 5 realmente muestran el poder que pueden tener unos pocos ajustes de animación en la entrega de contenido. No solo se ve bien que cada uno de los anuncios se muestre en progresión, sino que también tiene sentido considerando que está mostrando los pasos de un proceso de todos modos.
Subiendo
En la parte 4 de nuestra serie, les mostraré un diseño magnífico para mostrar productos o descargas. Y, por supuesto, destacaré el uso inteligente de la animación en todo momento.
¡Hasta la proxima vez!
Espero tener noticias tuyas en los comentarios a continuación.