Tutorial Divi: Cómo añadir capas superpuestas y para qué sirven

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.

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:

  1. Eliges el color base de la superposición.
  2. Eliges la variación del color base en el selector deslizante.
  3. 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:

  1. Eliges el color base de la superposición.
  2. Eliges la variación del color base en el selector deslizante.
  3. Seleccionas el porcentaje de opacidad en el segundo selector deslizante.
  4. 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.

La entrada Tutorial Divi: Cómo añadir capas superpuestas y para qué sirven la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Laura D´Cuero

Copywriter, Redactora de Content SEO.
Laura D´Cuero

Latest posts by Laura D´Cuero (see all)

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *