Do you want to add a Divi image carousel to your website?
In this tutorial, we are going to build a Divi image carousel with the plugin Divi Supreme.
Before I get started with this tutorial let’s see how the end-result looks like. You can see a live demo of all 4 carousels here.
Divi Supreme is an amazing plugin for Divi and comes with 40+ modules for the Divi builder. See also my review of Divi Supreme.
I have created more tutorials for this Divi plugin and you can check them out here:
For my readers, I have a special 10% discount for this plugin. Use coupon code MH10 at their checkout.
Carousel #1 Coverflow effect
The first carousel is a pretty big one. We are going to use a coverflow effect for this carousel, which gives a nice depth effect.
Step 1: Place the Supreme Card Carousel Module
I have created a section within a row. The row width is 90% and the max-width is 100%. You can find these settings by opening the row and navigate to the design tab > Sizing.
In the row, you will place the Supreme Card Carousel Module. Divi Supreme comes with different types of carousel modules, so pick the correct one.
Step 2 Supreme Card Carousel Settings
Content tab
Image Carousel
- Carousel effect: coverflow
- Coverflow Rotate: 35
- Coverflow Depth: 300
Design tab
Badge
- Position: Center
- Background Color: #ffffff
- Padding: top 12, bottom 12, left 25, right 25
- Badge Font: source sans pro
- Badge Font Weight: Light
- Badge Font Style: Uppercase
- Badge Text Color: #000000
- Badge Text Size: 18px
- Badge Letter Spacing: 3px
- Badge Rounded Corners: 50px
Step 3 Card items
Now we are going to add the card items. Go back to the content tab and click on “Add a new item”.
Content tab
Text
Remove the title and content.
Image & Badge
Upload an image and set the image height to 500px.
Badge Text
Give you badge a name
Carousel #2 Showcase logos from partners or clients
This will be a showcase carousel with logos.
Step 1 Place the Supreme Image Carousel Module
For this carousel, we are going to use a different carousel module than the first one. Start by placing the Supreme ImageCarousel Module in your row.
Content tab
Image Carousel
Start by uploading your logos.Carousel Settings
- Padding: 100
- Show Pagination: No
Design tab
Element
- Arrow Color: #ffffff
- Arrow Background Color: d6d6d6
Spacing
- Padding (Desktop):left 35, right 35
- Padding (Mobile):left 65, right 65
Carousel #3 Showcase your projects
The third carousel will be fullwidth, and you can navigate with the handlers on the left and right side or by grabbing the carousel.
Step 1: Place the Supreme Card Carousel Module
First, I create a section with a row. The row width and max-width is 100%. You can find these settings by opening the row and navigate to the Design tab > Sizing.
In this row, I will be placing the Supreme Card Carousel Module.
Step 2: Supreme Card Carousel Settings
Content tab
Image Carousel
- Slides To Show: 5
- Show Pagination: No
- Coverflow Depth: 300
Design tab
Badge
- Position: Bottom Center
- Background Color: #e02b20
- Padding: top 12, bottom 12, left 25, right 25
- Badge Font: Roboto Slab
- Badge Font Weight: Ultra Light
- Badge Font Style: Uppercase
- Badge Text Color: #ffffff
- Badge Text Size: 18px
- Badge Letter Spacing: 3px
- Badge Rounded Corners: 50px
Arrow Element
- Use Arrow Custom Position: Yes
- Arrow Custom Position: 0
- Arrow Color: #ffffff
- Arrow Background Color: #e02b20
Step 3 Card items
Now we are going to add the card items. Go back to the content tab and click on “Add a new item”.
Content tab
Text
Remove title and content.
Image & Badge
Upload an image and set the image height to 450px.
Badge Text
Give you badge a name
Design tab
Image
- Image Overlay: On
- Overlay Color: rgba(0,0,0,0.4)
- Use Icon: Off
Carousel #4 Showcase your services
The last carousel is a card carousel with an image, title body text and a button. In my example I use it to show my services.
Step 1: Place the Supreme Card Carousel Module
Once again, we are going to use the Supreme Card Carousel Module.
Step 2: Supreme Card Carousel Settings
Content tab
Carousel Settings
- Spacing (Desktop): 40
- Spacing (Mobile): 55
Design tab
Button
- Use Custom Styles For Button: Yes
- Button Text Size: 16px
- Button Text Color: #ffffff
- Button Background Color: #e02b20
- Button Border Width: 0px
- Button Border Radius: 0px
- Show Button Icon: No
Spacing
- Padding (Desktop): top 50, bottom 50, left 30, right 30
- Padding (Mobile): top 50, bottom 50, left 50, right 50
Box Shadow
- Card Box Shadow: First option
Step 3 Card items
Now we are going to add the card items. Go back to the content tab and click on “Add a new item”.
Content tab
Text
Fill in a title and some content text
Image & Badge
Upload an image.
Button
Give your button a name and link
