Los bordes y las imágenes de fondo continúan siendo activos de diseño populares al crear sitios web. El uso de las imágenes de fondo adecuadas puede agregar personalidad y estilo a su sitio sin tener que gastar tiempo y dinero en gráficos personalizados. Y los bordes son útiles para agregar estructura a su contenido.
Hoy, vamos a unir estos dos recursos diseñando imágenes de fondo como bordes. Divi tiene un conjunto útil de opciones para personalizar imágenes de fondo que facilita el diseño de imágenes de fondo para diseños de bordes únicos. Esto nos permite combinar colores, degradados, sombras de cuadro y modos de fusión en todo tipo de formas creativas.
Empecemos.
Estos son los diseños de borde de imagen de fondo que construiremos juntos.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, necesitará tener lo siguiente:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- Imágenes que se utilizarán para contenido simulado
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Sugerencias generales para crear diseños de borde de imagen de fondo
Antes de comenzar a construir, aquí hay algunos consejos generales para tener en cuenta al crear diseños de bordes de imágenes de fondo.
#1 Elija imágenes con mucha textura
La mayoría de las veces, querrá que sus bordes sean más angostos. Esto significa que no podrá ver gran parte de la imagen. Así que ayuda usar imágenes que tengan mucha textura. Por ejemplo, puede usar una foto de un paisaje, un ramo de flores o un rascacielos de la ciudad. Aquí hay algunas imágenes que estoy usando para este tutorial.
#2 Use degradados y transparencia con los bordes de su imagen de fondo
Las imágenes de fondo a veces pueden funcionar solas como un gran borde para su contenido. Pero la mayoría de las veces, querrá agregar algunas superposiciones a su imagen de fondo para obtener algún color o para que los fondos sean más oscuros o más claros. Los degradados de fondo son una excelente manera de agregar superposición a sus imágenes de fondo y crear diseños de borde únicos.
#3 Usa modos de fusión
El uso de modos de fusión en las imágenes de fondo puede implementar colores y texturas únicos en los diseños de los bordes. Todo lo que necesita hacer es agregar un color de fondo o un degradado junto con su imagen de fondo y luego seleccionar un modo de fusión para la imagen de fondo. Algunos modos de fusión excelentes para los bordes de la imagen de fondo son el color, la luminosidad, la multiplicación y la pantalla.
Usar opciones de esquinas redondeadas para formas únicas
No todos los bordes deben tener bordes rectos. ¡Mézclalo un poquito! Las opciones de esquinas redondeadas de Divi te permiten dar forma a esas esquinas de forma creativa.
Use imágenes de fondo de paralaje como bordes
Lo bueno del paralaje es que da vida al diseño con movimiento. Además, si usa imágenes de fondo con paralaje para sus diseños de borde, puede crear un movimiento sutil que se destaque y haga que su contenido destaque.
Diseño de bordes de imagen de fondo en Divi
Ahora que entendemos la idea general detrás de la creación de diseños de bordes de imágenes de fondo, diseñemos algunos juntos. Vamos a construir 4 diseños diferentes. Cada uno tendrá un módulo de propaganda básico para servir como contenido simulado. Y usaremos la configuración de la columna para agregar el borde de la imagen de fondo para el módulo.
Comencemos con nuestro primer diseño.
Diseño de borde de imagen de fondo #1
Este primer diseño presenta un borde de imagen de fondo angosto que tiene una sombra de cuadro para que se vea más como un marco para el contenido.
Aquí se explica cómo diseñarlo.
Primero, agregue una fila de dos columnas a una sección regular.
Agregue el módulo Blurb
Luego agregue un módulo de propaganda a la columna de la izquierda.
Una vez que la publicidad esté en su lugar, abra la configuración de la publicidad y elimine la imagen predeterminada para que solo se vean el título y el contenido del cuerpo.
A continuación, dale a tu publicidad un color de fondo blanco.
Luego actualice la configuración del diseño de la publicidad de la siguiente manera:
- Fuente del título: Oswald
- Fuente del cuerpo: Lato
- Margen 5% superior, 5% inferior, 5% izquierdo, 5% derecho
- Relleno: 7% arriba, 7% abajo, 10% izquierda, 10% derecha
- Esquinas redondeadas: 20 px arriba a la derecha, 20 px abajo a la izquierda
- Sombra de caja: ver captura de pantalla
Agregue la imagen de fondo a la columna
Eso se encarga de nuestro módulo de publicidad. Ahora agreguemos nuestro borde de imagen de fondo. Para hacer esto, agregaremos una imagen de fondo a la columna que contiene el módulo de publicidad. Abra la configuración de la fila y luego abra la configuración de la columna 1 y agregue el siguiente fondo:
- Imagen de fondo: [subir imagen de su elección]
- Color de fondo: #303a7a
- Mezcla de imagen de fondo: luminosidad
Luego actualice las esquinas redondeadas y la sombra del cuadro de la siguiente manera:
- Esquinas redondeadas: 20 px arriba a la derecha, 20 px abajo a la izquierda
- Sombra de caja: ver captura de pantalla
Resultado final
Ahora echa un vistazo al diseño final.
Diseño de borde de imagen de fondo #2
Este próximo diseño destaca cómo el uso de imágenes con mucha textura puede realmente crear hermosos bordes, especialmente cuando los combina con modos de fusión de imágenes.
Aquí se explica cómo diseñarlo.
Agregue el módulo Blurb
Para crear el diseño, agregaremos la propaganda a la columna 2 de la misma fila que contiene el diseño #1. Continúe y copie el módulo de publicidad del diseño n. ° 1 y péguelo en la columna 2. Luego actualice la configuración del módulo de publicidad de la siguiente manera:
- Esquinas redondeadas: restaurar a los valores predeterminados
- Margen: 10 % superior, 10 % inferior, 10 % izquierdo, 10 % derecho
- Relleno: 15% arriba, 15% abajo, 10% izquierda, 10% derecha
- Ancho del borde: 1px
- Color del borde: #ffffff
Agregue la imagen de fondo a la columna
Con nuestro módulo en su lugar, abra la configuración de la fila y agregue un degradado de fondo a la columna 2.
- Degradado de fondo Color izquierdo: #f7e0a5
- Gradiente de fondo Color derecho: rgba(237,240,0,0.79)
- Dirección del gradiente: 90 grados
- Posición inicial: 50%
- Posición final: 0%
Luego agregue una imagen de fondo con un bonito efecto de mezcla de colores.
- Imagen de fondo: [subir imagen]
- Mezcla de imagen de fondo: Color
Como puede ver, el modo de combinación de colores conserva la luminosidad de los dos colores degradados detrás de la imagen para crear un bonito diseño de borde de imagen con colores suaves.
Resultado final
Mira el resultado final del diseño.
Diseño de borde de imagen de fondo #3
Este próximo diseño destaca el uso de imágenes de paralaje en un diseño de borde. También usaremos un truco de sombra de cuadro para crear una superposición de color para la imagen de paralaje.
Aquí se explica cómo diseñarlo.
Para empezar, agregue una nueva fila de dos columnas debajo de la primera fila y copie el módulo de publicidad de la publicidad en la columna 1 de la fila superior y péguelo en la columna 1 de la nueva fila.
Luego actualice el módulo de propaganda de la siguiente manera.
- Color de fondo: #333344
- Color del texto: Claro
- Margen: 10 % superior, 10 % inferior, 10 % izquierdo, 10 % derecho
- Relleno: 10% arriba, 10% abajo
- Esquinas redondeadas: 20px
- Sombra de caja: ninguna
Cuando la propaganda esté en su lugar, abra la configuración de la fila y actualice la configuración de la columna 1 de la siguiente manera:
- Imagen de fondo: [subir imagen]
- Usar efecto de paralaje: SÍ
- Método de paralaje: verdadero paralaje
- Esquinas redondeadas: 20px
- Sombra de caja: ver captura de pantalla
En este momento, el borde de la imagen de fondo con parallax es un poco autoritario por defecto y podría distraer la atención del contenido.
Para que la imagen de fondo con paralaje sea más clara, podemos agregar una sombra de cuadro a la publicidad que servirá como una superposición de luz.
Abra la configuración de publicidad nuevamente y agregue lo siguiente:
- Sombra de caja: ver captura de pantalla
- Fuerza de desenfoque de sombra de cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 200px
- Color de sombra: #ffffff
Diseño final
Ahora veamos el diseño final.
Diseño de borde de imagen de fondo #4
Para este próximo diseño, vamos a combinar una imagen de fondo con degradados para que sirvan como borde superior e inferior para el contenido de la propaganda.
Agregue el módulo Blurb
Para comenzar, copie el módulo de propaganda en la columna 2 de la fila superior y péguelo en la columna 2 de la segunda fila.
Cuando haya terminado, actualice la configuración del módulo de publicidad de la siguiente manera:
- Borde: [Elimine el borde restaurando los valores predeterminados del borde]
- Sombra de caja: ninguna
- Margen: 5 % superior, 5 % inferior, 0 % izquierdo, 0 % derecho
Agregue el borde de la imagen de fondo
Para agregar el borde de la imagen de fondo para este diseño, abra la configuración de la fila y actualice la configuración de la columna 2 de la siguiente manera:
- Imagen de fondo: [subir imagen]
- Degradado de fondo Color izquierdo: #141777
- Degradado de fondo Color derecho: #ffb7eb
- Dirección del gradiente: 90 grados
- Posición inicial: 50%
- Posición final: 0%
- Imagen de fondo: [subir imagen]
- Mezcla de imagen de fondo: luminosidad
Diseño final
Mira el diseño final.
Pensamientos finales
Crear bordes de imágenes de fondo con Divi es una forma sencilla de agregar belleza y personalidad a su diseño. Los diseños presentados en este tutorial están destinados a mostrar las opciones clave disponibles en Divi para crear diseños de bordes únicos. Sin embargo, con todas las diferentes combinaciones de colores y modos de fusión disponibles, su único límite es su imaginación. Entonces, tome algunas imágenes propias y explore nuevos y emocionantes diseños de bordes para su próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!