Blog

Texto sobre imagen en Divi

Blog

Texto sobre imagen en Divi
Texto sobre imagen en Divi
Texto sobre imagen en Divi

Texto sobre imagen en Divi

Hoy queremos compartir contigo un pequeño truco para mejorar la legibilidad de las imágenes que tienen un texto sobre cualquier imagen en Divi. Este tutorial está en nuestra categoría Divi Basics y está escrito para usuarios que están comenzando con Divi. Aunque te adelantamos que hay mucha gente que desconoce este pequeño truco para mejorar la legibilidad.

Hay muchas formas de añadir texto a nuestras imágenes. Vamos a comenzar con la más sencilla que sería crear una sección o fila con una imagen de fondo y añadir dentro un módulo de texto. Además añadiremos algo de separación y centraremos el texto para tener un resultado como este:

texto ilegible sobre imagen en Divi
Imagen con texto ilegible

De aquí lo más importante es que añadas el mismo espacio arriba y debajo para que el título quede centrado y además algo de separación a los lados para evitar que el texto quede pegado a los bordes.

Aunque alinees el texto en el centro te recomiendo añadir espacio a los laterales para evitar que el texto quede muy pegado en un dispositivo móvil.

Añadir una capa overlay a nuestra imagen

Como te muestro en la imagen anterior el texto no es muy legible, ¿verdad?. Esto no es casual y ahora te voy explicar cómo podemos solucionarlo.

Añadir un capa overlay

Divi nos permite añadir varios tipos de fondos: imagen, vídeo, sólido, degradado, etc… Hoy nos interesa utilizar el degradado para añadir una capa extra que permitirá que nuestro texto sea más legible. Para que el degradado aparezca encima de la imagen no olvides activar la opción “Place Gradient Above Background” tal y como te mostramos en la imagen. Si no, no verás ningún cambio.

imagen con texto encima en Divi
Texto encima de una imagen con Divi

En el caso anterior hemos utilizado un degradado muy sutil. En ambos puntos del degradado hemos utilizado el color negro con un 20% de opacidad, por eso el resultado es una imagen un poco más oscura. También podemos utilizar colores o jugar con la intensidad de éstos.

¿Qué te parecido este truco? ¿Interesante? ¿Básico? Déjanos tu opinión en los comentarios 🙂

About Destaca Imagen

CHEMA & ANTO

We are brothers. As a designer and developer, we have decided have to join forces  to create plugins and themes for WordPress.

 

¡Apuntate a nuestra lista!

Los mejores trucos y tutoriales para Divi y WordPress en tu bandeja de entrada

Join our list!

The best tricks and tutorials about Divi in your inbox

On our shop

En nuestra tienda

Suscribe

The best tricks and tutorials about Divi in your inbox

Apúntate a nuestra lista

Los mejores trucos y tutoriales para Divi en tu email

También te podría gustar:

You may also like

Mejores plantillas web para fotógrafos en 2025

Mejores plantillas web para fotógrafos en 2025

Hoy en día, tener una web profesional no es opcional para los fotógrafos: es una necesidad. En un entorno digital donde la imagen lo es todo, tu sitio web es el primer contacto que muchos clientes tendrán contigo. Por eso, la forma en la que presentas tu portafolio...

Cómo cambiar los créditos del footer en Divi

Cómo cambiar los créditos del footer en Divi

Cuando diseñamos una web con Divi, queremos que cada detalle refleje nuestra marca, incluso el pie de página. Sin embargo, por defecto, Divi incluye unos créditos como “Diseñado por Elegant Themes | Powered by WordPress” que, aunque correctos, no siempre encajan con...

Cómo Crear y Personalizar una Login Page con Divi

Cómo Crear y Personalizar una Login Page con Divi

Crear una login page con Divi personalizada es una de las formas más eficaces de reforzar el branding de un sitio web WordPress. Si utilizas el tema Divi y estás de suerte: no solo puedes diseñarla visualmente con el constructor, sino que también tienes a tu...

Plantillas blog Divi, descubre nuestro pack de plantillas

Plantillas blog Divi, descubre nuestro pack de plantillas

Si estás buscando la mejor manera de diseñar un blog profesional, optimizado y atractivo en WordPress, el pack de plantillas blog Divi es la solución perfecta. Este pack ha sido desarrollado para aprovechar todas las ventajas del constructor visual de Elegant Themes,...

Las 10 mejoras de Divi 5 que necesitas conocer

Las 10 mejoras de Divi 5 que necesitas conocer

El mundo del diseño web está en constante evolución, y una de las herramientas más poderosas y populares para desarrolladores y diseñadores es Divi. Con la llegada de Divi 5, la plataforma ha dado un gran salto en términos de rendimiento, flexibilidad y experiencia de...

0 comentarios

Enviar un comentario

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

¡Consigue 5€ gratis!

Regístrate y obtén un cupón descuento.

 Registrarme
Select currency
Euro
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Más información sobre nuestra política de cookies