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

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

Hagámoslo.

Avance

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

Descarga la sección Hero del modo Split Blend GRATIS

Para poner sus manos en la sección de héroe del modo de mezcla gratuito, primero deberá 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 formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

¡Empecemos a recrear!

Agregar nueva sección

Espaciado

Agregue una nueva sección regular a la página en la que está trabajando y elimine todo el relleno superior e inferior predeterminado.

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

Sombra de la caja

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

• Fuerza de desenfoque de sombra de caja: 70px
• Color de sombra: rgba (0,0,0,0.07)

Agregar nueva fila

Estructura de la columna

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

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de 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 del gradiente: 96 grados

Imagen de fondo

Agregue una imagen de fondo a la fila y utilícela en combinación con las siguientes configuraciones de imagen de fondo:

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro
• Repetición de imagen de fondo: sin repetición
• Mezcla de imagen de fondo: pantalla

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ón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Elimine todo el relleno superior e inferior predeterminado de la siguiente fila. 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
• Acolchado inferior: 0px

Monitor

Para asegurarnos de que ambas columnas aparezcan 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;

Configuración de la 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

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

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

Espaciado

Continúe con la configuración de espaciado y agregue un margen inferior para crear espacio en la primera columna.

• Margen inferior: 50vw

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

Agregar título H1

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

Configuración de texto H1

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

• Fuente de encabezado: Poppins
• Peso de la fuente del encabezado: negrita
• Color del texto del encabezado: #FFFFFF
• Tamaño del texto del encabezado: 12vw
• Espaciado de letras de encabezado: -0.2vw

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 mezcla 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

Filtros

Ahora, en este próximo paso, ¡la magia sucederá! Estamos combinando un modo de combinación de módulo y columna para permitir que se vea 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

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

Agregar contenido

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

Configuración de texto

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

• Fuente de texto: Poppins
• Alineación del 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 (escritorio y tableta), 2.2em (teléfono)

Espaciado

A continuación, agregue algunos valores de margen personalizados.

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

Agregar módulo divisor a la columna 2

Visibilidad

Pasemos al siguiente módulo, que es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

Vaya 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 la línea: superior

Dimensionamiento

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

• Peso del divisor: 0,7 vw
• Ancho: 9%
• Alto: 0px

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

Filtros

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

• Modo de fusión: diferencia

Agregar módulo de botones a la columna 2

Agregar copia

Pasemos al siguiente y último módulo, que es un módulo de botones. Ingrese alguna copia de su elección.

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

Configuración de botones

Modifique también la configuración de los botones.

• 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

Espaciado

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

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

Avance

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

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 fusión dividida. Este tutorial solo sirve para mostrar 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.