How to Create Custom Post Type Carousel in Divi (Step-by-Step)

Looking to showcase your custom post types (CPT) in an eye-catching, dynamic way? 

A carousel slider is the perfect solution to highlight your content while maximizing user engagement.

In this guide, we will show you how to create CPT carousel in Divi in 6 simple steps. Let’s get started.

Our Created CPT Carousel Preview

Have a look at the CPT carousel we are going to create in this guide. We will be using DiviGear’s CPT Carousel Plugin for that:

Required Setup

• Divi theme is installed and activated.
• Divi CPT Module is installed and activated.

Step 1: Add Project Data 

To add project data, you will first need to create categories. Once the categories are set up, you can proceed to add the project data.

Here is how to do it:

1.1: Create Project Categories

At first you have to create categories under projects. You can do it by following these steps: 

• Go to your WordPress Dashboard > Projects > Categories.
• Add New Category:
  • Name: Enter a category name (e.g., “Web Design”).
  • Slug: Add a URL-friendly version (e.g., web-design).
• Click Add New Category.
• Repeat to create additional categories

1.2: Add Individual Projects

• Navigate to Projects > Add New in your WordPress Dashboard. Here you have to add the following data by clicking on “Use Default Editor”

• Title
• Content
• Featured Image
• Categories

• Click Publish to save the project.
• Repeat to add all projects.

Step 2: Insert CPT Carousel Module

Now that your project data is ready, let’s transform it into a dynamic carousel using Divi’s Visual Builder:

• Open the page/post where you want the carousel to appear.
• Click Enable Visual Builder to activate Divi’s drag-and-drop interface.
• Click the + (Add Section) button.
• Select a Single Column Row layout for simplicity.

Note: While you can adjust the section and row settings (e.g., background color) to match your design, we will skip those details for now and focus on setting up the carousel.

• Inside the column, click the + (Add Module) button.
• In the module library, search for “CPT Carousel”
• Click to add it to your layout.

Step 3: Configure Custom Post Settings

In the CPT Carousel module’s settings panel, scroll down to the Custom Post Settings section and configure the following options:

• Posts Type: Projects
• Post Count: 5
• Display Post By: By Taxonomy
• Select Taxonomy: Project Categories
• Include terms: To select categories that you have created in step 1.1.

Step 4: Add Custom Post Elements

Once you have configured the custom post settings, it’s time to add elements like images, titles, and taxonomies to your carousel. 

Here is how you will do it:

4.1: Add Image

Click on “Add New Custom Post Element.” Then, under the “Element” settings, select “Image”.

• Navigate to the Design tab, click on “Image Setting” and select “Original” from the image size setting.

• Scroll down, and click on Box Shadow. Then make these changes:
  • Box Shadow: First preset
  • Box Shadow Vertical Position: 0px (4px for hover)
  • Box Shadow Blur Strength: 0px (12px for hover)
  • Shadow Color: rgba(0,0,0,0.12)

4.2: Add Title

To add title, simply click on “Add New Custom Post Element” from the module’s main settings panel. After that, select “Title” under Element’s Type setting.

Then navigate to the Design tab and then make these changes:

• Click on “Body Text” and then make these changes:

• Body Font Weight: Bold
• Body Text Color: #262626
• Body Text Size: 20px
• Next, click on “Spacing” and make these changes:

• Margin: 24px (top), 12px (bottom)
• Padding: 32px (left)

4.2: Add Taxonomy

To add taxonomy, click on “Add New Custom Post Element” and select “Taxonomy” from the element setting. 

After that make the following changes:

• Post Type: Projects
• Select Taxonomy: Project Categories

Then navigate to the Design tab to make these customizations:

• Click on “Body Text” and change the body text color to #262626

• After that, click on “Spacing” then add these:

• Margin: 12px (bottom)
• Padding: 32px (left)

Step 5: Configure Carousel Settings

After adding custom post elements, configure the carousel’s functionality to ensure smooth navigation and interactivity.

• In the module’s main settings panel, click on Carousel Settings. Then enable the following setting options:

• Loop
• Autoplay
• Paus On Hover
• Arrow Navigation
• Dot Navigation

Step 6: Customize CPT Carousel’s Appearance

Now that the carousel is functional, let’s focus on its appearance by customizing various design elements. For that, navigate to the Design tab where you have to make the following changes:

6.1: Customize Item Outer Wrapper

Click on “Item Outer Wrapper,” there you will see three different sub-tabs and we will only work on the first one:

• Box Shadow: First preset
• Box Shadow Horizontal Position: 8px
• Box Shadow Vertical Position: 8px
• Shadow Color: rgba(180,165,255,0.24)

6.2: Customize Item Inner Wrapper

In Design tab’s Item Inner Wrapper setting, you will also see three sub-tabs and you only have to make changes in a single tab:

• Padding: 28px (bottom)

6.3: Customize Arrow Navigation

In the design tab, click on “Arrow” to make the following customizations:

• Arrow Icon Color: #ffffff
• Arrow Background: #7ec0f8
• Arrow Position: Bottom
• Arrow Alignment: Center
• Arrow prev icon: Enable it and select an icon
• Icon Size: 30px
• Arrow next icon: Enable it and select an icon
• Icon Size: 30px
• Arrow Previous Margin: 50px (right)
• Arrow Next Margin: 50 (left)

6.4: Customize Dot Navigation

Click on “Dots” settings and then make the following changes:

• Dots Color: #7ec0f8
• Active Dots Color: #023e7b
• Dots Wrapper Margin: -30px (top)

6.5: Add Custom Spacing

add custom spacing, click on “Spacing” and then add these spacing values:

• Container Padding: 30px (top), 40px (bottom), and 0px (left and right)

Important Note: When creating a carousel, always adjust the responsive settings to ensure it looks good on all devices.

Final CPT Carousel Preview

Take a look at the preview of the CPT carousel we have created and customized using the Divi CPT module:

Conclusion

Now you know how to create CPT carousel in Divi. We have shown you the process in 6 simple steps, where we also included visuals to make the process even easier to follow.

However, if you want to see what other carousel designs you can make with DiviGear’s CPT carousel module, look at its demo designs.