With Divi 5’s Group Carousel Module, you can build a logo carousel right inside the builder without relying on extra plugins. It’s a simple way to showcase client logos, partner badges, or featured brands in a scrolling strip that feels polished and professional.
In this tutorial, we’ll walk through how to set up and style a moving brand bar in just a few steps.
What Is The Group Carousel Module In Divi 5
The Group Carousel is Divi 5’s module for creating horizontal sliders. It works as a container where you can place multiple modules side by side and scroll through them.
Subscribe To Our Youtube Channel
You can access it from the module list as the Group Carousel module. Add it to a row and then insert Groups inside it. Each Group acts as a slide. You can drop in an image, text, icon, or any module you like. It gives you complete freedom over the look and design.
Under Carousel Settings, you’ll find the main controls for how the slider behaves, things like how many slides show at once, whether it rotates automatically, and the speed of transitions. We’ll cover these settings deeply in the tutorial below.
Learn Everything About Divi 5’s Group Carousel Module
Creating The Logo Carousel Slider Step-By-Step
Now that you know what the Group Carousel can do, let’s build a real example. We’ll set up a scrolling brand bar that cycles smoothly and looks balanced across devices.
1. Add The Group Carousel Module
Start by adding a new Row to your layout. Give it a full-width structure (set Width and Max Width to 100% and Height to 12vh) so your carousel has room to breathe.
Next, insert the Group Carousel module inside that row.
This will hold all your slides. Each slide is a Group you’ll add inside the module.
Once you add the module, go to its parent Row’s column and clear out the default padding.
By default, Divi adds some padding inside columns to give layouts a neat appearance. That works in most cases, but if you’re working with a single-column row, it stops the content from stretching edge to edge. Removing that padding opens the row for true full-width designs like a logo bar.
2. Design A Logo Slide
At this point, you’ll have a clean container with space reserved for the carousel. The next step is to add your first logo inside a Group. We’ll customize one slide first, then replicate it, and replace the logo images in other slides.
Click the black plus button inside the Group and add an Image module. Add your first logo and adjust its Height to 10vw and Alignment to Center.
Next, modify the Group’s left and right padding to 5px to add some room between logos.
3. Add Other Logo Slides
Now that the first logo Group is ready, it’s time to fill out the carousel. Duplicate the Group as many times as you need, then replace the logo image in each one. This way, all the spacing and sizing settings carry over, giving the whole carousel a consistent look.
When all the logos are swapped in, the carousel will look something like this:
4. Customize Carousel Settings
Currently, only one logo is visible on the screen. To create a moving logo strip, we need to showcase 5-7 logos, add automatic rotation, and adjust several other settings. For this, we’ll modify the Carousel Settings.
Go back to the Group Carousel, then Content > Carousel Settings.
Now, modify the options as you like.
Here are the specific settings we picked and why:
- (1.) Automatic Rotation: ON – to keep the carousel moving without clicks, so the brand bar feels alive.
- (2.) Automatic Rotation Speed: 1ms – an ultra-low value to create a seamless, endless loop with no pauses.
- (3.) Pause on Hover: ON – to give visitors control to stop the motion if they want to study a logo.
- (4.) Center Mode: ON – to keep the carousel balanced and the logo centered in view.
- (5.) Transition Speed: 2000ms – make the slide movement smooth and easy to follow.
- (6.) Slides to Show: 7 – to fit neatly across a desktop row, while adjusting automatically for tablets and phones. We’ll modify this for tab and mobile views.
- (7.) Slides to Scroll: 1 – to shift one logo at a time for a continuous, subtle motion.
Here’s how it currently looks:
If you want, you can hide the Dot and Arrow Navigation in the Elements settings.
5. Modify Groups And Active Groups
To add subtle effects to your carousel, you have two setting options: Groups and Active Groups in the Design tab of your Group Carousel module. By modifying the Active Groups settings, only the center slide will be affected, while the Groups change the rest of the slides.
First, we add a grey shade to all the logos. To do so, turn Saturate to zero in Groups > Filters.
Now, modify Active Groups > Filters > Saturate to 120. This will make the center logo stand out.
Notice that only the main logo is colored, while the others are grey. You can also add a subtle zoom-out effect to the Active Groups, such as having each logo expand a little when in the center. Go to Transform and adjust the Transform Scale limit to 108%.
Your logo carousel will now show these effects when previewed:
6. Adjust Responsive Settings
To make sure your logos are visible on different breakpoints, modify the Slides to Show option. For example, seven on desktop, five on tablet, and three on mobile.
You might have noticed that the logos on mobile look too small and spaced out, so let’s fix that. Start by switching to Mobile view in the Customizable Breakpoints panel. Then, go to the Group’s Padding and set it to 0.
Now you can easily Copy Item Styles from the modified Group and paste them to others to avoid repeating the steps each time.
Next, change the image Width to 20vw to increase the logo size.
Using Paste Attributes again, you can carry over the same Image Width styles to the rest of the logos.
The logo carousel looks great on all major breakpoints. You can dig deeper and modify the settings for other views if you want.
Download The Logo Carousel Layout
If you want to get started with the logo carousel in this tutorial, download it for free below. You can upload the JSON file to your Divi Library to access it on any page you build.
Design Eye-Catching Logo Carousels In Divi 5
A logo carousel is a small touch that can add credibility to your site. With Divi 5’s Group Carousel Module, you can build it directly in the builder, control every detail of the motion, and style it to fit your design. Once set up, it quietly reinforces trust while keeping your layout dynamic. Ready to design your first logo carousel in Divi 5? Try it out today!
Leave A Reply