With the module Divi Slider of the Divi Template Elegant Themes WordPress we can include in our website a slider main photo and text to link to an article on our website. Let's see how we can modify the height of the slider to fit the design of our web without touching anything stylesheet. All changes will be implemented will be made directly on the module configuration in the Divi Contructor which will facilitate our work Web design.

Divi Slider: Before and after

This is an example of a slider before and after making changes.

Divi Slider 00 1024x210 Modificar altura del slider Divi

Before and after resizing the slider in Divi

This was the original design. With a height of about 468px. The change will do it is to make it thinner, 300px.

Divi Slider 01 1024x481 Modificar altura del slider Divi

Slider end result Divi

To do this we must make the following adjustments in height, width and fill the description of each slide.

Divi Slider 02 1024x481 Modificar altura del slider Divi

Parameters slider

Divi settings Section

At builder divi we have a main section in purple and gray slider module full width of the page.

Divi Slider 03 1024x194 Modificar altura del slider Divi

Fullwidth Slider module Divi

Within the configuration section, style settings custom CSS, Indicate that the height is 300px.

Divi Slider 04 Modificar altura del slider Divi

Custom CSS Slider

Divi Slider Module Settings

Within slider module in Advanced settings design, We set up a top filling 40px.

Divi Slider 05 Modificar altura del slider Divi

Advanced Settings Slider design Divi

Then in style settings custom CSS, Indicate that the height is 300px for main element.

Divi Slider 06 Modificar altura del slider Divi

custom CSS

We do the same for the Description of the slide Y Title Slide.

Divi Slider 07 Modificar altura del slider Divi

Size Slider Slide Divi

In the tab General adjustments, Configure each of the slides. Ideally you would have only one slide, configure it, and then clone it with all configuration settings.

Divi Slider 08 Modificar altura del slider Divi

Divi Slider slides

Within each slide, we'll go to settings custom CSS and put a height of 300px to:

  • main element
  • Title Slide
  • Slide container description
  • Description Slide
  • Slide image
Divi Slider 09 Modificar altura del slider Divi

Slide Settings Slider Divi

With these changes, we set up our slider to best fit the design of our web without adding custom styles to our Child Theme.

Save

Save

Save

If you have found this article interesting and think Divi can help you with your web project and you're thinking of buying it, I ask you to do it by clicking on the picture below. I am affiliated with ElegantThemes and I take a small commission if you get to buy it. This way you help me keep the blog and write more articles like this.

If you also you do ElegantThemes subscriber, you can buy it with up to 20% discount in some cases.

AfiliadosDivi Modificar altura del slider Divi

Save

Advertisements

Use of cookies

This site uses cookies for you to have the best user experience. If you continue to browse you are giving your consent to the acceptance of the above cookies and acceptance of our cookies policy, Click the link for more information.

OK
Notice of cookies

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!

Thank you for subscribing!

Pin it on Pinterest

Share This

Share

Share this with your friends!