Nuestras promociones uxdivi sales day terminan en:

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

Seleccionar página

Quitar sombra a texto de Slider en Divi y hacerlo responsive

En este tutorial te mostraremos como quitarle la sombra al texto del slider en Divi, y además hacer la imagen de fondo responsive.

Por Jefferson M.

May 5, 2021

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

¡Vamos a ello!

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.

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

0 comentarios

Enviar un comentario

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

🖐 ¡RECIBE LAYOUTS Y CHILDTHEME GRATIS! 😎

Suscribiendote a esta lista de correo, recibirás algunos de nuestros layouts premium y un childtheme para eCommerce totalmente gratis. Además te enviaremos nuestro resumen de contenidos para que siempre estés enterado/a de nuestras últimas novedades.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros recursos gratuitos