Amb el mòdul Slider Divi de la Plantilla Divisió d'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 Constructor de Divi el que ens facilitarà la feina de disseny 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.

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.

Divi Slider 00 1024x210 Modificar altura del slider Divi

Abans i després de canviar la mida del slider a Divisió

Aquest era el disseny original. Amb una altura d'uns 468px. El canvi que realitzarem és per fer-lo més prim, 300px.

Divi Slider 01 1024x481 Modificar altura del slider Divi

Resultat final del Slider d'Divi

Para ello habrá que realizar los siguientes ajustes de altura, relleno i ancho de la descripción de cada slide.

Divi Slider 02 1024x481 Modificar altura del slider Divi

Paràmetres del slider

Ajustos de la Secció Divisió

alconstructor de divisió 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.

Divi Slider 03 1024x194 Modificar altura del slider Divi

Mòdul Fullwidth Slider d'Divi

Una vez dentro de nuestro Divi Slider, dentro de la configuración de la sección, en ajustes de estilos de CSS Personalitzat, indicamos que la altura del elemento principal sea 300px.

Divi Slider 04 Modificar altura del slider Divi

CSS Personalitzat de l'Slider

Configuració del mòdul Slider Divi

Dentro del módulo de Divi slider, en Configuració avançada de disseny, Configurem 1 farciment superior de 40px.

Divi Slider 05 Modificar altura del slider Divi

Configuració avançada de disseny del Slider Divi

Divi Slider CSS

Després en ajustos d'estils de CSS Personalitzat, vamos a ajustar las CSS sin tener que escribir en la hoja de estilos. Para ello indicamos que la altura sea 300px para el element principal.

Divi Slider 06 Modificar altura del slider Divi

Divi Slider CSS

Fem el mateix per a la Descripció de la diapositiva i Títol de diapositiva.

Divi Slider 07 Modificar altura del slider Divi

Mida de la diapositiva de Slider Divi

A la pestanya de Paràmetres generals, Configurarem cadascuna de les diapositives. L'ideal seria tenir només una diapositiva, configurar, i després clonar amb tots els paràmetres de configuració.

Divi Slider 08 Modificar altura del slider Divi

Diapositives del Slider Divi

Dins de cada diapositiva, ens anirem als ajustos de CSS Personalitzat i posarem una alçada de 300px a:

  • element principal
  • Títol de diapositiva
  • Slide description contenidors
  • Descripció de diapositiva
  • Imatge de diapositiva
Divi Slider 09 Modificar altura del slider Divi

Ajustos de la diapositiva Slider Divisió

Conclusiones

Amb aquestes modificacions, tindrem ajustada l'altura del nostre slider perquè s'ajusti el millor possible al disseny de la nostra web sense necessitat d'afegir estils personalitzats al nostre Divi Child Theme.

Recordaros, que este tutorial solo lo podéis seguir si disponéis de la plantilla Divi de Elegant Themes, y que en la mayoría de las ocasiones, si os suscribís en su web obtendréis un cupón descuento de entre 10% y 20% según la licencia que compréis.

RGuardar

Desar

Si t'ha semblat interessant aquest article i creus que Divi pot ajudar-te amb el teu projecte web i estàs pensant en comprar-lo, et demano que ho facis punxant en la següent imatge. Estic afiliat a ElegantThemes i em portaria una petita comissió si arribes a comprar-lo. D'aquesta manera m'ajudes a mantenir el bloc ia escriure més articles com aquest.

Si a més, et fas subscriptor d'ElegantThemes, podràs comprar-lo amb fins a un 20% de descompte en alguns casos.

AfiliadosDivi Modificar altura del slider Divi

Desar

Dime qué te ha parecido el artículo...

rating on Modificar altura del slider Divirating on Modificar altura del slider Divirating on Modificar altura del slider Divirating on Modificar altura del slider Divirating on Modificar altura del slider Divi (1 votos, promedio: 5,00 de 5)
loading Modificar altura del slider DiviCargando…
Advertisements

Ús de galetes

Aquest lloc web utilitza galetes perquè vostè tingui la millor experiència d'usuari. Si continua navegant està donant el seu consentiment per a l'acceptació de les esmentades cookies i l'acceptació de la nostra política de cookies, Cliqueu l'enllaç per a més informació.

ACCEPTAR
Avís de galetes

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Puedes suscribirte con total tranquilidad de que no recibirás spam. Lo odio igual que tu. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

Gràcies per subscriure't!

Pin It on Pinterest

Share This

Comparteix-ho

Comparteix aquest article amb els teus amics!