Cómo crear diseños de borde de imagen de fondo en Divi


Las fronteras 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 mediante el diseño de 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 borde únicos. Esto nos permite combinar colores, degradados, sombras de cuadros y modos de fusión de todo tipo de formas creativas.

Empecemos.

Vistazo

Aquí están los diseños de borde de imagen de fondo que construiremos juntos.

diseños de borde de imagen de fondo divi

diseños de borde de imagen de fondo divi

diseños de borde de imagen de fondo divi

diseños de borde de imagen de fondo divi

Descargar 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 nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

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

Suscríbase 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, deberá tener lo siguiente:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador visual)
  3. Imágenes para ser utilizadas como 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 borde de imagen de fondo

Antes de comenzar a construir, aquí hay algunos consejos generales a 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ás que tus bordes sean más estrechos. Esto significa que no podrá ver gran parte de la imagen. Por lo tanto, es útil 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.

diseños de borde de imagen de fondo divi

# 2 Use degradados y transparencia con sus bordes de imagen de fondo

Las imágenes de fondo a veces pueden estar 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 un poco de color o para 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 las imágenes de fondo y crear diseños de borde únicos.

# 3 Use modos de mezcla

diseños de borde de imagen de fondo divi

El uso de modos de fusión en sus imágenes de fondo puede implementar colores y texturas únicos en los diseños de borde. 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 la imagen de fondo son el color, la luminosidad, la multiplicación y la pantalla.

Use las opciones de esquinas redondeadas para formas únicas

diseños de borde de imagen de fondo divi

No todos los bordes deben tener bordes rectos. ¡Mézclalo un poquito! Las opciones de esquina redonda de Divi le permiten dar forma a esas esquinas de manera creativa.

Usar imágenes de fondo de paralaje como bordes

diseños de borde de imagen de fondo divi

Lo mejor 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 movimientos sutiles que se destaquen y hagan 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 básico de propaganda para servir como contenido simulado. Y utilizaremos 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

diseños de borde de imagen de fondo divi

Este primer diseño presenta un borde de imagen de fondo estrecho que tiene sombra de cuadro para que se vea más como un marco para el contenido.

Aquí está cómo diseñarlo.

Primero, agregue una fila de dos columnas a una sección regular.

diseños de borde de imagen de fondo divi

Agregue el módulo Blurb

Luego agregue un módulo de propaganda a la columna izquierda.

diseños de borde de imagen de fondo divi

Una vez que el anuncio publicitario esté en su lugar, abra la configuración del anuncio publicitario y saque la imagen predeterminada para que solo el Título y el Contenido del cuerpo sean visibles.

diseños de borde de imagen de fondo divi

Luego, dale a tu propaganda un color de fondo blanco.

Luego actualice la configuración de diseño de propaganda de la siguiente manera:

  • Fuente del título: Oswald
  • Fuente del cuerpo: Lato
  • Margen 5% superior, 5% inferior, 5% izquierda, 5% derecha
  • Relleno: 7% superior, 7% inferior, 10% izquierda, 10% derecha
  • Esquinas redondeadas: 20 px arriba a la derecha, 20 px abajo a la izquierda
  • Box Shadow: ver captura de pantalla

diseños de borde de imagen de fondo divi

Agregar 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: (cargue la imagen de su elección)
  • Color de fondo: # 303a7a
  • Mezcla de imagen de fondo: luminosidad

diseños de borde de imagen de fondo divi

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
  • Box Shadow: ver captura de pantalla

diseños de borde de imagen de fondo divi

Resultado final

Ahora mira el diseño final.

diseños de borde de imagen de fondo divi

Diseño de borde de imagen de fondo # 2

diseños de borde de imagen de fondo divi

El siguiente diseño resalta 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.

Aquí está 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 n. ° 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 al valor predeterminado
  • Margen: 10% superior, 10% inferior, 10% izquierda, 10% derecha
  • Relleno: 15% superior, 15% inferior, 10% izquierda, 10% derecha
  • Ancho del borde: 1px
  • Color del borde: #ffffff

diseños de borde de imagen de fondo divi

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.

  • Gradiente de fondo Color izquierdo: # f7e0a5
  • Gradiente de fondo derecho Color: rgba (237,240,0,0.79)
  • Dirección de degradado: 90 grados
  • Posición de inicio: 50%
  • Posición final: 0%

diseños de borde de imagen de fondo divi

Luego agregue una imagen de fondo con un agradable efecto de mezcla de colores.

  • Imagen de fondo: (cargar imagen)
  • Mezcla de imagen de fondo: color

diseños de borde de imagen de fondo divi

Como puede ver, el modo de mezcla de color conserva la luminosidad de los dos colores de degradado detrás de la imagen para crear un diseño de borde de imagen agradable con colores suaves.

Resultado final

Echa un vistazo al resultado final del diseño.

diseños de borde de imagen de fondo divi

Diseño de borde de imagen de fondo # 3

diseños de borde de imagen de fondo divi

El siguiente diseño resalta 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í está 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 publicidad de la siguiente manera.

  • Color de fondo: # 333344
  • Color del texto: claro
  • Margen: 10% superior, 10% inferior, 10% izquierda, 10% derecha
  • Acolchado: 10% superior, 10% inferior
  • Esquinas redondeadas: 20 px
  • Box Shadow: ninguno

diseños de borde de imagen de fondo divi

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 de paralaje: verdadero paralaje
  • Esquinas redondeadas: 20 px
  • Box Shadow: ver captura de pantalla

diseños de borde de imagen de fondo divi

En este momento, el borde de la imagen de fondo con paralaje es un poco abrumador por defecto y podría distraer el contenido.

diseños de borde de imagen de fondo divi

Para hacer que la imagen de fondo con paralaje sea más clara, podemos agregar una sombra de cuadro a la propagación que servirá como una superposición de luz.

Abra la configuración de publicidad 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 la caja: 200 px
  • Color de sombra: #ffffff

diseños de borde de imagen de fondo divi

Diseño final

Ahora veamos el diseño final.

diseños de borde de imagen de fondo divi

Diseño de borde de imagen de fondo # 4

diseños de borde de imagen de fondo divi

Para este próximo diseño, vamos a combinar una imagen de fondo con gradientes para que sirva como borde superior e inferior para el contenido publicitario.

Agregue el módulo Blurb

Para comenzar, copie el módulo de publicidad 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: (Elimine el borde restaurando los valores predeterminados del borde)
  • Box Shadow: ninguno
  • Margen: 5% superior, 5% inferior, 0% izquierda, 0% derecha

diseños de borde de imagen de fondo divi

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 fondo izquierdo del degradado: # 141777
  • Gradiente de fondo Color correcto: # ffb7eb
  • Dirección de degradado: 90 grados
  • Posición de inicio: 50%
  • Posición final: 0%

diseños de borde de imagen de fondo divi

  • Imagen de fondo: (cargar imagen)
  • Mezcla de imagen de fondo: luminosidad

diseños de borde de imagen de fondo divi

Diseño final

Echa un vistazo al diseño final.

diseños de borde de imagen de fondo divi

Pensamientos finales

Crear bordes de imagen de fondo con Divi es una manera simple 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 borde ú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 suyas en los comentarios.

¡Salud!