Using Filter and Blend Mode Options in Divi | Scoreapps

Using Filter and Blend Mode Options in Divi


Las opciones de filtro y modo de mezcla de Divi te dan el poder para hacer todo tipo de ajustes de color a los elementos de diseño en Divi.


Las opciones de filtro y modo de mezcla de Divi te permiten ajustar el color de los elementos de diseño en Divi.

Incluye 16 efectos únicos de mezcla que puedes aplicar a cualquier elemento de Divi.

En esta guía, exploraremos cómo usar las opciones de filtro y modo de mezcla para modificar tus diseños de forma única.

Divi Filter and Blend Mode


Cómo acceder a las opciones de filtro y modo de mezcla de Divi

Todas las secciones, filas y módulos de Divi tienen un grupo de opciones de filtros con controles personalizados que te permiten ajustar colores, contraste, brillo y más.

Puedes mezclar elementos en la página con los 16 modos de mezcla disponibles.

Abre la ventana emergente de configuración del elemento haciendo clic en el icono de engranaje.

Ve a Diseño → Filtros.

How to find Divi Filter and Blend Mode Options

Opciones de filtro y modo de mezcla en Divi

Veamos cada opción de filtro, qué hace y cómo funciona.

Tono

Un tono es un color puro. Los tonos incluyen colores primarios (rojo, amarillo y azul) y colores secundarios (naranja, verde y violeta).

Arrastra el control deslizante o ingresa un valor numérico para ajustar el tono.

Divi Hue Filter

Saturación

La saturación determina la intensidad y viveza general de los colores.

Mientras más alto el número, más intensos y vívidos son los colores; mientras más bajo, más apagados y desaturados. Un valor de 0% producirá una imagen en escala de grises.


Divi Saturation Filter

Brillo

El brillo determina qué tan clara es la imagen.

Mientras más alto el número, más clara la imagen. Mientras más bajo, más oscura.

Divi Brightness Filter

Contraste

Determina la intensidad de la diferencia entre colores. Más alto, más contraste; más bajo, menos contraste.
Divi Contrast Filter

Invertir

Invertir colores significa que los valores de color se vuelven los opuestos.

Arrastra el control deslizante para determinar la cantidad de inversión.

Divi Invert Filter

Sepia

Aplicar un tono sepia a una imagen le da un color marrón suave.

Arrastra el control deslizante para determinar la intensidad del tono sepia aplicado.

Divi Sepia Filter

Opacidad

La opacidad determina el nivel de transparencia de un elemento. Menor opacidad significa mayor transparencia.

Divi Opacity Filter

Desenfoque

Incrementar el desenfoque reduce la claridad del elemento.

Divi Blur Filter

Modos de mezcla

Un modo de mezcla define cómo interactúan las capas entre sí. Puedes aplicar un modo de mezcla a una capa para cambiar cómo se mezclan los colores con las capas inferiores.

Normal

En modo normal, las capas se apilan una sobre otra. No hay mezcla.
Divi Filter and Blend Mode Options normal example

Multiplicar

En modo multiplicar, las capas se mezclan, creando un color más oscuro.
Divi Filter and Blend Mode Options multiply example

Trama

En modo trama, la capa base se invierte y multiplica con la capa de mezcla.

Esto crea el efecto opuesto al modo multiplicar, haciendo los colores más claros que los originales.

Divi Filter and Blend Mode Options screen example

Superposición

En modo superposición, las áreas claras se vuelven más claras y las áreas oscuras más oscuras.
Divi Filter and Blend Mode Options overlay example

Oscurecer

En modo oscurecer, se comparan la capa base y la capa de mezcla, y se mantienen los colores más oscuros.
Divi Filter and Blend Mode Options darken example

Aclarar

En modo aclarar, se comparan la capa base y la capa de mezcla, y se mantienen los colores más claros.
Divi Filter and Blend Mode Options lighten example

Sobreexponer color

En modo sobreexponer color, los colores de la capa base se aclaran y el contraste disminuye, creando un efecto de tonos medios saturados.
Divi Filter and Blend Mode Options color dodge example

Subexponer color

En modo subexponer color, los colores de la capa base se oscurecen, el contraste aumenta y luego se mezcla con los colores de la capa de mezcla.

Este modo recibe su nombre de la técnica fotográfica de quemar o sobreexponer impresiones para oscurecer los colores.

Divi Filter and Blend Mode Options color burn example

Luz dura

En el modo luz dura, todo depende de la densidad de la capa de mezcla.

Si la capa de mezcla tiene colores claros, creará un efecto más brillante, como el modo trama.

Sin embargo, si la capa de mezcla tiene colores oscuros, creará un efecto más oscuro, como el modo multiplicar.

Divi Filter and Blend Mode Options hard light example

Luz suave

En el modo luz suave, todo depende de la densidad de la capa de mezcla.

Si la capa de mezcla tiene colores claros, creará un efecto más brillante, como el modo sobreexponer color, y si tiene colores oscuros, creará un color más oscuro, como el modo subexponer color.

Divi Filter and Blend Mode Options soft light example

Diferencia

En el modo diferencia, los colores de la capa de mezcla se restan de la capa base y el valor resultante se combina con los colores originales de la base.

El blanco invierte los colores de la capa base, el negro no produce cambios, y el gris oscuro aplica un leve oscurecimiento.

Divi Filter and Blend Mode Options difference example

Exclusión

El modo exclusión es muy similar a diferencia. El blanco invierte los colores de la capa base, el negro no produce cambios y el gris al 50% produce un gris al 50%.

Divi Filter and Blend Mode Options exclusion example

Tono

El modo tono preserva la luminosidad y saturación de la capa base mientras adopta el tono de la capa de mezcla.
Divi Filter and Blend Mode Options hue example

Saturación

El modo saturación preserva la luminosidad y el tono de la capa base mientras adopta la saturación de la capa de mezcla.
Divi Filter and Blend Mode Options saturation example

Color

El modo color preserva la luminosidad de la capa base mientras adopta el tono y la saturación de la capa de mezcla.
Divi Filter and Blend Mode Options color blend example

Luminosidad

En el modo luminosidad, se preserva el tono y la saturación de la capa base mientras adopta la luminosidad de la capa de mezcla.
Divi Filter and Blend Mode Options luminosity blend example

Consejos y buenas prácticas para usar las opciones de filtro y modo de mezcla en Divi

  • Aplicar un filtro afecta a los elementos hijos
    Es importante recordar que al aplicar un filtro a un elemento (Sección, Fila, Columna o Módulo), afecta a todos los elementos hijos dentro del elemento padre. Esto significa que aplicar un filtro a una sección afectará a todas las filas y módulos dentro de esa sección.

How filter effects interact in Divi Filter and Blend Mode Options

  • Cómo interactúan los efectos de filtro en Divi
    Combina las opciones de filtro con las opciones de hover para crear diseños interactivos que cambian la apariencia al pasar el cursor. Para aprender más sobre efectos hover, consulta la documentación correspondiente.

  • Usa modos de mezcla Trama y Multiplicar para efectos de máscara
    Usando los modos de mezcla trama y multiplicar, puedes crear efectos de superposición sorprendentes con las opciones de filtros.

How to use Divi Filter and Blend Mode Options

En los ejemplos a continuación, crearemos dos secciones que aplican un efecto de “esconder y mostrar” (peek-a-boo) al texto que revela la imagen de fondo debajo.

Cómo usar las opciones de filtro y modo de mezcla en Divi

Modo Trama

  • Añade una sección

  • Agrega una imagen de fondo a la sección

  • Elimina todo el relleno (padding) de la sección

Section settings

Configuración de la sección

  • Añade una fila

  • Añade un fondo blanco a la fila: #ffffff

  • Ajusta el tamaño de la fila al 100%

  • Añade relleno arriba y abajo a la fila: 300px

  • Ajusta el modo de mezcla del filtro a trama

Row settings


  • Añade un módulo de texto

  • Añade un texto de encabezado y configura la etiqueta del encabezado a h1. Centra el texto

  • Peso de fuente: Ultra negrita

  • Tamaño de fuente: 7rem

Text module settings

Modo Multiplicar

  • Añade una sección

  • Agrega una imagen de fondo a la sección

  • Elimina todo el relleno (padding) de la sección

Section settings

  • Añade una fila

  • Añade un fondo negro a la fila: #000000

  • Ajusta el tamaño de la fila al 100%

  • Añade relleno arriba y abajo a la fila: 300px

  • Ajusta el modo de mezcla del filtro a multiplicar

Row settings

  • Añade un módulo de texto

  • Añade un texto de encabezado y configura la etiqueta del encabezado a h1. Centra el texto

  • Color de fuente: #ffffff

  • Peso de fuente: Ultra negrita

  • Tamaño de fuente: 7rem

Text module settings

Continúa aprendiendo

  • Usar filtros, secciones hero y llamadas a la acción para expandir una página principal minimalista

  • Cómo recrear los filtros de color, efectos y ejemplos de modos de mezcla con Divi (Parte 1)

  • Cómo recrear los filtros de color, efectos y ejemplos de modos de mezcla con Divi (Parte 2)

  • Cómo usar las nuevas opciones de filtro de Divi para embellecer tus imágenes


    • Popular Articles

    • How to Create an App for Restaurants (with or without Delivery)

      Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...

    • APPS: Radio

      The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...

    • APPS: Webhooks

      The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...

    • APPS: Audio & Music

      How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...

    • QR Promotions

      This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...

    • Related Articles

    • Divi Rows and Row Options

      Therowsare thesecond largest construction blockwithin the Divi builder and can be used in various ways. &;amp;;;;; Rows of Divi and how to use them Therowsare thesecond largest construction blockwithin the Divi builder and can be used ...

    • Using Divi Transform Options

      Divi transformation options are a set of powerful tools that allow you to manipulate web design in surprising ways, creating depth and attractive visual effects. Divi transformation options allow you to move elements, scale them, rotate them into ...

    • Using Border Options in Divi

      Divi border options allow you to easily add and stylize edges on any item on the page. With Divi Edge Options, it is possible to create truly unique designs for your website. You can apply custom edges to Divi elements, including sections, rows, and ...

    • Using Sizing Options in Divi

      Divi Size Options make it easy to adjust the size of sections, rows, columns and modules in Divi. Divi Size Options make adjusting the size of sections, rows, columns and modules simple. Size is an essential part of creating attractive websites. ...

    • Using Spacing Options in Divi

      It is easy to customize spacing into sections, rows and modules with Divi Spacing Options. Spacing is an important element in web design. It helps organize your content and keep things clear and balanced. With Divi, it is easy to customize spacing in ...