Divi Logo Carousel

The Divi Logo Carousel module, part of the Divi Carousel PRO plugin, formerly known as Wow Carousel Pro, lets you display client logos, partner brands, or sponsor images in a sleek, rotating carousel. It’s perfect for building trust and credibility by showcasing multiple logos in a compact, interactive, and visually engaging format within Divi.

Content

The Content tab is where you manage the logos that appear in the carousel. It allows you to add new logo items and configure each logo’s content, images, and associated text for maximum flexibility and branding control.

Add New Item

Use this option to add individual logos to the carousel. Each logo item can be configured separately with its own image, alt text, and branding information.

Content

This tab contains all settings related to the specific logo item you are adding or editing.

Carousel Item → Content

The Content toggle allows you to define the main visual and textual elements for a logo.

  1. Upload Logo – Upload the logo image for the brand or company.
  2. Logo Alt Text – Provide alternative text for the logo to improve accessibility and SEO.
  3. Brand Name – Enter the brand or company name to be displayed with the logo.

Carousel Item →Tab Content

This toggle is used when tab navigation is enabled in the carousel. Fields under this toggle only appear if the Use Tab option is enabled in the Tab Settings.

  1. Title – Set the text for the tab’s title.
  2. Subtitle – Add a secondary line of text to the tab.
  3. Thumbnail – Enable a thumbnail image for the tab.
  4. Add Image – Upload an image to be used as the tab’s thumbnail.

Logo Setting

  1. Image Hover Animation – Choose a hover effect such as Zoom In, Zoom Out, Fade, or Black and White to make logos more interactive.
  2. Height – Define the height of the logo image for consistent sizing across the carousel.
  3. Width – Set the width of the logo image to maintain uniformity and responsiveness.

Carousel Settings

This toggle controls the global behavior and interaction of the carousel.

Carousel Settings → General Tab

These options define animation, layout, and responsiveness.

  1. Animation Speed – Controls slide transition speed.
  2. Autoplay – Automatically rotates team member slides.
  3. Autoplay Speed – Sets the delay between autoplay transitions.
  4. Navigation & Pagination – Displays navigation arrows, pagination dots, both, or none.
  5. Use Fixed Width Slide – Maintains consistent slide width.
  6. Slides To Show – Determines the number of visible items per device.
  7. Slide Spacing – Adjusts spacing between items.
  8. Apply Spacing on First & Last Items – Adds spacing to edge slides.
  9. Infinite Looping – Enables continuous looping.

Carousel Settings → Advanced Tab

These options provide advanced control over interaction and performance.

  1. Sliding Direction – Controls slide direction, including RTL compatibility.
  2. Sliding CSS Transition – Defines the easing effect for animations.
  3. Lazy Loading – Loads content only when required.
  4. Lazy Loading Type – Choose between Progressive or On-demand loading.
  5. Auto Height – Adjusts carousel height automatically.
  6. Swipe – Enables touch swipe navigation.
  7. Pause on Hover – Pauses autoplay on hover.
  8. Items to Scroll – Sets how many items move per scroll.
  9. Vertical Mode – Displays slides vertically.
  10. Center Mode – Highlights the center item.
  11. Wait For Animate – Prevents overlapping animations.
  12. Use Custom Cursor – Enables a custom cursor effect.
  13. Wrapper Spacing Top – Adds spacing above the carousel.
  14. Wrapper Spacing Bottom – Adds spacing below the carousel.
  15. Open Image in Lightbox – Opens images in a lightbox view.

Tab Settings

This toggle enables and manages tab-based navigation.

  1. Use Tab – Enables the tab layout.
  2. Hide Tab on Mobile – Hides tabs on smaller devices.
  3. Select Tab Elements – Choose which elements appear in tabs.
  4. Tab Items – Manage individual tab entries.
  5. Item Spacing – Controls spacing between tab items.

Design

The main Design tab provides global styling options for the entire carousel. Here, you can control the look and feel of every element in the carousel, ensuring the logos match your website’s overall aesthetic while maintaining a professional and polished appearance.

Navigation

This toggle allows you to style the carousel’s navigation arrows. You can adjust the size, color, spacing, and hover effects to ensure smooth and intuitive navigation between logo items.

Pagination

Customize the pagination dots that indicate the position of each logo in the carousel. You can style active and inactive states, adjust spacing, and change colors to match your website theme.

Tab Style

When using tab-based navigation, this toggle controls the styling of the tab container. You can adjust background colors, borders, spacing, and hover effects to create a visually appealing tab interface.

Tab Elements

This option allows you to style individual elements within tabs, including the title, subtitle, and thumbnail. Typography, spacing, and alignment can be customized to maintain consistency with the overall design.

Text

Control typography settings for all textual elements, such as brand names, titles, and subtitles. You can adjust font size, weight, style, line height, letter spacing, and color.

Sizing

This toggle controls the width and height of carousel elements, including logos and tab items. It ensures proper scaling across devices and maintains a consistent layout.

Spacing

Adjust the margins and padding between logos, carousel items, and tabs. Proper spacing ensures clarity, readability, and a well-balanced visual appearance.

Did this answer your question?