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.
Whether you want to showcase services, promote special offers, display portfolio projects, or create an attractive homepage hero section, the Divi Slider Module makes the process simple without requiring additional plugins.
Slider Module and Fullwidth Slider Module allow you to create visually appealing sections using images, videos, text, and call-to-action buttons. I’ve used Divi sliders on my business websites, blogs, and landing pages, and they have improved my readers’ engagement.
In this guide, you’ll learn how to add a slider in Divi (full-width & video slider), customize its appearance, optimize it for mobile devices, and troubleshoot common issues that help you create a better user experience.
In this article, I’ll also tell you how to add a full-width slider to your website and change the Divi slider height. I have explained the settings with the screenshots.
Table Of Contents
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 a concise manner.
- Highlights important content and acts as a navigation element.
- Promotes multiple products and special offers.
- Makes your site visually attractive.
These advantages support 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 for adding the slider to 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.
Step 2: You will be redirected to the editing section, where you must choose “Build from scratch” and click “Start Building.”
Step 3: It’s time to pick the number of columns you want. Here, I’m choosing one Column structure.
Step 4: Search for the “Slider” Module.
Step 5: When you choose the Slider module, it will show the default content. Look at the image below.
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.
Step 8: Change the body content as per your needs, Refer the screenshot!
Step 9: You may add the image like this!
Step 10: Add a link for the “Read More” button.
Step 11: It is possible to add more slides. Use the option marked!
Step 12: After finishing the settings, don’t forget to click the “Green Tick” button.
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!
Here is the output of my above settings!
2. Text Shadow
It is to add some shadow effect to your text. Check the options given!
3. Spacing
You have detailed Margin and Padding settings for slider spacing.
4. Box Shadow settings
Through this option, you can execute the shadow effect for your slider.
Box Shadow Settings Output
Look at the result of the shadow settings!
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.
6. Advanced CSS ID & Classes
You have a space to add your custom CSS ID and Classes for personalization.
7. Advanced Custom CSS
To make your slider unique, use this custom CSS setting.
Advanced Custom CSS settings Output
I have given the CSS code of my choice related to padding. See the output.
8. Advanced Transitions
Divi builder slider has detailed transition settings like Duration, Delay, and Speed Curve. Set up these choices based on your needs.
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.
2. How To Add a Full-Width Slider In Divi Theme?
If you need to design a full-width Divi slider, follow the procedure below.
Click the “+” button (Shown in the figure below) to get a new section and select Fullwidth.
After selecting the Fullwidth option, find “Fullwidth Slider.”
Do the settings as we did for the Slider module (steps explained above). You will have all the customization options to create a full-width slider. Check the output sample that you are looking for!
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 can set the slide height to minimum or maximum.
Note: This height setting is also available on mobile devices to set 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.
See the setting choices in the following image. Follow the same guidelines that I have given for the Slider module.
Here is a sample of the Divi video slider output for your reference!
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.
Hurray! You have made the Divi Auto Slider easily! Once activated, you can control both the transition speed and the slide delay.
Recommended settings:
- Transition Speed: 500–700ms
- Delay Between Slides: 4–6 seconds
Divi Slider Not Working? Check Common Fixes
If your slider is not displaying correctly, try these solutions.
1. Clear Cache – Clear the browser cache, the caching plugin cache, and the CDN cache
2. Disable Plugin Conflicts – Temporarily deactivate recently installed plugins.
3. Update Divi Theme – Older Divi versions may create slider rendering issues.
4. Check Mobile Visibility Settings – Sometimes modules are accidentally hidden on mobile devices.
Regenerate CSS Files, Navigate to:
Divi → Theme Options → Builder → Advanced, then regenerate static CSS files.
Frequently Asked Questions
Does Divi include a built-in slider?
Yes. Divi includes both the Slider Module and Fullwidth Slider Module.
Is the Divi Slider mobile responsive?
Yes, but responsive settings should be optimized manually for best results.
How many slides should I use?
I recommend using 3 to 5 slides on your Divi site.
Does Divi Slide Affect Site Speed?
Yes! You should optimize it properly so it has minimal impact on performance.
What Are The Best Practices For Converting From Divi Slider?
1. Use one primary goal
2. Include a strong call-to-action
3. Keep headlines clear
4. Limit the number of slides.
Wrapping Up
The Divi Slider Module is one of the easiest ways to create engaging hero sections, promotional banners, and visual content areas without relying on third-party plugins.
Whether you’re using the standard Slider Module or the Fullwidth Slider Module, focus on speed, mobile responsiveness, and clear calls to action.
I hope you have learned how to add a slider in the Divi theme and make it appear in full width. You also understood how to change the slider height and make a Divi Automatic Slider.
When optimized correctly, Divi sliders can improve engagement while maintaining a professional user experience. If you have any difficulties with the settings, contact me via the comments section.
Adding a slider to a Divi theme is crucial for enhancing visual appeal and engagement. The step-by-step guide for configuring slider settings, including width, height adjustments, and full-width options, is clear and practical. It’s great to see such detailed instructions on maximizing Divi’s capabilities!