Skip to content
StoreDocsSupport
Get Divi Torque

Logo Carousel

The Logo Carousel module scrolls a row of client, partner, or sponsor logos in a responsive carousel. Each logo can be linked, sized consistently, and given a hover effect, including a grayscale-to-color reveal. It works in both Divi 4 and Divi 5.

  1. Add a section and row in the builder.
  2. Add the Logo Carousel module to the row.
  3. Add a Logo Carousel Item for each logo.
  4. In Content > Slides, set Slides to Show for each device.

Content

Logo Settings

  • Logo Hover Effect: None, Zoom In, Zoom Out, Fade, or Grayscale to Color, which shows logos in grayscale and restores full color on hover. The default is Zoom In.
  • Logo Height and Logo Width: both responsive. Setting a fixed height is what makes mismatched logo files line up.

The Logo Carousel uses the same carousel engine as the Image Carousel, with the same groups:

  • Slides: Slides to Show (1 to 8, responsive, default 4), Slides to Scroll, Gap Between Slides, Variable Slide Width, Slide Width, and Vertical Direction.
  • Autoplay & Motion: Autoplay and Autoplay Delay, Transition Speed and Transition Easing, and Infinite Loop.
  • Interaction: Drag / Swipe, Center Active Slide, Center Mode Style, Center Peek, and Custom Cursor with Cursor Style.
  • Arrows & Dots: Show Arrows and Show Dots (both responsive), Arrow Layout, the arrow icons, and Pagination Style.

Each Logo Carousel Item holds one logo. In its Logo group:

  • Logo and Logo Alt Text: the image and its alt text. Always fill in the alt text. It describes the logo for screen readers.
  • Link the Logo, Link URL, Open in New Window, and Add Nofollow: link each logo to the client's site, with nofollow available when the link should not pass ranking signals.

Design

The Arrow Style, Arrow Border, Arrow Position, Dot Style, Number Style, Dot Position, and Carousel Spacing groups match the Image Carousel: arrow styling and positioning, dot or number pagination, and spacing around the carousel.

Each logo item also has an Overlay group in its Design tab. It adds a color wash and an icon on hover, with Overlay, Speed, Icon, Icon Color, Icon Size, Icon Opacity, and Overlay Color.

Tip

Upload logos as transparent PNGs or SVGs at a consistent height, then set Logo Height to lock them to the same size. Client logos rarely share dimensions, and a fixed height keeps the row tidy.

Frequently asked questions

How do I make the logos grayscale until hover?

Set Logo Hover Effect to the grayscale-to-color option in Content > Logo Settings. Logos render in grayscale and return to full color when a visitor hovers over them.

Yes. Turn on Link the Logo on any individual logo item and set its own URL, target, and nofollow option. Logos without a link render as images.

Yes. Use the Logo Grid module instead, which lays the same kind of logos out in a grid.