Cómo crear animaciones superpuestas en retraso 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 lo bien diseñado que está su sitio web. Porque seamos realistas, los sitios web suelen ser las primeras impresiones. Y como 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 orden vertical, sin la superposición
A medida que agreguemos todos los elementos de diseño, también agregaremos animaciones personalizadas con cierto retraso de animación.
Estos retrasos en la animación solo tendrán sentido una vez que haya completado la última parte del tutorial que se enfoca 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» con retraso
Puede aplicar esta técnica a cualquier tipo de diseño en el que esté trabajando una vez que comprenda los diferentes pasos necesarios para que el enfoque funcione.

¡Comencemos a crear!

Agregar nueva sección

Color de fondo

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

Color de fondo: #f3f3ec

Añadir Fila #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 utilizando una unidad de ventana gráfica.

Hacer esta fila de ancho completo: Sí
Usar ancho de canalón personalizado: Sí
Ancho del canalón: 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 fácil de recordar.

Configuración de texto H2

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

Título 2 Fuente: Poppins
Título 2 Color del texto: #333333
Título 2 Tamaño del texto: 5vw

Espaciado

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

Acolchado izquierdo: 15vw
Acolchado Derecho: 39vw

Agregar módulo divisor a columna

Visibilidad

Pasamos 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 se note), suficiente relleno (para asegurarse de que puede superponer todo el contenido del módulo anterior), una superposición vertical (para cubrir todo el módulo área), y un retraso de animación (para dar tiempo al primer módulo para tener su brillo antes de tomar el relevo). Una vez que agregue el módulo divisor, asegúrese de desactivar la opción ‘Mostrar divisor’.

Mostrar divisor: No