Cambiar la altura de los deslizadores DIVI

Cómo conseguir alturas de deslizamiento sensibles en Divi

Ajuste de la altura de los deslizadores en el Divi Theme (y otros sitios usando Divi Builder) puede ser una tarea sorprendentemente difícil. A continuación, te explicamos cómo controlar tus deslizadores y hacer que se muestren a la altura deseada en escritorios, teléfonos móviles y tabletas.

Opcion 1: Ajuste de la altura del control deslizante en el Divi Builder

En primer lugar, Divi no incluye una opción de altura de deslizamiento integrada.

En su lugar, la altura se determina a partir del contenido de las diapositivas. El contenido de una diapositiva es típicamente la descripción de la misma (con título, texto y botones) y la imagen de la diapositiva. Para dejar una cierta altura por encima y por debajo de estos contenidos, Divi añade un 16% de relleno superior e inferior a la descripción de la diapositiva. Por lo tanto, en la mayoría de los casos, la altura de una diapositiva individual es el resultado de la altura de la descripción de la diapositiva más el 16% del acolchado.

La altura del control deslizante se ajusta entonces como la altura de la diapositiva más alta, y todas las diapositivas se muestran a esta misma altura.

Lo más cerca que se puede llegar a ajustar la altura de un deslizador desde la propia Divi es usar la opción «Custom Padding» en los ajustes de la diapositiva. Esto controla el acolchado por encima y por debajo de la descripción de la diapositiva, y como resultado puede tener un efecto en la altura total de la diapositiva y el deslizador.

Las ventajas de este modo es que está incorporado a Divi y el acolchado se puede establecer por separado en escritorios, móviles y tablets (haciendo clic en el icono del móvil que aparece a la derecha de la opción).

Los aspectos negativos incluyen que los cambios en el contenido de la diapositiva, como cambiar el texto o añadir / quitar una diapositiva, pueden a través de la altura inesperadamente fuera de lugar. De la misma manera, cuando usted encoge el tamaño de la ventana, es posible que el deslizador aumente la altura esporádicamente, lo cual es lo opuesto a lo que usted probablemente querrá.

Option 2: Ajuste de la altura del control deslizante con Divi Booster

/* === Begin: Set the divi slider height === */
/* Src: https://divibooster.com/changing-the-height-of-the-divi-slider/ */

/* Desktop */
.myslider .et_pb_slide .et_pb_container {
	height: auto !important;
	min-height: 500px !important;
}
/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 980px) {
	.myslider .et_pb_slide .et_pb_container {
		height: auto !important;
		min-height: 500px !important;
	}
}
/* Phone */
@media only screen and (max-width: 767px) {
	.myslider .et_pb_slide .et_pb_container {
		height: auto !important;
		min-height: 500px !important;
	}
}

/* Handle padding */
.myslider .et_pb_slide {
	padding-bottom: 0px !important;
}
.myslider div.et_pb_slide_description, 
.myslider .et_pb_slider_fullwidth_off div.et_pb_slide_description {
	padding-top: 1%;
	padding-bottom: 1%;
}

/* === End: Set divi slider height === */

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