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