Cómo crear un título de modo de mezcla dividida con Div

No es ningún secreto que los modos de mezcla pueden ayudarlo a prestar más atención a la estética de diseño para la que trabaja. En el pasado, hemos cubierto los consejos y trucos del modo de mezcla que te ayuda a crear algunos modelos únicos y hermosos. Ahora, dado que apareció la actualización de la columna, hay algunas cosas adicionales que puede hacer con estos modos de mezcla. Una de estas cosas es crear un título del modo de mezcla dividido. En esta publicación, le mostraremos cómo puede obtener un resultado sorprendente combinando los modos de módulos y columnas, los colores de fondo de las columnas y los bordes negativos. ¡Podrá descargar el archivo JSON de forma gratuita!
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.

Descargue la sección gratuita del modo de mezcla de hero dividido para poner su mano en la sección Hero del modo de mezcla gratuita, primero deberá descargarla 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!
¡Suscríbete a nuestro canal de YouTube para comenzar a recrear! Agregue una nueva sección, agregue una nueva sección habitual a la página donde trabaje y elimine todos los valores predeterminados, hacia arriba y hacia abajo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Box Shadow Switch a las opciones de sombra de la caja y agregue un tono de caja sutil.

Poder de poco claro de la sombra de la caja: 70 px
Color de la sombra: RGBA (0.0,0,07)
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Fondo de gradiente sin agregar módulos, abrir la configuración de línea y aplicar un fondo de gradiente. En el siguiente paso de esta publicación, combinaremos el fondo de gradiente con una imagen de fondo utilizando un modo de mezcla.

Color 1: # 00cbff
Color 2: # bf35ff
Dirección de gradiente: 96 grados
Imagen de fondo Agregar una imagen de fondo en una fila y úsela en combinación con la siguiente configuración de imagen de fondo:

Tamaño de la imagen de fondo: portada
Posición de la imagen de fondo: Centro
Repetir la imagen de fondo: sin repetición
Mezcla de imagen en el sótano: Acceda a la siguiente configuración de tamaño y permita que la fila ocupe todo el ancho del contenedor de sección.
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
El espacio elimina todos los deflagments predeterminados e inferiores de la siguiente fila. Esto asegurará que el color de fondo de la columna 2, que agregamos más adelante en esta publicación, alcanza el borde superior e inferior de la fila y las secciones.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
La pantalla para garantizar que ambas columnas aparezcan una al lado de las otras en dimensiones de pantalla más pequeñas, agregaremos una sola línea de código CSS al elemento principal de la fila.
Pantalla: Flex;

Configuración Columna 2 Color de fondo Después de haber completado la configuración promedio general, continúe y abra la configuración de la segunda columna. Comience agregando un color de fondo blanco.
Color de fondo: #ffffff

Los filtros van a la pestaña de diseño y agregue un modo de mezcla a toda la columna.
Modo de mezcla: pantalla

¡Agregue un módulo divisor a la columna 1, la visibilidad es hora de comenzar a agregar módulos! La única forma en que necesitamos en la primera columna es un módulo divisor. Este módulo nos ayudará a crear espacio en la primera columna sin aparecer en un módulo. Asegúrese de que la opción “Show the Divizer” esté desactivada.
Divisor del espectáculo: no

Cambio de espacio a la configuración de espaciado y agregue un borde inferior para crear espacio en la primera columna.

Margen inferior: 50 VW

Agregue el módulo de texto no. 1 en la columna 2 Agregue el título H1 ¡Vamos a la segunda columna! Aquí, comenzaremos con el módulo de texto principal. Ingrese un contenido H1 de su elección. Configuración de texto H1 Pase a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Fuente del título: Poppins

Título Fuente de peso: Bold

Encabezado de texto en color: #ffffff
Encabezado de texto de tamaño: 12VW
Distancia entre letras: -0.2VW
Espacio también, creamos espacio alrededor del módulo y lo empujamos hacia la izquierda aplicando valores de margen personalizados. El margen negativo izquierdo juega un papel importante en la creación del modo de mezcla dividido. Permite que una parte de la copia aparezca debajo de la primera columna que no contiene color de fondo.
Margen superior: 18 VW
Margen inferior: 2 VW

Margen izquierdo: -27.3VW
Filtros ahora, en el siguiente paso, ¡sucederá la magia! Combinamos un módulo de mezcla con el módulo y la columna para permitir que se muestre el fondo. Asegúrese de seleccionar el siguiente modo de mezcla para el módulo de texto:
Modo de mezcla: diferencia
Agregue el módulo de texto no. 2 en la columna 2 ¡Agregue contenido al segundo módulo! Agregue un contenido a su elección.

Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Poppins

Alineación de texto: justificar

Color de texto: # 000000
Tamaño de texto: 0.8VW (escritorio), 1.5VW (tableta), 2.3VW (teléfono)
Altura de la línea de texto: 2.5em (escritorio y tableta), 2.2em (teléfono)
Espaciado Agregue algunos valores de margen personalizados.
Margen inferior: 1 VW
Margen izquierdo: 5VW

Margen derecho: 14VW (escritorio), 4VW (tableta), 5VW (teléfono)
Agregue el módulo divisor al interruptor de visibilidad de la columna 2 al siguiente módulo, que es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”. Divisor: sí
Línea Muévase a la pestaña Diseño y cambie la configuración de línea en consecuencia:
Color de línea: #ffffff

Estilo de línea: sólido
Posición de línea: arriba

Dimensión Modifique la configuración del tamaño del divisor.
Peso del divisor: 0.7 VW
Ancho: 9%
Altura: 0px

Espacio y agregue algunos valores de espaciado personalizados.
Margen superior: 2VW (escritorio), 5VW (tableta y teléfono)
Margen inferior: 3VW (escritorio), 6VW (tableta y teléfono)
Margen izquierdo: 5VW

Filtros por último, pero no menos importante, aplique un modo de mezcla para permitir que se muestre la imagen de fondo y el gradiente de fila.
Modo de mezcla: diferencia
Agregue un módulo de botón a la columna 2 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.
Cambio de alineación a la pestaña de diseño y asegúrese de que la alineación del botón esté configurada a la izquierda.

Alineación de botones: izquierda
Configuración Modificar la configuración del botón y el botón.

Use estilos personalizados para el botón: Sí

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

El rasgo de botón de botón: 0 px
Botón de fuente: Poppins
Espacio y, finalmente, agregue algunos valores de margen personalizado y llenado a la configuración de espaciado.
Margen inferior: 10 VW (escritorio), 15 VW (tableta y teléfono)
Margen izquierdo: 5VW
Revestimiento superior: 1VW


Revestimiento inferior: 1 VW
Junta izquierda: 3VW
Junta derecha: 3VW
Vista previa Ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. modo.Este tutorial muestra solo cuán versátiles son las opciones incorporadas de la división y cómo, con cada división, el software de diseño de terceros se vuelve inútil.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.