The Divi Content Carousel module allows you to display flexible content elements such as images, videos, icons, text, and buttons inside a responsive carousel layout. Each carousel item can be fully customized, making this module ideal for showcasing features, highlights, announcements, or mixed media content.
Content
The Content tab is where you create carousel items and configure how the carousel behaves across devices.
Add New Item
This option allows you to add individual content items to the carousel. Each item includes its own Content, Tab Content, and Design tabs for detailed customization.
Carousel Item → Content Tab
This tab defines the primary content displayed inside each carousel slide.
Content Options
- Choose an Element – Select the main element type for the slide: Image, Video, or Icon.
- Image Alt Text – Improves accessibility and SEO for image-based slides.
- Title Text – Adds a main heading to the slide.
- Subtitle Text – Displays supporting text below the title.
- TinyMCE – Allows rich text content with basic formatting.
- Use Button – Enables a call-to-action button within the slide.
- Button Text – Sets the label text for the button.
- Click Here – Defines the clickable button behavior.
- Button Link – Specifies the URL the button links to.
- Open Button Link in New Window – Opens the button link in a new browser tab.
Carousel Item → Tab Content Tab
This tab controls the content displayed inside tabs when the tab feature is enabled.
Notice
These fields 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 within the tab.
- 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 customize the visual styling of individual carousel items.
General
Controls overall layout appearance, alignment, and background styling for the slide.
Main Element
Customizes the appearance of the primary element (image, video, or icon).
Overlay
Adds and styles overlay effects applied to the main element or background.
Title & Subtitle
Styles the typography, color, spacing, and alignment of titles and subtitles.
Body Text
Controls the design of content added via the TinyMCE editor.
Heading Text
Styles heading-level text used within the slide.
Button
Customizes button appearance, including colors, borders, and hover effects.
Sizing
Adjusts width, height, and responsive sizing of slide elements.
Spacing
Controls padding and margin for slide components.
Box Shadow
Applies shadow effects to create depth and separation.
Filters
Adds CSS filters such as brightness, contrast, or blur.
Transform
Applies transform effects like scaling, rotation, or movement animations.
Carousel Settings
This toggle controls the global behavior and interaction of the carousel.
Carousel Settings → General Tab
Defines the main animation, 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 – Determines the number of visible slides per device.
- Slide Spacing – Adjusts spacing between slides.
- Apply Spacing on First & Last Item – Adds spacing to edge slides.
- Infinite Looping – Enables continuous slide looping.
Carousel Settings → Advanced Tab
Provides advanced behavior, performance, and interaction controls.
- Sliding Direction – Controls slide direction, including RTL compatibility.
- Sliding CSS Transition – Defines the animation easing style.
- Lazy Loading – Loads slide content only when needed.
- Lazy Loading Type – Progressive or on-demand loading.
- Auto Height – Automatically adjusts carousel height based on content.
- Swipe – Enables touch swipe navigation.
- Pause on Hover – Pauses autoplay when hovered.
- Items to Scroll – Sets how many slides move per scroll action.
- Vertical Mode – Displays slides vertically instead of horizontally.
- Center Mode – Highlights the center slide.
- 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 slides have equal height.
Tab Settings
This toggle manages the tab-based layout used alongside carousel items.
- Use Tab – Enables the tab feature.
- Hide Tab on Mobile – Hides tabs on smaller devices.
- Select Tab Elements – Choose which elements appear in tabs: Title, Subtitle, Thumbnail.
- Tab Items – Manages individual tab entries.
- Item Spacing – Controls spacing between tab items.
Design
The Design tab controls the overall visual styling of the Divi Content Carousel module.
Navigation
Styles the carousel navigation arrows, including size, color, and hover effects.
Pagination
Customizes pagination indicators for consistent visual integration.
Tab Style
Controls the appearance and layout of the tab container.
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 using shadow effects.
Filters
Applies CSS filter effects to the module.
Transform
Adds transform animations for dynamic visual presentation.
Did this answer your question?