Si está familiarizado con el software de edición de imágenes, como Photoshop, probablemente también esté familiarizado con las máscaras. Las máscaras lo ayudan a unir dos capas y crear un resultado único. Con Divi , puedes ser creativo y crear tu propio tipo de máscaras dentro de tus páginas usando fondos degradados en combinación con imágenes de fondo. En este tutorial, le mostraremos paso a paso cómo crear 8 máscaras de fondo diferentes para cualquier tipo de diseño en el que esté trabajando. Este tutorial lo ayudará a realizar ajustes de diseño rápidos en sus páginas sin tener que tocar ningún software de edición de imágenes.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
¡Comencemos a crear!
Suscríbete a nuestro canal de Youtube
Agregar nueva sección
Espaciado
Agregue una nueva sección a su página, abra la configuración de la sección y agregue un relleno superior e inferior personalizado.
- Relleno superior: 150px
- Relleno inferior: 150px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Agregue el módulo de Blurb al n. ° 1
Agregar contenido
¡Es hora de comenzar a agregar módulos! Necesitaremos 8 módulos de Blurb en total. Comenzaremos con el primero, haremos los cambios generales y lo clonaremos 7 veces antes de realizar cambios únicos en cada módulo de Blurb. Agregue un nuevo módulo de Blurb a la primera columna y agregue algún contenido de su elección.
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración de texto a continuación.
- Orientación del texto: Centro
- Color del texto: oscuro
Configuración del texto del título
Abra también la configuración del texto del título y cambie las cosas.
- Fuente del título: Antic Didone
- Tamaño del texto del título: 23px
- Altura de la línea de título: 1,5 em
Sombra de la caja
Por último, agregue también una sombra de cuadro sutil al módulo Blurb.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -10px
- Color de sombra: rgba(0,0,0,0.3)
Clonar módulo Blurb 7 veces y colocar 4 duplicados en la segunda columna
Una vez que haya realizado todos los cambios generales, puede continuar y clonar el módulo de Blurb 7 veces. Coloque cuatro de los duplicados en la segunda columna de la fila y deje tres en la primera.
Modifique el Módulo Blurb #1
Fondo degradado
Ahora podemos comenzar a agregar configuraciones únicas a cada uno de los módulos de Blurb. Abra el primer módulo de Blurb en la columna 1 y agréguele un fondo degradado.
- Color 1: rgba(255.255.255,0)
- Color 2: #ffffff
- Tipo de gradiente: Radial
- Dirección radial: inferior
- Posición inicial: 45%
- Posición final: 45%
- Coloque el degradado sobre la imagen de fondo: Sí
Imagen de fondo
Una vez que haya agregado el fondo degradado, también puede agregar la imagen de fondo y combinarla con las siguientes configuraciones de fondo:
- Posición de la imagen de fondo: centro superior
- Repetición de la imagen de fondo: sin repetición
Espaciado
Por último, pero no menos importante, agregue un poco de relleno personalizado para que todo encaje en su lugar.
- Relleno superior: 100px
- Relleno inferior: 350px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Modifique el módulo Blurb #2
Fondo degradado
Pasemos al siguiente módulo de Blurb (el primer módulo de la segunda columna) y agreguemos un fondo degradado.
- Color 1: rgba(255.255.255,0)
- Color 2: #ffffff
- Tipo de gradiente: Radial
- Dirección radial: arriba a la derecha
- Posición inicial: 45%
- Posición final: 45%
- Coloque el degradado sobre la imagen de fondo: Sí
Imagen de fondo
Continúe agregando una imagen de fondo combinada con la configuración de fondo a continuación.
- Posición de la imagen de fondo: arriba a la derecha
- Repetición de la imagen de fondo: sin repetición
Espaciado
Y termine el diseño agregando valores de relleno personalizados en la configuración de espaciado.
- Relleno superior: 350px
- Relleno inferior: 100px
- Relleno izquierdo: 50px
- Relleno derecho: 200 px (computadora de escritorio y tableta), 50 px (teléfono)
Modifique el Módulo Blurb #3
Fondo degradado
En el tercer módulo de publicidad (el segundo módulo de publicidad en la primera columna). Abra la configuración y agregue un fondo degradado.
- Color 1: rgba(255.255.255,0)
- Color 2: #ffffff
- Tipo de gradiente: Radial
- Dirección radial: superior izquierda
- Posición inicial: 45%
- Posición final: 45%
- Coloque el degradado sobre la imagen de fondo: Sí
Imagen de fondo
Continúe agregando una imagen de fondo a continuación.
- Posición de la imagen de fondo: arriba a la izquierda
- Repetición de la imagen de fondo: sin repetición
Espaciado
Y agregue un poco de relleno personalizado al módulo para que tome su forma.
- Relleno superior: 350px
- Relleno inferior: 100px
- Relleno izquierdo: 200 px (computadora de escritorio y tableta), 50 px (teléfono)
- Relleno derecho: 50px
Modifique el Módulo Blurb #4
Fondo degradado
¡Pasamos al segundo módulo de la segunda columna! Abra la configuración del módulo Blurb y agregue un fondo degradado.
- Color 1: rgba(255.255.255,0)
- Color 2: #ffffff
- Tipo de gradiente: Radial
- Dirección radial: Superior
- Posición inicial: 45%
- Posición final: 45%
- Coloque el degradado sobre la imagen de fondo: Sí
Imagen de fondo
Continúe agregando una imagen de fondo a continuación.
- Posición de la imagen de fondo: centro superior
- Repetición de la imagen de fondo: sin repetición
Espaciado
Y termine el diseño agregando valores de relleno personalizados en la configuración de espaciado.
- Relleno superior: 350px
- Relleno inferior: 100px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Modifique el Módulo Blurb #5
Fondo degradado
En el siguiente módulo, que es el tercer módulo en la primera columna. Abra el módulo y agregue un fondo degradado.
- Color 1: rgba(255.255.255,0)
- Color 2: #ffffff
- Tipo de gradiente: Radial
- Dirección radial: Izquierda
- Posición inicial: 35%
- Posición final: 35%
- Coloque el degradado sobre la imagen de fondo: Sí
Imagen de fondo
Continúe agregando una imagen de fondo en combinación con la siguiente configuración de fondo:
- Posición de la imagen de fondo: arriba a la izquierda
- Repetición de la imagen de fondo: sin repetición
Espaciado
Y agregue algunos valores de relleno personalizados en la configuración de espaciado también.
- Relleno superior: 100px
- Relleno inferior: 100px
- Relleno izquierdo: 240 px (computadora de escritorio y tableta), 150 px (teléfono)
- Relleno derecho: 50 px (computadora de escritorio y tableta), 20 px (teléfono)
Modifique el Módulo Blurb #6
Fondo degradado
¡Pasamos al tercer módulo de la segunda columna! Abra la configuración y agregue un fondo degradado.
- Color 1: rgba(255.255.255,0)
- Color 2: #ffffff
- Tipo de gradiente: lineal
- Dirección del gradiente: 140 grados
- Posición inicial: 60%
- Posición final: 60%
- Coloque el degradado sobre la imagen de fondo: Sí
Imagen de fondo
Agregue una imagen de fondo con la configuración de fondo correspondiente a continuación.
- Posición de la imagen de fondo: centro superior
- Repetición de la imagen de fondo: sin repetición
Espaciado
Y complete el diseño utilizando algunos valores de relleno personalizados en la configuración de espaciado.
- Relleno superior: 100px
- Relleno inferior: 350px
- Relleno izquierdo: 50px
- Relleno derecho: 200 px (computadora de escritorio y tableta), 50 px (tableta)
Modifique el Módulo Blurb #7
Fondo degradado
El siguiente módulo de Blurb en la columna 1 usa el siguiente fondo degradado:
- Color 1: rgba(255.255.255,0)
- Color 2: #ffffff
- Tipo de gradiente: lineal
- Dirección del gradiente: 220 grados
- Posición inicial: 60%
- Posición final: 60%
- Coloque el degradado sobre la imagen de fondo: Sí
Imagen de fondo
Agregue una imagen de fondo también.
- Posición de la imagen de fondo: centro superior
- Repetición de la imagen de fondo: sin repetición
Espaciado
Y agregue los valores de relleno personalizados necesarios en la configuración de espaciado.
- Relleno superior: 100px
- Relleno inferior: 350px
- Relleno izquierdo: 200 px (computadora de escritorio y tableta), 50 px (teléfono)
- Relleno derecho: 50px
Modifique el Módulo Blurb #8
Fondo degradado
¡Hasta el último módulo de Blurb! Abra la configuración y agregue un fondo degradado.
- Color 1: rgba(255.255.255,0)
- Color 2: #ffffff
- Tipo de gradiente: Radial
- Dirección radial: Derecha
- Posición inicial: 35%
- Posición final: 35%
- Coloque el degradado sobre la imagen de fondo: Sí
Imagen de fondo
Sube la imagen de fondo a continuación.
- Posición de la imagen de fondo: arriba a la izquierda
- Repetición de la imagen de fondo: sin repetición
Espaciado
Y termine el diseño y el tutorial agregando un relleno personalizado a la configuración de espaciado del módulo.
- Relleno superior: 100px
- Relleno inferior: 100px
- Relleno izquierdo: 50 px (computadora de escritorio y tableta), 20 px (teléfono)
- Relleno derecho: 240 px (computadora de escritorio y tableta), 170 px (teléfono)
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales
En este tutorial, le mostramos cómo ser creativo con las opciones integradas de Divi. Más específicamente, hemos usado fondos radiales e imágenes de fondo para crear máscaras de fondo. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!