Cambiar la altura de los deslizadores DIVI

Dic 29, 2017 | 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

En la version 2.6.4, Divi Booster añade una nueva opción de altura de deslizamiento que se encarga de los detalles desordenados para usted.

Encontrará la nueva opción «Altura» en los ajustes del módulo deslizante, en la pestaña «Diseño» bajo el subtítulo «Tamaño».

Esta opción le permite establecer una altura mínima en píxeles para el control deslizante. Mientras esta altura sea mayor que la altura del contenido de la diapositiva, ésta es la altura a la que se ajustará el control deslizante. De lo contrario, se utilizará la altura del contenido de la diapositiva.

Se puede establecer una altura separada en escritorios, móviles y tablets, haciendo clic en el icono del móvil que aparece a la derecha de la opción Altura cuando empiece a editar el valor de altura. Divi no muestra el icono del móvil cuando el ajuste de altura principal (de escritorio) es el valor predeterminado de 500px, pero si lo cambia a algo más (p. ej. 501px), aparecerá el icono del móvil.

La nueva opción de altura está disponible en los deslizadores estándar, deslizadores de poste, deslizadores de ancho completo y deslizadores de poste de ancho completo.

NB: Aunque ya no debería tener que ocuparse de ello, si configura la opción de acolchado personalizado integrada en sus diapositivas, la función Divi Booster cumplirá con esto y determinará la altura mínima de la diapositiva para que sea el contenido más su acolchado personalizado. Sin embargo, la opción Altura anula el acolchado predeterminado, ya que esto le permite conseguir deslizadores más pequeños sin cambiar el aspecto del contenido de la diapositiva.

Opción 3: Ajuste de la altura del control deslizante mediante CSS

Si desea ajustar la altura de un control deslizante utilizando CSS, puede hacer lo siguiente. Primero, déle a su control deslizante una «Clase CSS» como «myslider» en la pestaña Avanzado de su configuración de control deslizante. Luego agregue el siguiente CSS a su sitio:

/* === 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 === */

Puede ajustar la altura del control deslizante a sus necesidades fijando los valores mínimos de altura para escritorio, móvil y tableta en el código de arriba.

Manera antigua: Ajuste altura control deslizante usando Divi Booster / CSS

En Divi Booster existe una opción de altura de deslizador más antigua, aunque no recomiendo usarla por más tiempo. Encontrará esta opción en la página de configuración del Divi Booster, en «Módulos». Establece una altura de deslizamiento predeterminada que se aplica a todos los deslizadores, y no se aplica en móviles / tablets.

Generalmente, usted va a encontrar la nueva opción de «Altura» añadida a los módulos individuales para ser mucho más flexible y conveniente, así que siempre lo consideraría como su primera opción. Sin embargo, he conservado la opción de altura del control deslizante por ahora para las personas que todavía lo siguen usando o que de otro modo lo encuentran útil.

Esta opción también utilizaba una implementación de CSS ligeramente diferente (y menos flexible). Este CSS no maneja el relleno / posicionamiento personalizado de la descripción de la diapositiva, así como el nuevo código, pero aquí está el viejo CSS de todos modos, para completar:

@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; 
    }
}