Do you use Divi theme and want to add a slider to a page? You don’t need to install any additional slider plugin as Divi Builder — the default page builder of Divi theme — comes with built-in modules to create sliders. In this article, we will show you how to create a full-width slider with Divi Builder.
There are three modules that you can use to add a slider to your page:
- Post Slider: To create a slider from blog posts
- Slider: To create a slider with custom content
- Video Slider: To create a video slider (supports YouTube)
If you want to create an image slider, you can use the Slider module. In this example, we will use the Slider module to create a slider with custom content.
Start by creating a new page (Pages -> Add New) and edit it with Divi Builder by clicking the Use Divi Builder button.
Select the BUILD FROM SCRATCH option (leftmost) and click the Start Building button to start creating the page. You will be asked to add a row. Select a row with a single column structure and then add the Slider module.
By default, your slider consists of two slides. To add a new slide, you can simply click the Add New Slide button. You can click the gear icon on the slide you want to edit the content.
To edit the text content, you can open the Text block. While to add an image or video, you can open the Image & Video block. To edit the link of the button, you can open the Link block.
To change the background of the slide, you can open the Background block. There are four background types you can use: solid color, gradient color, image, and video. Don’t forget to click the checklist button to apply the changes.
If you want to create an image-only slider, you can use an image background and empty out the text content.
Repeat the steps above to edit the content of other slides.
To show/hide the slider navigation, you can open the Elements block under the Content tab.
Styling Up the Slider
To style up the slider, you can open the Design tab on the settings panel. There are some styling option blocks you can open here. Here are some key blocks you can open.
- Overlay
You can open this block to add background overlay and text overlay. Simply enable the Use Background Overlay option and select the color if you want to add background overlay. Similarly, enable the Use Text Overlay option if you want to add text overlay and select the color you like. You can also set the border radius of the overlay.
- Navigation
You can open this block to set the color of the navigation, be it the dots or the arrows.
- Text
You can open this block to set the alignment of the text (content title and content description) as well as the text shadow style. You can also set the color of the text shadow, the vertical length of the text shadow, the horizontal strength of the text shadow, and the blur strength of the text shadow.
- Title Text
You can open this block to set the typography (font family, font size, font style) of the title of the content as well as the text color. You can also set the text shadow style and text alignment from this block.
- Body Text
You can open this block to set the typography of the content body (description), text color, text alignment, and text shadow.
- Button
You can open this block to customize the button on the content. You can enable the Use Custom Style For Button option to show the styling options. You can set things like the button text size, button text color, botton background color, border radius, border color, and so on.
- Sizing
You can open this block to set the size of the Slider module. You can set things like the module width, max width, height, max height, alignment, and so on.
- Animation
You can open this block to set the animation effect of the slider. You can set things like animation style, animation direction, animation duration, and so on.
Setting the Slider to Full-width Mode
If you want the slider to have a full-width mode, you can edit the row that hosts the Slider module. To do so, hover your mouse over the row and click the gear icon.
Once the settings panel appears, go to the Design tab and open the Sizing block. Set the Width as well as Max Width to 100% (you can type manually on the Max Width option).
If you want your slider to have no gap with the header, you can edit the section that host the row.
On the settings panel, go to the Design tab and open the Spacing block. Set the top padding to 0px.
That’s it. You can publish your page once you are done edit it.
