Cómo crear diseños de bordes de imagen de fondo en Divi
Publicado: 2019-08-18Los bordes y las imágenes de fondo siguen 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 activos diseñando imágenes de fondo como bordes. Divi tiene un conjunto útil de opciones para personalizar imágenes de fondo que facilitan 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.
Vistazo
Aquí están los diseños de bordes de la imagen de fondo que construiremos juntos.
Descarga el diseño GRATIS
Para poner sus manos sobre 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 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!
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 al Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, necesitará 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á un lienzo en blanco para comenzar a diseñar en Divi.
Consejos generales para crear diseños de bordes de imagen de fondo
Antes de comenzar a construir, aquí hay algunos consejos generales que debe tener en cuenta al crear diseños de bordes de imagen de fondo.
# 1 Elija imágenes con mucha textura
La mayoría de las veces, querrá que sus bordes estén más en el lado estrecho. Esto significa que no podrá ver gran parte de la imagen. Por eso es útil utilizar imágenes que tengan mucha textura. Por ejemplo, puede utilizar 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 ser un gran borde para su contenido. Pero la mayoría de las veces, querrá agregar algunas superposiciones a su imagen de fondo para obtener un poco de color o hacer 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 bordes únicos.
# 3 Utilice modos de fusión
El uso de modos de fusión en sus 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 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 las imágenes de fondo son el color, la luminosidad, la multiplicación y la pantalla.
Utilice opciones de esquinas redondeadas para formas únicas
No todos los bordes necesitan tener bordes rectos. ¡Mézclalo un poquito! Las opciones de esquinas redondeadas de Divi le permiten dar forma a esas esquinas de formas creativas.
Utilice imágenes de fondo de Parallax como bordes
Lo mejor del paralaje es que le da vida al diseño con movimiento. Además, si utiliza imágenes de fondo con paralaje para los diseños de sus bordes, 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 imagen 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 n. ° 1
Este primer diseño presenta un borde de imagen de fondo estrecho que tiene una sombra de cuadro para que se vea más como un marco para el contenido.
He aquí 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 propaganda esté en su lugar, abra la configuración de la propaganda y elimine la imagen predeterminada para que solo el título y el contenido del cuerpo sean visibles.
Luego, dale a tu propaganda un color de fondo blanco.
Luego actualice la configuración de diseño de la propaganda 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: 20px arriba a la derecha, 20px abajo a la izquierda
- Box Shadow: ver captura de pantalla
Agregar la imagen de fondo a la columna
Eso se encarga de nuestro módulo de propaganda. 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 propaganda. 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: [carga la imagen que elijas]
- 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: 20px arriba a la derecha, 20px abajo a la izquierda
- Box Shadow: ver captura de pantalla
Resultado final
Ahora mira el diseño final.
Diseño de borde de imagen de fondo n. ° 2
Este próximo diseño destaca cómo el uso de imágenes con mucha textura puede realmente crear bordes hermosos, especialmente cuando los combina con modos de fusión de imágenes.
He aquí cómo diseñarlo.
Agregue el módulo Blurb
Para crear el diseño, vamos a agregar la propaganda a la columna 2 de la misma fila que contiene el diseño # 1. Continúe y copie el módulo de propaganda del diseño n. ° 1 y péguelo en la columna 2. Luego actualice la configuración del módulo de propaganda 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: 1 px
- Color del borde: #ffffff
Agregar 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.
- Color de degradado de fondo a la izquierda: # 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: [cargar 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 n. ° 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 caja para crear una superposición de color para la imagen de paralaje.
He aquí cómo diseñarlo.
Para empezar, agregue una nueva fila de dos columnas debajo de la primera fila y copie el módulo de propaganda de la propaganda 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% superior, 10% inferior
- 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: [cargar imagen]
- Usar efecto de paralaje: SÍ
- Método Parallax: True Parallax
- Esquinas redondeadas: 20px
- Box Shadow: ver captura de pantalla
En este momento, el borde de la imagen de fondo con paralaje es un poco dominante de forma predeterminada y podría distraer la atención del contenido.
Para aclarar la imagen de fondo con paralaje, podemos agregar una sombra de cuadro a la propaganda que servirá como una superposición de luz.
Abra la configuración de propaganda nuevamente y agregue lo siguiente:
- Box Shadow: ver captura de pantalla
- Fuerza de desenfoque de sombra de caja: 0px
- Fuerza de propagación de la sombra de caja: 200px
- Color de sombra: #ffffff
Diseño final
Ahora veamos el diseño final.
Diseño de borde de imagen de fondo n. ° 4
Para este próximo diseño, vamos a combinar una imagen de fondo con degradados para que sirva 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 termine, actualice la configuración del módulo de propaganda de la siguiente manera:
- Borde: [Elimina el borde restaurando los valores predeterminados del borde]
- Sombra de caja: ninguna
- Margen: 5% superior, 5% inferior, 0% izquierda, 0% derecha
Agregar 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: [cargar imagen]
- Color de degradado de fondo a la izquierda: # 141777
- Gradiente de fondo Color derecho: # ffb7eb
- Dirección del gradiente: 90 grados
- Posición inicial: 50%
- Posición final: 0%
- Imagen de fondo: [cargar imagen]
- Mezcla de imagen de fondo: luminosidad
Diseño final
Mira el diseño final.
Pensamientos finales
Crear bordes de imagen 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 hacer 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. Por lo tanto, tome algunas imágenes propias y explore nuevos y emocionantes diseños de bordes para su próximo proyecto.
Espero tener noticias tuyas en los comentarios.
¡Salud!