The Divi Card Carousel module allows you to display content-rich cards in a responsive carousel layout. Each card can include images, icons, badges, text, buttons, and optional tabbed content, making it ideal for feature highlights, services, team members, pricing details, or promotional content.
Content Tab
The Content tab is where you manage individual card items and control the overall carousel functionality.
Add New Item
Use this option to add cards to the carousel. Each card item includes its own Content, Tab Content, and Design tabs for granular control.
Carousel Item → Content Tab
This tab defines the main content displayed inside each card.
Content Options
- Use Icon – Enables an icon at the top of the card.
- Upload Card Image / Add Image – Adds an image to the card layout.
- Image Alt Text – Improves accessibility and SEO for card images.
- Hide Badge – Shows or hides the badge element on the card.
- Title Text – Sets the main heading text for the card.
- Description – Adds descriptive text to the card body.
- Use Button – Enables a call-to-action button within the card.
Carousel Item → Tab Content Tab
This tab controls the content displayed when the card tab feature is enabled.
Notice
The fields in this section are only visible when the Use Tab option is enabled in the Tab Settings toggle.
Tab Content Options
- Title – Defines the tab title text.
- Subtitle – Adds supporting text below the tab title.
- Thumbnail – Displays a thumbnail image inside the tab.
- Add Image – Uploads or selects an image for tab content.
Carousel Item → Design Tab
This tab allows you to style individual card items visually.
General
Controls overall card layout appearance, alignment, and background styling.
Image / Icon
Customizes the size, color, and placement of images or icons used in the card.
Overlay
Adds and styles overlay effects applied to images or card backgrounds.
Badge
Controls badge design, including color, typography, and positioning.
Texts
Style titles, descriptions, and other text elements within the card.
Button
Customizes the appearance of the call-to-action button, including hover effects.
Sizing
Adjusts the width, height, and responsive sizing of card items.
Spacing
Controls padding and margin for card elements.
Box Shadow
Applies shadow effects to enhance depth and separation.
Transform
Adds transform effects such as scaling or movement animations.
Carousel Settings
The Carousel Settings toggle manages the global behavior and interaction of the card carousel.
Carousel Settings → General Tab
Defines the primary motion, layout, and responsiveness of the carousel.
- Animation Speed – Controls slide transition speed.
- Autoplay – Enables automatic slide rotation.
- Autoplay Speed – Sets the delay between autoplay transitions.
- Navigation & Pagination – Displays arrows, dots, both, or none.
- Use Fixed Width Slide – Maintains a consistent slide width.
- Slides To Show – Sets the number of visible cards per device.
- Slide Spacing – Adjusts spacing between cards.
- Apply Spacing on First & Last Item – Adds spacing to edge items.
- Infinite Looping – Enables continuous looping of slides.
Carousel Settings → Advanced Tab
Provides advanced behavior, performance, and interaction controls.
- Sliding Direction – Controls slide direction, including RTL compatibility.
- Sliding CSS Transition – Defines animation easing style.
- Lazy Loading – Loads card items only when needed.
- Lazy Loading Type – Progressive or on-demand loading.
- Auto Height – Adjusts height dynamically based on content.
- Swipe – Enables touch swipe navigation.
- Pause on Hover – Pauses autoplay when hovered.
- Items to Scroll – Number of cards moved per scroll action.
- Vertical Mode – Displays cards vertically instead of horizontally.
- Center Mode – Highlights the center card.
- Wait For Animate – Prevents overlapping animations.
- Use Custom Cursor – Enables a custom cursor effect.
- Wrapper Spacing Top – Adds top spacing around the carousel.
- Wrapper Spacing Bottom – Adds bottom spacing around the carousel.
- Open Image in Lightbox – Opens images in a lightbox view.
- Equalize Item Height – Ensures all cards maintain equal height.
Tab Settings
This toggle controls the optional tab-based layout within the Card Carousel.
- Use Tab – Enables tab functionality for card items.
- Hide Tab on Mobile – Hides tabs on smaller screens.
- Select Tab Elements – Choose which elements appear in tabs: Title, Subtitle, Thumbnail.
- Tab Items – Manages tab entries for the carousel.
- Item Spacing – Controls spacing between tab items.
Design Tab
The Design tab controls the overall visual styling of the Card Carousel module.
Navigation
Styles carousel navigation arrows, including size, color, and hover effects.
Pagination
Customizes pagination dots for consistency with your site design.
Tab Style
Controls the appearance of the tab container and layout.
Tab Elements
Style individual tab elements such as titles, subtitles, and thumbnails.
Text
Applies typography and color styling across text elements.
Sizing
Adjusts module dimensions and responsive behavior.
Spacing
Controls padding and margin for the carousel container.
Box Shadow
Adds depth through shadow effects.
Filters
Applies CSS filters such as brightness or contrast.
Transform
Adds transform animations for dynamic visual effects.
Animation
Controls animation effects applied to carousel elements.
Did this answer your question?