The Divi CPT Carousel module is great for showcasing your projects, portfolio, or any custom posts in a slider. Using the CPT Carousel will be a breeze if you’re already familiar with our CPT Grid module and Child items for the modules.
We already have a guide on child items. We assume you already went through it and understand how child item works. Here is the child item overview guide.
Content Tab
You’ll see a list of the items you’ve used in the content tab. If you need to add more, click “Add New Item.” You can add the same element as many times as you want.
Custom Post Setting
Here, we have settings for the post types.
- Post Type: Select the post type for the carousel from the dropdown list.
- Post Count: Choose how many posts you want to show in the post count setting.
- Display Post by: By default, it displays all the posts. If you want to filter them, use the “By Taxonomy” option.
- Select Taxonomy: When you choose “By Taxonomy,” you can select a taxonomy. Pick the taxonomy you set up when creating the custom post type. The default post type includes taxonomies such as category and tag.
- Include Terms: The available options depend on the taxonomy you’ve chosen. Here, you can select or filter your posts based on the selected taxonomy.
- Order By: Choose how you want to order your posts. You can select options like “New to Old,” “A to Z,” or the reverse.
- Post Offset Number: Specify the number of posts you want to skip at the start of the CPT carousel.
- Use Image as Background: Set the feature image in the background.
- Background Image Scale on Hover: Turn this ON to set the background hover scale effect.
Carousel Settings
Settings for the carousel control are here. Turn the function you need on or off and adjust associated things to make wonderful-looking carousels.
- Carousel Type: Select the type of carousel from two different options. By default, It’s the slide. You can say regular carousel, and another one is Coverflow. Coverflow will give each slide a 3D look.
- Note: Selecting Coverflow will enable a new “Advanced Settings” setting.
- Max Slide Desktop: Define the number of slides for the desktop viewport.
- Max Slide Tablet: Define the number of slides for tablet devices to show.
- Max Slide Mobile: Define the number of items for mobile.
- Spacing: Set the space between slides.
- Speed: Set the time for slide navigation. This property is measured in milliseconds.
- Centered Slides: Allow the carousel slider to start from the center.
- Loop: Set an endless loop between the selected posts.
- Autoplay: This will make the carousel automatically playable once the page is loaded.
- Autoplay Speed: Define the speed of your autoplay.
- Pause on Hover: Autoplay can be stopped for users on hover while you enable this feature.
- Arrow Navigation: Enable arrows for your carousel.
- Dot Navigation: Enable dots for the carousel
- Equal Height: Make all items equal in height.
Advanced Setting
The advanced setting is only available when Coverflow is selected as the carousel type. You will find a list of features inside it-
- Enable Slides Shadow: Enable this to get a shadow effect over your carousel slides. You can define shadow colors from here.
- Slide rotate in degrees: Control the rotation of slides to give a better look.
- Stretch space between slides: Control the space between slides.
- Stredepth Offset: Define the dept of carousel items.
- Effect Multiplier: Effects will be multiplied by the value you provided.
Tips: All the settings here are related to each other. Combine those to create beautiful carousels.
The following two things are as usual in Divi. One is the background for the module, and the other is the Admin label.
Design Tab
Now that we are done with the content tab, let’s move on to the design tab and explore the design options-
Alignment
This is the alignment for the content inside the carousel slides. You can set vertical alignment.
Item Outer Wrapper
Elements can be set outside the wrapper. You can set this from here-
Content Tab > Add New Element or Edit Existing One > Outside Inner Wrapper > Toggle (ON)
Note: Not every element has this feature.
Once the element is set outside the wrapper, you can customize those elements from the “Item Outer Wrapper” design options. You will find the same settings as the Item Inner Wrapper offer, but those will apply to only the elements set outside.
Item Inner Wrapper
By default, all elements are inside the inner wrapper. From here, you can customize the design of your slide. Here, you will find an option to set the background color which can be solid, gradient, or image. Then, there is a margin padding option. You can also set rounded corners and borders with all border customization.
Arrows
All the design options for the arrows lie under this design option.
- Arrow Icon Color: Set the color of your Icon.
- Arrow Background: Set the color of your arrow background.
- Arrow Position: Select the position of the arrows from three different options.
- Arrow Alignment: Select the vertical alignment for arrows like Left, right, center, and justified.
- Opacity: Set the opacity of the arrows using a range slider.
- Circle Arrow: Make the arrow rounded by turning ON this feature.
- Arrow Prev Icon: Select a custom arrow icon for the left arrow. You will find the arrow size option inside.
- Arrow Next Icon: Select a custom arrow icon for the right arrow. You will find the arrow size option inside.
- Margin-Padding: Here, we have separate margin padding for the arrows. You can set custom spacing for both of your arrows independently.
Dots
Here, we have our design options for dots.
- Alignment: Set the vertical alignment of the dots.
- Dots Positions: Dots can be set “After Content” or “Before Content”.
- Large Action Dot: Make the active dot large by turning this feature ON.
- Dots Color: Set the dots color from here.
- Active Dot Color: Set the active dot color from here.
- Dots Wrapper Spacing: Set custom spacing to your dots if required.
Sizing
We have the sizing option like any other divi module. You can adjust the width and height of the module from here.
Spacing
The following option we have is the spacing. You will find regular margin padding and container margin padding here.
Animation
The next option we have is animation, like any other divi module.
Advanced Tab
Advanced Tab contains all of the standard Divi module options. You can use those features in our modules, too.
