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!
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.
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.
saludos a mi me crea debajo el fondo azul con un espacio demasiado grande utilizando este codigo
A mi no me ha funcionado hacer la imagen responsive… se queda pequeña y no ocupa todo el espacio del slider
Hola Camila. Entiendo el problema. Es probable que el tamaño de la imagen que hayas colocado no sea el correcto. Verificaste que el tamaño de la imagen que has montado es mayor a 1200 px de ancho?