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 este artículo para mejorar la calidad del blog ...

PobreRegularEstá bienMuy buenoExcelente (8 votos, promedio: 4,25 de 5)
Cargando…

Autor: Fernando

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.Autor del libro WordPress - La tela de la araña. 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.

Comparte esta entrada en
468 ad

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar