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

Avance

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

Ejemplo n.º 1: texto en conflicto

Ejemplo #2: Divisores que chocan

Ejemplo #3: cuadrícula en colisión

Flotar

Suscríbete a nuestro canal de Youtube

Vuelva a crear el ejemplo n.º 1: Texto en conflicto

Agregar sección de especialidad

Estructura

¡Empecemos 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.

Añadir Fila #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 del canalón: 1

Espaciado

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

• Relleno superior: 44px
• Relleno 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.

Ajustes de texto de encabezado

Cambie la configuración del texto del encabezado a continuación.

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

Agregue el 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

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

• Color: #000000

Dimensionamiento

Disminuya el ancho del divisor también.

• Ancho: 91%

Espaciado

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

• Margen superior: 30px

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.

Ajustes de texto de encabezado

Cambie la configuración del texto del encabezado a continuación.

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

Animación

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

• Estilo de animación: Diapositiva
• Dirección de animación: Izquierda
• Retardo de animación: 600ms
• Intensidad de animación: 10%

Añadir Fila #2

Estructura de la columna

Continúe agregando otra fila a la sección utilizando 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.

Vuelva a crear el ejemplo n.º 2: divisores en colisión

Agregar sección de especialidad

Estructura

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

Dimensionamiento

Sin agregar ninguna fila o módulo, 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í

Añadir Fila #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.

• Relleno superior: 44px
• Relleno 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.

Ajustes de texto de encabezado

Pase a la pestaña de diseño y cambie la configuración del texto del título.

• Fuente del encabezado: Montserrat
• Peso de la fuente del título: ligero
• Tamaño del texto del encabezado: 70 px (escritorio), 50 px (tableta), 40 px (teléfono)
• Altura de la línea de encabezado: 0,8 em

Añadir Fila #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 del canalón: 1
• Ancho: 53 % (escritorio), 100 % (tableta y teléfono)

Espaciado

Cambie también los valores de relleno personalizados.

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

Agregue el 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 el divisor aparezca habilitando la opción ‘Mostrar divisor’.

• Mostrar divisor: Sí

Color

Cambia el color del divisor a continuación.

• Color del divisor: #3f46ff

Estilos

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

• Estilo divisor: Doble

Dimensionamiento

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

• 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

Módulo divisor de clones y lugar 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

Añadir Fila #3

Estructura de la columna

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

Agregar módulos restantes

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

Vuelva a crear el ejemplo n.° 3: Cuadrícula en colisión

Agregar nueva sección

Espaciado

¡Vamos 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
• Relleno inferior: 200px

Añadir Fila #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 imagen con forma en su escritorio haciendo clic derecho:

Una vez que haya guardado la superposición de imagen con forma, regrese a su sitio web Divi y agregue un módulo de imagen a la fila. Cargue el archivo de superposición de imagen con forma que puede encontrar en su carpeta de descarga.

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 imagen: Centro

Dimensionamiento

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

• Forzar ancho completo: Sí

Espaciado

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

• 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%

Añadir Fila #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 la 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ón: 1

Agregue el módulo Blurb a la columna 1

Agregar contenido

Continúe agregando un módulo de Blurb a la primera columna. Introduzca 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

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

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

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 entre letras del título: -1px
• Altura de la línea del título: 1,8 em

Dimensionamiento

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

• Ancho del contenido: 183px

Espaciado

También agregaremos un relleno superior e inferior personalizado.

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

Sombra de la caja

Continúe dándole al módulo de Blurb una sutil sombra de cuadro.

• Fuerza de desenfoque de sombra de cuadro: 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: 600ms

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

Modifique el Módulo Blurb #1

Espaciado

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

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

Espaciado de desplazamiento

Cambie los valores de margen 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
• Retardo de animación: 200ms

Modifique el módulo Blurb #2

Color de fondo

Abra el segundo módulo de 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: -340 px (escritorio), 0 px (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
• Retardo de animación: 400ms

Modifique el Módulo Blurb #3

Espaciado

En el tercer módulo de Blurb. Agregue un margen superior negativo.

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

Espaciado de desplazamiento

Modifique los valores de margen 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
• Retardo de animación: 600ms

Modifique el Módulo Blurb #4

Color de fondo

En el 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 flotante a continuación.

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

Animación

Y agrega una animación también.

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

Modifique el Módulo Blurb #5

Animación

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

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

Modifique el Módulo Blurb #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 los valores de espaciado al pasar el mouse también.

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

Animación

Y agrega una animación.

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

Modifique el Módulo Blurb #7

Espaciado de desplazamiento

En el séptimo módulo. Agregue algunos valores de margen flotante 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
• Retardo de animación: 1400ms

Modifique el 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)

Espaciado de desplazamiento

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

• Margen superior: 40px

Animación

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

• Estilo de animación: Diapositiva
• Dirección de animación: Derecha
• Retardo de animación: 1600ms

Modifique el Módulo Blurb #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 ’30px’ de radio de borde a la esquina inferior derecha también.

Animación

Y agrega una animación.

• Estilo de animación: Diapositiva
• Dirección de animación: Derecha
• Retardo de animación: 1800ms

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, le daremos al Módulo de imagen (que contiene la superposición de 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 #1: Divisores que chocan

Ejemplo n.º 2: texto en conflicto

Ejemplo #3: cuadrícula en colisión

Flotar

Pensamientos finales

Agregar animaciones a sus páginas puede ayudar a crear una mayor interacción entre sus visitantes y usted. Por supuesto, solo puede usar la configuración de animación que tiene en Visual Builder, pero también puede ir un paso más allá aplicando animaciones en colisión a los 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!