How To Add Slider In Divi Theme? How To Adjust Its Width & Height?

add-divi-slider

Do you want to know how to add slider in Divi theme? Let me show you the right settings to do it. No wonder! The slider enhances the visual appeal of your website. Undoubtedly, it draws attention to your important content. 

Including the slider in the Divi theme is a simple process. You need to find the Slider module and do the settings per your requirements. In this article, I’ll also tell you how to add a full-width slider to your website. 

Besides, I’ll teach you to change the Divi slider height. I have tried my best to explain the settings with the screenshots. Before getting into the details, you should know the advantages of adding sliders to your business website. 

Why Add Slider To Your Website?

Incorporating the website slider has several benefits! Here are they

  • Increases user engagement through dynamic element interaction
  • Communicates critical messages in a limited space and concise manner.
  • Highlights important content and acts as a navigating element.
  • Promotes multiple products and special offers.
  • Makes your site visually attractive.

These advantages approve your decision to include sliders in your dream site. 

Step-by-Step Guidelines To Add Divi Slider For HIgh Conversions

Just follow the easy process of including the slider in your website built with the Divi theme. 

Step 1: Click “Add a new page” or edit your site home page or any page. Select “Edit With The Divi Builder” or use Divi Builder as shown in the image below. 

divi-builder-settings

Step 2: You will be redirected to the editing section, where you must choose “Build from scratch” and click “Start Building.” 

divi-build-from-scratch

Step 3: It’s time to pick the number of columns you want. Here, I’m choosing one Column structure. 

select-structure-divi

Step 4: Search for the “Slider” Module. 

find-slider-module-divi

Step 5: When you choose the Slider module, it will show the default content. Look at the image below. 

divi-slider-module

Step 6: Now, you must change the Title, Content, Button Text, Link, and other settings. 

Step 7: First, let’s change the Title through the following preferences. Click the “Green Tick” option to save the settings. 

change-slider-title

Step 8: Change the body content as per your needs, Refer the screenshot! 

write-content-slide

Step 9: You may add the image like this!

add-slider-image

Step 10: Add a link for the “Read More” button. 

slider-link-settings

Step 11: It is possible to add more slides. Use the option marked! 

add-more-slides-divi

Step 12: After finishing the settings, don’t forget to click the “Green Tick” button. 

save-settings

So far, we have seen the “Content” settings. Let’s move to the “Design” tab to customize your Divi slider. 

1. Image Border Styles

I’m executing the corner for the image section through the image border styles. Have a glance at the screenshot below! 

image-border-settings

Here is the output of my above settings!

image-border-result

2. Text Shadow 

It is to add some shadow effect to your text. Check the options given!

text-shadow-settings

3. Spacing

You have detailed Margin and Padding settings for slider spacing. 

slider-spacing-settings

4. Box Shadow settings

Through this option, you can execute the shadow effect for your slider. 

box-shadow-slider-settings

Box Shadow Settings Output

Look at the result of the shadow settings! 

box-shadow-slider-output

5. Animation

It is possible to add Animation to the Divi slider. Check the image below, which shows the different types of anime you can add. 

animation-settings

6. Advanced CSS ID & Classes 

You have a space to add your custom CSS ID and Classes for personalization. 

css-id-classes-settings

7. Advanced Custom CSS

To make your slider unique, use this custom CSS setting. 

divi-slider-custom-css

Advanced Custom CSS settings Output

I have given the CSS code of my choice related to padding. See the output. 

custom-css-sample

8. Advanced Transitions

Divi builder slider has detailed transition settings like Duration, Delay, and Speed Curve. Set up these choices based on your needs. 

transition-slider-settings

9. Advanced Scroll effects 

It is my favorite feature of the Divi slider. You can enable the scroll effect for your slides, such as Sticky, Transformation, Vertical Motion, and Motion Effect Trigger. 

scroll-effects

2. How To Add a Full-Width Slider In Divi Theme?

If you need to design a full-width Divi slider, follow the below procedure. 

Click the “+” button (Shown in the figure below) to get a new section and select Fullwidth.

fix-fullwidth-slider

After selecting the Fullwidth option, find “Fullwidth Slider.” 

divi-fullwidth-slider-module

Do the settings like we did for the Slider module (steps explained above). You will get all the customization options to create the Full-width slider. Check the output sample that you are looking for!

divi-fullwidth-slider-sample

3. How To Change Divi Slider Height?

With the improved Divi settings, it is easy to change the slider height. You don’t need to add any CSS code to adjust the altitude. 

Just visit the slider module and go to the “Design” tab. Under the “Sizing” settings, you will get the slide height option to make it minimum or maximum. 

slider-height-setup
fix-divi-slider-height

Note – This height setting is also available for mobile devices to fix different heights for mobile and tablet use. You can also use the top and bottom padding settings to adjust the slide height in the Divi theme. 

4. How To Add a Video Slider In Divi? 

Integrating a video slider in Divi theme is a piece of cake! You need to search for the “Video Slider” module.

add-video-slide

See the setting choices in the following image. Follow the same guidelines that I have given for the Slider module.

video-slider-settings-divi

Here is the Divi video slider output sample for your reference!

divi-video-slide

How To Create Divi Slider Autoplay?

Do you want to make a Divi Auto slider? Let me tell you the simple step!

In the Animation feature of the Slider, go under the Design tab and enable the setting “Automatic Animation.” Remember to save the settings.

Divi-slider-automatic

Hurray! You have made the Divi Auto Slider easily!

Wrapping Up

Divi Builder Slider contains a user-friendly interface for creating custom designs for your professional site. You will get a complete navigation control through the image, video, and text slides to make engaging designs for your audience. 

Besides, it is fully responsive and holds advanced features for high user interaction. Even though the slider is a distractive element and affects the site loading speed, it can maximize conversions by attracting more visitors through visually appealing designs. 

I hope you have learned how to add a slider in the Divi theme and make it appear in full width. You also learned how to change the slider height and make a Divi Automatic Slider. If you have difficulties with the Divi slider settings, contact me through the comment section. 

by Sakthi
Sakthi is a thoughtful guy who specializes in WordPress Setup & Design. He is interested in designing the functional & attractive WordPress themes for the Digital marketers & Bloggers and helping them attain their goals with a tailored site. Being an Elite author of ThemeForest.net, he is interested in sharing his knowledge through the helpful tutorials.

Leave a Comment