Tutorial Divi: Cambiar la altura del slider

Una de las cosas que Divi no trae por defecto es poder especificar una altura personalizada para los sliders, así que si quieres personalizar a tope tus pases de imágenes o vídeo te tocará meterle mano un poco al CSS, que nunca está de más aprender ¿no crees?

Así que vamos a ver 3 modos de personalizar la altura de los sliders de Divi

Cambiar la altura de todos los sliders de Divi mediante CSS

Sencillo, solo tienes que ir a los ajustes de Divi en la administración de tu WordPress, en Divi -> Opciones del tema -> General -> CSS personalizado y añadir el siguiente código, modificando los valores de altura (height) a los que desees.

@media only screen and ( min-width:981px ) {
    /* Cambiar altura de todos los sliders */
    .et_pb_slider, .et_pb_slider .et_pb_container { 
        height: 700px !important; 
    }
    .et_pb_slider, .et_pb_slider .et_pb_slide { 
        max-height: 700px; 
    }
    .et_pb_slider .et_pb_slide_description { 
        position: relative; 
        top: 25%; 
        padding-top: 0 !important; 
        padding-bottom:0 !important; 
        height:auto !important; 
    }
}

Un par de notas sobre el código anterior:

  1. Como te he comentado, fíjate que con este código cambiamos la altura de los sliders de Divi en todas las páginas que tenga slider, simplemente cambia las 2 ocasiones en que aparece “700px” con la altura que tú quieras.
  2. En este código de ejemplo he utilizado “top: 25%” para mostrar los títulos del slide 1/4 más abajo del slide, para que todos los títulos de slides salgan en el mismo lugar. Sube esto si quieres que los títulos y descripciones de tus slides aparezcan más abajo de cada slide. Prueba hasta encontrar tu ubicación ideal.

Cambiar la altura de todos los sliders de Divi con un plugin

Si no quieres meter más códigos CSS puedes usar el plugin Divi Booster (de pago, pero vale mucho más que lo que cuesta). Solo tienes que ir a Divi -> Divi Booster -> Modules -> Slider y especificar la altura, en píxeles, de los sliders, nada más fácil.

cambiar-altura-divi-slider-con-divi-booster

Cambiar la altura de cada slide de Divi con CSS

Para cambiar la altura a solo algunos de tus sliders puedes seguir estos sencillos pasos:

  1. Copia el CSS del primer truco de este artículo.
  2. Crea una clase CSS en tu módulo de slider y lo llamas, por ejemplo, «mi-slider».
  3. Reemplaza cada una de las 5 ocasiones en que aparece en el código “et_pb_slider” en el código CSS con “mi-slider”.
  4. Añade el nuevo código a Divi -> Opciones del tema -> General -> CSS personalizado de la administración de tu WordPress.

clase-css-modulo-slider-divi

El código resultante a añadir a tu CSS personalizado sería así:

@media only screen and ( min-width:981px ) {
    /* Cambiar altura de mi-slider */
    .mi-slider, .mi-slider .et_pb_container { 
        height: 700px !important; 
    }
    .mi-slider, .mi-slider .et_pb_slide { 
        max-height: 700px; 
    }
    .mi-slider .et_pb_slide_description { 
        position: relative; 
        top: 25%; 
        padding-top: 0 !important; 
        padding-bottom:0 !important; 
        height:auto !important; 
    }
}

Solo tienes que repetir la secuencia, cambiando el nombre de tu clase CSS en cada slider que quieras personalizar.

Y es que Divi es un gran tema, pero si le aplicas un par de truquitos no tiene límite, como siempre.

¡A personalizar Divi a tope!

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(0 votos, promedio: 0)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

4 comentarios en “Tutorial Divi: Cambiar la altura del slider”

  1. Antonio Ropero

    Habría alguna forma de que el slider ocupara el 100% de alto?? para que se adapte a todas las pantallas sin importar los pixeles.

  2. Ikeda Rey Roland

    hola esta excelente esta informacion, vengo precisamente a ver si me pueden ayudar con lo siguiente jejejeje:
    tengo un slider con un boton (Mis Servicios)
    a este boton quiero hacerle un efecto hover que cuando pase por encima me aparezca
    (Mis servicios+el logo)
    habia pensado hacerlo utilizando un JPG (background-image: url…….)
    el caso es que si me funciona pero el resultado se aplica a tooooodos los botones de los sliders que tengo
    tengo 4 paginas y solo quiero que se vea en la home!
    GRACIAS DE ANTEMANO y espero puedan ayudarme

Deja un comentario

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

 

Ir arriba Ir al contenido