Uso de las opciones de filtro y modo de mezcla en 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.
Cómo acceder a las opciones de filtro y modo de mezcla de Divi
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.
Opciones de filtro y modo de mezcla en Divi
Tono
Arrastra el control deslizante o ingresa un valor numérico para ajustar el tono.
Saturación
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.
Brillo
Mientras más alto el número, más clara la imagen. Mientras más bajo, más oscura.
Contraste
Invertir
Arrastra el control deslizante para determinar la cantidad de inversión.
Sepia
Arrastra el control deslizante para determinar la intensidad del tono sepia aplicado.
Opacidad
Desenfoque
Modos de mezcla
Normal
Multiplicar
Trama
Esto crea el efecto opuesto al modo multiplicar, haciendo los colores más claros que los originales.
Superposición
Oscurecer
Aclarar
Sobreexponer color
Subexponer color
Este modo recibe su nombre de la técnica fotográfica de quemar o sobreexponer impresiones para oscurecer los colores.
Luz dura
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.
Luz suave
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.
Diferencia
El blanco invierte los colores de la capa base, el negro no produce cambios, y el gris oscuro aplica un leve oscurecimiento.
Exclusión
Tono
Saturación
Color
Luminosidad
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.
-
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.
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
-
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
-
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
-
Añade una sección
-
Agrega una imagen de fondo a la sección
-
Elimina todo el relleno (padding) de la sección
-
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
-
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
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
Guía de Negocio para Resellers y Partners
En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...Ver una Demo de Scoreapps para Resellers
En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:Proporciona acceso a tus Aplicaciones
Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...Cómo Crear una App de Tienda
El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...Cómo diseñar la pantalla de inicio o portada de una App
En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
Related Articles
Uso de las Opciones de Sombra de Caja en Divi
Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad. Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e ...Uso de las Opciones de Borde en Divi
Las opciones de borde de Divi permiten añadir y estilizar fácilmente bordes en cualquier elemento de la página. Con las Opciones de Borde de Divi, es posible crear diseños verdaderamente únicos para tu sitio web. ¡Puedes aplicar bordes personalizados ...Uso de las Opciones de Espaciado en Divi
Es fácil personalizar el espaciado en secciones, filas y módulos con las Opciones de Espaciado de Divi. El espaciado es un elemento importante en el diseño web. Ayuda a organizar tu contenido y mantener las cosas claras y equilibradas. Con Divi, es ...Uso de las Opciones de Tamaño en Divi
Las Opciones de Tamaño de Divi facilitan el ajuste del tamaño de secciones, filas, columnas y módulos en Divi. Las Opciones de Tamaño de Divi hacen que ajustar el tamaño de secciones, filas, columnas y módulos sea sencillo. El tamaño es una parte ...Usando las Opciones de Transformación de Divi
Las opciones de transformación de Divi son un conjunto de herramientas poderosas que te permiten manipular el diseño web de formas sorprendentes, creando profundidad y efectos visuales atractivos. Las opciones de transformación de Divi te permiten ...