Uno de los recursos más prácticos cuando usas imágenes o vídeos de fondo en Divi son las capas de fondo superpuestas.
Por si no caes en a lo que me refiero es a poner una superposición sobre la imagen o vídeo, que le añada opacidad al fondo.
Índice de contenidos
Para qué sirven las capas superpuestas
Principalmente sirven para que se lean mejor los textos que van sobre esa imagen o vídeo de fondo.
Por ejemplo, si el fondo es un vídeo con partes claras y oscuras, es difícil decidirse por un texto claro u oscuro, pues depende qué parte del vídeo estemos viendo se verá bien/mal el texto.
Al añadir una capa superpuesta oscurecemos o aclaramos el vídeo o imagen de texto, haciendo que nuestro texto claro u oscuro se pueda leer bien consistentemente.
Para que te hagas una idea, el siguiente ejemplo sería un texto claro sobre una imagen de fondo muy clara o con una capa superpuesta muy clara, donde se vería fatal el texto.
Por el contrario, si aplicamos una capa de superposición oscura a la imagen, nuestro texto se leerá perfectamente, sin influir las partes claras u oscuras de la imagen.
Tipos de capas superpuestas
En Divi vamos a encontrar 2 tipos de capas superpuestas, así que vamos a ver cuál es su uso y cómo sacarle partido.
Capa superpuesta de fondo
Es la que nos permite configurar Divi inmediatamente al acceder a la pestaña de diseño de la sección o módulo que permita la utilidad de capas superpuestas.
Sirve fundamentalmente para aplicar un color de superposición a la imagen o vídeo de fondo, para que nuestro texto y botones se vean correctamente, como te explicaba antes.
Para utilizarla lo primero es activarla en el botón SÍ/No de la herramienta, y luego debes elegir el color de superposición justo debajo.
A este respecto debes saber que si aplicas un color seleccionándolo directamente de los visibles tu imagen o vídeo no se verá, pues el color se aplica inicialmente sin transparencia, o con la opacidad al 100%, que viene a ser lo mismo.
Lo ves claramente en este corto vídeo…
Como habrás podido comprobar, al aplicar un color se aplica el color sólido sobre la imagen o vídeo de fondo, con lo que se deja de ver, es como si no hubiese nada de fondo.
No es lo que queremos ¿verdad?
Lo habitual es aplicar una capa superpuesta con algún porcentaje de opacidad menor del 100%, para que se siga viendo de fondo nuestra imagen o vídeo.
Para ello debes seleccionar, no un color, sino el botón con el icono del cuentagotas, y ahí el proceso es el siguiente:
- Eliges el color base de la superposición.
- Eliges la variación del color base en el selector deslizante.
- Seleccionas el porcentaje de opacidad en el segundo selector deslizante.
Seguramente lo vas a ver más claro en este breve vídeo…
Fácil ¿eh?
Capa superpuesta de texto
¿Estamos de acuerdo en que el objetivo principal de una capa superpuesta es que un texto se vea bien sobre una imagen o vídeo de fondo?
¡Bien!
Entonces, ¿y si en vez de aplicar la capa superpuesta a toda la imagen o vídeo la aplicamos solo a la parte del texto?
Es ese efecto que sueles ver de texto que flota en una caja, más o menos opaca, sobre la imagen o el vídeo.
Para ello en Divi tenemos que activar, en la misma sección de Diseño > Capa superpuesta, no la superposición de fondo, sino la superposición de texto.
A partir de que actives la superposición de texto, poco más tienes que aprender, pues el modo de utilizar la herramienta es como en el caso anterior de la superposición de fondo, solo que con un paso (opcional) adicional:
- Eliges el color base de la superposición.
- Eliges la variación del color base en el selector deslizante.
- Seleccionas el porcentaje de opacidad en el segundo selector deslizante.
- Aplicas radio al borde, para hacer las esquinas de la caja de superposición de texto más o menos redondeadas.
De nuevo, en un breve vídeo lo verás más claro y fácil de aprender…
Como habrás podido ver, las capas superpuestas son un recurso realmente interesante, a veces incluso imprescindible, en todos aquellos módulos y secciones de Divi en las que utilicemos una imagen o vídeo de fondo.
Por cierto, si aún no tienes una licencia de Divi aquí la puedes obtener de por vida con un 20% de descuento.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Hola Fernando. Muy claro el mini tutorial. Pero lo que no acabo de ver es si esto se puede usar para poner de fondo en cualquier sección. Me estoy volviendo loco en un página de sección única, a la que le quiero meter de fondo una imagen y suavizarla con un color y meterle su porcentaje de opacidad, pero me temo que no aparece la opción de poner capa superpuesta en cualquier sección, ¿verdad?
No, solo en algunos módulos
Mi gozo en un pozo. Trabajaré con la imagen «fuera» y la subiré ya tamizada . Muchas gracias, Fernando
Buenas tardes Fernando, estoy buscando la forma de poder cambiar la imagen al hacer hover sobre los productos del módulo Tienda de Divi. El efecto que busco lo puedes ver en esta página: https://www.vidal-vidal.com/es/collares/, al poner el ratón sobre cualquier producto de la tienda, aparece otra imagen. ¿Es posible hacerlo con Divi?
Muchas gracias
Buenos dias Fernando. LLevo tiempo con un problema que no consigo solucionar en DIVI. Cada vez que en la parte de «Contacto» le doy a «enviar», me duplica el formulario. No consigo saber cual es la razón. Agradecería una ayuda. Gracias de antemano.