Cómo crear superposiciones de bordes animados para resaltar contenido con Divi


¿Busca una forma única de poner una parte específica de su página en el centro de atención? ¡Sigue leyendo! Hoy, le mostraremos cómo crear superposiciones de bordes animados para resaltar el contenido de su página. Crearemos tres superposiciones de bordes animados diferentes en el Paquete de diseño para desarrolladores de aplicacionesPágina de destino, pero puede utilizar esta técnica para cualquier tipo de sitio web que esté creando. Definitivamente lo ayudará a agregar una dimensión adicional a su página. Esperamos que este tutorial lo inspire a crear sus propias superposiciones de bordes animados alternativos también.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado de los tres ejemplos. También puede esperar un resultado similar en tamaños de pantalla más pequeños.

Ejemplo 1

borde animado

Ejemplo # 2

borde animado

Ejemplo # 3

borde animado

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

Suscríbete a nuestro canal de Youtube

Crear nueva página con la página de destino del paquete de diseño de desarrollador de aplicaciones

Lo primero que debe hacer es crear una página nueva con el Paquete de diseño para desarrolladores de aplicacionesLa página de destino.

borde animado

Sección del héroe clon

Nuestros dos primeros ejemplos se crean en la sección de héroes. Si desea recrear ambos ejemplos, se recomienda que clone la sección de héroe para que pueda pasar al duplicado y recrear el segundo ejemplo.

borde animado

Recrear el ejemplo n. ° 1

borde animado

Agregar nueva fila a la sección Hero

Estructura de columna

¡Comencemos a recrear el primer ejemplo! Agregue una nueva fila en la sección de especialidad usando la siguiente estructura de columnas:

borde animado

Agregar módulo de texto

Dejar el cuadro de contenido vacío

Agregue un nuevo módulo de texto a la fila y asegúrese de dejar el cuadro de contenido vacío. Estamos utilizando el módulo por sus opciones de diseño integradas, no para mostrar contenido escrito.

borde animado

Espaciado

Vaya a la configuración de espaciado del Módulo de texto y déle una forma al módulo agregando un relleno superior e inferior personalizado. Cree la superposición entre este módulo y los módulos anteriores agregando también un margen superior negativo.

  • Margen superior: -480px
  • Acolchado superior: 223px
  • Acolchado inferior: 223px

borde animado

Frontera

Luego, vaya a la configuración de bordes del módulo y agregue un borde de su elección.

  • Ancho del borde: 9px
  • Color del borde: # 0ae2ff
  • Estilo de borde: Inicial

borde animado

Sombra de la caja

Agrega también una sombra de caja.

  • Fuerza de desenfoque de sombra de caja: 1px
  • Fuerza de propagación de la sombra de caja: 15px
  • Color de sombra: rgba (10,226,255,0.59)

borde animado

Animación

Y juega con la configuración de la animación para hacer que el contenido destaque.

  • Estilo de animación: Flip
  • Repetición de animación: una vez
  • Dirección de animación: Derecha
  • Duración de la animación: 1500ms
  • Retraso de animación: 1500ms
  • Intensidad de animación: 500%

borde animado

Recrear el ejemplo 2

borde animado

Agregar nueva fila a la sección de héroe duplicada

¡Pasemos al segundo ejemplo! Agregue una nueva fila a la sección de héroe duplicado usando la siguiente estructura de columnas:

borde animado

Agregar módulo de texto n. ° 1

Dejar el cuadro de contenido vacío

De nuevo, estamos usando un módulo de texto vacío.

borde animado

Espaciado

Vaya a la configuración de espaciado y dé al módulo una forma usando un relleno superior e inferior personalizado. Haga que se superponga con los módulos anteriores agregando un margen superior negativo también.

  • Margen superior: -480px
  • Acolchado superior: 223px
  • Acolchado inferior: 223px

borde animado

Frontera

Continúe agregando un borde al módulo de texto.

  • Ancho del borde: 9px
  • Color del borde: # 0ae2ff
  • Estilo de borde: Doble

borde animado

Animación

Y juega con la configuración de la animación para crear un efecto rodante.

  • Estilo de animación: rollo
  • Repetición de animación: una vez
  • Dirección de animación: Centro
  • Duración de la animación: 4500ms
  • Retraso de animación: 1500ms
  • Intensidad de animación: 100%
  • Opacidad inicial de la animación: 100%

borde animado

Módulo de clonación de texto

Una vez que haya terminado de modificar el primer módulo de texto, siga adelante y clónelo.

borde animado

Cambiar espaciado

Abra la configuración del duplicado y cambie el valor del margen superior en la configuración de espaciado.

  • Margen superior: -495px

borde animado

Cambiar borde

Modifique también el color del borde.

  • Color del borde: #ededed

borde animado

Cambiar animación

Y modifique la configuración de la animación para lograr el resultado que vio en la vista previa de esta publicación.

  • Repetición de animación: bucle
  • Duración de la animación: 5000ms
  • Retraso de animación: 2000 ms

borde animado

Recrear el ejemplo n. ° 3

borde animado

Cambiar el espaciado del módulo de imagen en la columna 2

¡Pasemos al siguiente y último ejemplo! Navegue a la sección de proceso en la página y agregue algo de relleno superior al Módulo de imagen que contiene la ilustración grande en el medio.

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

borde animado

Agregar color de fondo a los módulos de texto existentes

Continúe agregando un color de fondo blanco a cada uno de los módulos de texto en la primera y tercera columna.

  • Color de fondo: #ffffff

fronteras animadas

Agregar módulo de texto a la columna 1

Dejar el cuadro de contenido vacío

¡Ahora podemos comenzar a agregar la primera superposición de bordes animados! Agregue un nuevo módulo de texto a la primera columna (vea la pantalla de impresión) y asegúrese de dejar el cuadro de contenido vacío.

borde animado

Espaciado

Vaya a la configuración de espaciado del Módulo de texto a continuación y cree la forma y la superposición utilizando valores de margen y relleno personalizados.

  • Margen superior: -230px
  • Margen izquierdo: 80px
  • Margen derecho: 100px
  • Relleno superior: 120 px
  • Acolchado inferior: 120px

borde animado

Frontera

Agrega un borde a continuación.

  • Ancho del borde: 13px
  • Color del borde: # bcf5f3
  • Estilo de borde: Doble

borde animado

Animación

Continúe agregando una animación de su elección que lo ayudará a resaltar el contenido que está compartiendo.

  • Estilo de animación: pliegue
  • Repetición de animación: una vez
  • Dirección de animación: Derecha
  • Intensidad de animación: 100%

borde animado

Índice Z

Para asegurarnos de que los bordes aparezcan debajo del contenido, usaremos un valor negativo para el índice Z del Módulo de texto que contiene la configuración del borde.

  • Índice Z: -1

borde animado

Clonar módulo de texto y colocarlo al final de la columna 1

Una vez que haya terminado de crear y modificar el módulo de texto, continúe y clónelo. Coloque el duplicado al final de la primera columna.

borde animado

Cambiar borde

Cambia el color del borde.

  • Color del borde: # ffc0ec

borde animado

Cambiar animación

Y agregue un retraso de animación también.

  • Retraso de animación: 1000 ms

borde animado

Agregar módulo de texto a la columna 3

Dejar el cuadro de contenido vacío

Continúe agregando un módulo de texto a la tercera columna (vea la pantalla de impresión) y asegúrese de dejar el cuadro de contenido vacío.

borde animado

Espaciado

Vaya a la configuración de espaciado y cree la forma y superposición utilizando valores de margen y relleno personalizados.

  • Margen superior: -230px
  • Margen izquierdo: 100px
  • Margen derecho: -80px
  • Relleno superior: 120 px
  • Acolchado inferior: 120px

borde animado

Frontera

A continuación, agregue un borde de su elección.

  • Ancho del borde: 13px
  • Color del borde: # 7479ff
  • Estilo de borde: Doble

borde animado

Animación

Junto a una animación que incluye un retardo de animación superior a los que se le dieron a los dos Módulos de Texto anteriores.

  • Estilo de animación: pliegue
  • Repetición de animación: una vez
  • Dirección de animación: izquierda
  • Retraso de animación: 2000 ms
  • Intensidad de animación: 100%

borde animado

Índice Z

Asegúrese de que el módulo aparezca debajo del contenido utilizando un índice Z negativo.

  • Índice Z: -1

borde animado

Clonar módulo de texto y colocarlo al final de la columna 3

Una vez que haya terminado de agregar y modificar el módulo de texto, clónelo y coloque el duplicado al final de la tercera fila.

borde animado

Cambiar borde

Cambia el color del borde del duplicado.

  • Color del borde: # b3d1ff

borde animado

Cambiar animación

¡Agregue un poco de retraso adicional a la animación y listo!

  • Retraso de animación: 3000 ms

borde animado

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado de los tres ejemplos que hemos recreado a lo largo de este tutorial.

Ejemplo 1

borde animado

Ejemplo # 2

borde animado

Ejemplo # 3

borde animado

Pensamientos finales

En esta publicación, le mostramos cómo poner su contenido en el centro de atención mediante superposiciones de bordes animados. Esta es una gran técnica para llamar la atención sobre una parte específica de su página y hacerlo también de una manera elegante. Puede utilizar esta técnica para cualquier tipo de sitio web que esté creando. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!