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 degradado más complejo, probablemente tenderá a buscar un software de edición de imágenes. Con Divi , hay una alternativa. Gracias a las muchas opciones integradas que tiene Divi, puedes convertir los módulos de imagen en fondos borrosos. Desenfocaremos los fondos hasta un punto en el que solo se vean los colores y, por lo tanto, formen 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!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño de fondos borrosos 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 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!
Acercarse
- Estamos agregando tres módulos diferentes a una columna; dos módulos de imagen y un módulo CTA
- La primera imagen mantiene su aspecto inicial
- La segunda imagen se verá borrosa y aumentará de tamaño.
- También mejoraremos los colores jugando con las otras configuraciones de filtros que se incluyen en el módulo de imagen.
- El módulo CTA se superpondrá al módulo de imagen borroso 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 sobrepasen el contenedor de columnas, vamos a ocultar el desbordamiento de columnas.
Empecemos a Recrear
Suscríbete 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.
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la configuración de tamaño en la pestaña de diseño.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 2
- Ancho máximo: 100%
Desbordamiento de la columna 2
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 sobrepase 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.
|
01
|
overflow: hidden; |
Desbordamiento de la columna 3
Haz lo mismo para la tercera columna.
|
01
|
overflow: hidden; |
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 de H2 de su elección.
Configuración de texto H2
Pase a la pestaña de diseño y cambie la configuración de texto H2.
- Título 2 Fuente: Poppins
- Título 2 Color del texto: #232323
- Encabezado 2 Tamaño del texto: 40px
Espaciado
Agregue también un margen superior personalizado.
- Margen superior: 9vw
Agregue el 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í
Línea
Pase a la pestaña de diseño y cambie el color de la línea.
- Color de línea: #000000
Agregue el Módulo de Texto #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.
Configuración de texto
Cambie la configuración de texto a continuación.
- Fuente del texto: Poppins
- Peso de fuente de texto: ligero
- Tamaño del texto: 17px
- Altura de línea de texto: 2,1 em
Agregar copia
El siguiente y último módulo que necesitamos en la columna 1 es un módulo de botones. Introduzca alguna copia de su elección.
Configuración 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: 20px
- 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 la fuente del botón: Negrita
- Estilo de fuente del botón: Mayúsculas
Espaciado
Agregue también algunos valores de espaciado personalizados.
- Margen superior: 20px
- Margen inferior: 20px
- Relleno superior: 20px
- Relleno inferior: 20px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Agregue el módulo de imagen n. ° 1 a la columna 2
Subir imagen 1:1
¡A por la segunda columna! Aquí, el primer módulo que necesitamos es un módulo de imagen. Sube una imagen con una proporción de 1:1. Esto significa que su imagen debe ser un cuadrado perfecto (el ancho debe ser igual a la altura).
Dimensionamiento
Pase a la pestaña de diseño y habilite la opción ‘Forzar ancho completo’.
- Forzar ancho completo: Sí
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. Estamos, de nuevo, usando una imagen con una proporción de 1:1.
Dimensionamiento
Pase a la pestaña de diseño y cambie la configuración de tamaño.
- Forzar ancho completo: Sí
- Altura: 320px
Espaciado
Cree una superposición entre este y el módulo anterior agregando un margen superior negativo.
- Margen superior: -100px
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
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 columnas ocultas que hemos agregado a la configuración de filas, nada superará el contenedor de columnas.
- Derecha: 180%
- Abajo: 180%
Agregue el 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. Introduzca alguna copia de su elección.
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.
Eliminar color de fondo
Elimina también el color de fondo.
- Usar color de fondo: No
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.
- Título Nivel de encabezado: H3
- Fuente del título: Poppins
- Tamaño del texto del título: 40px
- Espaciado entre letras del título: -1px
Configuración del texto del cuerpo
Modifique también la configuración del texto del cuerpo.
- Fuente del cuerpo: Poppins
- Peso de la fuente del cuerpo: ligero
- Altura de la línea del cuerpo: 2.2em
Configuración de botones
Junto con la configuración de los botones.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 20px
- Color del texto del botón: #ffffff
- Color degradado 1: rgba(244,244,244,0.4)
- Color degradado 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 la fuente del botón: Negrita
- Estilo de fuente del botón: Mayúsculas
- Margen superior: 50px
- Relleno superior: 20px
- Relleno inferior: 20px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
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 algunos espacios en blanco en el lado izquierdo y derecho del módulo.
- Margen superior: -250px
- Acolchado izquierdo: 2vw
- Acolchado derecho: 2vw
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.
Cambiar Módulo de Imagen Duplicada #1
Cambiar imagen
Cambie la imagen en el módulo de imagen #1.
Cambiar módulo de imagen duplicada #2
Cambiar imagen
Haga lo mismo para el segundo módulo de imagen de la columna.
Cambiar la configuración de los filtros
Y modifique también la configuración de filtros del segundo módulo de imagen.
- Saturación: 180%
- Brillo: 102%
- Contraste: 117%
- Desenfoque: 35px
Cambiar módulo de CTA duplicado
Cambiar copia
Continúe cambiando el contenido del Módulo CTA.
Cambiar fondo de degradado de botón
¡Junto con el primer botón degradado de color y listo!
- Color degradado 1: rgba(244,244,244,0.15)
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo crear fondos borrosos usando 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 de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.