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.
Tabla de contenidos
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.
¡Hola! Soy Javier. Soy informático y me gusta documentar todo lo que aprendo. En mi blog te enseño todo lo que sé y cómo puedes aprender a crear tu propia web, mejorar el SEO y aplicar técnicas de Marketing Digital para conseguir mayor visibilidad. Suscríbete para no perderte ninguna de mis guías sobre WordPress, posicionamiento SEO o Marketing Digital.
Simplemente GRACIAS!!!!!!!!!!!!! Aunque tambien me gustaria añadir un OOOLE!! Y por si le sirve a alguien, cuidado al escribir "height: 800px;" me pase 10 minutos escribiendolo mal y estaba desesperado por que nada funcionaba estaba poniendo "heigth" xxxD.
Me alegro que te haya sido de utilidad. Un saludo.
Gracias javier , estoy probando esta plantilla y me he trancado en el título del blog; no he encontrado manera de que aparezca. Está configurado correctamente en el editor de wordpress (ajustes> generales), pero cuando pongo una plantilla divi, no aparece y no veo donde configurarlo con el editor divi. Gracias si me das algún cosejo.
Prueba lo siguiente. Vete a Apariencia > Personalizar, y después te vas a Ajustes Generales > Identidad del Sitio. Comprueba si ahí tienes escrito el nombre del blog. Un saludo.
javier una pregunta como puedo ampliar la imagen de diapositiva en el slider?
que quede mas ancha y que en el movil no me afecte el diseño?
Buenas! Normalmente en el Constructor de Divi, cuando ya has añadido el módulo de Slider, al final del todo, tienes opciones para activar o desactivar ese módulo en la vista del ordenador o móvil. Si la configuración que quieres hacer es diferente según el dispositivo podrías duplicar el módulo y dejarlo activo uno para el ordenador y el otro para móviles, y en el de móviles configuras cada slide al tamaño que consideres. Un saludo.
Buenos días; Javier gracias por responder. me podrías indicar que propiedades cambio solo para aumentar la imagen izquierda de un slider por que he probado muchas cosas y nada ?
necesito aumentar solo la imagen sin que me afecte el texto de la derecha.
mil gracias
Hola!! gracias por tu aporte, me ha ayudado a solucionar mi problema.
Pero me surge la duda. He puesto las medidas del slider en PX, (Tal cuál lo explicas en tus pasos, pero sólo con el uso de Height) como la plantilla es Responsive no me preocupa el tamaño para móvil pero al ponerle en Height en PX, PERO! ¿Crees que me dará problemas pese a que sea una plantilla Responsive?
Gracias y saludos!!!
Me alegra que te haya sido de utilidad ;). Perdona, pero ¿qué es PX?. Saludos.
PX es pixel en CSS3 ---- ejemplo: Height:50px;
Thanks!
Ah vale! Como lo habías puesto en mayúsculas me había despistado. Si ves que no se ajusta correctamente en móviles, siempre puedes duplicar la sección y ajustar una para ordenadores, y otra para móviles, haciendo que sean visibles solo en esos dispositivos. También puedes hacer pruebas redimensionando el navegador en tu PC para ver cómo se comporta el responsive. Un saludo.
Hola! Me gustaría hacerte una pregunta ¿hay alguna manera de que la el slider vaya reajustando su tamaño a escala cuando se redimensiona el navegador?
Esta solución que veo es para un ancho fijo pero al ir cambiando el tamaño de la ventana las partes laterales de la imagen que tengo de fondo van desapareciendo... y me gustaría que siempre se viese la imagen de la misma manera.
Muchas gracias y saludos!
Habría que probarlo con porcentajes en vez de pixeles. No te sabría decir con seguridad si funcionaría. Lo que si puedes hacer con Divi es añadir el mismo slider para cada tipo de dispositivo y ponerle un tamaño concreto a cada uno. Un saludo.
Capo absoluto! Muchas gracias!
A ti. Me alegra que te haya sido de utilidad. Saludos!