Cómo crear hermosos fondos borrosos con Divi


Los fondos degradados son hoy en día parte de casi todos los sitios web modernos con los que te encuentras. Pero tan pronto como desee crear un gradiente más complejo, es probable que tenga que recurrir al software de edición de imágenes. Con Divi, hay una alternativa. Gracias a las muchas opciones integradas que Divi tiene, puede convertir los módulos de imagen en fondos borrosos. Borraremos los fondos hasta un punto en el que solo se muestren los colores y así se forme un degradado. ¡Recrearemos un hermoso ejemplo desde cero y también compartiremos el archivo JSON de ejemplo de diseño de forma gratuita!

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

fondos borrosos

Móvil

fondos borrosos

Descargar The Blurred Backgrounds Layout GRATIS

Para poner sus manos en el diseño de fondos borrosos gratis, 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.

Acercarse

  • Estamos agregando tres módulos diferentes a una columna; dos módulos de imagen y un módulo de CTA
  • La primera imagen mantiene su aspecto inicial.
  • La segunda imagen será borrosa y aumentará de tamaño.
  • También mejoraremos los colores jugando con la configuración de otros filtros que se incluyen en el Módulo de imagen
  • El módulo CTA se superpondrá al módulo de imagen borrosa y lo usará como fondo.
  • Para asegurarnos de que el desenfoque y el aumento de tamaño del Módulo de imagen n. ° 2 no superen el contenedor de la columna, vamos a ocultar el desbordamiento de la columna

Comencemos a recrear

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

Suscríbase a nuestro canal de Youtube

Agregar nueva sección

Comience agregando una nueva sección regular a la página en la que está trabajando.

fondos borrosos

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

fondos borrosos

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño en la pestaña de diseño.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 2
  • Ancho Máx .: 100%

fondos borrosos

Columna 2 Desbordamiento

Pase a la pestaña avanzada y oculte el desbordamiento de la columna 2 usando una sola línea de código CSS. Hacer esto nos ayudará a asegurarnos de que nada exceda el contenedor de la columna. Esto será particularmente importante una vez que comencemos a transformar un módulo de imagen en un fondo borroso y aumentemos su tamaño.

overflow: hidden;

fondos borrosos

Columna 3 Desbordamiento

Haz lo mismo para la tercera columna.

overflow: hidden;

fondos borrosos

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar copia H2

Es hora de comenzar a agregar módulos, comenzando con un Módulo de texto en la primera columna. Ingrese algún contenido H2 de su elección.

fondos borrosos

Configuraciones de texto H2

Pase a la pestaña de diseño y cambie la configuración del texto H2.

  • Título 2 Fuente: Poppins
  • Título 2 Color del texto: # 232323
  • Encabezado 2 Tamaño del texto: 40px

fondos borrosos

Espaciado

Agregue también un margen superior personalizado.

  • Margen superior: 9vw

fondos borrosos

Agregar módulo divisor a la columna 1

Visibilidad

El segundo módulo que necesitamos en la columna 2 es un Módulo Divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

  • Mostrar divisor: sí

fondos borrosos

Línea

Pase a la pestaña de diseño y cambie el color de la línea.

  • Color de línea: # 000000

fondos borrosos

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido

Continúe agregando otro módulo de texto con algún contenido de párrafo de su elección.

fondos borrosos

Configuraciones de texto

Cambie la configuración de texto a continuación.

  • Fuente de texto: Poppins
  • Peso de fuente de texto: ligero
  • Tamaño de texto: 17px
  • Altura de la línea de texto: 2.1em

fondos borrosos

Agregar módulo de botón a la columna 1

Agregar copia

El siguiente y último módulo que necesitamos en la columna 1 es un Módulo de botones. Ingrese alguna copia de su elección.

fondos borrosos

Configuraciones de botones

Pase a la pestaña de diseño y aplique estilo al botón en la configuración del botón.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 20 px
  • Color del texto del botón: # 000000
  • Color de fondo del botón: # f4f4f4
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 0px
  • Fuente del botón: Poppins
  • Peso de fuente del botón: negrita
  • Estilo de fuente del botón: mayúscula

fondos borrosos

fondos borrosos

Espaciado

Agregue algunos valores de espaciado personalizados también.

  • Margen superior: 20 px
  • Margen inferior: 20 px
  • Relleno superior: 20px
  • Relleno inferior: 20px
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px

fondos borrosos

Agregue el módulo de imagen n. ° 1 a la columna 2

Subir imagen 1: 1

¡A la segunda columna! Aquí, el primer módulo que necesitamos es un módulo de imagen. Cargue una imagen con una relación 1: 1. Esto significa que su imagen debe ser un cuadrado perfecto (el ancho debe ser igual a la altura).

fondos borrosos

Dimensionamiento

Pase a la pestaña de diseño y active la opción "Forzar ancho completo".

  • Forzar ancho completo: sí

fondos borrosos

Agregue el módulo de imagen n. ° 2 a la columna 2

Subir imagen 1: 1

El segundo módulo que necesitamos en la columna 2 es otro módulo de imagen. De nuevo, estamos usando una imagen con una relación 1: 1.

fondos borrosos

Dimensionamiento

Pase a la pestaña de diseño y cambie la configuración de tamaño.

  • Forzar ancho completo: sí
  • Altura: 320 px

fondos borrosos

Espaciado

Cree una superposición entre este y el módulo anterior agregando un margen superior negativo.

  • Margen superior: -100px

fondos borrosos

Filtros

A continuación, vamos a cambiar la configuración de los filtros. Esta es la parte donde convertimos la imagen en un fondo borroso.

  • Saturación: 200%
  • Brillo: 145%
  • Contraste: 117%
  • Desenfoque: 40px

fondos borrosos

Escala de transformación

Para asegurarnos de que la imagen cubra todo el ancho de la columna, aumentaremos el tamaño en la configuración de transformación. Gracias al desbordamiento de la columna oculta que hemos agregado a la configuración de la fila, nada superará el contenedor de la columna.

  • Derecha: 180%
  • Inferior: 180%

fondos borrosos

Agregar módulo CTA a la columna 2

Agregar contenido

El siguiente y último módulo que necesitamos en la segunda columna es un Módulo CTA. Ingrese alguna copia de su elección.

fondos borrosos

Añadir enlace

Pase a la configuración del enlace y agregue una URL de enlace de botón para que el botón aparezca en el diseño.

fondos borrosos

Eliminar color de fondo

Elimine el color de fondo también.

  • Usar color de fondo: no

fondos borrosos

Configuración del texto del título

Continúe yendo a la pestaña de diseño y cambiando la configuración del texto del título.

  • Nivel de título del título: H3
  • Fuente del título: Poppins
  • Tamaño del texto del título: 40 px
  • Espacio entre letras de título: -1px

fondos borrosos

Configuración de texto del cuerpo

Modifique la configuración del texto del cuerpo también.

  • Fuente del cuerpo: Poppins
  • Peso de la fuente del cuerpo: ligero
  • Altura de la línea del cuerpo: 2.2em

fondos borrosos

Configuraciones de botones

Junto con la configuración del botón.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 20 px
  • Color del texto del botón: #ffffff
  • Gradient Color 1: rgba (244,244,244,0.4)
  • Gradient Color 2: rgba (255,255,255,0)
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 0px
  • Fuente del botón: Poppins
  • Peso de fuente del botón: negrita
  • Estilo de fuente del botón: mayúscula

fondos borrosos

fondos borrosos

  • Margen superior: 50 px
  • Relleno superior: 20px
  • Relleno inferior: 20px
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px

fondos borrosos

Espaciado

Por último, pero no menos importante, cree una superposición entre este módulo y el fondo borroso agregando un margen superior negativo. También estamos dejando un espacio en blanco a la izquierda y a la derecha del módulo

  • Margen superior: -250 px
  • Acolchado izquierdo: 2vw
  • Relleno derecho: 2vw

fondos borrosos

Clonar todos los módulos en la columna 2 y colocar duplicados en la columna 3

Una vez que haya completado todos los módulos en la segunda columna, puede clonarlos y colocar los duplicados en la tercera columna.

fondos borrosos

Cambiar el módulo de imagen duplicada n. ° 1

Cambiar imagen

Cambie la imagen en el Módulo de imagen # 1.

fondos borrosos

Cambiar el módulo de imagen duplicada n. ° 2

Cambiar imagen

Haga lo mismo para el segundo Módulo de imagen en la columna.

fondos borrosos

Cambiar configuración de filtros

Y modifique también la configuración de los filtros del segundo Módulo de imagen.

  • Saturación: 180%
  • Brillo: 102%
  • Contraste: 117%
  • Desenfoque: 35 px

fondos borrosos

Cambiar módulo CTA duplicado

Cambiar copia

Continúe cambiando el contenido del Módulo CTA.

fondos borrosos

Cambiar el fondo del degradado del botón

¡Junto con el primer color de degradado del botón y listo!

  • Gradient Color 1: rgba (244,244,244,0.15)

fondos borrosos

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

fondos borrosos

Móvil

fondos borrosos

Pensamientos finales

En esta publicación, le mostramos cómo crear fondos borrosos utilizando solo las opciones integradas de Divi. Hemos recreado un hermoso ejemplo desde cero que puede usar para cualquier tipo de sitio web que cree. Esperamos que este tutorial lo inspire a crear sus propios diseños personalizados utilizando los consejos que se compartieron en este tutorial. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.