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.
Amigo, disculpa que desconosca sobre este tema pero tengo un problema, cuando lo quieres adaptar mediante "width:100%;" funciona de manera correcta pero cuando ya queremos usar el height:100%; no funciona.
he probado con "height:100vh;" pero solo funciona de manera fija mas no en modo adaptable.
existe alguna otra forma de hacer esto??
Eso no lo he probado. ¿Has probado a ajustar la altura en pc, tablets y móvil, en las tres opciones que te da Divi? Un saludo, Javier.
Capo absoluto! Muchas gracias!
A ti. Me alegra que te haya sido de utilidad. Saludos!
Hola estimado Javier, muy buenos tus tutriales. Como puede hacer para que en la tienda los productos queden todos del mismo tamaño? sabiendo que desde antes ya tienen las mismas dimensiones, pero al momento de incluirlas al modulo de tienda algunas se achican mas de lo normal. saludos
Puedes mostrarme un ejemplo para entender a qué te refieres? Un saludo.
Muchísimas gracias Javier, buenísimo y muy cuidado tu post, yo queria hacerte una pregunt de otro tema porque estoy desesperdo. Tengo comprada la plantilla Divi para toda la vida y me puedo descargar todos los los plugins etc. Acabo de bajarme los que tu tienes Blom y Monarch pero no consigo instalarlo porque cuando me voy a la pagina para meter mis datos no hay manera de que active el menu, se queda en gris. Puedes darme alguna idea de lo que pasa? GRACIAS
Hola Miguel Ángel. Gracias por tus comentarios ;). En cuanto a la instalación del plugin no deberías tener mayor problemas. Te bajas los zips desde la web de Elegant Themes e instalas los plugins subiendo los zips. En principio para esto no necesitas meter ningún dato para que se activen los plugins. ¿A qué página te refieres exactamente que se te queda en gris? Un saludo, Javier.
Que pena he ido a hacerlo y ya han cambiado la versión de Divi y las paletas no se corresponden a las imágenes que has puesto y me lio un poco 🙁
Cierto Miguel Ángel, han cambiado un poco la interfaz. Ahora han hecho pequeñas agrupaciones, pero las cosas siguen en el mismo sitio. Hace pocos días utilicé mi propio tutorial para hacer otro slider y no tuve problemas. De todas maneras, me apunto como tarea pendiente actualizar las pantallas. Saludos.
hola Javier, muchas gracias por tu tutorial! me salvó!!!! solo me queda una duda... cuando puse las nuevas medidas... se me desapareció el botón de leer más y la superposición para las letras... se va hasta perderse en el borde inferior de la imagen! cómo puedo hacer que queden igual?
Hola Stefanie. Mi tutorial no contempla el uso del botón leer más, por eso te puede aparecer perdido por ahí. Tendrías que utilizar Firebug o las herramientas de desarrollador de Chrome (en ambos navegadores es desde la tecla F12) para localizar el botón y actualizarle las coordenadas donde lo quieras colocar. Te invito a que juegues con estas herramientas para aprender a localizar los elementos y cambiarles su diseño en vivo. Seguro que te será muy útil a partir de ahora. Un saludo.
Hola Javier.
No encuentro el plugin de Contructor de Divi en la lista de plugins, ¿podrías ayudarme?
¡Gracias!
Hola María. ¿Tienes instalado Divi? En las Entradas te debe aparecer el botón del constructor de Divi debajo del título de las entradas. Divi se instala como una Tema, no como un Plugin. Un saludo.
Sí, tengo instalada la plantilla Divi.
¿Te refieres al apartado de entradas que se utiliza para blog?
Tengo la versión: 2.3.2
Sí. Vete a Entradas del panel de administración de WordPress, y edita una. Debajo del título verás la url que tomará la Entrada cuando la publiques, y justo debajo debes ver un botón morado para habilitar el constructor de Divi. Si lo pulsas, cambiará el editor tradicional por el de Divi. Aquí tienes la documentación de Divi de la web oficial por si queieres ver más cosas. Un saludo.
Buenas alguien me ayuda.
He creado el slider pero resulta que no se como ponerlo para que salga en mi pagina web de inicio
Hola Juan. Vete a Ajustes de WordPress, Lectura, y selecciona la página de inicio que quieras que se muestre como página principal de tu web. Un saludo.
Buenas tardes, me gustaría saber si existe alguna forma para sustituir los dots del slider por la imagen en miniatura de cada slider de manera que aparezca todas las imágenes en miniatura rotando y al quedar una seleccionada se viese en grande.
Buenos días Gerard. Desde la ventana de configuración del slider de Divi no se puede. Habría que rediseñarlo. Un saludo, Javier.