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.

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í:

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 este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (40 votos, promedio: 6,75 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Share This