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.

Slider Divi: Antes y despues

Este es un ejemplo de un slider antes y después de realizar las modificaciones.

Divi Slider

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

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

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 del slider en gris con ancho completo de la página.

Fullwidth Slider

Módulo Fullwidth Slider de Divi

Dentro de la configuración de la sección, en ajustes de estilos de CSS Personalizado, indicamos que la altura sea 300px.

CSS Personalizado del Slider

CSS Personalizado del Slider

Ajustes del módulo Slider Divi

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

Ajustes avanzados de diseño del Slider Divi

Ajustes avanzados de diseño del Slider Divi

Después en ajustes de estilos de CSS Personalizado, indicamos que la altura sea 300px para el Elemento principal.

CSS Personalizado

CSS Personalizado

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

Tamaño de la diapositiva del Slider Divi

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

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

Ajustes de la diapositiva Slider Divi

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 Child Theme.

Guardar

Guardar

Si te ha parecido interesante este artículo y crees que Divi puede ayudarte con tu proyecto Web y estás pensando en comprarlo, te pido que lo hagas pinchando en la siguiente imagen. Estoy afiliado a ElegantThemes y me llevaría una pequeña comisión si llegas a comprarlo. De esta manera me ayudas a mantener el blog y a escribir más artículos como este. Si además, te haces suscriptor de ElegantThemes, podrás comprarlo con hasta un 20% de descuento en algunos casos. AfiliadosDivi Guardar Guardar
About these ads

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

CERRAR

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!