Quitar sombra a texto de Slider en Divi y hacerlo responsive

Quitar sombra a texto de Slider en Divi y hacerlo responsive

En este tutorial te enseñaremos como 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 ¿Quieres ver lo que lograrás? checa la DEMO

Índice

¡Vamos a ello!

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

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

Estamos seguros que has buscado por allí en internet como hacer que el texto del titulo y texto del slider en Divi no tenga esa sombra tan horrible que trae por defecto (aún no sé porque 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.

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.

Quitar sombra a texto de Slider en Divi

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

Pero eso no es todo ¿Quieres ver como 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.

Lo primero que haremos será asignar las imágenes correspondientes cada uno de los sliders que creemos. En este paso e 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

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.

El resultado final será el siguiente:

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.

Artículos relacionados

Comentarios

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →