Sunday, March 29, 2020

How to change the height of the Divi slider

The slider is a very striking and useful element in our websites, it is a kind of catalog that allows showing different messages or services to the user automatically.

Today we bring you the instructions to configure the height both in general and for each device. Let’s see!

In the Divi Builder

  1. In the Divi constructor, we create a module for slider that is full width, and this we will achieve by placing zero in the values of margin and space. If you leave the space blank, Divi will automatically place a margin.
  2. In “Module Adjustments Section”, we will add in “Custom CSS” the height we want the slider to have (for example, height: 300px;)
  3. After this adjustment, we must configure the fill and width of each slider. In the Advanced Design Settings in “Full-Height Slider Module Settings” we must place the number of pixels we want to fill between the description of the slide and the upper limit of it.
  4. In the Custom CSS section of “Full-Height Slider Settings module”, we will place in “CSS Class” slider-home and in Main Element height: 300px; (the height we designate for the slider above).
  5. We do the same in the lines of Description and Title of the Slide, placing the desired values for them.
    In General Settings of “Full-Height Slider Module Settings” you can configure each slide separately, although you can also clone one that is ready and customize it.

From CSS

To modify the height of the slider via CSS, go to the Custom CSS tab of the Divi theme options. In the style.css file of your child theme, place this code and replace 400px with the value you want.

Custom height for each device

Do you want the slider to have a different height for each type of device?

In the Advanced tab of the slider configuration, add a CSS Class as “myslider” and copy this code, modifying the pixels according to your needs.


Jefferson Maldonado
the authorJefferson Maldonado
UX WordPress Designer
Ux & Web Designer. Portafolio: Divi Blogger, WordPress Expert, UX Designer, Business Consultant.

Leave a Reply