Cuando se trata de máscaras de fondo, las personas tienden a usar software de edición de imágenes fuera de Divi y luego suben la imagen al sitio web que están creando. Aunque esa es una forma sólida de personalizar y personalizar su sitio web, no es necesariamente la única forma de hacerlo. También puede crear máscaras de fondo dentro de Divi, combinando creativamente los diferentes elementos de diseño y opciones de filtros. ¡Eso es exactamente lo que estamos a punto de hacer en esta publicación! Vamos a convertir los caracteres de gran tamaño en máscaras de fondo que se ven muy bien en diferentes tamaños de pantalla. Esperamos que este tutorial lo inspire a crear sus propios diseños utilizando caracteres de gran tamaño y las opciones integradas de Divi.
¡Hagámoslo!
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Ejemplo 1
Ejemplo # 2
Descargar The Hero Sections GRATIS
Para poner tus manos en las secciones de héroe gratis, primero tendrás que descargarlas 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.
Recrear Ejemplo # 1
(incrustar) https://www.youtube.com/watch?v=Crv3gC-qp3s (/ incrustar)
Suscríbase a nuestro canal de Youtube
Agregar 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 esa sección:
- Color de fondo: # 000000
Espaciado
Luego, vaya a la configuración de espaciado y elimine todos los rellenos superiores e inferiores predeterminados.
- Relleno superior: 0px
- Relleno inferior: 0px
Desbordamiento
Pase a la pestaña avanzada y oculte los desbordamientos de la sección. Esto será importante más adelante en este tutorial cuando reposicionemos el Módulo de texto que contiene el carácter de gran tamaño.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar fila # 1
Estructura de columna
Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:
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
Agregue un color de fondo también. 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
Dimensionamiento
Pase a la pestaña de diseño y permita que la fila ocupe todo el ancho de la pantalla aplicando la siguiente configuración de tamaño:
- Usar ancho de canal personalizado: sí
- Ancho de canal: 1
- Ancho: 100%
- Ancho Máx .: 100%
Espaciado
También nos estamos deshaciendo de todo el relleno superior e inferior personalizado de la fila.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar módulo de texto a columna
Agregar carácter al cuadro de contenido
Es hora de agregar el módulo de texto que contiene un carácter de gran tamaño. Agregue la letra "o" al cuadro de 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
Pase a la pestaña de diseño y cambie la configuración del texto. Observe cómo estamos utilizando un valor alto para el tamaño del texto.
- Fuente de texto: Poppins
- Tamaño de texto: 100vw
- Orientación del texto: centro
Espaciado
Luego, vaya a la configuración de espaciado y agregue algunos valores personalizados de margen y relleno.
- Margen superior: -6vw
- Relleno superior: 15vw
- Relleno inferior: 49vw
Filtros
¡Es hora de hacer que la magia suceda! Vaya a la configuración de filtros del módulo y modifique el modo de fusión en consecuencia:
- Modo de mezcla: multiplicar
Agregar fila # 2
Estructura de columna
Una vez que su personaje de gran tamaño se haya agregado al diseño, puede continuar agregando los módulos restantes que desea mostrar en la sección, preferiblemente agregando una nueva fila:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.
- Usar ancho de canal personalizado: sí
- Ancho de canal: 1
- Ancho: 100%
- Ancho Máx .: 100%
Espaciado
Elimine también todos los rellenos superiores e inferiores predeterminados.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregue el módulo de texto n. ° 1 a la columna
Añadir contenido H1
En esta nueva fila, puede agregar los módulos que desee. Para recrear el ejemplo exacto que se compartió en la vista previa de esta publicación, comience agregando un Módulo de texto con algún contenido H1.
Configuraciones de texto H1
Pase a la pestaña de diseño y cambie la configuración del texto H1.
- Título de fuente: Playfair Display
- Peso de la fuente del encabezado: negrita
- Encabezado de texto: Centro
- Color del texto del encabezado: #ffffff
- Tamaño del texto del encabezado: 6vw
Espaciado
Continúe yendo a la configuración de espaciado y permita 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 en el lado izquierdo y derecho del módulo para garantizar la capacidad de respuesta.
- Margen superior: -47vw
- Margen izquierdo: 1vw
- Margen derecho: 1vw
Agregar módulo divisor a la columna
Visibilidad
El siguiente módulo que necesitamos es un Módulo Divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.
- Mostrar divisor: sí
Color
Vaya a la pestaña de diseño a continuación y cambie el color del divisor.
- Color: #ffffff
Dimensionamiento
Modifique la configuración de tamaño también.
- Divisor de peso: 13px
- Ancho: 16%
- Alineación del módulo: centro
Espaciado
Y agregue un margen superior para crear espacio entre el Módulo de texto y el Módulo divisor.
- Margen superior: 16vw
Agregue el módulo de texto n. ° 2 a la columna
Agregar contenido
El siguiente módulo que necesitamos es un Módulo de texto con algún contenido de párrafo.
Configuraciones de texto
Vaya 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
Espaciado
Agregue algunos valores de espaciado personalizados también.
- Margen superior: 3vw
- Margen inferior: 3vw (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 módulo de botón a columna
Agregar copia
En el siguiente y último módulo, que es un módulo de botones. Ingrese alguna copia de su elección.
Alineación
Continúe cambiando la alineación del botón en la pestaña de diseño.
- Alineación de botones: centro
Configuraciones de botones
Vaya a la configuración del botón y aplique el estilo que desee.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 1vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
- Color del texto del botón: #ffffff
- Ancho del borde del botón: 1px
- Radio del borde del botón: 0px
- Fuente del botón: Abrir sin
- Peso de fuente: Ultra Bold
- Estilo de fuente: mayúscula
Espaciado
Por último, pero no menos importante, también estamos agregando algunos márgenes personalizados y valores de relleno para lograr el resultado deseado.
- Margen inferior: 10vw
- Relleno superior: 15px
- Relleno inferior: 15px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Recrear Ejemplo # 2
Agregar nueva sección
¡Al segundo ejemplo! Agregue una nueva sección regular a la página en la que está trabajando.
Desbordamiento
Ocultar el desbordamiento de la sección en la pestaña avanzada.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar fila # 1
Estructura de columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
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: #dddddd
Imagen de fondo de la columna 1
Agregue también una imagen de fondo y combine el color de fondo con la imagen utilizando un modo de fusión.
- Mezcla de imagen de fondo de columna: pantalla
Dimensionamiento
Luego, vaya a la configuración de tamaño de la fila y permita que ocupe todo el ancho de la pantalla.
- Usar ancho de canal personalizado: sí
- Ancho de canal: 1
- Ancho: 100%
- Ancho Máx .: 100%
Espaciado
Retire el relleno superior e inferior a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar módulo de texto a columna
Agregar carácter al cuadro de contenido
¡Es hora de agregar el módulo de texto que contiene los caracteres de gran tamaño! Copie los siguientes caracteres: ‘‘ ’y agréguelos al cuadro de contenido. Puedes usar cualquier tipo de personaje que desees yendo al Mapa de caracteres (Windows) o Paleta de caracteres (Mac) en tu computadora.
Color de fondo
Cambie el color de fondo de este módulo a blanco.
- Color de fondo: #ffffff
Configuraciones de texto
Luego, vaya a la pestaña de diseño y cambie la configuración del texto.
- Fuente de texto: Poppins
- Color del texto: # 0c0c0c
- Tamaño del texto: 80vw
- Orientación del texto: centro
Espaciado
Modifique los valores de relleno superior e inferior también.
- Relleno superior: 27.8vw
- Acolchado inferior: 27.8vw
Filtros
Y cree el efecto de máscara de fondo agregando un módulo de mezcla personalizado al módulo.
- Modo de fusión: pantalla
Agregar fila # 2
Estructura de columna
Una vez que su personaje de gran tamaño esté en su lugar, puede agregar una nueva fila con los módulos restantes.
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.
- Usar ancho de canal personalizado: sí
- Ancho de canal: 1
- Ancho: 100%
- Ancho Máx .: 100%
Espaciado
Agregue algunos valores de relleno personalizados a continuación.
- Relleno superior: 1vw
- Relleno inferior: 1vw
- Acolchado izquierdo: 3vw
- Relleno derecho: 3vw
Agregue el módulo de texto n. ° 1 a la columna
Añadir contenido H1
Hora de agregar los módulos restantes. Si quieres recrear el mismo diseño exacto que has visto en la vista previa de esta publicación, comienza agregando un Módulo de texto con algún contenido H1.
Configuraciones de texto H1
Pase a la pestaña de diseño y cambie la configuración del texto H1.
- Fuente del encabezado: Poppins
- Peso de la fuente del encabezado: Semi negrita
- Encabezado de texto: Centro
- Color del texto del encabezado: # 000000
- Tamaño del texto del encabezado: 5vw
Espaciado
Cree una superposición entre este módulo y el Módulo de texto que contiene los caracteres de gran tamaño agregando un margen superior negativo.
- Margen superior: -38vw
Agregar módulo divisor a la columna
Visibilidad
El siguiente módulo que necesitamos es un Módulo Divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.
- Mostrar divisor: sí
Color
Luego, vaya a la pestaña de diseño y cambie el color del divisor.
- Color: # 000000
Dimensionamiento
Modifique la configuración de tamaño también.
- Divisor de peso: 13px
- Ancho: 16px
- Alineación del módulo: centro
Espaciado
Junto con los valores de relleno en la configuración de espaciado.
- Margen superior: 2vw
- Margen inferior: 2vw
Agregue el módulo de texto n. ° 2 a la columna
Agregar contenido
El siguiente módulo que necesitamos es otro Módulo de texto. Ingrese algún contenido de párrafo de su elección.
Configuraciones de texto
Luego, vaya a la configuración de texto y realice algunos cambios.
- Fuente de texto: Open Sans
- Color del texto: # 000000
- 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
Espaciado
Agregue algunos valores de margen personalizados también.
- Margen superior: 3vw
- Margen inferior: 3vw (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 módulo de botón a columna
Agregar copia
El siguiente y último módulo que necesitamos es un Módulo de botones. Ingrese alguna copia de su elección.
Alineación
Luego, vaya a la pestaña de diseño y modifique la alineación del botón.
- Alineación de botones: centro
Configuraciones de botones
Dale estilo al botón para que se vea exactamente como quieres.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 1vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
- Color del texto del botón: #ffffff
- Color de fondo del botón: # 000000
- Ancho del borde del botón: 0px
- Radio del borde del botón: 50 px
- Fuente del botón: Abrir sin
- Peso de fuente: Ultra Bold
- Estilo de fuente: mayúscula
Espaciado
Y complete el diseño agregando algunos valores personalizados de margen y relleno al botón.
- Margen inferior: 10vw
- Relleno superior: 15px
- Relleno inferior: 15px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Ejemplo 1
Ejemplo # 2
Pensamientos finales
En esta publicación, le mostramos cómo usar caracteres de gran tamaño para crear hermosas máscaras de fondo con Divi. Esta es una excelente manera de crear un diseño web personalizado y personalizado sin tener que usar ningún 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!
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.