Modificar altura del slider Divi

Con el módulo Slider Divi de la Plantilla Divi de Elegant Themes de WordPress podemos incluir en nuestra web un slider con fotografía y texto principal para enlazarlo a un artículo de nuestra web. Vamos a ver cómo podemos modificar la altura del slider para que se ajuste al diseño de nuestra web sin necesidad de tocar nada de hojas de estilo. Todos los cambios que vamos a implementar se realizarán directamente sobre la configuración del módulo en el Contructor de Divi lo que nos facilitará el trabajo de Diseño Web. No será necesario tocar la hoja de estilos de Divi, ya que añadiremos nuestras personalizaciones desde el constructor de nuestro Divi Slider CSS.

Si todavía no sabes qué es Divi, te recomiendo la lectura de esta entrada para que sepas más sobre esta plantilla WordPress y veas lo que te puede aportar en tus proyectos.

Slider Divi: Antes y despues de modificar la altura

Este es un ejemplo de un slider antes y después de realizar las modificaciones para que veáis lo que se quiere conseguir con este tutorial.

Antes y después de cambiar el tamaño del slider en Divi

Este era el diseño original. Con una altura de unos 468px. El cambio que vamos a realizar es para hacerlo más delgado, 300px.

Resultado final del Slider de Divi

Para ello habrá que realizar los siguientes ajustes de altura, relleno y ancho de la descripción de cada slide.

Parámetros del slider

Ajustes de la Sección Divi

En el constructor de divi tenemos una sección principal en morado, y el módulo de Divi Slider en gris con ancho completo de la página. El ancho completo lo conseguimos obligando a que el margen y el espacio (margin y padding) sean cero. Si lo dejamos en blanco Divi dejará un hueco entre los elementos. En este caso, entre el borde de la página y nuestro slider.

Módulo Fullwidth Slider de Divi

Una vez dentro de nuestro Divi Slider, dentro de la configuración de la sección, en ajustes de estilos de CSS Personalizado, indicamos que la altura del elemento principal sea 300px.

CSS Personalizado del Slider

Ajustes del módulo Slider Divi

Dentro del módulo de Divi slider, en Ajustes avanzados de diseño, configuramos un relleno superior de 40px.

Ajustes avanzados de diseño del Slider Divi

Divi Slider CSS

Después en ajustes de estilos de CSS Personalizado, vamos a ajustar las CSS sin tener que escribir en la hoja de estilos. Para ello indicamos que la altura sea 300px para el Elemento principal.

Divi Slider CSS

Hacemos lo mismo para la Descripción de la diapositiva y Título de diapositiva.

Tamaño de la diapositiva del Slider Divi

En la pestaña de Ajustes generales, configuraremos cada una de las diapositivas. Lo ideal sería tener solo una diapositiva, configurarla, y después clonarla con todos los ajustes de configuración.

Diapositivas del Slider Divi

Dentro de cada diapositiva, nos iremos a los ajustes de CSS Personalizado y pondremos una altura de 300px a:

• Elemento principal
• Título de diapositiva
• Slide description container
• Descripción de diapositiva
• Imagen de diapositiva

Ajustes de la diapositiva Slider Divi

Conclusiones

Con esas modificaciones, tendremos ajustada la altura de nuestro slider para que se ajuste lo mejor posible al diseño de nuestra web sin necesidad de añadir estilos personalizados a nuestro Divi Child Theme.

RGuardar

Guardar