Cuando se trata de máscaras de fondo, los usuarios tienden a usar software de edición de imágenes además de Divi, luego cargue la imagen en el Sitio web que crean. Aunque es una forma bastante práctica de personalizar su Sitio web, no es necesariamente la única solución. También puede crear máscaras de fondo dentro Divi, combinando los diferentes elementos de diseño y opciones de filtro de forma creativa. ¡Eso es exactamente lo que vamos a hacer en esta publicación! Convertimos personajes de gran tamaño en máscaras de fondo que lucen geniales en cualquier tamaño de pantalla. Esperamos que este tutorial te inspire a crear tus propios diseños utilizando personajes de gran tamaño y las opciones integradas de Divi.
¡Vamos!
Vista previa de muestra
Antes de sumergirnos en el tutorial, estos son los tipos de fondos que puede lograr con esta técnica.
diseño
Comenzaremos el diseño creando un fondo negro con una letra que tenga una imagen como fondo.
Añadir una nueva sección
Color de fondo
¡Comencemos con el primer ejemplo! Agregue una nueva sección regular a una página nueva o existente y agregue un fondo a esta sección:
- Color de fondo: #000000
espaciamiento
Luego vaya a la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
desbordamiento
Cambie a la pestaña Avanzado y oculte los desbordamientos de la sección. Esto será importante más adelante en este tutorial cuando cambiemos la posición del módulo de texto que contiene el carácter de gran tamaño.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar fila 1
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columna:
Color de fondo de la columna 1
Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo a la primera columna.
- Color de fondo de la columna 1: #848484
Imagen de fondo de la columna 1
También agregue un color de fondo. Para combinar el color de fondo y la imagen, vamos a aplicar un modo de fusión.
- Mezcla de imagen de fondo de columna: multiplicar
apresto
Cambie a la pestaña Diseño y deje que la fila llene todo el ancho de la pantalla aplicando las siguientes configuraciones de tamaño:
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
- Ancho: 100%
- Ancho máximo: 100%
espaciamiento
También nos deshacemos de todo el relleno personalizado hacia arriba y hacia abajo en la fila.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar un módulo de texto a una columna
Agregar un personaje al área de contenido
Es hora de agregar el módulo de texto que contiene un carácter de gran tamaño. Añade la letra “o” al cuadro. contenido.
Color de fondo
Continúe yendo a la configuración de fondo y agregue un color de fondo negro.
- Color de fondo: #000000
Configuraciones de texto
Vaya a la pestaña Diseño y cambie la configuración del texto. Observe cómo usamos un valor alto para el tamaño del texto.
- Fuente de texto: Poppins
- Tamaño del texto: 100vw
- Orientación del texto: Centro
espaciamiento
Luego, vaya a la configuración de espaciado y agregue valores de margen y relleno personalizados.
- Margen superior: -6vw
- Mejor relleno: 15vw
- Relleno inferior: 49vw
filtros
¡Es hora de hacer magia! Acceda a la configuración de filtro del módulo y cambie el modo de fusión en consecuencia:
- Modo de mezcla: Multiplicar
- Brillo: puede cambiar este valor a su gusto
Añade la línea 2
Estructura de la columna
Una vez que se haya agregado su carácter de gran tamaño al diseño, puede continuar agregando los módulos restantes que desea mostrar en la sección, preferiblemente agregando una nueva línea:
apresto
Sin agregar ningún módulo todavía, abra la configuración de fila y deje que ocupe todo el ancho de la pantalla.
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
- Ancho: 100%
- Ancho máximo: 100%
espaciamiento
También elimine todo el relleno predeterminado hacia arriba y hacia abajo
- Relleno superior: 0px
- Relleno inferior: 0px
Agregue el módulo de texto # 1 a la columna
Añadir contenido H1
En esta nueva línea, puedes agregar los módulos de tu elección. Para recrear el ejemplo exacto compartido en la vista previa de esta publicación, comience agregando un módulo de texto que contenga contenido H1.
Configuraciones de texto H1
Vaya a la pestaña Diseño y cambie la configuración del texto H1.
- Fuente del título: Playfair Display
- Peso de la fuente: Negrita
- Alineación del texto del título: Centro
- Color del texto del título: #ffffff
- Tamaño del título del texto: 6vw
espaciamiento
Continúe yendo a la configuración de espaciado y deje que el módulo de texto se superponga al carácter de gran tamaño agregando un margen superior negativo. También nos aseguramos de que haya espacio a la izquierda y a la derecha del módulo para garantizar la capacidad de respuesta.
- Margen superior: -47vw
- Margen izquierdo: 1vw
- Margen derecho: 1vw
Agregar un módulo de división a la columna
visibilidad
El siguiente módulo que necesitamos es un módulo de división. Asegúrese de que la opción "Mostrar separador" esté habilitada.
- Mostrar divisor: si
Color
Vaya a la pestaña de diseño a continuación y cambie el color del divisor.
- Color: #ffffff
apresto
También cambie los parámetros de tamaño.
- Peso del divisor: 13px
- Ancho: 16%
- Alineación del módulo: centro
espaciamiento
Agregue también un margen superior para crear un espacio entre el módulo de texto y el módulo de división.
- Margen superior: 16vw
Agregue el módulo de texto # 2 a la columna
Agregar contenido
El siguiente módulo que necesitamos es un módulo de texto con un contenido del párrafo.
Configuraciones de texto
Acceda a la configuración de texto y realice los siguientes cambios:
- Fuente de texto: Open Sans
- Color del texto: #ffffff
- Tamaño del texto: 1vw (escritorio), 2vw (tableta), 2.5vw (teléfono)
- Altura de la línea de texto: 1.9em
- Orientación del texto: Centro
espaciamiento
También agregue valores de espaciado personalizados.
- Margen superior: 3vw
- Margen inferior: 3vw (computadora de escritorio), 10vw (tableta y teléfono)
- Margen izquierdo: 27vw (escritorio), 10vw (tableta), 8vw (teléfono)
- Margen derecho: 27vw (escritorio), 10vw (tableta), 8vw (teléfono)
Agregar un módulo de botón a la columna
Añadir una copia
En el siguiente y último módulo, que es un módulo de botones. Ingrese una copia de su elección.
alineación
Continúe cambiando la alineación del botón en la pestaña Diseño.
- Alineación de los botones: centro.
Configuraciones de botones
Cambie a la configuración del botón y personalice el botón como desee.
- Use estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 1vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
- Color de texto del botón: #ffffff
- Ancho del borde del botón: 1px
- Radio del borde del botón: 0px
- Fuente de botón: Open Sans
- Peso de la fuente: Ultra Bold
- Estilo de letra: mayúsculas
espaciamiento
Finalmente, también agregamos márgenes personalizados y valores de relleno para obtener el resultado deseado.
- Margen inferior: 10vw
- Relleno: 15px
- Relleno inferior: 15px
- Relleno izquierdo: 50px
- Derecho de tapicería: 50px
Resultado final
Esto es lo que parece lo que hemos construido hasta ahora.
Consideraciones finales
En este artículo, le mostramos cómo usar personajes de gran tamaño para crear máscaras de fondo increíbles con Divi. Esta es una excelente manera de crear un diseño web personalizado sin tener que usar un software de edición de imágenes. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!
