Bienvenido a la parte 3 de esta serie de 6 partes que te enseñará cómo usar Divi y sus nuevas opciones de Animación para diseñar impresionantes secciones de página. 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 mientras creamos las secciones 3 y 4 de nuestra página de demostración de animación.
Hoy, vamos a abordar la Sección 5, que utiliza una excelente animación para mostrar cuatro impresionantes Módulos de Blurb. El tiempo paso a paso de las animaciones publicitarias realmente complementa el proceso paso a paso en el que se utilizan las publicidades publicitarias.
¡Vamos a sumergirnos!
Preparación de los elementos de diseño
Lo único que realmente necesita para este tutorial son los 4 íconos de imagen de 207 × 188 que se usan 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 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.
Agrega el título de tu 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 del texto: Negrita (B), Mayúsculas (TT)
Tamaño de la fuente del texto: 15 px
Color del texto del texto: #6a8091
Espaciado entre letras del texto: 5 px
Altura de la línea del texto: 1,9 em
Orientación del texto: Centro
Espaciado: 20px inferior
Estilo de animación:
Dirección de animación de diapositivas:
Duración de animación hacia arriba: 850 ms
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:
|
01
|
<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 la fuente del encabezado: 39px
Color del texto del encabezado: #2f3a54
Nota: Dado que este es un encabezado h1, debemos editar la configuración del Texto del encabezado.
Ancho: 600 px (escriba este valor)
Alineación del módulo: centro
Margen personalizado: 20 px 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 la animación: Desaceleración
Guardar ajustes
Diseño Los Cuatro Blurbs
Ahora estamos listos para agregar nuestros módulos de Blurb. Primero, cree una fila con una estructura de cuatro columnas (1/4 1/4 1/4 1/4).
Agregue un módulo de Blurb a la primera columna (extremo izquierdo).
Luego actualice la configuración de Blurb.
En la pestaña Contenido…
Agregue el siguiente html en la pestaña de texto del cuadro de contenido:
|
01
02
|
<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 publicidad.
Url: [ingresar url]
Imagen: [ingresar su imagen de 207×188]
Color de fondo: #ffffff
En la pestaña Diseño…
Orientación del texto: Centro
Fuente del encabezado: Predeterminada, Negrita (B), Mayúsculas (TT)
Color del texto del encabezado: #7969f4
Espaciado entre letras del encabezado: 3px
Altura de la línea del encabezado: 3em
Color del texto del cuerpo: #6a8091
Altura de la línea del cuerpo: 1,9 em
Relleno personalizado: 40 px arriba, 40 px a la derecha, 40 px abajo, 40 px a la izquierda
Estilo de animación: Diapositiva
Dirección de animación: Arriba
Duración de la animación: 700ms
Intensidad de la 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:
|
01
02
|
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 una publicidad, podemos usarla como plantilla para las próximas tres publicidades.
Continúe y haga clic con el botón 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 de Blurb en la segunda columna, actualice lo siguiente:
En la pestaña Contenido…
Título: Paso 2
Contenido: [actualizar el texto y la URL del enlace del manual]
Url: [actualizar la URL de la publicidad]
Imagen: [agregar una nueva imagen de 207 × 188]
En la pestaña Diseño…
Color del texto del encabezado: #e944ff
Retraso de la animación: 50 ms
Intensidad de la animación: 12 %
Para el Módulo de Blurb en la tercera columna, actualice lo siguiente:
En la pestaña Contenido…
Título: Paso 3
Contenido: [actualizar el texto y la URL del enlace del manual]
Url: [actualizar la URL de la publicidad]
Imagen: [agregar una nueva imagen de 207 × 188]
En la pestaña Diseño…
Color del texto del encabezado: #3ebaef
Retraso de la animación: 100ms
Intensidad de la animación: 20%
Para el Módulo de Blurb en la cuarta columna, actualice lo siguiente:
En la pestaña Contenido…
Título: Paso 4
Contenido: [actualizar el texto y la URL del enlace del manual]
Url: [actualizar la URL de la publicidad]
Imagen: [agregar una nueva imagen de 207 × 188]
En la pestaña Diseño…
Color del texto del encabezado: #95d624
Retraso de la animación: 150ms
Intensidad de la animación: 30%
Una vez que haya actualizado todos sus Blurbs, actualicemos la configuración de Fila de la siguiente manera:
En la pestaña Diseño…
Usar ancho personalizado: SÍ
Ancho personalizado: 1366 px
Usar ancho de canalón personalizado: SÍ
Ancho de canalón: 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 las notas publicitarias, pero no pensé que fuera necesario incluirla aquí.
Bonificación: descargue estas secciones para una importación fácil
Como ventaja adicional, hemos empaquetado las secciones integradas en el tutorial de hoy en una descarga gratuita que puede obtener mediante 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 te preocupes por “volver a suscribirte” si ya eres parte de nuestro Boletín Divi. Volver a ingresar su correo electrónico no resultará en más correos electrónicos o duplicados. Simplemente revelará la descarga.
¡Disfrutar!
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para usar estas descargas, comience localizando 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 Biblioteca Divi > Importar y exportar»>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 a 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. Cuando haga clic en el ícono Agregar 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 unas pocas configuraciones de animación pueden tener en la entrega de contenido. No solo se ve genial que cada uno de los anuncios publicitarios se muestre en progresión, sino que también tiene sentido considerando que de todos modos está mostrando los pasos de un proceso.
Subiendo
En la parte 4 de nuestra serie, les mostraré un magnífico diseño para mostrar productos o descargas. Y, por supuesto, destacaré el uso inteligente de la animación en todo momento.
¡Hasta la proxima vez!
Espero escuchar de usted en los comentarios a continuación.