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


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

Escritorio

Vista previa de escritorio de modos de mezcla

Móvil

modos de mezcla gif receptivos

Descargar The Column Blend Modes Layout GRATIS

Para poner sus manos en el diseño de modos de mezcla de columna libre, 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 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.

¡Comencemos a recrearnos!

(incrustar) https://www.youtube.com/watch?v=igJ3s8Th9xM (/ incrustar)

Suscríbase 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.

agregar una fila de tres columnas

Espaciado de sección

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

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

estilo de la sección

Configuración de fila

Antecedentes

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

  • Color de fondo: gris medio # c4c4c4

agregar color gris al fondo

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

  • Mezcla de imagen de fondo: multiplicar

agregar imagen y establecer el modo de fusión en multiplicar

Dimensionamiento

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

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

diseñar el fondo de la sección

Espaciado

Elimine también el relleno de fila predeterminado.

  • Relleno superior e inferior: 0px

diseñar el fondo de la fila

Sombra de la caja

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

  • Box Shadow: primera opción

agregar una sombra de cuadro a la sección

Visibilidad

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

  • Índice Z: 1

índice de visibilidad de la fila

Columna de estilo 1

Ingrese la configuración de la primera columna.

Seleccionar columna 1

Filtros

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

  • Modo de fusión: pantalla

aplicar modo de mezcla de pantalla

Escala de transformación de desplazamiento

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

  • Escala de transformación: 105% en los ejes x e y

transformar el cursor estacionario o la columna uno

Visibilidad

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

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

visibilidad de la fila

Transiciones

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

  • Duración de transición: 500 ms

duración de la transición

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 algún contenido H2 de su elección y ajuste la configuración de la siguiente manera.

inserte el módulo de texto en la columna uno

Antecedentes

Dale estilo al fondo con un degradado de color.

  • Fondo: gradiente
  • Gradient Color One: # 5498ff
  • Gradient Color Two: # 16fff3
  • Dirección del gradiente: 235 grados
  • Posición de inicio: 37%

módulo de texto uno con un fondo

Espaciado

Agregue algunos valores de espaciado personalizados a continuación.

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

diseñar el espacio del módulo

Encabezado de texto

Ingrese la configuración del texto del encabezado y diseñe la configuración del texto H2 en consecuencia:

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

diseñar el encabezado del módulo de texto

Filtros

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

  • Modo de fusión: pantalla

modo de mezcla - 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.

agregar un módulo de texto a la columna uno

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

Antecedentes

Agrega un color de fondo blanco.

  • Color de fondo: blanco #fffffff

diseñar el fondo del módulo de texto

Texto

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

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

diseñar el texto en el módulo dos

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
  • Relleno izquierdo: 5vw
  • Relleno derecho:
    • Escritorio: 5vw
    • Tableta + Teléfono: 25vw

espaciado del segundo módulo de texto

Filtros

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

  • Modo de fusión: pantalla

módulo de texto de pantalla de modo de fusión 2

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 alguna copia de CTA. Estamos usando todo este módulo como un botón.

agregar un tercer módulo de texto

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 otro lugar.

agregar un enlace al módulo de texto

Antecedentes

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

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

antecedentes del tercer módulo

Texto

Ingresa la pestaña de diseño y dale estilo al texto de la siguiente manera:

  • Fuente de texto: Montserrat
  • Peso de fuente de 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

ajustar texto en el módulo tres

Espaciado

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

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

espaciado del módulo tres

Duplicar la primera columna dos veces

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

eliminar la segunda y tercera columna

duplicar la columna

Columna 2 / Fondo del módulo de texto 1

Cambie el fondo del primer módulo de texto a un degradado de color diferente.
  • Gradiente de fondo Color uno: # c870ff
  • Gradiente de fondo Color dos: # ff355a

ajustar el módulo de texto uno en la columna dos

Columna 2 / Módulo de texto 2 Cuadro Sombra

Luego, agregue una sombra de cuadro interna al módulo de texto 2.
  • Box Shadow: Sexta opción
  • Caja Shadow Blur Fuerza: 20px
  • Box Shadow Spread Strength: 17px
  • Color de la sombra de la caja: rgba (225,33,255,0.06)

ajustar el segundo módulo de texto en la columna dos

Columna 2 / Fondo del módulo de texto 3

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

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

módulo árbol columna dos ajustar

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:

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

primer módulo en la columna tres

Columna 2 / Fondo del módulo de texto 3

Use el mismo fondo degradado para el tercer módulo de texto.
  • Gradiente de fondo Color uno: # ff4800
  • Gradiente de fondo Color dos: # fc9a2a

módulo tres columna tres

Avance

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

Escritorio

Vista previa de escritorio de modos de fusión

Móvil

modos de mezcla gif receptivos

Es una envoltura

En esta publicación, le mostramos cómo crear un diseño de tres columnas con un sorprendente efecto de mezcla utilizando la configuración de columna de Divi. Hemos combinado configuraciones de módulo, columna y fila para lograr un resultado hermoso que puede usar 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.