Convirtiendo personajes de gran tamaño en máscaras de fondo con Divi (¡descarga gratuita!)


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

personajes de gran tamaño

Ejemplo # 2

personajes de gran tamaño

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

personajes de gran tamaño

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

personajes de gran tamaño

Espaciado

Luego, vaya a la configuración de espaciado y elimine todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

personajes de gran tamaño

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

personajes de gran tamaño

Agregar fila # 1

Estructura de columna

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

personajes de gran tamaño

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

personajes de gran tamaño

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

personajes de gran tamaño

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%

personajes de gran tamaño

Espaciado

También nos estamos deshaciendo de todo el relleno superior e inferior personalizado de la fila.

  • Relleno superior: 0px
  • Relleno inferior: 0px

personajes de gran tamaño

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.

personajes de gran tamaño

Color de fondo

Continúe yendo a la configuración de fondo y agregue un color de fondo negro.

  • Color de fondo: # 000000

personajes de gran tamaño

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

personajes de gran tamaño

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

personajes de gran tamaño

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

personajes de gran tamaño

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:

personajes de gran tamaño

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%

personajes de gran tamaño

Espaciado

Elimine también todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

personajes de gran tamaño

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.

personajes de gran tamaño

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

personajes de gran tamaño

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

personajes de gran tamaño

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í

personajes de gran tamaño

Color

Vaya a la pestaña de diseño a continuación y cambie el color del divisor.

  • Color: #ffffff

personajes de gran tamaño

Dimensionamiento

Modifique la configuración de tamaño también.

  • Divisor de peso: 13px
  • Ancho: 16%
  • Alineación del módulo: centro

personajes de gran tamaño

Espaciado

Y agregue un margen superior para crear espacio entre el Módulo de texto y el Módulo divisor.

  • Margen superior: 16vw

personajes de gran tamaño

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.

personajes de gran tamaño

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

personajes de gran tamaño

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)

personajes de gran tamaño

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.

personajes de gran tamaño

Alineación

Continúe cambiando la alineación del botón en la pestaña de diseño.

  • Alineación de botones: centro

personajes de gran tamaño

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

personajes de gran tamaño

personajes de gran tamaño

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

personajes de gran tamaño

Recrear Ejemplo # 2

personajes de gran tamaño

Agregar nueva sección

¡Al segundo ejemplo! Agregue una nueva sección regular a la página en la que está trabajando.

personajes de gran tamaño

Desbordamiento

Ocultar el desbordamiento de la sección en la pestaña avanzada.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

personajes de gran tamaño

Agregar fila # 1

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

personajes de gran tamaño

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

personajes de gran tamaño

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

personajes de gran tamaño

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%

personajes de gran tamaño

Espaciado

Retire el relleno superior e inferior a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

personajes de gran tamaño

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.

personajes de gran tamaño

Color de fondo

Cambie el color de fondo de este módulo a blanco.

  • Color de fondo: #ffffff

personajes de gran tamaño

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

personajes de gran tamaño

Espaciado

Modifique los valores de relleno superior e inferior también.

  • Relleno superior: 27.8vw
  • Acolchado inferior: 27.8vw

personajes de gran tamaño

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

personajes de gran tamaño

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.

personajes de gran tamaño

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%

personajes de gran tamaño

Espaciado

Agregue algunos valores de relleno personalizados a continuación.

  • Relleno superior: 1vw
  • Relleno inferior: 1vw
  • Acolchado izquierdo: 3vw
  • Relleno derecho: 3vw

personajes de gran tamaño

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.

personajes de gran tamaño

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

personajes de gran tamaño

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

personajes de gran tamaño

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í

personajes de gran tamaño

Color

Luego, vaya a la pestaña de diseño y cambie el color del divisor.

  • Color: # 000000

personajes de gran tamaño

Dimensionamiento

Modifique la configuración de tamaño también.

  • Divisor de peso: 13px
  • Ancho: 16px
  • Alineación del módulo: centro

personajes de gran tamaño

Espaciado

Junto con los valores de relleno en la configuración de espaciado.

  • Margen superior: 2vw
  • Margen inferior: 2vw

personajes de gran tamaño

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.

personajes de gran tamaño

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

personajes de gran tamaño

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)

personajes de gran tamaño

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.

personajes de gran tamaño

Alineación

Luego, vaya a la pestaña de diseño y modifique la alineación del botón.

  • Alineación de botones: centro

personajes de gran tamaño

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

personajes de gran tamaño

personajes de gran tamaño

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

personajes de gran tamaño

Avance

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

Ejemplo 1

personajes de gran tamaño

Ejemplo # 2

personajes de gran tamaño

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.