Lección 4.7.5 – Contenido → Fondo → Máscara
Imagina que tienes una hoja de papel de color y la recortas con una tijera especial que hace formas — una ola, una mancha de pintura, un triángulo. Luego pones ese recorte encima de tu foto o color de fondo. Eso es exactamente la Máscara en Divi. Es una forma decorativa que se coloca encima del fondo de la Sección, dándole un borde o silueta con personalidad.
¿Qué es la Máscara de Fondo?
La Máscara es una forma vectorial — una silueta — que Divi coloca encima del fondo de la Sección. No reemplaza el fondo, lo decora. Se usa para romper la monotonía de los fondos rectangulares y dar un aspecto más moderno y dinámico a la página.
Ejemplo visual — sin máscara vs con máscara
Bordes rectos — borde rectangular estándar
Borde inferior curvo — más dinámico
Cómo activar la Máscara
En el grupo Fondo, haz clic en el sexto y último ícono de la fila «Fondo De» — el del cuadrado con la forma irregular adentro. El panel muestra la vista previa de la máscara activa y todas sus opciones.
Todas las opciones explicadas
| Opción | Para qué sirve | Valor por defecto |
|---|---|---|
| Máscara De Fondo | La vista previa de la forma activa. Muestra cómo luce la máscara seleccionada. | Layer Blob — la mancha orgánica azul que viste en tu captura |
| Menú desplegable de forma | Elige qué forma tiene la máscara — hay varias opciones prediseñadas | Layer Blob |
| Color De La Máscara | El color de relleno de la forma — el color de la mancha o silueta | Blanco (#FFFFFF) — por eso en tu captura la forma es azul pero en la página se ve blanca |
| Transformación De Máscara | Cuatro íconos para voltear o rotar la forma | Sin transformación |
| Relación De Aspecto De La Máscara | Las proporciones de la forma — ancha, cuadrada o alta | El primer ícono — más ancha que alta |
| Tamaño De La Máscara | Cómo se escala la forma dentro de la Sección | Estirar Para Rellenar |
| Modo De Fusión De La Máscara | Cómo se mezcla visualmente la máscara con el fondo | Normal |
Las formas disponibles
Al hacer clic en el menú desplegable que dice «Layer Blob» verás las distintas formas prediseñadas. Cada una tiene un nombre y una silueta diferente:
Layer Blob
Mancha orgánica irregular
Ola
Borde inferior curvo tipo ola
Diagonal
Borde inclinado en ángulo
Flecha
Borde inferior en punta
La Transformación — los cuatro íconos
| Ícono | Qué hace | Cuándo usarlo |
|---|---|---|
| ▲ Voltear vertical | Invierte la forma de arriba a abajo | Para que la ola esté en el borde superior en vez del inferior |
| ▷ Voltear horizontal | Invierte la forma de izquierda a derecha | Para cambiar la dirección de la diagonal o la flecha |
| ↺ Rotar | Gira la forma 90 grados | Para poner la forma en los lados en vez de arriba/abajo |
| ⤡ Voltear ambos | Invierte la forma vertical y horizontalmente a la vez | Para obtener el espejo diagonal de la forma |
Relación de Aspecto — las tres proporciones
Ancha
Más ancha que alta — ideal para separadores horizontales
Cuadrada
Proporción 1:1 — para fondos decorativos centrados
Alta
Más alta que ancha — para formas laterales o decorativas verticales
Usos reales en la clínica CPS
| Sección | Máscara recomendada | Efecto |
|---|---|---|
| Sección hero azul oscuro | Ola en la parte inferior — color blanco | La sección termina con un borde curvo suave que fluye hacia la siguiente sección blanca |
| Sección de servicios gris claro | Diagonal — color blanco — volteo vertical | El borde superior tiene una inclinación moderna que marca el inicio de la sección |
| Sección de estadísticas | Layer Blob — color del fondo de la siguiente sección | Las secciones se mezclan visualmente de forma orgánica y fluida |
| Sección de testimonios | Flecha apuntando hacia abajo — color blanco | Guía visualmente al visitante hacia el siguiente bloque de contenido |
- La Máscara es una forma decorativa que se coloca encima del fondo de la Sección
- Se activa con el sexto y último ícono de «Fondo De»
- Hay varias formas disponibles — Blob, Ola, Diagonal, Flecha y más
- El color de la máscara debe coincidir con el fondo de la Sección siguiente para un efecto fluido
- Los cuatro íconos de Transformación permiten voltear y rotar la forma
- La Relación de Aspecto controla si la forma es ancha, cuadrada o alta