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.
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 below procedure.
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 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!
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.
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.
See the setting choices in the following image. Follow the same guidelines that I have given for the Slider module.
Here is the Divi video slider output sample 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!
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.
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!