Bienvenido a la parte 6 de esta serie de 6 partes que le enseñará cómo usar Divi y sus nuevas opciones de Animación 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 la última publicación, construimos la sección 7 de nuestra página de demostración de animación donde le mostré cómo animar imágenes usando el estilo de animación de rollo para agregar movimiento real a su contenido.
Hoy vamos a abordar las secciones 8 y 9 de nuestra página de demostración de animación. La sección 8 es un excelente ejemplo de cómo hacer que un elemento destacado se destaque mediante una combinación de animación de diapositivas y efectos de desenfoque. La sección 9 es una forma simple y elegante de agregar animación a una sección de equipo que muestra fotos de su equipo.
Empecemos.
Preparación de los elementos de diseño
Necesitarás cuatro imágenes para este tutorial. Necesitará una imagen de fondo personalizada y tres imágenes de tarjetas de recetas. La imagen de fondo es de 1280 × 936 y tiene un fondo amarillo con 6 rectángulos blancos semitransparentes con sombreado adicional para profundidad. Una vez que se usa el fondo en la sección con paralaje, dará la impresión de tarjetas de recetas flotando en el fondo. Las imágenes de la tarjeta de recetas son cada una de 375 × 667. Aquí están las imágenes utilizadas en este tutorial.
Imagen de fondo
Imagen de tarjeta de recetas #1
Imagen de tarjeta de recetas #2
Imagen de tarjeta de recetas #3
Usando las animaciones de Divi para flotar y rebotar la imagen
Suscríbete a nuestro canal de Youtube
Edificio Sección 8
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 generador visual.
Usando Visual Builder, comencemos agregando otra sección regular a nuestro diseño. Luego agregue una fila de tres columnas (un tercio un tercio un tercio) a su sección.
Actualizar configuración de 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: 1366 px
Usar ancho de canalón personalizado: SÍ
Ancho de canalón: 1
Columna 1 Relleno personalizado: 6 % a la derecha
Columna 3 Relleno personalizado: 8 % a la izquierda
Agrega Fondo a tu Sección
A continuación, coloquemos la imagen de fondo principal en nuestra sección. Vaya a la sección de configuración y actualice lo siguiente:
En la pestaña Contenido…
Imagen de fondo: [insertar imagen de 1280 × 936]
Usar método Parallax: SÍ
Método Parallax: True Parallax
Agregar imagen #1
Ahora estamos listos para agregar nuestros módulos a nuestra fila. En la primera columna (izquierda), agregue un módulo de imagen.
Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido…
URL de la imagen: [ingrese la imagen de la tarjeta de recetas #1]
En la pestaña Diseño…
Forzar ancho completo: SÍ
Estilo de animación: Diapositiva
Dirección de animación: Arriba
Intensidad de animación: 20%
En la pestaña Avanzado…
Aquí vamos a agregar algo de CSS personalizado para darle a la imagen de la tarjeta un borde redondeado, una sombra de cuadro y un filtro de desenfoque. Ingrese el siguiente CSS en el cuadro Elementos principales:
|
01
02
03
04
|
border-radius: 10px;overflow: hidden;box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);filter: blur(2px) opacity(.75); |
Guardar ajustes
Agregue dos módulos de texto en la columna central
A continuación, agregue un módulo de texto en la segunda columna (o del medio) y actualice la configuración de la siguiente manera:
En la pestaña Contenido…
Ingrese el siguiente encabezado h1 en la pestaña de texto del cuadro de contenido:
|
01
|
<h1>The Best Recipes for Success</h1> |
En la pestaña Diseño…
Fuente del encabezado: Playfair Display, negrita (B)
Tamaño de la fuente del encabezado: 60 px
Altura de la línea del encabezado: 1,3 em
Margen personalizado: 20 px inferior
Estilo de animación: Doblar
Dirección de animación: Arriba
Guardar ajustes
Agregue otro 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.
En la pestaña Diseño…
Tamaño de fuente de texto: 18 px
Color de texto de texto: rgba (0,0,0,0.56)
Altura de línea de texto: 1,9 em
Margen personalizado: 40 px
Estilo de animación: Doblar
Dirección de animación: Abajo
Retardo de animación: 150ms
Guardar ajustes
Añadir imagen #2
Agregue un módulo de imagen debajo de los dos módulos de texto que acaba de crear.
Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido…
URL de la imagen: [ingrese la imagen de la tarjeta #2]
En la pestaña Diseño…
Forzar ancho completo: SÍ
Estilo de animación: Diapositiva
Dirección de animación: Arriba
Intensidad de animación: 10%
En la pestaña Avanzado…
Aquí vamos a agregar CSS personalizado (similar a la primera imagen de la tarjeta excepto sin el efecto de desenfoque) para darle a la imagen de la tarjeta un borde redondeado y una sombra de caja. Ingrese el siguiente CSS en el cuadro Elementos principales:
|
01
02
03
|
border-radius: 10px;overflow: hidden;box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7); |
Guardar ajustes
Agregar imagen #3
Agreguemos nuestra tercera y última imagen de tarjeta a la tercera (o columna derecha) insertando un módulo de imagen:
Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido…
URL de la imagen: [ingrese la imagen de la tarjeta #3]
En la pestaña Diseño…
Forzar ancho completo: SÍ
Margen personalizado: 20% superior
Estilo de animación: Diapositiva
Dirección de animación: Arriba
Intensidad de animación: 30%
Guardar ajustes
En la pestaña Avanzado…
Agregue este CSS personalizado en el cuadro Elemento principal:
|
01
02
03
04
|
border-radius: 10px;overflow: hidden;box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);filter: blur(8px) opacity(.4); |
Guardar ajustes
¡Excelente! Eso concluye la sección 8 de nuestra página de demostración. Mira el resultado final.
La animación es sorprendentemente realista y hace un gran uso de la función de paralaje que mueve el fondo hacia abajo a una velocidad diferente a la de los módulos que se encuentran en la parte superior cuando se desplaza. El hecho de que las cartas estén animadas hacia arriba con el fondo hacia abajo da la impresión de que las cartas flotan. Debo decir que el contenido realmente destaca en esta sección.
Construcción de la sección 9 de The Demo
En nuestra sección final, vamos a construir una sección simple de «Nuestro equipo» con una pequeña animación que literalmente «estalla». Esto es lo que vamos a construir:
Aquí hay un vistazo del diseño desde la vista de estructura alámbrica.
Agregar un encabezado de sección
Primero, agregue una sección regular con una fila de una columna. luego agregue un módulo de texto a la columna.
Actualice la configuración de texto de la siguiente manera:
En la pestaña Contenido…
Contenido: Nuestro Equipo
En la pestaña Diseño…
Fuente de texto: Raleway, Negrita (B), Mayúsculas (TT)
Tamaño de fuente de texto: 15px
Color de texto de texto: rgba(0,0,0,0.32)
Espaciado entre letras de texto: 5px
Altura de línea de texto: 1,9em
Margen personalizado: 20px
Estilo de animación: Diapositiva
Dirección de animación: Arriba
Duración de animación: 500 ms
Retardo de animación: 1000 ms
En la pestaña Avanzado…
Guardar ajustes
Agregue otro módulo de texto debajo del que acaba de crear y actualice la configuración de la siguiente manera:
En la pestaña Contenido…
Ingrese la siguiente etiqueta h1 en la pestaña de texto del cuadro de contenido:
|
01
|
<h1>Highly Skilled Ninjas</h1> |
En la pestaña Diseño…
Fuente del encabezado: Raleway Light
Alineación del texto del encabezado: Centro
Tamaño de la fuente del encabezado: 48 px
Color del texto del encabezado: #3a3830
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: Derecha
Intensidad de animación: 12%
Guardar ajustes
Ahora, para agregar la pequeña línea divisoria verde, agregue un módulo divisor debajo del módulo de texto.
Luego actualice la configuración del divisor de la siguiente manera:
En la pestaña Contenido…
Mostrar divisor: SÍ
En la pestaña Diseño…
Color: #7cda24
Peso del divisor: 3 px
Altura: 3 px
Ancho: 60 px (escriba esto)
Alineación del módulo: Centro
Estilo de animación: Diapositiva
Dirección de animación: Abajo
Duración de animación: 500 ms
Retardo de animación: 1000 ms
Intensidad de animación: 200 %
Guardar ajustes
Agregar las cuatro imágenes del equipo
Para agregar las imágenes de los miembros de nuestro equipo, agregue una fila de cuatro columnas debajo de la fila que contiene el encabezado que acabamos de crear.
Agregue un módulo de persona en la primera columna y actualice la configuración de la siguiente manera:
En la pestaña Contenido…
Nombre: Nick
URL de la imagen: [ingrese su foto de 150 × 150]
En la pestaña Diseño…
Fuente del encabezado: Raleway Light, Negrita (B), Mayúsculas (TT)
Tamaño de fuente del encabezado: 13px
Color del texto del encabezado: rgba(0,0,0,0.71)
Espaciado entre letras del encabezado: 3px
En la pestaña Avanzado…
Agregue el siguiente CSS en el cuadro Imagen de miembro:
|
01
02
03
04
|
border-radius: 100%;overflow: hidden;width: 180px;margin: auto auto 20px auto; |
Esto le dará a nuestra imagen un bonito borde circular.
Agregue el siguiente CSS personalizado a la Descripción del miembro:
|
01
02
|
text-align: center;display: block; |
Esto centra el Nombre.
Guardar ajustes
Ahora puede duplicar el Módulo de persona que acaba de crear para agregar los siguientes tres para llenar las siguientes tres columnas. Todo lo que necesita hacer es actualizar la imagen y el nombre de cada uno de los módulos que duplique.
Una vez que haya agregado los cuatro módulos de persona, estará listo para el paso final en esta sección, que es diseñar y animar la fila. Para hacer eso, 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
Relleno personalizado: 60px superior
Estilo de animación: Rebote
Duración de la animación: 700 ms
Retraso de la animación: 1000 ms
Bueno, eso concluye la sección 9 de nuestra página de demostración de animación. Y también concluye la serie de 6 partes sobre el uso de animación con Divi.
Terminando la serie
Espero que haya disfrutado construyendo nuestra página de demostración de animación. El diseño solo es una gran inspiración. Y el uso de animación en todo momento sin duda servirá como guía de referencia para futuras construcciones de páginas. Un agradecimiento especial a Kenny Sing, nuestro Director, por crear este diseño. Estamos muy orgullosos de ello, queremos ofrecerle este diseño de forma gratuita para ayudarle a impulsar su próximo proyecto.
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 All_Animation_Effects_1.zip en nuestra carpeta de descargas. Descomprímalo para revelar todas las importaciones de esta serie, incluidas las dos últimas de esta publicación.
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.
Espero escuchar de usted en los comentarios a continuación.
¡Salud!