Tutorial Divi: Cómo crear una caja semitransparente en un texto sobre una imagen de fondo

Cuando añades en Divi un texto sobre una imagen de fondo suele pasar que, o se ve regular, o casi no se lee el texto, depende de cómo encaje el texto claro u oscuro sobre según qué parte de la imagen ¿no te ha pasado?

No te digo nada si el texto está sobre un carrusel de imágenes, en las que una es clara y otra oscura, entonces no hay manera. La solución pasa porque ese texto esté en una caja semitransparente y entonces se vea independientemente de la imagen de fondo.

Hacerlo es muy fácil, simplemente abre el módulo de imagen o la diapositiva del carrusel (slider) en el que quieras añadir el texto, pones tu título o lo que sea y la imagen de fondo,  hasta ahí bien ¿no?

Pero se verá fatal el texto, no digamos si la imagen tiene también texto, como en este ejemplo de abajo ¿a que casi no se pueden leer las letras?, aparte de lo feo y poco profesional que queda.

La solución pasa por añadir algo llamado Superposición de texto, ajuste que encontrarás un poco más abajo en los ajustes del módulo en cuestión.

Aunque están bastante claros los pasos en la captura anterior te los resumo y ordeno:

  1. Activas la superposición de texto
  2. Abres el selector de colores, por defecto sin desplegar.
  3. Eliges un color base, normalmente negro o blanco, a partir del cual aplicarás la transparencia/opacidad. Este paso es OBLIGATORIO sino no harás nada, siempre hay que elegir un color primario.
  4. Mueves el segundo selector para aplicar la opacidad/transparencia deseada. Aquí es un poco ir probando hasta encontrar el nivel que mejor se adapte o que quede mejor.
  5. Guardas los cambios, por supuesto.

A continuación haz una vista previa para comprobar cómo se ve ahora tu texto sobre la imagen de fondo, pero ya con una caja de opacidad/transparencia que permitirá que se distinga mucho mejor el texto, Y queda algo mucho más pro ¿verdad?

Comprobarás que para este tipo de ajuste siempre es mejor que el texto sea claro, como ya habrás adivinado.

A partir de ahí, si quieres, puedes personalizar la caja de texto, por ejemplo, haciendo los bordes redondeados. Simplemente pásate por la pestaña de Ajustes avanzados de diseño y aumenta el valor denominado Radio de borde de superposición de texto (lo sé, la traducción es horrible) hasta que quede a tu gusto.

Previsualiza y cuando esté todo lo bonito, y sobre todo legible, guardas los cambios y ya lo tienes.

Tu imagen de fondo se seguirá viendo ahí detrás en todo su esplendor pero tu texto ya será legible.

Este truco lo puedes aplicar en los módulos de deslizadores (sliders), en los título de publicación y en los de título de anchura completa, donde son más necesarios dicho sea de paso.

Fácil ¿eh?

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(9 votos, promedio: 4.2)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad
Ir al contenido