Cómo crear un título de modo de fusión dividida con Divi


No es ningún secreto que los modos de mezcla pueden ayudarlo a prestar atención adicional a la estética del diseño en el que está trabajando. En el pasado, hemos cubierto consejos y trucos de modo de mezcla que lo ayudan a crear algunos diseños únicos y hermosos. Ahora, desde que salió la actualización de la columna, hay algunas cosas adicionales que puede hacer con estos modos de mezcla. Una de esas cosas es crear un título de modo de mezcla dividida. En esta publicación, le mostraremos cómo puede lograr un resultado sorprendente combinando modos de fusión de módulo y columna, colores de fondo de columna y márgenes negativos. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

modo de mezcla dividida

Descargar The Split Blend Mode Hero Section GRATIS

Para poner tus manos en la sección de héroe del modo de mezcla gratuita, primero tendrás que descargarla 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.

(incrustar) https://www.youtube.com/watch?v=vQ-g9eWUfoA (/ incrustar)

Suscríbase a nuestro canal de Youtube

¡Comencemos a recrearnos!

Agregar nueva sección

Espaciado

Agregue una nueva sección regular a la página en la que está trabajando y elimine todos los rellenos superiores e inferiores predeterminados.

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

modo de mezcla dividida

Sombra de la caja

Pase a las opciones de sombra de cuadro y agregue una sombra de cuadro sutil.

  • Caja Shadow Blur Fuerza: 70px
  • Color de sombra: rgba (0,0,0,0.07)

modo de mezcla dividida

Agregar nueva fila

Estructura de columna

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

modo de mezcla dividida

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de la fila y aplique un fondo degradado. En el siguiente paso de esta publicación, fusionaremos el fondo degradado con una imagen de fondo usando un modo de fusión.

  • Color 1: # 00cbff
  • Color 2: # bf35ff
  • Dirección de degradado: 96 grados

modo de mezcla dividida

Imagen de fondo

Agregue una imagen de fondo a la fila y úsela en combinación con la siguiente configuración de imagen de fondo:

  • Tamaño de imagen de fondo: cubierta
  • Posición de la imagen de fondo: centro
  • Repetir imagen de fondo: sin repetición
  • Mezcla de imagen de fondo: pantalla

modo de mezcla dividida

Dimensionamiento

Vaya a la configuración de tamaño a continuación y permita que la fila ocupe todo el ancho del contenedor de la sección.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

modo de mezcla dividida

Espaciado

Elimine todos los rellenos superiores e inferiores predeterminados de la fila siguiente. Esto asegurará que el color de fondo de la columna 2, que agregamos más adelante en esta publicación, toque el borde superior e inferior de los contenedores de fila y sección.

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

modo de mezcla dividida

Monitor

Para asegurarnos de que ambas columnas aparecen una al lado de la otra en tamaños de pantalla más pequeños, agregaremos una sola línea de código CSS al elemento principal de la fila.

display: flex;

modo de mezcla dividida

Configuración de columna 2

Color de fondo

Una vez que haya completado la configuración general de la fila, continúe y abra la configuración de la segunda columna. Comience agregando un color de fondo blanco.

  • Color de fondo: #FFFFFF

modo de mezcla dividida

Filtros

Pase a la pestaña de diseño y agregue un modo de fusión a toda la columna.

  • Modo de fusión: pantalla

modo de mezcla dividida

Agregar módulo divisor a la columna 1

Visibilidad

¡Es hora de comenzar a agregar módulos! El único módulo que necesitamos en la primera columna es un Módulo Divisor. Este módulo nos ayudará a crear espacio en la primera columna sin que aparezca un módulo. Asegúrese de que la opción "Mostrar divisor" del divisor esté desactivada.

  • Mostrar divisor: no

modo de mezcla dividida

Espaciado

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

  • Margen inferior: 50vw

modo de mezcla dividida

Agregue el módulo de texto n. ° 1 a la columna 2

Agregar título H1

¡A la segunda columna! Aquí, comenzaremos con el título Módulo de texto. Ingrese algún contenido H1 de su elección.

modo de mezcla dividida

Configuraciones de texto H1

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente del encabezado: Poppins
  • Peso de la fuente del título: negrita
  • Color del texto del encabezado: #FFFFFF
  • Tamaño del texto del encabezado: 12vw
  • Espacio entre letras de encabezado: -0.2vw

modo de mezcla dividida

Espaciado

También estamos creando algo de espacio alrededor del módulo y empujándolo hacia la izquierda aplicando algunos valores de margen personalizados. El margen izquierdo negativo juega un papel importante en la creación del modo de fusión dividida. Permite que una parte de la copia aparezca debajo de la primera columna que no contiene ningún color de fondo.

  • Margen superior: 18vw
  • Margen inferior: 2vw
  • Margen izquierdo: -27.3vw

modo de mezcla dividida

Filtros

Ahora, en este próximo paso, ¡la magia sucederá! Combinamos un modo de fusión de módulo y columna para permitir que se muestre el fondo de la fila. Asegúrese de seleccionar el siguiente modo de fusión para el Módulo de texto:

  • Modo de fusión: diferencia

modo de mezcla dividida

Agregue el módulo de texto n. ° 2 a la columna 2

Agregar contenido

¡Al segundo módulo! Agregue algún contenido de su elección.

modo de mezcla dividida

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Poppins
  • Alineación de texto: justificar
  • Color del texto: # 000000
  • Tamaño del texto: 0.8vw (escritorio), 1.5vw (tableta), 2.3vw (teléfono)
  • Altura de la línea de texto: 2.5em (computadora de escritorio y tableta), 2.2em (teléfono)

modo de mezcla dividida

Espaciado

Agregue algunos valores de margen personalizados a continuación.

  • Margen inferior: 1vw
  • Margen izquierdo: 5vw
  • Margen derecho: 14vw (escritorio), 4vw (tableta), 5vw (teléfono)

modo de mezcla dividida

Agregar módulo divisor a la columna 2

Visibilidad

En el siguiente módulo, que es un módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

  • Mostrar divisor: sí

modo de mezcla dividida

Línea

Pase a la pestaña de diseño y cambie la configuración de la línea en consecuencia:

  • Color de línea: #FFFFFF
  • Estilo de línea: sólido
  • Posición de línea: superior

modo de mezcla dividida

Dimensionamiento

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

  • Divisor de peso: 0.7vw
  • Ancho: 9%
  • Altura: 0px

modo de mezcla dividida

Espaciado

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

modo de mezcla dividida

Filtros

Por último, pero no menos importante, aplique un modo de fusión para permitir que se muestre la imagen de fondo de la fila y el degradado.

  • Modo de fusión: diferencia

modo de mezcla dividida

Agregar módulo de botón a la columna 2

Agregar copia

En el siguiente y último módulo, que es un Módulo de botones. Ingrese una copia de su elección.

modo de mezcla dividida

Alineación

Pase 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

modo de mezcla dividida

Configuraciones de botones

Modifique la configuración del botón también.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Color del texto del botón: # 000000
  • Radio del borde del botón: 0px
  • Fuente del botón: Poppins

modo de mezcla dividida

modo de mezcla dividida

Espaciado

Y, por último, agregue algunos valores de margen y relleno personalizados a la configuración de espaciado.

  • Margen inferior: 10vw (escritorio), 15vw (tableta y teléfono)
  • Margen izquierdo: 5vw
  • Relleno superior: 1vw
  • Relleno inferior: 1vw
  • Acolchado izquierdo: 3vw
  • Relleno derecho: 3vw

modo de mezcla dividida

Avance

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

modo de mezcla dividida

Pensamientos finales

En esta publicación, le mostramos cómo usar las nuevas opciones de columna de Divi para crear impresionantes titulares en modo de mezcla dividida. Este tutorial solo muestra cuán versátiles son las opciones integradas de Divi y cómo con cada actualización de Divi, el software de diseño de terceros se vuelve innecesario. 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.