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

animaciones colisionando

Ejemplo n. ° 2: colisión de divisores

animaciones colisionando

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

animaciones colisionando

Flotar

animaciones colisionando

(incrustar) https://www.youtube.com/watch?v=ioGLCuo1n5M (/ incrustar)

Suscríbete a nuestro canal de Youtube

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

animaciones colisionando

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:

animaciones colisionando

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.

animaciones que chocan

Agregar fila n. ° 1

Estructura de columna

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

animaciones colisionando

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 del canal: 1

animaciones colisionando

Espaciado

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

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

animaciones colisionando

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.

animaciones que chocan

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

animaciones colisionando

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í

animaciones colisionando

Color

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

  • Color: # 000000

animaciones colisionando

Dimensionamiento

Reduzca también el ancho del divisor.

  • Ancho: 91%

animaciones colisionando

Espaciado

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

  • Margen superior: 30 px

animaciones que chocan

Animación

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

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

animaciones colisionando

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.

animaciones colisionando

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

animaciones colisionando

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%

animaciones colisionando

Agregar fila n. ° 2

Estructura de columna

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

animaciones que chocan

Agregar módulos restantes

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

animaciones colisionando

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

animaciones colisionando

Agregar sección de especialidad

Estructura

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

animaciones colisionando

Dimensionamiento

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

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

animaciones colisionando

Agregar fila n. ° 1

Estructura de columna

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

animaciones colisionando

Espaciado

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

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

animaciones colisionando

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.

animaciones colisionando

Configuración del texto del encabezado

Vaya a la pestaña de diseño y 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: 70 px (escritorio), 50 px (tableta), 40 px (teléfono)
  • Altura de la línea de rumbo: 0.8em

animaciones colisionando

Agregar fila n. ° 2

Estructura de columna

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

animaciones colisionando

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 del canal: 1
  • Ancho: 53% (escritorio), 100% (tableta y teléfono)

animaciones que chocan

Espaciado

Cambie también los valores de relleno personalizados.

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

animaciones que chocan

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í

animaciones colisionando

Color

A continuación, cambie el color del divisor.

  • Color del divisor: # 3f46ff

animaciones colisionando

Estilos

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

  • Estilo divisor: doble

animaciones que chocan

Dimensionamiento

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

  • Peso del divisor: 8px

animaciones que chocan

Animación

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

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

animaciones colisionando

Clonar módulo divisor y colocarlo en la columna 2

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

animaciones colisionando

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

animaciones que chocan

Agregar fila n. ° 3

Estructura de columna

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

animaciones colisionando

Agregar módulos restantes

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

animaciones colisionando

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

animaciones colisionando

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: 300px
  • Acolchado inferior: 200px

animaciones colisionando

Agregar fila n. ° 1

Estructura de columna

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

animaciones que chocan

Agregar módulo de imagen a la columna

Subir superposición de imagen con forma

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

animaciones que chocan

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.

animaciones colisionando

Fondo degradado

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

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

animaciones colisionando

Alineación

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

  • Alineación de imagen: centro

animaciones colisionando

Dimensionamiento

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

  • Forzar ancho completo: Sí

animaciones colisionando

Espaciado

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

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

animaciones colisionando

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%

animaciones colisionando

Agregar fila n. ° 2

Estructura de columna

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

animaciones que chocan

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 del canal: 1

animaciones colisionando

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.

animaciones colisionando

Icono

Seleccione un icono a continuación.

animaciones colisionando

Color de fondo

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

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

animaciones colisionando

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

animaciones colisionando

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

animaciones colisionando

Dimensionamiento

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

  • Ancho del contenido: 183px

animaciones colisionando

Espaciado

También agregaremos algunos acolchados superior e inferior personalizados.

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

animaciones colisionando

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)

animaciones colisionando

Transiciones

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

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

animaciones colisionando

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 de 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, haremos cambios únicos en cada uno de los módulos de Blurb. Para hacer eso, seguiremos la siguiente numeración:

animaciones que chocan

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)

animaciones colisionando

Espaciado de desplazamiento

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

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

animaciones que chocan

Esquinas redondeadas

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

animaciones colisionando

Animación

Y agrega una animación.

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

animaciones que chocan

Modificar el módulo Blurb # 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)

animaciones colisionando

Espaciado

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

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

animaciones que chocan

Espaciado de desplazamiento

Cambie estos valores de margen al pasar el mouse.

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

animaciones colisionando

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: 400ms

animaciones que chocan

Modificar 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)

animaciones colisionando

Espaciado de desplazamiento

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

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

animaciones colisionando

Esquinas redondeadas

Añada también "30px" en la esquina superior derecha del módulo.

animaciones colisionando

Animación

Y agrega una animación.

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

animaciones que chocan

Modificar módulo Blurb # 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)

animaciones colisionando

Espaciado de desplazamiento

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

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

animaciones que chocan

Animación

Y agrega una animación también.

  • Estilo de animación: Fundido
  • Retardo de animación: 800ms

animaciones colisionando

Modificar módulo de propaganda n. ° 5

Animación

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

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

animaciones que chocan

Modificar el módulo Blurb 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)

animaciones colisionando

Espaciado de desplazamiento

También cambie los valores de espaciado al pasar el mouse.

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

animaciones colisionando

Animación

Y agrega una animación.

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

animaciones colisionando

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: 40 px
  • Margen izquierdo: -40px
  • Margen derecho: 40px

animaciones colisionando

Esquinas redondeadas

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

animaciones colisionando

Animación

Y agrega una animación.

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

animaciones colisionando

Modificar módulo Blurb # 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)

animaciones colisionando

Espaciado de desplazamiento

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

  • Margen superior: 40 px

animaciones colisionando

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: 1600 ms

animaciones colisionando

Modificar el módulo 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: 40 px
  • Margen izquierdo: 40px
  • Margen derecho: -40px

animaciones que chocan

Esquinas redondeadas

Añada también "30 píxeles" de radio del borde en la esquina inferior derecha.

animaciones colisionando

Animación

Y agrega una animación.

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

animaciones que chocan

Agregue un 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, le daremos al Módulo de Imagen (que contiene la superposición de la imagen con forma) un margen inferior negativo.

  • Margen inferior: -520px

animaciones colisionando

Avance

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

Ejemplo n. ° 1: colisión de divisores

animaciones colisionando

Ejemplo 2: colisión de texto

animaciones colisionando

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

animaciones colisionando

Flotar

animaciones colisionando

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!