Quitar sombra al texto del Slider en Divi (responsive)

En este tutorial te enseñaremos cómo quitarle la sombra al texto del slider de Divi que viene por defecto, y además de eso a personalizar la imagen de fondo para que sea responsive en cualquier dispositivo. Son dos ajustes pequeños pero que marcan una diferencia enorme en la apariencia y la calidad final de tu slider, y lo mejor es que ambos se resuelven con un par de fragmentos de CSS listos para copiar y pegar.

El módulo Slider de Divi es de los más usados para encabezar páginas de inicio y landing pages, porque permite mostrar varios mensajes rotando con imágenes de fondo impactantes. Sin embargo, trae dos comportamientos por defecto que suelen molestar a quienes cuidamos el detalle: una sombra dura en el texto que ensucia la tipografía, y un recorte de la imagen de fondo que distorsiona la composición en pantallas pequeñas. Vamos a solucionar las dos cosas.

¡Vamos a ello!

1.- Quitar la sombra al texto del Slider en Divi

Estamos seguros de que has buscado por allí en internet cómo hacer que el texto del título y el texto del slider en Divi no tenga esa sombra tan horrible que trae por defecto (aún no sé por qué no han quitado esto en las actualizaciones de Divi). Pues bien, estás de suerte, porque te dejaremos por acá un simple snippet con el que podrás lograr esto.

Esa sombra existe por una razón histórica: ayuda a que el texto blanco sea legible aunque la imagen de fondo tenga zonas claras. El problema es que en los diseños modernos se ve anticuada y resta limpieza a la tipografía, sobre todo cuando ya usas un buen overlay oscuro sobre la imagen. Quitarla te devuelve el control total sobre cómo se ve tu texto.

Aprende a crear un negocio de diseño web con nuestro curso especializado para creación de negocios de diseño web en uxdivi.

Para quitar la sombra del texto en el slider de Divi copia y pega el siguiente Snippet en el CSS personalizado de tu página o en las opciones generales de Divi:

/* Quitar la sombra del texto en el slider de Divi */
.et_pb_slide_description {
text-shadow: none !important;
}

Con el anterior CSS le estamos indicando a la clase que contiene los textos del slider que no queremos que despliegue la sombra que trae por defecto.

Y así es como podemos solucionar este pequeño problema que trae Divi en su módulo de Slider.

Dónde pegar el CSS exactamente

Tienes dos lugares principales donde colocar este snippet, y la elección depende de tu objetivo. Si quieres que el cambio aplique a todos los sliders de tu sitio, lo ideal es pegarlo en Opciones de Divi, dentro de la pestaña General, en el campo de CSS personalizado. De esta forma la regla se carga en todo el sitio y nunca más tendrás que preocuparte por la sombra en ningún slider que crees.

Si en cambio solo quieres afectar el slider de una página específica, puedes pegarlo en el CSS personalizado de esa página o en las opciones avanzadas del módulo. Para la mayoría de los casos recomiendo el CSS global de Divi, porque te ahorra repetir el trabajo y mantiene la coherencia en todo el sitio.

Consejo: Si después de quitar la sombra notas que el texto cuesta leerse sobre ciertas imágenes, no vuelvas a poner la sombra. En su lugar, agrega un overlay oscuro semitransparente al fondo del slider desde las opciones de Divi. Es una solución mucho más elegante y moderna que garantiza legibilidad sin ensuciar la tipografía.

Pero eso no es todo ¿Quieres ver cómo puedes hacer para que la imagen del Slider sea totalmente responsive? Checa a continuación.

2.- Hacer la imagen del slider responsive en Divi

Para lograr esto debemos transformar un poco el funcionamiento del Slider como tal.

El comportamiento por defecto del slider recorta la imagen de fondo para que llene todo el espacio, lo que en pantallas grandes suele verse bien, pero en móviles puede cortar partes importantes como un rostro, un producto o un texto incrustado. Vamos a cambiar ese comportamiento para que la imagen se muestre completa y se adapte proporcionalmente a cualquier ancho de pantalla, sin recortes indeseados.

Lo primero que haremos será asignar las imágenes correspondientes a cada uno de los sliders que creemos. En este paso es importante que sepamos que las imágenes que coloquemos en el slider deben ser del mismo tamaño para que no tengamos problemas de alturas con el CSS que vamos a usar.

A cada slider debemos asignarle la siguiente clase CSS personalizada: my_uncrop_slider

Esa clase CSS personalizada es la que conecta tu slider con las reglas que vamos a escribir. La asignas dentro de la configuración del slider, en la pestaña Avanzado, en el campo de Clase CSS. Escríbela exactamente igual, sin el punto inicial, porque ese campo espera solo el nombre de la clase; si la escribes mal o con un espacio de más, las reglas no se aplicarán.

Ahora, para hacer que las imágenes se acomoden y se hagan responsive para todos los tipos de dispositivos debemos agregar el siguiente CSS en Opciones de Divi > CSS personalizado:

/* Hacer la imagen del slider de Divi responsive */

.my_uncrop_slider.et_pb_slider .et_pb_slide_image {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    top: auto;
    position: relative !important;
    display: block !important;
}
.my_uncrop_slider.et_pb_slider .et_pb_container {
    max-width: 100% !important;
    width: 100% !important;
}
.my_uncrop_slider.et_pb_slider .et_pb_slide_image img {
    max-height: none !important;
    width: 100% !important;
}
.my_uncrop_slider.et_pb_slider .et_pb_slide {
    padding: 0 !important;
}
.my_uncrop_slider.et_pb_slider .et_pb_slide_with_image .et_pb_slide_description {
    position: absolute !important;
    width: 100% !important;
    padding: 5% !important;
    float: none !important;
    bottom: 0 !important;
    text-align: left;
}
.my_uncrop_slider.et_pb_slider .et-pb-active-slide .et_pb_slide_image {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
}

Una vez agregado podemos replicar tantos sliders como queramos y cambiar las imágenes y textos correspondientes.

Qué hace cada parte del CSS

Vale la pena entender qué estamos haciendo para que no sea solo copiar y pegar a ciegas. Las primeras reglas toman la imagen del slide y la convierten en un elemento de bloque al 100% de ancho, eliminando los recortes y posicionamientos absolutos que Divi aplica por defecto. Así la imagen se adapta al contenedor en lugar de quedar recortada en un marco fijo.

Las reglas del contenedor liberan el ancho máximo para que el slider ocupe todo el espacio disponible, la regla sobre la descripción reposiciona el texto en la parte inferior del slide para que quede sobre la imagen completa, y las reglas de animación mantienen el efecto de aparición suave de Divi al cambiar de slide. En conjunto, transforman un slider con imagen recortada en uno donde la imagen se ve completa y proporcional en cualquier dispositivo.

Consejo: Como ahora la imagen se muestra completa, prepara tus imágenes pensando en el formato. Lo ideal es usar imágenes con una proporción consistente entre todos los slides y con el sujeto principal centrado, para que en cualquier ancho de pantalla la composición se mantenga equilibrada y el mensaje del texto no choque con elementos importantes de la foto.

El resultado final será el siguiente:

Cuándo conviene usar esta técnica y cuándo no

Esta solución es ideal cuando tus imágenes de fondo contienen información visual que no puedes permitirte recortar: fotos de producto donde el artículo debe verse completo, imágenes con texto incrustado o composiciones gráficas donde cada elemento cuenta. En esos casos, mostrar la imagen completa y dejar que se adapte proporcionalmente es exactamente lo que necesitas.

Por el contrario, si tus imágenes son fotografías atmosféricas amplias (paisajes, texturas, fondos abstractos) donde no importa que se recorten un poco en los bordes, el comportamiento por defecto de Divi funciona bien y te ahorra este trabajo. La clave está en preguntarte: ¿perder los bordes de esta imagen arruina el mensaje? Si la respuesta es sí, usa esta técnica.

Preguntas frecuentes

¿Este CSS afecta a todos los sliders de mi sitio?

El CSS para quitar la sombra sí afecta a todos los sliders si lo pones en las opciones globales de Divi. En cambio, el CSS para hacer la imagen responsive solo afecta a los sliders que lleven la clase personalizada my_uncrop_slider. Esto es intencional: te permite tener algunos sliders con imagen completa y otros con el comportamiento por defecto, según lo que cada diseño necesite.

¿Por qué mis imágenes se ven con alturas diferentes?

Casi siempre es porque las imágenes que cargaste tienen tamaños o proporciones distintas entre sí. Como ya no se recortan a una altura fija, cada imagen muestra su proporción real. La solución es preparar todas las imágenes del slider con las mismas dimensiones antes de subirlas, así todos los slides tendrán la misma altura y la transición se verá uniforme.

¿Necesito un plugin para aplicar este CSS?

No. Divi ya incluye campos para CSS personalizado tanto a nivel global, en sus opciones, como a nivel de página y de módulo. No necesitas instalar absolutamente nada adicional: solo copias el snippet y lo pegas en el lugar correspondiente. Es una solución 100% nativa de Divi.

¿Este truco sigue funcionando en las versiones actuales de Divi?

Sí. Las clases CSS que utiliza el módulo Slider de Divi se han mantenido estables a lo largo del tiempo, así que estos snippets siguen siendo válidos. Si en algún momento notas que algo no aplica, lo más probable es que sea por un conflicto con otro CSS de tu sitio o por un caché que necesitas limpiar después de pegar el código.

Conclusión

Con estos dos snippets resolviste dos de las limitaciones más comunes del módulo Slider de Divi: la sombra dura del texto que envejecía tu tipografía y el recorte de la imagen de fondo que distorsionaba tu composición en móviles. Son cambios pequeños en cantidad de código, pero grandes en impacto visual, y demuestran lo lejos que puedes llegar con Divi cuando combinas sus opciones nativas con un poco de CSS bien aplicado.

Lo más valioso es que ahora entiendes no solo el qué, sino el porqué de cada regla, lo que te permite adaptar estas técnicas a otros módulos y situaciones. El CSS personalizado es una de esas herramientas que, una vez que le pierdes el miedo, multiplica tus posibilidades de diseño dentro de Divi sin instalar plugins ni depender de nadie.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este post.

Nos vemos en el próximo tutorial de uxdivi.

🎓 ¿Quieres dominar Divi y convertir esa habilidad en un negocio rentable? En el curso Crea tu negocio de diseño web paso a paso te enseño cómo lograrlo. Conoce todos los planes de membresía y accede a todos los cursos.