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.
This was the original design. With a height of about 468px. The change will do it is to make it thinner, 300px.
To do this we must make the following adjustments in height, width and fill the description of each slide.
Divi settings Section
At builder divi we have a main section in purple and gray slider module full width of the page.
Within the configuration section, style settings custom CSS, Indicate that the height is 300px.
Divi Slider Module Settings
Within slider module in Advanced settings design, We set up a top filling 40px.
Then in style settings custom CSS, Indicate that the height is 300px for main element.
We do the same for the Description of the slide Y Title Slide.
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.
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
With these changes, we set up our slider to best fit the design of our web without adding custom styles to our Child Theme.
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.
Suscríbete a mi blog y recibe cómodamente mis artículos en tu bandeja de correo.
¡No envío Spam, puedes quedarte tranquilo!