¿Quieres resaltar una parte específica de tu página? Hoy le mostraremos cómo crear superposiciones de bordes animados para resaltar el contenido de tu página. Crearemos estos bordes animados usando la plantilla App Developer Layout Pack, disponible en Divi Constructor. Sin embargo, puede utilizar esta técnica para cualquier tipo de Sitio web que creas. Definitivamente lo ayudará a agregar una dimensión adicional a su página. Esperamos que este tutorial también lo inspire a crear sus propias superposiciones de bordes animados.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado de estos tres ejemplos. También puede esperar un resultado similar en pantallas más pequeñas.
Cree una nueva página utilizando la página de inicio del paquete de diseño de desarrollador de aplicaciones
Lo primero que debe hacer es crear una nueva página y usar el paquete de diseño de desarrollador de aplicaciones.
Clone Hero Section
Nuestro ejemplo se creará en la sección de héroe. Como recordatorio, esto es lo que crearemos:
Agregar una nueva línea a la sección de héroe
Estructura de la columna
¡Comencemos a recrear el primer ejemplo! Agregue una nueva línea en la sección especializada utilizando la siguiente estructura de columnas:
Añadir un módulo de texto.
Deja el contenido vacío
Agregue un nuevo módulo de texto a la línea y asegúrese de dejar el cuadro de texto contenido vacío. Usamos el módulo por sus opciones de diseño integradas, no para mostrar contenido. contenido escribiendo.
espaciamiento
Vaya a la configuración de espaciado del módulo de texto y déle forma agregando márgenes internos e inferiores personalizados. Cree la superposición entre este módulo y los módulos anteriores agregando también un margen superior negativo.
- Margen superior: -480px
- Mejor relleno: 223px
- Relleno inferior: 223px
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: Outset
Caja de sombra
Agregue un cuadro de sombra también.
- Box Shadow Blur Force: 1px
- Espesor de la sombra de la caja: 15px
- Color de sombra: rgba (10,226,255,0.59)
Animación
Y juega con la configuración de la animación para que aparezca el contenido. Sin embargo, debe tener en cuenta que puede utilizar la opción que más le guste.
- Estilo de animación: Flip
- Repita la animación: una vez
- Dirección de animación: derecha
- Duración de la animación: 1500 ms
- Retraso de animación: 1500 ms
- Animación de intensidad: 500%
vista
Ahora que hemos seguido todos los pasos, echemos un último vistazo al resultado de los tres ejemplos que recreamos a lo largo de este tutorial.
Consideraciones finales
En este tutorial, le mostramos cómo resaltar su contenido utilizando 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 con estilo. Puedes utilizar esta técnica para cualquier tipo de Sitio web que construyes. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!
