Cómo crear animaciones superpuestas en retardo con Divi

Una gran parte del éxito de su sitio web depende de si puede o no impresionar a sus visitantes. No solo con sus productos o servicios, sino también con la forma en que se comunica y qué tan bien diseñado está su sitio web. Porque seamos sinceros, los sitios web suelen ser la primera impresión. Y al igual que cualquier otro tipo de primera impresión, quieres que deje un buen regusto.

Ahora, si está buscando una forma única de poner parte de su contenido en el centro de atención, crear animaciones superpuestas sutiles podría ser justo lo que está buscando. Estas sutiles animaciones superpuestas son como una presentación de diapositivas para sus visitantes. No tienen que desplazarse ni hacer clic en nada, el contenido simplemente se muestra de una manera elegante.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Acercarse

• Comenzaremos agregando todos los elementos de diseño que necesitamos en un orden vertical, sin la superposición
• A medida que agreguemos todos los elementos de diseño, también agregaremos animaciones personalizadas con un cierto retraso de animación.
• Estos retrasos en la animación solo tendrán sentido una vez que haya pasado por la última parte del tutorial que se centra en las superposiciones
• Una parte importante de este tutorial es usar módulos divisores con forma con el mismo color de fondo que la sección para hacer que el contenido de la fila 'desaparezca' en el retraso
• Puede aplicar esta técnica a cualquier tipo de diseño en el que esté trabajando una vez que comprenda los diferentes pasos que son necesarios para que el enfoque funcione.

¡Empecemos a crear!

Agregar nueva sección

Color de fondo

Comience creando una nueva página o abriendo una existente y agregue una sección regular. Abra la configuración de la sección y agregue un fondo.

• Color de fondo: # f3f3ec

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila a su sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla. La razón por la que estamos haciendo esto es para deshacernos de todo el espaciado de píxeles predeterminado. En los próximos pasos, agregaremos todo el espacio que necesitamos usando una unidad de ventana gráfica.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Agregar módulo de texto a la columna

Agregar contenido H2

¡Comencemos a agregar módulos! El primer módulo que necesitamos es un módulo de texto con algo de contenido H2. Recuerde que este módulo 'desaparecerá' después de unos segundos, por lo que desea que sea breve, relevante y memorable.

Configuración de texto H2

Luego, vaya a la pestaña de diseño y modifique la configuración del texto H2.

• Fuente del título 2: Poppins
• Color del texto del encabezado 2: # 333333
• Encabezado 2 Tamaño del texto: 5vw

Espaciado

Cree el espacio que desee usando un poco de relleno izquierdo y derecho en la configuración de espaciado.

• Acolchado izquierdo: 15vw
• Acolchado derecho: 39vw

Agregar módulo divisor a la columna

Visibilidad

Pasemos al siguiente módulo, que es un módulo divisor. Estamos usando este módulo para hacer que el módulo de texto 'desaparezca'. Hay cuatro cosas que necesitaremos para eso; un color de fondo (que sea del mismo color que la sección para que no pueda notarlo), suficiente relleno (para asegurarse de que pueda superponer todo el contenido del módulo anterior), una superposición vertical (para cubrir todo el módulo área) y un retraso de la animación (para que el primer módulo tenga tiempo de brillar antes de asumir el control). Una vez que agregue el módulo divisor, asegúrese de deshabilitar la opción 'Mostrar divisor'.

• Mostrar divisor: No

Color de fondo

Luego, vaya a la configuración de fondo y agregue un color de fondo. Asegúrate de usar el mismo color de fondo que usaste para la sección para crear un efecto suave.

• Color de fondo: # f3f3ec

Espaciado

Continúe dando al módulo divisor un tamaño más grande agregando algo de relleno superior e inferior en la configuración de espaciado.

• Acolchado superior: 9vw
• Acolchado inferior: 9vw

Animación

Y complete la configuración del divisor agregando una animación retrasada.

• Estilo de animación: diapositiva
• Dirección de animación: Arriba
• Duración de la animación: 1200ms
• Retraso de animación: 1500 ms
• Intensidad de animación: 50%
• Opacidad inicial de la animación: 50%

Agregar fila n. ° 2

Estructura de la columna

¡A la segunda fila! Seleccione la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Luego, agregue algo de relleno al lado izquierdo y derecho de la fila en la configuración de espaciado.

• Acolchado izquierdo: 10vw (escritorio), 2vw (tableta y teléfono)
• Relleno derecho: 10vw (escritorio), 2vw (tableta y teléfono)

Monitor

También nos aseguramos de que las columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños agregando una sola línea de código CSS al elemento principal de la fila.

display: flex;

Agregar módulo Blurb a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo Blurb a la columna 1 e ingrese algún contenido de su elección.

Seleccionar icono

Continúe seleccionando un icono de su elección.

Configuración de iconos

A continuación, modifique la apariencia de su icono.

• Color del icono: # dbd6bd
• Icono de círculo: Sí
• Icono de círculo: #ffffff
• Ubicación de la imagen / icono: parte superior
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 2.5vw (escritorio), 1.7vw (tableta), 1.9vw (teléfono)

Configuración del texto del título

Cambie también la configuración del texto del título.

• Fuente del título: Source Serif Pro
• Alineación del texto del título: centro
• Tamaño del texto del título: 1.7vw (escritorio), 2.1vw (tableta), 2.5vw (teléfono)
• Altura de la línea de título: 1.9em

Configuración del texto del cuerpo

Junto con la configuración del texto del cuerpo.

• Fuente del cuerpo: Open Sans
• Alineación del texto del cuerpo: centro
• Tamaño del texto del cuerpo: 0.8vw (escritorio), 1.2vw (tableta), 1.6vw (teléfono)
• Altura de la línea del cuerpo: 2.5em

Dimensionamiento

Estamos reduciendo ligeramente el tamaño del módulo para asegurarnos de que haya suficiente espacio entre este módulo y los módulos que agregaremos a la segunda y tercera columnas.

• Anchura: 91,7%
• Alineación del módulo: centro

Espaciado

También agregaremos algo de espacio adicional al módulo usando valores de relleno personalizados.

• Acolchado superior: 2vw
• Acolchado inferior: 2vw
• Acolchado izquierdo: 1vw
• Acolchado derecho: 1vw

Frontera

Luego, vaya a la configuración del borde y agregue un borde sutil para definir el módulo.

• Ancho del borde: 1 px
• Color del borde: # 333333

Animación

Complete el diseño del módulo Blurb agregando una animación retrasada. Como puede observar, cuantos más elementos de diseño agreguemos, mayor será el retraso de la animación.

• Estilo de animación: diapositiva
• Repetición de animación: una vez
• Dirección de animación: Arriba
• Duración de la animación: 1000ms
• Retraso de animación: 2000 ms
• Intensidad de la animación: 16%
• Opacidad inicial de la animación: 0%

Clone el módulo de Blurb dos veces y coloque los duplicados en las columnas restantes

Una vez que haya completado el diseño del módulo Blurb, puede continuar y clonarlo dos veces. Coloque los duplicados en las dos columnas restantes de la fila.

Cambiar la animación del duplicado n. ° 1

Cambia el retraso de la animación del primer duplicado.

• Retraso de animación: 2200ms

Cambiar animación de duplicado n. ° 2

Luego, abra el segundo duplicado y cambie el retraso de la animación allí también.

• Retraso de animación: 2400ms

Agregar módulo divisor a la columna 3

Visibilidad

El siguiente y último módulo que necesitamos en esta fila es un módulo divisor. Nuevamente, estamos usando este módulo para crear la superposición retardada que ayudará a que los módulos de Blurb 'desaparezcan'. Una vez que haya agregado el módulo divisor a la columna 3, asegúrese de que la opción 'Mostrar divisor' esté desactivada.

• Mostrar divisor: No

Color de fondo

Continúe agregando un color de fondo al divisor. Asegúrate de usar el mismo color que usaste para el fondo de la sección.

• Color de fondo: # f3f3ec

Espaciado

Luego, iremos a la configuración de espaciado y aumentaremos el tamaño del módulo divisor para que, más adelante en esta publicación, pueda superponerse a los tres módulos de Blurb.

• Margen izquierdo: -60vw (escritorio), -64vw (tableta y teléfono)
• Acolchado superior: 17vw (escritorio), 27vw (tableta), 30vw (teléfono)
• Acolchado inferior: 17vw (escritorio), 27vw (tableta), 34vw (teléfono)

Animación

Por último, pero no menos importante, agregue una animación retrasada.

• Estilo de animación: diapositiva
• Repetición de animación: una vez
• Dirección de animación: Derecha
• Duración de la animación: 650ms
• Retraso de animación: 4500ms
• Intensidad de animación: 24%
• Opacidad inicial de la animación: 0%

Clonar fila n. ° 2

Una vez que haya completado la segunda fila y todos sus módulos, puede continuar y clonarlo.

Quitar el módulo divisor en la fila nueva

Retire el módulo divisor en la fila duplicada.

Cambiar el retardo de animación del módulo Blurb n. ° 1

Luego, abra el primer módulo Blurb y cambie el retraso de la animación.

• Retraso de animación: 5200ms

Cambiar el retardo de animación del módulo Blurb n. ° 2

Haga lo mismo con el módulo Blurb en la columna 2.

• Retraso de animación: 5400ms

Cambiar el retardo de animación del módulo Blurb n. ° 3

Y modifique también el retraso de la animación para el módulo Blurb en la columna 3.

• Retraso de animación: 5600ms

Agregar superposiciones

Agregar superposición al módulo divisor n. ° 1

Ahora que tenemos todos los elementos de diseño que necesitamos, ¡podemos empezar a crear superposiciones! Estas superposiciones darán significado a los retrasos de animación que hemos agregado a lo largo del tutorial. Comience con el módulo divisor en la primera fila que ha creado.

• Margen superior: -15vw

Agregar superposición a la fila n. ° 2

Luego, abra la segunda fila y agregue un margen superior negativo.

• Margen superior: -10vw

Agregar superposición a los módulos de Blurb en la fila n. ° 2

Abra cada uno de los módulos de Blurb en la segunda fila y agrégueles algunos valores de margen personalizados.

• Margen superior: -10vw
• Margen inferior: 7vw

Agregar superposición al módulo divisor n. ° 2

Continúe con el Módulo divisor que puede encontrar en la tercera columna de la segunda fila y cree la superposición.

• Margen superior: -35vw (escritorio), -47vw (tableta), -72vw (teléfono)

Agregar superposición a la fila n. ° 3

Continúe abriendo la configuración de la tercera fila y agregue un margen superior negativo.

• Margen superior: -10vw

Agregar superposición a los módulos de Blurb en la fila n. ° 3

Por último, pero no menos importante, agregue algunos valores de margen personalizados a cada uno de los módulos de Blurb en la tercera fila. Una vez que salga de Visual Builder, podrá ver la animación en tiempo real.

• Margen superior: -22vw (escritorio), -46vw (tableta), -70vw (teléfono)
• Margen inferior: 7vw

Pensamientos finales

En esta publicación, le mostramos cómo crear animaciones superpuestas sutiles. Esta es una excelente manera de guiar a los visitantes a través del contenido que está compartiendo y darle a su sitio web una apariencia mejorada. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!