Transformación de personajes de gran tamaño en máscaras de fondo con div (¡descarga gratuita!)

Cuando se trata de máscaras de fondo, las personas tienden a usar el software de edición de imágenes fuera de div y luego cargar la imagen en el sitio que crean. Aunque esta es una forma sólida de personalizar y personalizar el sitio, no es necesariamente la única forma de seguir. También puede crear máscaras de fondo dentro de la división misma, combinando diferentes elementos de diseño y opciones de filtrado de manera creativa. ¡Exactamente lo que vamos a hacer en esta publicación! Transformaremos los personajes 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 modelos utilizando personajes de gran tamaño y las opciones integradas del DIV.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Ejemplo no. 1

Ejemplo no. 2

Descargue las secciones de héroes gratuitos para poner sus manos en héroes gratuitos, primero deberá descargarlas usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Recrear el ejemplo no. 1
Suscríbete a nuestro canal de YouTube
¡Agregue un nuevo color de fondo para comenzar con el primer ejemplo! Agregue una nueva sección habitual a una página nueva o existente y agregue un fondo a esa sección:

Color de fondo: # 000000
Espacio y luego, acceda a la configuración de espaciado y elimine todos los rellenos predeterminados e inferiores.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Excelente ir a la pestaña avanzada y ocultar la salida 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 verticalmente: oculto
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Columna 1 Color de fondo sin agregar módulos, abra la configuración de la fila y agregue un color de fondo a la primera columna.

Columna 1 Color de fondo: # 848484
La imagen del sótano de la columna 1 agrega un color de fondo. Para combinar el color y la imagen de fondo, aplicaremos un modo de mezcla.

Mezcla de columna de imagen de fondo: Dimensionamiento de multiplicación 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:
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
El espacio también elimina todos los revestimientos personalizados e alineados en el fondo.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue un módulo de texto a la columna Agregar carácter al cuadro de contenido es agregar el módulo de texto que contiene un carácter de gran tamaño. Agregue la letra “O” al cuadro de contenido.
El color del sótano continúa accediendo a la configuración de fondo y agregue un color de fondo negro.

Color de fondo: # 000000

Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto. Observe cómo usamos un alto valor para el tamaño del texto.
Texto de fuente: Poppins

Tamaño del texto: 100VW
Orientación de texto: centro
Extienda luego, acceda a la configuración de espaciado y agregue algunos valores de margen y llenado personalizados.
Margen superior: -6VW

Revestimiento superior: 15 VW
Revestimiento inferior: 49VW
¡Los filtros es el momento de que la magia suceda! Acceda a la configuración del filtro del módulo y cambie el modo de mezcla en consecuencia:
Modo de mezcla: multiplicar

Agregue la estructura de la fila # 2 de la columna Una vez que su carácter 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 línea:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1 -lime: 100%
Ancho máximo: 100%
Espacio eliminar y todo el revestimiento predeterminado, superior e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue el módulo de texto no. 1 En la columna Agregar contenido H1 En esta nueva fila, puede agregar módulos a su elección. Para recrear el ejemplo exacto que se ha distribuido en la vista previa de esta publicación, comience agregando un módulo de texto con un contenido H1.
Configuración de texto H1 Vaya a la pestaña Diseño y cambie la configuración de texto H1.
Fuente del título: PlayFair Display

Título Fuente de peso: Bold

Alineación del texto del encabezado: Centro
Encabezado de texto en color: #ffffff
Encabezado de texto de tamaño: 6VW
El espacio continúa accediendo a la configuración de espaciado y permitiendo que el módulo de texto se superponga sobre el carácter de gran tamaño agregando un margen superior negativo. También nos aseguramos de que haya un espacio en el lado izquierdo y derecho del módulo para garantizar la capacidad de reacción.
Margen superior: -47VW
Margen izquierdo: 1 VW

Margen derecho: 1 VW
Agregue el módulo Divisor a la visibilidad de la columna El siguiente modo que necesitamos es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
Color Vaya a la siguiente pestaña de diseño y cambie el color del separador.

Color: #ffffff
Dimensión Modifique la configuración de tamaño.

Peso del divisor: 13 PX
Ancho: 16%

Alineación del módulo: centro
Espacio y agregue un margen superior para crear espacio entre el módulo de texto y el módulo divisor.
Margen superior: 16 VW
Agregue el módulo de texto no. 2 En la columna agrega contenido, la siguiente forma en que necesitamos es un módulo de texto con contenido de párrafo.

Configuración de texto Vaya a la configuración del texto y realice los siguientes cambios: Fuente Texto: Abrir sans
Color de texto: #ffffff

Tamaño de texto: 1VW (escritorio), 2VW (tableta), 2.5VW (teléfono)

La altura de la línea de texto: 1.9em
Orientación de texto: centro
Sparto agregue algunos valores de espaciado personalizados.
Margen superior: 3VW
Margen inferior: 3VW (escritorio), 10 VW (tableta y teléfono)
Margen izquierdo: 27VW (escritorio), 10VW (tableta), 8VW (teléfono)

Margen derecho: 27VW (escritorio), 10VW (tableta), 8VW (teléfono)
Agregue un módulo de botón a la columna Agregue una copia Pase al siguiente y último módulo, que es un módulo de botón. Ingrese una copia de su elección.
La alineación continúa cambiando la alineación de los botones de la pestaña Design.
Alineación de botones: centro
Configuración del botón Cambiar a la configuración del botón y estilizar el botón como lo desee.


Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 1VW (escritorio), 2.5VW (tableta), 3VW (teléfono)
El color del texto del botón: #ffffff

El ancho del nudo del botón: 1 PX
El rasgo de botón de botón: 0 px
Botón de fuente: Abrir sans
Peso de fuente: Ultra Bold
Estilo de fuente: mayúscula
Por último, pero no menos importante, agregamos algunos márgenes personalizados y valores de llenado para lograr el resultado deseado.
Margen inferior: 10 VW
Revestimiento superior: 15 px
Revestimiento inferior: 15 PX


ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Recrear el ejemplo no. 2
¡Agregue una nueva sección, vamos al segundo ejemplo! Agregue una nueva sección habitual a la página en la que está trabajando.
Outstream oculta el aumento de la sección en la pestaña avanzada.
Desbordamiento horizontal: oculto

Desbordamiento verticalmente: oculto

Agregue la estructura de la fila # 1 de la columna Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columnas: Color de fondo de la columna 1 sin agregar módulos, abra la configuración de la fila y agregue un color de fondo a la primera columna.

Columna 1 Color de fondo: #DDDDDD
La imagen del sótano de la columna 1 también agregue una imagen de fondo y combine el color de fondo con la imagen utilizando un modo de mezcla.
Mezcla de columna de imagen de fondo: pantalla

Dimensión Entonces, acceda a la configuración de dimensionamiento de la fila y permítales ocupar todo el ancho de la pantalla.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Ancho: 100%
Ancho máximo: 100%

Espacio retire aún más el relleno superior e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue un módulo de texto a la columna Agregar carácter al cuadro de contenido Es el momento 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. Puede usar cualquier tipo de personaje que desee accediendo al mapa de caracteres (Windows) o la paleta de caracteres (Mac) en su computadora.
El color del papel tapiz cambia el color de fondo de este módulo en blanco.

Color de fondo: #ffffff
Configuración de texto Entonces, acceda a la pestaña de diseño y cambie la configuración de texto.
Texto de fuente: Poppins

Color de texto: # 0C0C0C

Tamaño del texto: 80VW
Orientación de texto: centro

Sparting modifife y rellenando valores desde y hacia abajo.
Revestimiento superior: 27.8VW
Revestimiento inferior: 27.8VW
Filtros y cree el efecto de máscara de fondo agregando un módulo de mezcla personalizado al modo.
Modo de mezcla: pantalla

Agregue la estructura de la fila # 2 de la columna Una vez que su carácter de gran tamaño esté en su lugar, puede agregar una nueva línea con los módulos restantes. Dimensión sin agregar módulos, abrir la configuración y permitir que el giro ocupe todo el ancho de la pantalla.
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Ancho: 100%
Ancho máximo: 100%

Espacio agregue algunos valores de llenado personalizados.

Revestimiento superior: 1VW
Revestimiento inferior: 1 VW
Junta izquierda: 3VW
Junta derecha: 3VW
Agregue el módulo de texto no. 1 En la columna, agregar el contenido H1 es el momento de agregar los módulos restantes. Si desea recrear el mismo diseño exactamente como ha visto en la vista previa de esta publicación, comience agregando un módulo de texto con un contenido H1.

Configuración de texto H1 Vaya a la pestaña Diseño y cambie la configuración de texto H1.
Fuente del título: Poppins
Título Fuente de peso: semi audac
Alineación del texto del encabezado: Centro
Text Pre -Text: # 000000

Encabezado de texto de tamaño: 5VW

El espacio crea una superposición entre este módulo y el módulo de texto que contiene caracteres de gran tamaño agregando un margen superior negativo.
Margen superior: -38VW
Agregue el módulo Divisor a la visibilidad de la columna El siguiente modo que necesitamos es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
Colorear luego acceda a la pestaña de diseño y cambie el color del separador.
Color: # 000000

Dimensión Modifique la configuración de tamaño.
Peso del divisor: 13 PX

Ancho: 16 PX
Alineación del módulo: centro

Espacio junto con los valores de llenado desde la configuración de espaciado.
Margen superior: 2VW

Margen inferior: Módulo de texto de 2 Vwadadure no. 2 En la columna agrega contenido, la siguiente forma en que necesitamos es otro módulo de texto. Ingrese un contenido de párrafo de su elección.
Configuración de texto Entonces, acceda a la configuración del texto y realice algunos cambios.
Texto de fuente: Abrir sans
Color de texto: # 000000

Tamaño de texto: 1VW (escritorio), 2VW (tableta), 2.5VW (teléfono)
La altura de la línea de texto: 1.9em
Orientación de texto: centro

Sparto agregue algunos valores de margen personalizados.

Margen superior: 3VW
Margen inferior: 3VW (escritorio), 10 VW (tableta y teléfono)
Margen izquierdo: 27VW (escritorio), 10VW (tableta), 8VW (teléfono)
Margen derecho: 27VW (escritorio), 10VW (tableta), 8VW (teléfono)
Agregue un módulo de botón a la columna Agregue una copia a continuación y el último módulo que necesitamos es un módulo de botón. Ingrese una copia de su elección.
Alinee entonces, acceda a la pestaña de diseño y cambie la alineación del botón.

Alineación de botones: centro
Configuración Estilizar el botón Para que se vea exactamente como desee.
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1VW (escritorio), 2.5VW (tableta), 3VW (teléfono)
El color del texto del botón: #ffffff

El color de fondo del botón: # 000000

El ancho del nudo del botón: 0 PX
Butter Raza: 50 PX

Botón de fuente: Abrir sans
Peso de fuente: Ultra Bold
Estilo de fuente: mayúscula
Espacio y complete el diseño agregando algunos valores de margen personalizados y relleno al botón.
Margen inferior: 10 VW
Revestimiento superior: 15 px
Revestimiento inferior: 15 PX
ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Ejemplo no.1exemplul no.2


Pensamientos finales En esta publicación, le mostré cómo usar personajes de gran tamaño para crear hermosas máscaras de fondo.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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.