Bienvenido a la parte 2 de esta serie de 5 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 la parte 1 de nuestra serie, creamos las dos primeras secciones de la página de demostración de animación. El diseño y la animación del encabezado en la primera sección mostraron una forma única de animar los elementos de un módulo de texto dentro de una sección estándar de pantalla completa. Al construir la segunda sección, descubrimos una forma de incorporar animaciones sutiles y armoniosas a las filas de contenido que podrían usarse fácilmente para presentar contenido en una página de destino de una manera atractiva.
Hoy continuamos nuestro viaje para diseñar diseños de sección que usen la animación de manera efectiva (y creativa) al desplazarse por la página. Construiremos las secciones tercera y cuarta de nuestra página de demostración en vivo mostrando el poder de las funciones de animación de Divi. Ambas secciones tienen diseños que pueden adoptarse fácilmente para sus propios proyectos para exhibir productos o servicios.
Empecemos.
Seccion 3
Sección 4
Preparación de los elementos de diseño
Prepare sus imágenes
Para la tercera sección, necesitarás dos imágenes. El primero debe tener alrededor de 880 × 600 y el segundo alrededor de 790 × 880. Estos tamaños de imagen no tienen que ser exactos. Sólo estoy incluyendo estas dimensiones para darle una idea.
Al construir la cuarta sección, también tendrá dos imágenes de alrededor de 600 × 400.
Utilice el constructor visual
No hay necesidad de código avanzado aquí. Usaremos solo Visual Builder para diseñar las próximas dos secciones de nuestra página que creamos en la parte 1 de esta serie. Como su página ya está configurada, está listo para comenzar.
Uso de las animaciones de Divi para desplegar contenido con imágenes deslizantes
Suscríbete a nuestro canal de Youtube
Construcción de la sección 3 de la demostración
La Sección 3 es un gran ejemplo de cómo diseñar y animar el Módulo de Llamado a la Acción con una imagen adjunta.
Sumerjámonos.
Usando Visual Builder, agregue una sección regular con una fila de dos columnas. En la columna de la izquierda agregue un módulo de imagen.
Actualice la configuración de la imagen de la siguiente manera:
En la pestaña Contenido…
URL de la imagen: [inserte su imagen de 880 × 600]
En la pestaña Diseño…
Forzar ancho completo: SÍ
Estilo de animación: Diapositiva
Dirección de animación: Izquierda
Intensidad de animación: 20%
Opacidad inicial de animación: 100%
Guardar ajustes
Agregar módulo divisor
En la columna de la derecha, mostraremos nuestro contenido utilizando el módulo divisor y el Módulo de llamada a la acción. El módulo divisor se utilizará para agregar una línea divisoria corta sobre el texto.
Agregue un módulo divisor a la columna de la derecha.
Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido…
Mostrar divisor: SÍ
En la pestaña Diseño…
Color: #e4ca77
Peso del divisor: 4 px
Ancho: 80 px (debe escribir este valor ya que el valor predeterminado es un porcentaje)
Alineación del módulo: predeterminado (izquierda)
Margen personalizado: 60 px arriba, 0 px abajo
Estilo de animación: Doblar
Dirección de animación: Derecha
Duración de animación: 1200ms
Retardo de animación: 50ms
Intensidad de animación: 70%
Opacidad inicial de animación: 0%
Guardar ajustes
Agregar un módulo de llamada a la acción
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: “La vista perfecta”
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, efficitur nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisi.”
Enlace: #
Usar color de fondo: NO
En la pestaña Diseño…
Color del texto: Oscuro
Orientación del texto: Izquierda
Fuente del encabezado: Lato, Mayúsculas (TT)
Tamaño de la fuente del encabezado: 38 px
Color del texto del encabezado: #0c0c0c
Espaciado entre letras del encabezado: 0,2 em
Altura de la línea del encabezado: 1,4 em
Fuente del cuerpo: Lato
Tamaño de fuente del cuerpo: 18 px
Color del texto del cuerpo: #9e9e9e
Altura de la línea del cuerpo: 1,8 em
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 15px
Color del texto del botón: #000000
Color de fondo del botón: rgba(225,225,225,0)
Ancho del borde del botón: 0px
Espaciado entre letras del botón: 2px
Fuente del botón: Lato, Negrita (B), Mayúsculas ( TT)
Ícono de botón: flecha derecha
Mostrar solo ícono al pasar el mouse por botón: NO
Espaciado entre letras al pasar el botón: 0px
Estilo de animación: Doblar
Dirección de animación: Derecha
Duración de animación: 1200ms
Retardo de animación: 50ms
Intensidad de animación: 70%
Opacidad inicial de animación: 0%
Guardar ajustes
Ahora haga clic para editar la configuración de la fila y actualice lo siguiente:
En la pestaña Diseño…
Usar ancho personalizado: SÍ
Ancho personalizado: 1366px
En la pestaña Avanzado…
Agregue el siguiente CSS personalizado al cuadro Elemento principal de la columna 1:
|
01
|
z-index: 999; |
Guardar ajustes
Duplica tu fila y actualízala
Eso es todo para la primera fila. Para ahorrar tiempo al crear la segunda fila, duplique la fila que acaba de crear.
Edite la configuración de la fila duplicada de la siguiente manera:
En la pestaña Avanzado…
Saque el CSS personalizado en el elemento principal de la columna 1 y agréguelo al cuadro Elemento principal de la columna 2:
|
01
|
z-index: 999; |
Dado que nuestra imagen estará en la columna de la derecha, necesitamos que esa columna permanezca encima del texto que se anima a la izquierda.
Guardar ajustes
Actualice el módulo de imagen y el módulo de llamada a la acción en la segunda fila
A continuación, arrastre el módulo de imagen a la columna de la derecha y arrastre el módulo divisor y el módulo de llamada a la acción a la columna de la izquierda.
Esta sección va a tener una estructura de columnas ligeramente diferente. Haga clic en el icono de fila Cambiar estructura de columna (junto al icono de fila duplicada) y seleccione un diseño de columna de dos tercios y un tercio.
Ahora todo lo que tenemos que hacer es volver a visitar cada uno de los módulos dentro de la fila y hacer algunos cambios.
Primero, actualice la configuración del módulo divisor de la siguiente manera:
En la pestaña Diseño…
Alineación del módulo: Derecha
Dirección de la animación: Izquierda
Guardar ajustes
A continuación, actualice la configuración del módulo de llamada a la acción de la siguiente manera:
Título: «Habla por sí mismo»
Orientación del texto: Derecha
Alineación del texto del encabezado: Derecha
Ancho: 700 px (escriba esto)
Dirección de la animación: Izquierda
Guardar ajustes
A continuación, actualice el módulo de imagen en la columna de la derecha con su nueva imagen de 790 × 880.
¡Eso es todo para la sección 3!
Compruebe su resultado.
Construcción de la sección 4 de la demostración
La sección 4 lleva el diseño del módulo de imagen a otro nivel con algunos trucos CSS avanzados. Y, apilar módulos de texto para plegarlos en una bisagra se combina bien con la entrega. Sumerjámonos.
Usando Visual Builder, agregue una sección normal con una fila de dos columnas (la mitad de la mitad). Antes de agregar nuestro primer módulo, agreguemos un color de fondo a nuestra sección. Haga clic para editar la configuración de la sección.
En la pestaña de contenido, seleccione la pestaña de color de fondo e ingrese el color #262938.
Guardar ajustes
Agregar el primer módulo de texto
En la columna de la izquierda, agregue un módulo de texto y actualice la configuración de texto de la siguiente manera:
En la pestaña Contenido…
Ingrese el siguiente html en la pestaña de texto del cuadro de contenido:
|
01
|
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> |
En la pestaña Diseño…
Color del texto: Luz
Fuente del encabezado: Pantalla Playfair, Negrita (B)
Tamaño de la fuente del encabezado: 38 px
Altura de la línea del encabezado: 1,3 em
Margen personalizado: 20 px
Animación inferior: Doblar
Dirección de la animación: Arriba
Agregue el segundo módulo de texto
A continuación, agregue otro módulo de texto directamente debajo del módulo de texto actual. Luego 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: 18px
Color de texto de texto: rgba(255,255,255,0.66)
Altura de línea de texto: 1.9em
Margen personalizado: 40px
Estilo de animación inferior: Doblar
Dirección de animación: Abajo
Retardo de animación: 150ms
Guardar ajustes
Agregue un módulo de botón debajo del último módulo de texto y actualice la configuración de la siguiente manera:
Texto del botón: Más información
URL del botón: #
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 15px
Color del texto del botón: #01254c
Color de fondo del botón: #ffffff
Radio del borde del botón: 0px
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: Abajo
Duración de animación: 1600ms
Retardo de animación: 150ms
Intensidad de animación: 20%
Guardar ajustes
Agregar módulo de imagen a la columna derecha
Eso es todo por esa columna. Ahora necesitamos agregar un módulo de imagen a la columna de la derecha. Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido…
URL de la imagen: [inserte su imagen de 600 × 400]
En la pestaña Diseño…
Forzar ancho completo: SÍ
Estilo de animación: Diapositiva
Dirección de animación: Derecha
Retardo de animación: 800ms
Intensidad de animación: 20%
Guardar ajustes
Actualizar configuración de fila
Ahora haga clic para editar la configuración de la fila y actualice lo siguiente:
En la pestaña Diseño…
Usar ancho personalizado: SÍ
Ancho personalizado: 1366px
Relleno personalizado: 27 px arriba, 0 px derecha, 170 px abajo, 0 px izquierda
Columna 1 Relleno personalizado: 6 % arriba
En la pestaña Avanzado…
Agregue el siguiente CSS personalizado al cuadro Elemento principal de la columna 1:
|
01
|
z-index: 999; |
Este css se asegura de que el texto permanezca encima de la imagen durante la animación.
Luego agregue el siguiente CSS personalizado al cuadro Elemento principal de la Columna 2:
|
01
02
|
transform: scale(1.3);transform-origin: top right; |
Este css agrega un diseño inteligente para escalar (aumentar) el tamaño de todo en la columna 2 (la imagen). La propiedad de origen de transformación le dice a la columna que se escale desde la parte superior derecha de la fila. Esto crea una ligera superposición del texto de la izquierda y la imagen.
Guardar ajustes
Duplica y actualiza tu fila
Ahora, tal como lo hicimos en la sección 3, vamos a duplicar la fila. Después de duplicar la fila, arrastre los 2 módulos de texto y el módulo de botones de la columna izquierda a la derecha. Y arrastre el módulo de imagen de la columna derecha a la izquierda. Ahora todo lo que tenemos que hacer es hacer algunas actualizaciones menores a nuestra fila duplicada y su contenido.
Primero, actualicemos la configuración de la fila con lo siguiente:
En la pestaña Diseño…
Relleno personalizado: 40 px arriba, 0 px a la derecha, 40 px abajo, 0 px a la izquierda
Columna 1 Relleno personalizado: [restaurar a los valores predeterminados; borrar 6% superior]
Columna 2 Relleno personalizado: 6% superior
En la pestaña Avanzado…
Borre el CSS personalizado del cuadro de elemento principal de la columna 1 y el cuadro de elemento principal de la columna 2. Esto se transfirió de la duplicación y ya no lo necesitamos.
Actualizar módulo de imagen
A continuación, actualice el módulo de imagen (ahora en la columna izquierda) con lo siguiente:
En la pestaña Contenido…
URL de la imagen: [inserte su nueva imagen de 600 × 400]
En la pestaña Diseño…
Dirección de animación: Izquierda
En la pestaña Avanzado…
Si estabas pensando que esta imagen ya estaba borrosa. ¡piensa otra vez! Todo lo que necesita hacer para agregar este efecto de desenfoque es agregar la siguiente línea de CSS personalizado al cuadro Elemento principal:
|
01
|
filter: blur(5px) opacity(.6); |
Además del efecto de desenfoque, este css también hace que la imagen sea semitransparente con una opacidad del 60%.
Guardar ajustes
Actualizar módulo de texto en la columna derecha
Pasando a la columna de la derecha, actualice el contenido del módulo de texto superior con un encabezado h1 más corto:
|
01
|
<h1>Consectetur adipiscing elit</h1> |
Guardar ajustes
¡Y voilá! Hemos terminado con la sección 4. Veamos nuestro resultado final.
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_2.zip en nuestra carpeta de descargas. Descomprímalo para revelar las siguientes importaciones.
Efectos de animación Parte 2 (sección 1).json
Efectos de animación Parte 2 (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
Además de darme un poco de hambre de carbohidratos, esta sección muestra formas creativas de mostrar y animar imágenes. Además, los módulos de texto que se despliegan sobre una bisagra con el deslizamiento del botón retrasado invitan aún más al usuario a hacer clic en el CTA.
Subiendo
En la parte 3 de esta serie, les mostraré una hermosa manera de diseñar y animar módulos publicitarios. Este diseño de sección se puede utilizar para una variedad de propósitos. Puedo ver que esta es una forma de mostrar el proceso de su servicio o una lista de sus servicios o productos.
Estoy deseando que llegue.
¡No olvides comunicarte en los comentarios a continuación!