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 ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (8 votos, promedio: 4,25 de 5)
Cargando…

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. 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

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Share This