Bienvenido a la parte 4 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 4 módulos publicitarios organizados para un proceso paso a paso.
Hoy vamos a construir la Sección 6 de nuestra página de demostración de animación. Esta sección muestra un excelente diseño y animación para mostrar productos destacados o descargas. El uso del color y el efecto floreciente de la animación en esos módulos publicitarios realmente hacen que la sección se destaque.
¡Vamos a sumergirnos!
Usando Divi’s Fold Animation para hacer florecer Blurbs
Suscríbete a nuestro canal de Youtube
Edificio Sección 6
Agregue y personalice su sección
Usando Visual Builder, comencemos agregando otra sección regular a nuestro diseño. Luego agregue una fila de tres columnas (la mitad, un cuarto, un cuarto) a su sección.
Antes de agregar nuestro primer módulo, vaya a la sección de configuración y actualice lo siguiente:
En la pestaña Contenido…
Color de fondo: #00252d
En la pestaña Diseño…
Relleno personalizado: 80 px arriba, 80 px abajo
Guardar ajustes
Agregar un encabezado usando el módulo de texto
Ahora volvamos a nuestra fila de tres columnas y agreguemos un módulo de texto en la columna de la izquierda. Actualice la configuración de texto de la siguiente manera:
En la pestaña Contenido…
Agregue el siguiente encabezado h1 en la pestaña de texto del cuadro de contenido:
|
01
|
<h1>Build Like You Mean It</h1> |
En la pestaña Diseño…
Fuente del encabezado: Lato, negrita (B)
Tamaño de la fuente del encabezado: 38 px
Color del texto del encabezado: #ffffff
Altura de la línea del encabezado: 1,3 em
Margen personalizado: 20 px inferior
Estilo de animación: Diapositiva
Dirección de animación: Izquierda
Intensidad de animación: 16%
Guardar ajustes
Agregar texto usando otro módulo de texto
Normalmente, probablemente seguiría adelante y agregaría el resto de su texto debajo del encabezado h1 en el mismo módulo de texto. Pero como queremos agregar un efecto de animación diferente al encabezado h1 y al texto debajo de él, necesitaremos crear otro módulo de texto. Continúe y agregue un módulo de texto debajo del que acaba de crear y actualice la configuración de la siguiente manera:
En la pestaña Contenido…
Contenido: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl.”
En la pestaña Diseño…
Color de texto:
Texto claro Tamaño de fuente: 18 px
Color de texto de texto: rgba (255 255 255 0,66)
Altura de línea de texto: 1,9 em
Margen personalizado: 40 px Inferior
Estilo de animación: Diapositiva
Dirección de animación: Izquierda
Intensidad de animación: 8%
Guardar ajustes
Ahora agreguemos un módulo de botón debajo de los dos módulos de texto en la columna izquierda. Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido…
Texto del botón: Descargar
la URL de todos los botones [ingresar url]
En la pestaña Diseño…
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 15 px
Color del texto del botón: #01254c
Color de fondo del botón: #ffcd1c
Ancho del borde del botón: 0 px
Radio del borde del botón: 65 px
Espaciado entre letras del botón: 1 px
Fuente del botón: Negrita (B), mayúscula (TT)
Relleno personalizado: 10 px arriba, 30 px a la derecha, 10 px abajo, 30 px a la izquierda
Estilo de animación: Diapositiva
Dirección de animación: Izquierda
Intensidad de animación: 16%
No olvidemos agregar ese maravilloso efecto de brillo usando la propiedad box shadow css. Busque el cuadro Elemento principal en CSS personalizado y agregue lo siguiente:
|
01
|
box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5); |
Guardar ajustes
Agregue su primer módulo de Blurb
Eso es todo para nuestra columna izquierda. Ahora agreguemos un módulo de Blurb a la columna del medio (que es la primera columna de un cuarto).
Actualice la configuración de la siguiente manera:
En la pestaña Contenido…
Título: Divi
Usar icono: SÍ
Icono: [seleccionar icono]
Colores de degradado de fondo: #8b56ff, #5d3dff
Tipo de degradado:
Dirección de degradado lineal: 140 grados
En la pestaña Diseño…
Color del icono: #ffffff
Color del texto: Claro
Orientación del texto: Centro
Fuente del encabezado: Negrita (B), Mayúscula (TT)
Espaciado entre letras del encabezado: 10 px
Margen personalizado: 12 % inferior
Relleno personalizado: 40 px arriba, 30 px a la derecha, 30 px abajo, 30 px a la izquierda
Estilo de animación: Doblar
Dirección de animación: Izquierda
Retardo de animación: 200ms
En la pestaña Avanzado…
Aquí es donde podemos agregar ese efecto de brillo a nuestro módulo y sangrar el encabezado solo un poco.
Agregue el siguiente CSS al cuadro Elemento principal:
|
01
02
|
border-radius: 6px;box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2); |
Agregue el siguiente CSS al cuadro Título de Blurb:
|
01
|
text-indent: 10px; |
Guardar ajustes
Duplique el módulo de Blurb para construir los siguientes tres Blurbs
Ahora que tenemos nuestro primer Módulo de Blurb diseñado y animado, podemos duplicar el módulo para crear los blurbs restantes.
Pase el cursor sobre el módulo de Blurb y haga clic en el icono del módulo duplicado. En el nuevo módulo duplicado que aparece debajo, actualice la configuración de la siguiente manera:
En la pestaña Contenido…
Título: Bloom
Icono: [seleccione un nuevo icono]
Colores de degradado de fondo: #ff56f9, #c43dff
En la pestaña Diseño…
Dirección de animación: Abajo
En la pestaña Avanzado…
Reemplace el CSS en el cuadro Elemento principal con lo siguiente:
|
01
02
|
border-radius: 6px;box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2); |
Guardar ajustes
Haga otro duplicado del módulo de propaganda y arrastre ese duplicado a la columna del extremo derecho. Luego actualice ese módulo de Blurb con la siguiente configuración:
En la pestaña Contenido…
Título: Ícono adicional
: [seleccione un ícono nuevo]
Colores de degradado de fondo: #56ffda, #38d5ea
En la pestaña Diseño…
Dirección de animación: Arriba
En la pestaña Avanzado…
Reemplace el CSS en el cuadro Elemento principal con lo siguiente:
|
01
02
|
border-radius: 6px;box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2); |
Haga otro duplicado del módulo de publicidad que acaba de actualizar en la columna de la derecha para que aparezca directamente debajo. Luego actualice ese módulo de Blurb con la siguiente configuración:
En la pestaña Contenido…
Título: Monarca
Ícono: [seleccione un nuevo ícono]
Colores de degradado de fondo: #f2743a, #ff5656
En la pestaña Diseño…
Dirección de animación: Derecha
En la pestaña Avanzado…
Reemplace el CSS en el cuadro Elemento principal con lo siguiente:
|
01
02
|
border-radius: 6px;box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2); |
Guardar ajustes
Ahora vamos a corregir el espacio actualizando la configuración de filas 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
Relleno personalizado: 80 px en la parte superior, 0 px a la derecha, 160 px en la parte inferior, 0 px en la columna izquierda
1 Relleno personalizado: 140 px en la parte superior
Construye la segunda fila
Ahora estamos listos para crear la siguiente fila para nuestra sección. Para acelerar las cosas, vamos a duplicar y copiar elementos de diseño de nuestra fila y módulos previamente diseñados.
Primero agreguemos una nueva fila de una columna a nuestra sección. Luego actualice la configuración de la fila con lo siguiente:
Usar ancho personalizado: SÍ
Ancho personalizado: 1366 px
Usar ancho de canalón personalizado: SÍ
Ancho de canalón: 2
Guardar ajustes
A continuación, copie el primer módulo de texto en la primera fila que creó que contiene el título h1. Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido…
Reemplace la etiqueta h1 actual con lo siguiente:
|
01
|
<h1>Don't Settle for Less</h1> |
En la pestaña Diseño…
Orientación del texto: Centro
Estilo de animación: Voltear
Intensidad de animación: 70%
Guardar ajustes
A continuación, copie el módulo de botones de la fila anterior y péguelo debajo del módulo de texto que acaba de actualizar en la segunda fila. Luego actualice el módulo de botones de la siguiente manera:
En la pestaña Contenido…
Texto del botón: Únase hoy
En la pestaña Diseño…
Alineación de botones: Centro
Estilo de animación: Voltear
Intensidad de animación: 70%
Guardar ajustes
Ahora para nuestra última fila. Cree una nueva fila con una estructura de columna mitad mitad. Antes de agregar sus módulos, actualice la configuración de la fila de la siguiente manera:
En la pestaña Diseño…
Usar ancho de canalón personalizado: SÍ
Ancho de canalón: 2
Guardar ajustes
A continuación, copie el módulo Blurb púrpura «Divi» de su fila anterior y péguelo en la columna izquierda de su nueva fila. Luego actualice la siguiente configuración:
En la pestaña Contenido…
Título:
Ícono del constructor: [seleccione un ícono nuevo]
Colores de degradado de fondo: #ff568e, #ff3d5d
En la pestaña Avanzado…
Reemplace el CSS en el cuadro Elemento principal con lo siguiente:
|
01
02
|
border-radius: 6px;box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2); |
Guardar ajustes
A continuación, copie el módulo de publicidad azulverde «Extra» en la parte superior de la columna de la derecha en la primera fila que creó. Luego péguelo en la columna derecha de su nueva tercera fila.
Luego actualice la configuración de publicidad de la siguiente manera:
En la pestaña Contenido…
Título: Sereno
Ícono: [seleccione un ícono nuevo]
Colores de degradado de fondo: #3da4ff, #385eea
En la pestaña Avanzado…
Reemplace el CSS en el cuadro Elemento principal con lo siguiente:
|
01
02
|
border-radius: 6px;box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2); |
Guardar ajustes
Eso es todo.
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_4.zip en nuestra carpeta de descargas. Descomprímalo para revelar las siguientes importaciones.
Efectos de animación Parte 4 (sección 1).json
Efectos de animación Parte 4 (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
Espero que hayan disfrutado construyendo juntos esta impresionante sección. La combinación de color, sombras brillantes y animación creativa hacen de este un diseño excepcional para exhibir sus propias descargas o productos.
Subiendo
En la parte 5, le mostraré cómo incorporar con éxito el estilo de animación Roll a los teléfonos móviles dentro de sus secciones.
Espero escuchar de usted en los comentarios a continuación.
¡Salud!