Cómo crear un hermoso contorno animado para cada contenedor con Divi


Las opciones de animación de Divi han ayudado a dar vida a toneladas de sitios web sin la necesidad de un código personalizado. La configuración de animación incorporada es altamente ajustable y le permite crear diseños realmente únicos. Una de las cosas que puede hacer, por ejemplo, es crear un esquema de contenedor animado. Eso es exactamente lo que le mostraremos en esta publicación. Agregaremos un borde a cada contenedor y agregaremos configuraciones de animación que coincidan con el flujo de cada elemento. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

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

Escritorio

esquema animado

Móvil

esquema animado

Descargar The Animated Outline Layout GRATIS

Para poner sus manos en el diseño de esquema animado gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

Suscríbase a nuestro canal de Youtube

Comencemos a recrear

Agregar nueva sección

Color de fondo

Comience agregando una nueva sección regular a la página en la que está trabajando y use un color de fondo blanco.

  • Color de fondo: #FFFFFF

esquema animado

Espaciado

Pase a la pestaña de diseño y agregue algunos márgenes personalizados y valores de relleno.

  • Margen superior: 3vw
  • Margen inferior: 3vw
  • Margen izquierdo: 3vw
  • Margen derecho: 3vw
  • Relleno superior: 3vw
  • Acolchado inferior: 3vw

esquema animado

Frontera

A continuación, abra la configuración del borde y agregue "2vw" a cada una de las esquinas. Use un borde también.

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

esquema animado

Animación

Agregue una animación personalizada también.

  • Estilo de animación: diapositiva
  • Dirección de animación: abajo
  • Opacidad de inicio de animación: 100%

esquema animado

Visibilidad

Para asegurarnos de que nada supera el contenedor de la sección, vamos a ocultar los desbordamientos en la configuración de visibilidad de la sección.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

esquema animado

Agregar nueva fila

Estructura de columna

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

esquema animado

Dimensionamiento

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

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 2
  • Ancho: 94%
  • Ancho Máx .: 100%

esquema animado

Espaciado

Agregue algunos valores de relleno personalizados a continuación.

  • Relleno superior: 3vw
  • Acolchado inferior: 3vw
  • Acolchado izquierdo: 3vw
  • Relleno derecho: 3vw

esquema animado

Frontera

Pase a la configuración del borde y agregue "2vw" a cada una de las esquinas. Agrega un borde también.

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

esquema animado

Animación

También estamos agregando una animación a la fila.

  • Estilo de animación: diapositiva
  • Dirección de animación: arriba
  • Retraso de animación: 500 ms
  • Opacidad de inicio de animación: 100%

esquema animado

Visibilidad

Y para asegurarnos de que la animación de columna (que agregaremos más adelante) funciona, haremos que la fila se desborde visible.

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

esquema animado

Configuración de columna 1

Continúa abriendo la configuración de la primera columna.

esquema animado

Frontera

Vaya a la pestaña de diseño, agregue "2vw" a cada una de las esquinas y use un borde.

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

esquema animado

Animación

Complete la configuración de la columna agregando una animación personalizada.

  • Estilo de animación: diapositiva
  • Dirección de animación: abajo
  • Retraso de animación: 1000 ms
  • Opacidad de inicio de animación: 100%

esquema animado

Agregar módulo de difusión a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! El primero que necesitamos es un módulo Blurb. Ingrese algún contenido de su elección.

esquema animado

Seleccionar icono

Seleccione un icono a continuación.

esquema animado

Configuraciones de iconos

Pase a la pestaña de diseño y cambie la configuración del icono en consecuencia:

  • Color del icono: # 000000
  • Colocación del icono: arriba
  • Usar tamaño de fuente de icono: sí
  • Tamaño de fuente del icono: 6vw (escritorio), 8vw (tableta), 10vw (teléfono)

esquema animado

Configuración del texto del título

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

  • Fuente del título: Poppins
  • Peso de la fuente del título: Ultra Bold
  • Alineación del texto del título: centro
  • Tamaño del texto del título: 1.2vw (escritorio), 2.5vw (tableta), 3vw (teléfono)

esquema animado

Configuración de 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.7vw (tableta), 2.3vw (teléfono)

esquema animado

Espaciado

Cree algo de espacio alrededor del módulo Blurb agregando valores de espaciado personalizados en diferentes tamaños de pantalla.

  • Margen superior: 3vw
  • Margen inferior: 3vw
  • Margen izquierdo: 3vw
  • Margen derecho: 3vw
  • Relleno superior: 10vw (escritorio), 18vw (tableta y teléfono)
  • Relleno inferior: 10vw (escritorio), 18vw (tableta y teléfono)
  • Acolchado izquierdo: 2vw (escritorio), 8vw (tableta y teléfono)
  • Relleno derecho: 2vw (escritorio), 8vw (tableta y teléfono)

esquema animado

Frontera

Pase a la configuración del borde, agregue "2vw" a cada una de las esquinas y use un borde.

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

esquema animado

Animación

Complete el diseño del módulo Blurb agregando una animación personalizada.

  • Estilo de animación: diapositiva
  • Dirección de animación: abajo
  • Duración de la animación: 1300 ms
  • Retraso de animación: 1200 ms
  • Intensidad de animación: 60%
  • Opacidad de inicio de animación: 100%
  • Animación de iconos: sin animación

esquema animado

Agregar módulo de botón a la columna 1

Agregar copia

En el siguiente y último módulo, que es un Módulo de botones. Ingrese una copia de su elección.

esquema animado

Alineación

Pase a la pestaña de diseño y cambie la alineación.

  • Alineación de botones: centro

esquema animado

Configuraciones de botones

Cambie la configuración del botón a continuación.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 0.8vw (escritorio), 1.5vw (tableta), 2.2vw (teléfono)
  • Color del texto del botón: # 000000
  • Color de fondo del botón: #FFFFFF
  • Ancho del borde del botón: 1px
  • Color del borde del botón: # 000000
  • Radio del borde del botón: 50vw
  • Fuente del botón: Abrir sin
  • Peso de fuente del botón: Ultra negrita
  • Estilo de fuente del botón: mayúscula

esquema animado

esquema animado

Espaciado

Y dé forma al Módulo de botones utilizando valores de espaciado personalizados en diferentes tamaños de pantalla.

  • Margen superior: -5vw (escritorio), -6.5vw (tableta), -7vw (teléfono)
  • Margen inferior: 2vw (escritorio), 3vw (tableta y teléfono)
  • Relleno superior: 1vw (escritorio), 2vw (tableta y teléfono)
  • Relleno inferior: 1vw (escritorio), 2vw (tableta y teléfono)
  • Acolchado izquierdo: 5vw (escritorio), 8vw (tableta y teléfono)
  • Relleno derecho: 5vw (escritorio), 8vw (tableta y teléfono)

esquema animado

Animación

Complete el diseño del Módulo de botones agregando una animación personalizada.

  • Estilo de animación: diapositiva
  • Dirección de animación: arriba
  • Retraso de animación: 1400 ms
  • Intensidad de animación: 200%
  • Opacidad de inicio de animación: 100%

esquema animado

Eliminar columna 2 y clonar columna 1

Una vez que haya completado la columna 1 y los módulos que contiene, puede eliminar la segunda columna (vacía) y clonar la primera. ¡Modifique todo el contenido del módulo Blurb para que coincida con su sitio web y listo!

esquema animado

esquema animado

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

esquema animado

Móvil

esquema animado

Pensamientos finales

En esta publicación, le mostramos cómo usar la configuración de animación de Divi en combinación con los diversos contenedores que Divi le proporciona y sus configuraciones de borde. ¡Esperamos que este tutorial te inspire a crear tus propias variaciones de esta técnica también! Si tiene alguna pregunta, asegúrese de dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.