The DiviFlash CPT Carousel module lets you display custom post types in an interactive carousel layout.
Activation Required: This module is disabled by default. To use it, you need to enable it manually. Refer to our guide for step-by-step instructions.
Let’s see the settings in brief and how to make better use of it —
Content Tab
This tab contains the essential settings to add and configure carousel content.
Add New Custom Post Elements
Click the + Add New Custom Post Element button to create a new post element. This opens the CPT Element Settings, where you can add and customize each element individually. To learn more, click here.
Note: You can change the ordering of the post elements by dragging the post element bars.
Custom Post Settings
- Posts for Current Page: Enable this option to display posts relevant to the current page only. (This option is only available while initiating module from the theme builder.)
- Post Type: Choose the type of posts you want to display in the carousel. You can choose between posts, projects, products, or any custom post types that you have created.
- Post Count: Select the number of blog posts to display in the carousel.
- Display Post By: Select the types of posts you want to display. You have two options: Default or By Taxonomy.
- Select Taxonomy: Select the taxonomy of your post types. The options you get will vary based on what you choose as the post type. Available only if you choose to display posts by taxonomy.
- Include Terms: You can choose the categories, tags, or formats of the post you want to display. Available only if you choose to display posts by taxonomy.
- Orderby: Set the order of the displayed posts. Only available if “Recent” posts are selected.
- Posts Offset Number: Choose some posts to be excluded from the display, starting from the latest ones.
- Use Image as Background: Use the featured images of the posts as the background of the other post elements.
- Background Image Scale on Hover: Enable this option to make the background image zoom in when you hover over it. Only available if “Use Image as Background” is enabled.
Carousel Settings
- Carousel Type: Choose the type of the carousel you want to use. You have two options: Slide or Coverflow. The slide is the traditional carousel type whereas coverflow is for a more modern, 3D look.
- Max Slide Desktop: Choose the number of carousel items you want to display on desktop devices.
- Max Slide Tablet: Choose the number of carousel items you want to display on tablets.
- Max Slide Mobile: Choose the number of carousel items you want to display on mobile devices.
- Spacing: Adjust the space between the carousel items.
- Speed: Define the slide speed for the carousel items.
- Centered Slides: The first slide will be placed at the center when this option is toggled on.
- Loop: Enable this option to add a loop effect to the post carousel.
- Autoplay: Enable this option to have the sliders rotate automatically.
- Autoplay Speed: Define the speed of the autoplay effect. Only available when autoplay is enabled.
- Pause on Hover: When enabled, the auto-playing slide will pause when hovered. Only available when autoplay is enabled.
- Arrow Navigation: Turn on to enable arrows to navigate the post sliders.
- Dot Navigation: Turn on to enable dots to navigate the post sliders.
- Equal Height Item: Enable this to make all the post sliders equal in height.
- Clickable Entire Item: Enable to make all the sliders in the carousel linked to the original post.
Advanced Settings
If you select “Coverflow” as the “Carousel Type,” you’ll gain access to coverflow slider customization settings.
- Enables Slides Shadows: Turn on to add a shadow effect to the coverflow sliders.
- Shadow Color Dark: Choose the darker shade for the shadow effect.
- Shadow Color Light: Choose the lighter shade for the shadow effect.
- Slide Rotate in Degrees: Adjust the angle of the carousel items.
- Stretch Space Between the Slides: Adjust the gap between the slides.
- Depth Offset: Adjust the depth of the carousel items.
- Effect Multiplier: Determines how many times the carousel items will slide or rotate.
Item Outer Wrapper Background: Add a background color, gradient, or image to the outer wrapper of the CPT sliders.
Item Inner Wrapper Background: Add a background color, gradient, or image to the inner wrapper of the CPT sliders.
Background: Add a background color, gradient, image, video, pattern, or mask to the module.
Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)
Design Tab
Use this tab to style and customize the appearance of the CPT Carousel module.
Alignment: Change the placement of all the custom post elements relative to the carousel sliders’ containers.
Item Outer Wrapper: Border customization options for the outer wrapper of the CPT carousel sliders.
Item Inner Wrapper: Border customization options for the inner wrapper of the CPT carousel sliders.
Arrows
- Arrow Icon Color: Pick a color for the arrow navigation icons.
- Arrow Background: Pick a background color for the arrow navigation icons.
- Arrow Position: Change the vertical position of the arrow buttons relative to the custom post sliders.
- Arrow Alignment: Change the horizontal position of the arrow buttons.
- Opacity: Adjust the transparency of the arrow buttons.
- Circle Arrow: Enable to make the arrow buttons circular.
- Arrow Prev Icon: Toggle on to use a custom icon for the previous button.
- Arrow Next Icon: Toggle on to use a custom icon for the next button.
- Spacing: Add custom margin and padding to the arrow buttons.
Dots
- Alignment: Change the horizontal position of the dots relative to the custom post sliders.
- Dots Position: Choose if you want to place the dots before or after the carousel.
- Large Active Dot: Make the active dot larger than the rest.
- Dots Color: Pick a color for the dots.
- Active Dots Color: Pick a separate color for the active dot.
- Spacing: Add custom margin and padding to the dots.
Sizing: Adjust the width, height, and alignment of the module.
Spacing: Add custom margin and padding to the module’s container.
Animation: Apply reveal animation effects and customize delay, duration, repeat settings, and animation type.
Advanced Tab
This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.
CPT Element Settings
From this settings tab, you can customize each custom post element separately. Any customization you make here will override the settings you make in the “CPT Carousel Settings.”
Content Tab
Element
Type: Choose the type of the post element. There are 12 different post elements to choose from. However, you can use custom post elements, by using an ACF (Advanced Custom Field) plugin.
If you choose “Image”
- Outside Inner Wrapper: Enable the featured image of the post to be placed outside the inner wrapper but inside the outer wrapper.
If you choose “Title”
- Title Tag: Choose the HTML tag for the post title.
If you choose “Content”
- Post Content: Choose to show either the content of the posts or just the post excerpt.
- Use Post Excerpt: Toggle this option to display the post excerpt that was manually submitted.
- Excerpt Length: Define the character length of the post excerpt.
Note: if the posts have no excerpt, Divi will automatically take the first few sentences to generate an excerpt from the post’s content. The Excerpt Length option allows you to control the length of this auto-generated excerpt. However, if the posts have manually submitted excerpts, the value in excerpt length will not apply.
If you choose the “Read More Button”
- Read More Text: Type in the text of the “Read More” button.
If you choose “Author”
- Outside Inner Wrapper: Enable the author’s name to be placed outside the inner wrapper but inside the outer wrapper.
- Show Author Image: Enable to display author image along with the name.
- Author Image Size: Adjust the size of the author image.
- Hide Author Text: Enable to hide the author’s name and only display the image.
- Display: Select how to display the custom post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the author’s name. Not available when “Block” is selected as the display option.
If you choose “Publish Date”
- Outside Inner Wrapper: Enable to place the post publish date outside the inner wrapper but inside the outer wrapper.
- Date Format: Define the date format. Use any combination from here.
- Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the date. Not available when “Block” is selected as the display option.
If you choose “Taxonomy”
- Post Type: Choose the type of posts to display taxonomy. You have three options: Posts, Projects, and Products.
- Select Taxonomy: Choose the type of taxonomy you want to display. The options will vary depending on the post type you choose.
- Custom Separator: Enable to use a custom separator for the taxonomy.
- Separator Text: Insert the custom separator symbol.
- `Before Text: Input the text you want to display before the separator.
- After Text: Input the text you want to display after the separator.
- Outside Inner Wrapper: Enable to place the post categories or post tags outside the inner wrapper but inside the outer wrapper.
- Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the taxonomy. Not available when “Block” is selected as the display option.
If you choose “Custom Text”
- Outside Inner Wrapper: Enable to place the custom text outside the inner wrapper but inside the outer wrapper.
- Custom Text: Input the custom text you want to display.
- Use Custom Field: Enable custom field.
- Select Field Name: Choose field.
- Before Text: Add text before.
- After Text: Add text after.
- Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the custom text. Not available when “Block” is selected as the display option.
If you choose “Reading Time”
- Before Text: Add text before.
- After Text: Add text after.
- Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the icon. Not available when “Block” is selected as the display option.
If you choose “Icon”
- Outside Inner Wrapper: Enable to place the icon outside the inner wrapper but inside the outer wrapper.
- Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the icon. Not available when “Block” is selected as the display option.
If you choose “Divider” it will add a visual separator between the custom post elements.
If you choose “ACF Fields”
- Post Type: Choose the type of post you want to display in the ACF field. You have three options: Posts, Projects, and Products.
- Select ACF Field: Select the ACF field value you want to display.
- Before Text: Add text that will be displayed before the ACF field value.
- After Text: Add text that will be displayed after the ACF field value.
- Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the ACF field value. Not available when “Block” is selected as the display option.
Overlay and Scale
If you choose “Image” as the “Type”, this additional section will show up.
- Overlay: Enable to add a gradient over the image on hover.
- Overlay Primary Color: Choose the primary color for the overlay gradient.
- Overlay Secondary Color: Choose the secondary color for the overlay gradient.
- Overlay Gradient Direction: Adjust the overlay gradient direction.
- Use Icon: Enable to use an icon on the overlay gradient.
- Icon Color: Choose a color for the overlay icon.
- Icon Size: Adjust the size of the overlay icon.
- Icon Reveal Type: Choose the reveal animation for the overlay icon.
- Image Scale Type: Choose how the image will animate on hover.
Icon Settings
If you choose the “Read More Button”, “Author”, “Publish Date”, “Taxonomy”, “Icon”, and “ACF Fields” as the “Type”, this additional section will show up.
- Use Icon: Enable to use an icon for the selected post element.
- Icon Color: Choose a color for the icon.
- Icon Size: Adjust the size of the icon.
- Image: Upload an image to use instead of the icon.
- Image Width: Specify the width of the image.
- Vertical Align: Change the vertical placement of the post element relative to the image.
Settings For ACF
If you choose “ACF Fields” as the “Type”, this additional section will show up.
- Link Text: Input the text that will mask the URL in the custom URL field.
- Link Target: Decide if you want the URL to open in a new or the same tab.
- Email Text: Input the text that will mask the email address in the custom email field.
- Image Max Width: Set a maximum width limit for the image in the custom image field.
Divider Line
- Divider Line Height: Adjust the height of the divider line.
- Divider Color Primary: Choose the primary color for the divider gradient.
- Overlay Color Secondary: Choose the secondary color for the divider gradient.
- Divider Color Direction: Adjust the divider gradient direction.
- Starting Position: Adjust the starting position of the divider gradient.
- Ending Position: Adjust the ending position of the divider gradient.
Link: Add a link to the custom post element.
Background: Choose whether the link opens in the same tab or a new tab.
Element Label: Rename the custom post element to organize it more easily in the Divi Builder. (Only you can see this label.)
Design Tab
Alignment: Change the horizontal placement of all the text-based custom post elements relative to the carousel sliders’ containers.
Image Settings
If you choose “Image” as the “Type”, this additional section will show up.
- Image Size: Select the desired image size: original, 1080×675, 350×450, 400×250, 400×400, or 300×300.
- Force Full Width: Toggle on to make the post images full width.
Body Text: Typography options for the text-based content of the custom post elements.
Before After Text: Typography options for the taxonomy, before and after text of the ACF field, and the meta.
Spacing: Add custom margins and padding to the custom post element.
Sizing: Adjust the width, height, and alignment of the custom post element.
Border: Border customization options for the custom post element. You have the option to style each border individually or all the borders together.
Box Shadow: Apply a shadow effect to the custom post element.
Filters: Add color filters to the custom post element.
Transform: Change the scale, placement, size, angle, etc. of the custom post element.
Advanced Tab
This tab provides additional settings for advanced users to control each element individually.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]