How to Create a Divi Image Carousel

by | Jun 2, 2020

How to Create a Divi Image Carousel

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 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 checkout.
I Have A Special Discount For You

Get 10% Off With Coupon Code MH10

I Have A Special Discount For You

Get 10% Off With Coupon Code MH10

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.

Carousel with coverflow 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.

Supreme Card Carousel Module

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.
Carousel showcase logo

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.

Carousel for projects

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.
Carousel for 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

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

8 Shares
Share7
Tweet
Pin1
Buffer