Descarga 5 imágenes de bordes GRATIS para Divi
Publicado: 2018-10-01Siempre es bueno tener recursos adicionales que puede usar al crear un nuevo sitio web para usted o para un cliente. Es por eso que nos aseguramos de que reciba nuevos paquetes de diseño cada semana. Pero hay otros recursos que también pueden resultar útiles, como "imágenes de borde" o imágenes que puede utilizar a lo largo de un lado u otro de un elemento de diseño Divi para agregar un toque estilístico. El uso de las opciones integradas de Divi junto con estas imágenes de borde puede brindar resultados sorprendentes. En esta publicación, le proporcionamos 5 imágenes de borde diferentes que puede descargar de forma gratuita a continuación. Vamos a explicar cómo puede utilizar estas imágenes de borde a su favor y crear un resultado final sorprendente.
¡Hagámoslo!
Avance
Echemos un vistazo a las diferentes imágenes de bordes que podrá descargar más adelante en esta publicación. Para cada una de las formas, encontrarás 4 versiones: superior, inferior, izquierda y derecha. Estas imágenes le permitirán lograr exactamente el mismo resultado que se muestra en las primeras cuatro imágenes a continuación:
Descarga los archivos de imagen GRATIS
Para tener en sus manos las imágenes de borde gratuitas, primero deberá descargarlas usando el botón de abajo. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Acercarse
- Una vez que descargue y descomprima la carpeta que contiene las 5 imágenes de borde, encontrará 4 subcarpetas: borde superior, borde inferior, borde izquierdo y borde derecho
- Esto significa que hay un total de 20 archivos de imágenes disponibles para su uso.
- Más adelante en esta publicación, encontrará las configuraciones adjuntas que coinciden con cada uno de los lados del borde
- Para colmo, puede combinar las imágenes de borde con superposiciones de degradado
- Estas superposiciones de colores lo ayudarán a hacer que las imágenes parezcan tan vibrantes o sutiles como desee.
- Puede utilizar estas imágenes de borde sin restricciones, incluso con fines comerciales.
Creación del diseño general
Agregar nueva sección
Espaciado
Comencemos por crear el diseño general que usamos para mostrar las imágenes de los bordes. Abra una página nueva o existente, agregue una nueva sección regular y agregue algo de relleno personalizado:
- Relleno superior: 300 px
- Acolchado inferior: 300px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a su sección usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila, vaya a la configuración de Tamaño y haga que la fila sea de ancho completo.
- Hacer esta fila de ancho completo: Sí
Agregar módulo de texto de título a la columna 1
Agregar cuadro de contenido H2
¡Comencemos a agregar algunos módulos! El primer módulo que se necesita es un módulo de texto. Agregue uno a la primera columna y agregue la copia H2 de su elección al cuadro de contenido.
Configuración del texto del encabezado
Luego, realice algunos cambios en la configuración del texto H2 en la pestaña Diseño.
- Fuente del encabezado 2: Abril Fatface
- Tamaño del texto del encabezado 2: 80 px (escritorio), 70 px (tableta), 50 px (teléfono)
Espaciado
Continúe agregando algo de margen en la parte superior de este módulo de texto.
- Margen superior: 150 px
Agregar módulo de texto de enlace a la columna 1
Agregar enlace al cuadro de contenido
Justo debajo del título Módulo de texto que acaba de agregar, continúe y agregue un nuevo Módulo de texto. Estamos usando este módulo de texto como un botón, así que asegúrese de agregar un enlace a la llamada a la acción.
Configuración del texto del enlace
A continuación, cambie la configuración del texto del enlace en la pestaña Diseño.
- Peso de la fuente del enlace: Ultra Bold
- Estilo de fuente de enlace: mayúsculas
- Color del texto del enlace: # 000000
- Tamaño del texto del enlace: 21px
Espaciado
Agregue un margen superior para crear espacio entre este módulo de texto y el anterior también.
- Margen superior: 100 px
Frontera
Por último, agregue un borde inferior sutil al módulo de texto del enlace.
- Ancho del borde inferior: 1 px
- Color del borde inferior: # 333333
Agregar módulo de texto descriptivo a la columna 2
Configuración de texto
La segunda columna necesita solo un módulo de texto de descripción. Después de agregar contenido al cuadro de contenido, aplique la siguiente configuración de texto:
- Tamaño del texto: 22px (escritorio), 20px (tableta), 18px (teléfono)
- Altura de la línea de texto: 2.6em
- Orientación del texto: justificar
Dimensionamiento
Haga que la configuración de tamaño también coincida con diferentes tamaños de pantalla:
- Ancho: 82% (escritorio), 100% (tableta y teléfono)
Espaciado
Y, por último, agregue algunos márgenes superior e inferior.
- Margen superior: 100 px
- Margen inferior: 100 px
Adición de formas de borde
Configuración de fondo del borde izquierdo
Ahora que hemos completado el diseño general, ¡podemos comenzar a agregar las imágenes de borde! Empezaremos por el lado del borde izquierdo. Busque la imagen de borde que elija en la carpeta 'Borde izquierdo' y cárguela como imagen de fondo de la sección. Luego, aplique la siguiente configuración de imagen de fondo:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: centro izquierda
- Repetición de imagen de fondo: sin repetición
Configuración de fondo del borde derecho
O bien, puede encontrar la imagen de borde de su elección en la carpeta 'Borde derecho' y agregarla como fondo de la sección usando la siguiente configuración:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: centro a la derecha
- Repetición de imagen de fondo: sin repetición
Configuración de fondo del borde superior
Lo mismo ocurre con la imagen del borde superior, pero en su lugar, use la siguiente configuración de fondo:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: Centro superior
- Repetición de imagen de fondo: sin repetición
Configuración del fondo del borde inferior
O, por último, pero no menos importante, puede encontrar las imágenes del borde inferior en la carpeta 'Borde inferior' y combinarlas con estas configuraciones de fondo de la sección:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: centro inferior
- Repetición de imagen de fondo: sin repetición
Mezclar colores con superposición semitransparente
Para cada una de las formas de borde incluidas, también puede decidir agregar una superposición de color. Esta superposición le ayuda a hacer que las imágenes del borde se vean más sutiles. Para agregar una superposición, vaya a la configuración de su sección y agregue un fondo degradado en la parte superior de la imagen de fondo del borde.
- Color 1: #ffffff
- Color 2: rgba (255,255,255,0.36)
- Dirección del gradiente: 141 grados
- Colocar degradado sobre la imagen de fondo: Sí
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final a algunos diseños potenciales que puede lograr con estas imágenes de borde gratuitas.
Pensamientos finales
En esta publicación, hemos compartido 5 imágenes de bordes diferentes que puede descargar de forma gratuita. Puede utilizar estas imágenes de borde para cualquier sitio web en el que esté trabajando sin ninguna restricción. Le animamos a que los pruebe todos y cree diseños impresionantes. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!