Uso de la nueva configuración de filtro de columna de Divi para crear impresionantes efectos de fusión

La nueva configuración del filtro de columna de Divi se puede utilizar de muchas formas creativas. En esta publicación, le mostraremos cómo combinar la imagen de fondo de una fila principal con el contenido de la columna. Agregaremos diferentes degradados de color a los módulos y un modo de fusión de "pantalla" de columna para crear un efecto sorprendente. Esperamos que este diseño lo inspire a usar los modos de combinación de columnas en su próximo proyecto Divi. ¡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.

Escritorio

Móvil

Descargue el diseño de modos de fusión de columnas GRATIS

Para tener en sus manos el diseño de los modos de fusión de columnas libres, primero deberá descargarlo 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!

¡Empecemos a recrear!

Suscríbete a nuestro canal de Youtube

Agregar nueva sección con fila de 3 columnas

Comience el diseño agregando una nueva sección con una fila de tres columnas.

Espaciado de sección

Abra la configuración de la sección y ajuste el espaciado.

• Margen izquierdo y derecho: 3vw
• Acolchado superior e inferior: 84px

Configuración de filas

Fondo

Antes de agregar módulos, vamos a modificar la configuración de la fila. Comience agregando un color de fondo.

• Color de fondo: gris medio # c4c4c4

Luego, cargue una imagen de fondo y combine el color de fondo con la imagen usando un modo de fusión.

• Mezcla de imagen de fondo: multiplicar

Dimensionamiento

Ajuste la configuración de tamaño de la fila siguiente.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar altura de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Elimine también el relleno de filas predeterminado.

• Acolchado superior e inferior: 0px

Sombra de la caja

Continúe agregando una sombra de cuadro simple a la fila.

• Box Shadow: primera opción

Visibilidad

Ajuste el índice Z en la pestaña de visibilidad.

• Índice Z: 1

Columna de estilo 1

Ingrese la configuración de la primera columna.

Filtros

Aplique un modo de fusión de pantalla a la columna en la pestaña de filtros.

• Modo de fusión: pantalla

Escala de transformación de desplazamiento

Ingrese al grupo de opciones de transformación y modifique la configuración de escala de transformación de desplazamiento.

• Transformar escala: 105% en los ejes x e y

Visibilidad

Ingrese a la pestaña de visibilidad de la columna y ajuste la configuración de desbordamiento.

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Transiciones

Vaya a la pestaña de transiciones y ajuste la duración de la transición para crear una transición suave.

• Duración de la transición: 500 ms

Agregar módulo de texto a la columna 1

Cada columna contiene tres módulos de texto. Agregue un primer módulo de texto a la columna 1 con algo de contenido H2 de su elección y ajuste la configuración de la siguiente manera.

Fondo

Diseñe el fondo con un degradado de color.

• Fondo: degradado
• Gradiente de color uno: # 5498ff
• Gradiente de color dos: # 16fff3
• Dirección del gradiente: 235 grados
• Posición inicial: 37%

Espaciado

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

• Acolchado superior e inferior: 6vw
• Acolchado izquierdo y derecho: 3vw

Texto de encabezado

Ingrese la configuración del texto del encabezado y aplique el estilo de la configuración del texto H2 en consecuencia:

• Peso de fuente del encabezado 2: Ultra Bold
• Estilo de fuente del título 2: TT
• Título 2 Color del texto: Negro #oooooo
• Tamaño del texto del encabezado 2:
  • Escritorio: 5vw
  • Tableta: 11vw
  • Teléfono: 13vw
• Altura de la línea del título 2:
  • Escritorio: 4.3vw
  • Tableta: 9vw
  • Teléfono: 10.5vw

Filtros

Pase a la configuración de filtros y agregue un modo de mezcla de pantalla.

• Modo de fusión: pantalla

Agregue el segundo módulo de texto a la columna 1

Continúe agregando el segundo módulo de texto a la columna 1 con algún contenido de párrafo de su elección.

Diseñe el módulo de texto de la siguiente manera:

Fondo

Agrega un color de fondo blanco.

• Color de fondo: blanco #fffffff

Texto

Ingrese a la pestaña de diseño y ajuste el texto en consecuencia:

• Fuente de texto: Montserrat
• Alineación del texto: justificado
• Color del texto: gris oscuro # 333333
• Tamano del texto:
  • Escritorio: 0.8vw
  • Tableta: 2vw
  • Teléfono: 2.5vw
• Espaciado de letras de texto: -0.04vw
• Altura de la línea de texto:
  • Escritorio: 2.7vw
  • Tableta: 5.5vw
  • Teléfono: 6vw

Espaciado

Ajuste la configuración de espaciado también para crear un espacio vacío alrededor del texto.

• Margen superior e inferior: 0.5vw
• Acolchado superior e inferior:
  • Escritorio: 5vw
  • Tableta + Teléfono: 15vw
• Acolchado izquierdo: 5vw
• Acolchado derecho:
  • Escritorio: 5vw
  • Tableta + Teléfono: 25vw

Filtros

Por último, pero no menos importante, aplique un modo de fusión de pantalla en la pestaña de filtros.

• Modo de fusión: pantalla

Agregue el tercer módulo de texto a la columna 1

Para completar el diseño de la columna, agregue un tercer módulo de texto con una copia de CTA. Estamos usando todo este módulo como un botón.

Diseñe el módulo de la siguiente manera:

Añadir enlace

Agregue un enlace de su elección en la configuración del enlace. Tan pronto como alguien haga clic en cualquier parte del módulo, será redirigido a otra parte.

Fondo

Diseñe el degradado de fondo para que coincida con el primer módulo de texto.

• Fondo: degradado
• Color de degradado de fondo uno: # 5498ff
• Color de degradado de fondo dos: # 16fff3
• Dirección del gradiente: 235 grados

Texto

Ingrese a la pestaña de diseño y aplique estilo al texto de la siguiente manera:

• Fuente de texto: Montserrat
• Peso de la fuente del texto: Pesado
• Estilo de fuente de texto: subrayado
• Color de subrayado del texto: blanco #ffffff
• Color del texto: Negro # 000000
• Tamano del texto:
  • Escritorio: 1.5vw
  • Tableta: 3.3vw
  • Teléfono: 4vw
• Altura de la línea de texto: 1em

Espaciado

Ajuste la configuración de espaciado para que el texto encaje mejor en el módulo.

• Acolchado superior e inferior:
  • Escritorio: 2vw
  • Tableta: 6vw
  • Teléfono: 9vw
• Acolchado izquierdo: 3vw

Duplicar dos veces la primera columna

Una vez que haya completado la primera columna, abra la configuración de la fila y elimine la segunda y tercera columnas. Luego, duplique la primera columna dos veces. Por supuesto, necesitaremos realizar algunos cambios en los módulos de las columnas 2 y 3.

Columna 2 / Módulo de texto 1 Antecedentes

• Color de degradado de fondo uno: # c870ff
• Color de degradado de fondo dos: # ff355a

Columna 2 / Sombra de cuadro del módulo de texto 2

• Box Shadow: Sexta opción
• Fuerza de desenfoque de sombra de caja: 20px
• Fuerza de propagación de la sombra de caja: 17px
• Color de sombra de caja: rgba (225,33,255,0.06)

Columna 2 / Módulo de texto 3 Antecedentes

Ajuste el degradado de fondo del tercer módulo de texto para que coincida con el primer módulo.

• Color de degradado de fondo uno: # c870ff
• Color de degradado de fondo dos: # ff355a

Columna 3 / Fondo del módulo de texto 1

¡A la tercera columna! Cambie el fondo degradado del módulo de texto 1 en consecuencia:

• Color de degradado de fondo uno: # ff4800
• Color de degradado de fondo dos: # fc9a2a

Columna 2 / Módulo de texto 3 Antecedentes

• Color de degradado de fondo uno: # ff4800
• Color de degradado de fondo dos: # fc9a2a

Avance

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

Escritorio

Móvil

Es una envoltura

En esta publicación, le mostramos cómo crear un diseño de tres columnas con un impresionante efecto de mezcla utilizando la configuración de columna de Divi. Hemos combinado la configuración de módulos, columnas y filas para lograr un resultado atractivo que puede utilizar en cualquier sitio web que cree. Esperamos que este tutorial lo inspire a crear sus propios diseños alternativos también. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!