Cómo aplicar animaciones en colisión a elementos de diseño con Divi

Agregar animaciones a los elementos de diseño en su página definitivamente puede ayudarlo a aumentar el compromiso. Hay muchas opciones de animación disponibles en Visual Builder de Divi y son bastante sencillas de usar. Pero también puedes ser creativo con estas animaciones y usarlas de una manera única. En esta publicación, manejaremos tres ejemplos de animaciones en colisión que recrearemos paso a paso, usando solo las opciones integradas de Divi.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los tres ejemplos que recrearemos en este tutorial.

Ejemplo n. ° 1: colisión de texto

Ejemplo n. ° 2: colisión de divisores

Ejemplo n. ° 3: cuadrícula en colisión

Flotar

Suscríbete a nuestro canal de Youtube

Recrear el ejemplo n. ° 1: colisión de texto

Agregar sección de especialidad

Estructura

¡Comencemos con el primer ejemplo! Abra una página nueva o existente y agregue una nueva sección de especialidad usando la siguiente estructura:

Dimensionamiento

Sin agregar ningún módulo o fila, abra la configuración de la sección y habilite la opción 'Hacer esta sección de ancho completo' en la configuración de tamaño.

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una fila a la sección de especialidad:

Dimensionamiento

Abra la configuración de la fila y realice algunos cambios en la configuración de tamaño.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Cambie también los valores de relleno personalizados en la configuración de espaciado.

• Acolchado superior: 44px
• Acolchado inferior: 0px

Agregar módulo de texto a la columna 1

Agregar contenido

Continúe agregando un módulo de texto a la primera columna de la fila y agregue algo de contenido.

Configuración del texto del encabezado

A continuación, cambie la configuración del texto del título.

• Fuente de encabezado: Montserrat
• Peso de la fuente del encabezado: Ligero
• Tamaño del texto del encabezado: 4.4vw (escritorio), 8.2vw (tableta), 40px (teléfono)
• Altura de la línea de rumbo: 0.7em

Agregar módulo divisor a la columna 1

Visibilidad

El segundo módulo necesario en la columna 1 es un módulo divisor. Asegúrese de que aparezca el divisor habilitando la opción 'Mostrar divisor'.

• Mostrar divisor: Sí

Color

Vaya a la pestaña de diseño y cambie el color del divisor.

• Color: # 000000

Dimensionamiento

Reduzca también el ancho del divisor.

• Ancho: 91%

Espaciado

Y agregue un margen superior para crear espacio entre el módulo divisor y el módulo de texto.

• Margen superior: 30 px

Animación

Por último, agregue una animación sutil al módulo divisor.

• Estilo de animación: diapositiva
• Dirección de animación: izquierda

Agregar módulo de texto a la columna 2

Agregar contenido

Pase a la segunda columna y agregue el segundo módulo de texto con algún contenido de su elección.

Configuración del texto del encabezado

A continuación, cambie la configuración del texto del título.

• Fuente de encabezado: Montserrat
• Peso de la fuente del encabezado: Ligero
• Color del texto del encabezado: # 3f46ff
• Tamaño del texto del encabezado: 3.8vw (escritorio), 6.5vw (tableta), 40px (teléfono)
• Altura de la línea de rumbo: 0.8em

Animación

Y agregue una animación a este módulo también.

• Estilo de animación: diapositiva
• Dirección de animación: izquierda
• Retraso de animación: 600 ms
• Intensidad de animación: 10%

Agregar fila n. ° 2

Estructura de la columna

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

Agregar módulos restantes

Agregue los otros módulos que desea que aparezcan en esta nueva fila y modifíquelos según sus necesidades.

Recrear el ejemplo n. ° 2: colisión de divisores

Agregar sección de especialidad

Estructura

¡Pasemos al siguiente ejemplo! Agregue una nueva sección de especialidad usando la siguiente estructura:

Dimensionamiento

Sin agregar filas o módulos, abra la configuración de la sección y habilite la opción 'Hacer esta sección de ancho completo'.

• Hacer esta sección de ancho completo: Sí

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Espaciado

Abra la configuración de la fila y modifique la configuración del relleno personalizado.

• Acolchado superior: 44px
• Acolchado inferior: 0px

Agregar módulo de texto

Agregar contenido

A continuación, agregue un módulo de texto a la fila con algún contenido de su elección.

Configuración del texto del encabezado

Vaya a la pestaña de diseño y cambie la configuración del texto del encabezado.

• Fuente de encabezado: Montserrat
• Peso de la fuente del encabezado: Ligero
• Tamaño del texto del encabezado: 70 px (escritorio), 50 px (tableta), 40 px (teléfono)
• Altura de la línea de rumbo: 0.8em

Agregar fila n. ° 2

Estructura de la columna

Continúe agregando otra fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 53% (escritorio), 100% (tableta y teléfono)

Espaciado

Cambie también los valores de relleno personalizados.

• Relleno superior: 50px
• Acolchado inferior: 0px

Agregar módulo divisor a la columna 1

Visibilidad

Una vez que haya terminado de modificar la configuración de la fila, continúe y agregue un módulo divisor a la primera columna y asegúrese de que aparezca el divisor habilitando la opción 'Mostrar divisor'.

• Mostrar divisor: Sí

Color

A continuación, cambie el color del divisor.

• Color del divisor: # 3f46ff

Estilos

Y cambie el estilo del divisor en la configuración de estilos.

• Estilo del divisor: doble

Dimensionamiento

Aumente también el peso del divisor en la configuración de tamaño.

• Peso del divisor: 8px

Animación

Por último, agregue una animación al módulo divisor.

• Estilo de animación: diapositiva
• Dirección de animación: Derecha

Clonar el módulo divisor y colocarlo en la columna 2

Una vez que haya terminado de modificar la configuración del módulo divisor, continúe y clone el módulo. Coloque el duplicado en la segunda columna de la fila.

Cambiar animación

Para crear un efecto de colisión, cambie la dirección de la animación del módulo divisor duplicado.

• Estilo de animación: diapositiva
• Dirección de animación: izquierda

Agregar fila n. ° 3

Estructura de la columna

Continúe agregando otra fila usando la siguiente estructura de columnas:

Agregar módulos restantes

Y agregue tantos módulos como desee para terminar el diseño de la sección.

Recrear el ejemplo n. ° 3: cuadrícula de colisión

Agregar nueva sección

Espaciado

¡Pasemos al siguiente y último ejemplo! Agregue una sección regular y abra la configuración. Vaya a la configuración de espaciado y agregue algunos valores de relleno personalizados:

• Relleno superior: 300 px
• Acolchado inferior: 200px

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Agregar módulo de imagen a la columna

Subir superposición de imagen con forma

Guarde la siguiente superposición de imágenes con forma en su escritorio haciendo clic con el botón derecho:

Una vez que haya guardado la superposición de la imagen con forma, vuelva a su sitio web Divi y agregue un Módulo de imagen a la fila. Sube el archivo de superposición de imágenes con forma que puedes encontrar en tu carpeta de descargas.

Fondo degradado

A continuación, agregue un fondo degradado al módulo.

• Color 1: # aa2bff
• Color 2: # 09f7eb

Alineación

Cambie también la alineación de la imagen.

• Alineación de la imagen: centro

Dimensionamiento

Y habilite la opción 'Forzar ancho completo' en la configuración de tamaño.

• Forzar ancho completo: Sí

Espaciado

Agregue un margen personalizado al módulo también.

• Margen izquierdo: 200px
• Margen derecho: 200px

Animación

Por último, agregue una animación al módulo.

• Estilo de animación: Zoom
• Dirección de animación: Centro
• Duración de la animación: 3000ms
• Intensidad de animación: 100%

Agregar fila n. ° 2

Estructura de la columna

A la segunda fila. Utilice la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y realice algunos cambios en la configuración de tamaño.

• Usar ancho personalizado: Sí
• Unidad: PX
• Ancho personalizado: 944px
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Agregar módulo Blurb a la columna 1

Agregar contenido

Continúe agregando un módulo Blurb a la primera columna. Ingrese algún contenido de su elección.

Icono

Seleccione un icono a continuación.

Color de fondo

Y agregue un color de fondo al módulo también.

• Color de fondo: rgba (255,255,255,0.83)

Configuración de iconos

Vaya a la pestaña de diseño y cambie la configuración del icono.

• Color del icono: # 000000
• Ubicación del icono: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 73px

Configuración del texto del título

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

• Fuente del título: Open Sans
• Peso de la fuente del título: Semi negrita
• Alineación del texto del título: centro
• Tamaño del texto del título: 15px
• Espaciado de letras de título: -1px
• Altura de la línea de título: 1.8em

Dimensionamiento

Y disminuya el ancho del contenido en la configuración de tamaño.

• Ancho del contenido: 183px

Espaciado

También agregaremos algunos acolchados superior e inferior personalizados.

• Relleno superior: 50px
• Acolchado inferior: 50px

Sombra de la caja

Continúe dando al módulo Blurb una sutil sombra de cuadro.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.3)

Transiciones

Y aumente la duración de la transición en la pestaña avanzada.

• Duración de la transición: 600 ms

Clone el módulo Blurb 8 veces y coloque 3 duplicados en cada columna restante

Ahora, una vez que haya terminado de modificar el primer módulo Blurb, puede continuar y clonarlo 8 veces. Coloque tres duplicados en la segunda columna y tres en la tercera. En la siguiente parte de este tutorial, realizaremos cambios únicos en cada uno de los módulos de Blurb. Para hacer eso, seguiremos la siguiente numeración:

Modificar módulo Blurb # 1

Espaciado

Abra el primer módulo Blurb y agregue un margen superior negativo.

• Margen superior: -340px (escritorio), 0px (tableta y teléfono)

Espaciado de desplazamiento

Cambie los valores de los márgenes al pasar el mouse.

• Margen superior: -380px
• Margen inferior: 40px
• Margen izquierdo: -40px
• Margen derecho: 40px

Esquinas redondeadas

Continúe agregando '30px' en la esquina superior izquierda del módulo.

Animación

Y agrega una animación.

• Estilo de animación: diapositiva
• Dirección de animación: izquierda
• Retraso de animación: 200 ms

Modificar módulo Blurb n. ° 2

Color de fondo

Abra el segundo módulo Blurb y cambie el color de fondo.

• Color de fondo: rgba (255,255,255,0.93)

Espaciado

Continúe agregando un margen superior negativo al módulo.

• Margen superior: -340px (escritorio), 0px (tableta y teléfono)

Espaciado de desplazamiento

Cambie estos valores de margen al pasar el mouse.

• Margen superior: -380px
• Margen inferior: 40px

Animación

Y agregue una animación al módulo.

• Estilo de animación: diapositiva
• Dirección de animación: izquierda
• Retraso de animación: 400 ms

Modificar el módulo Blurb n. ° 3

Espaciado

Vamos al tercer módulo Blurb. Agregue un margen superior negativo.

• Margen superior: -340px (escritorio), 0px (tableta y teléfono)

Espaciado de desplazamiento

Modifique los valores de los márgenes al pasar el mouse.

• Margen superior: -380px
• Margen inferior: 40px
• Margen izquierdo: 40px
• Margen derecho: -40px

Esquinas redondeadas

Agregue '30px' a la esquina superior derecha del módulo también.

Animación

Y agrega una animación.

• Estilo de animación: diapositiva
• Dirección de animación: izquierda
• Retraso de animación: 600 ms

Modificar el módulo de propaganda n. ° 4

Color de fondo

Pasemos al cuarto módulo. Abra la configuración y cambie el color de fondo.

• Color de fondo: rgba (255,255,255,0.93)

Espaciado de desplazamiento

Agregue algunos valores de margen de desplazamiento a continuación.

• Margen izquierdo: -40px
• Margen derecho: 40px

Animación

Y agregue una animación también.

• Estilo de animación: Fade
• Retraso de animación: 800ms

Modificar el módulo de propaganda n. ° 5

Animación

Pasemos al quinto módulo. Lo único que deberá hacer aquí es agregar una animación.

• Estilo de animación: Fade
• Retraso de animación: 1000 ms

Modificar el módulo de propaganda n. ° 6

Color de fondo

Continúe abriendo el sexto módulo y cambie el color de fondo.

• Color de fondo: rgba (255,255,255,0.93)

Espaciado de desplazamiento

Cambie también los valores de espaciado al pasar el mouse.

• Margen izquierdo: 40px
• Margen derecho: -40px

Animación

Y agrega una animación.

• Estilo de animación: Fade
• Retraso de animación: 1200ms

Modificar el módulo Blurb n. ° 7

Espaciado de desplazamiento

Pasemos al séptimo módulo. Agregue algunos valores de margen de desplazamiento a la configuración de espaciado.

• Margen superior: 40px
• Margen izquierdo: -40px
• Margen derecho: 40px

Esquinas redondeadas

Continúe agregando '30px' de radio de borde en la esquina inferior izquierda del módulo.

Animación

Y agrega una animación.

• Estilo de animación: diapositiva
• Dirección de animación: Derecha
• Retraso de animación: 1400ms

Modificar el módulo Blurb n. ° 8

Color de fondo

Continúe abriendo el octavo módulo y cambie el color de fondo.

• Color de fondo: rgba (255,255,255,0.93)

Espaciado de desplazamiento

Agregue un margen personalizado al pasar el mouse al módulo siguiente.

• Margen superior: 40px

Animación

Agregue una animación a este módulo Blurb también.

• Estilo de animación: diapositiva
• Dirección de animación: Derecha
• Retraso de animación: 1600ms

Modificar el módulo de Blurb n. ° 9

Espaciado de desplazamiento

¡Vamos al noveno y último módulo! Vaya a la configuración de espaciado y agregue algunos valores de margen de desplazamiento personalizados.

• Margen superior: 40px
• Margen izquierdo: 40px
• Margen derecho: -40px

Esquinas redondeadas

Agregue también '30px' de radio del borde en la esquina inferior derecha.

Animación

Y agrega una animación.

• Estilo de animación: diapositiva
• Dirección de animación: Derecha
• Retraso de animación: 1800 ms

Agregar margen inferior negativo al módulo de imagen en la fila n. ° 1

Ahora, para colisionar el círculo que hemos creado en la primera parte de este ejemplo y la cuadrícula, vamos a darle al Módulo de Imagen (que contiene la superposición de la imagen con forma) un margen inferior negativo.

• Margen inferior: -520px

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado que hemos logrado.

Ejemplo n. ° 1: colisión de divisores

Ejemplo n. ° 2: colisión de texto

Ejemplo n. ° 3: cuadrícula en colisión

Flotar

Pensamientos finales

Agregar animaciones a sus páginas puede ayudar a crear más interacción entre sus visitantes y usted. Por supuesto, puede usar la configuración de animación que tiene dentro del Visual Builder, pero también puede ir un paso más allá aplicando animaciones en colisión a elementos de diseño que lo ayudarán a lograr resultados sorprendentes. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!