How to make a logo carousel in Divi 5

With the Group Carousel -module from Divi 5 you can build a logo carousel directly in the builder without trusting extra plug -ins. It is a simple way to present customer logos, partner badges or brands in a scrolling strip that feels polished and professional.

In this self -study we continue how to set up and style a moving brand bar in just a few steps.

What is the group of carousel module in Divi 5

The Group Carousel is the Divi 5 module for creating horizontal sliding controllers. It works like a container where you can place multiple modules next to each other and browse through it.

Subscribe to our YouTube channel

You can access the modulel list as the Carousel Module. Add it to a row and then add in Groups in it. Each group acts as a slide. You can store an image, text, icon or any module that you like. It gives you complete freedom about the look and design.

Under carousel settings you will find the main operating elements for how the slider behaves, things like how many slides are displayed in one go, whether they automatically rotate and the speed of transitions. We will treat these settings deeply in the tutorial below.

Learn everything about the Group Carousel module from Divi 5

Making the Logo Carrousel slider step by step

Now that you know what the group carousel can do, let’s build a real example. We will set up a scrolling brand beam that cycles smoothly and looks in balance about devices.

1. Add the carousel module group

Start by adding a new row to your layout. Give it a structure with full width (set Width And Maximum width up to 100% and Height Up to 12VH) So your carousel has room to breathe.

Then place the Carousel Module in that row.

This contains all your slides. Every slide is one Group You add in the module.

After you have added the module, go to the column of the parent row and you knew the standard filling.

Divi adds Divi as standard some filling in columns to give layouts a neat appearance. That works in most cases, but if you work with one column, it prevents the contents of edge to edge. Removing that filling opens the row for real designs with full width such as a logo bar.

2. Design a logo -dria

At the moment you have reserved a clean container with space for the carousel. The next step is to add your first logo to a group. We will first adjust one slide, then replicate and replace the logo images in other slides.

Click on the black plus button in the Group and add one Image Module. Add your first logo and adjust it Height up to 10VW and Alignment Unpleasant Center.

Then change the left and right filling of the group to 5px to add some space between logos.

3. Add other logo diseases

Now that the first logo group is ready, it’s time to fill in the carousel. Duplicate the group as often as you need and then replace the logo image in each. In this way all distance and size settings transfer, which gives the entire carousel a consistent appearance.

When all logos are exchanged, the carousel will look like this:

4. Carrous settings adjust

Currently, only one logo is visible on the screen. To make a moving logobrip, we must show 5-7 logos, add automatic rotation and adjust various other settings. For this we will Carousel settings.

Then go back to the group carousel Contents > Carousel settings.

Now change the options as you want.

Here are the specific settings we have chosen and why:

• (1.) Automatic rotation: on – To keep the carousel moving without clicking, so that the brand bar feels alive.
• (2.) Automatic rotation speed: 1MS -A ultra-run value to make a seamless, endless loop without breaks.
• (3.) Pause on Hover: On – To give visitors control to stop the movement if they want to study a logo.
• (4.) Modus mode: ON – To keep the carousel in balance and centered the logo in the picture.
• (5.) Transitional speed: 2000MS – Make the sliding movement smooth and easy to follow.
• (6.) Slides to show: 7 – To fit neatly over a desktop row, while you are automatically adjusted for tablets and telephones. We will change this for tab and mobile views.
• (7.) Slides to scroll: 1 – To move one logo at the same time for a continuous, subtle movement.

Here is what it looks like at the moment:

If you want, you can use the point and arrow in the Elements institutions.

5. Change groups and active groups

To add subtle effects to your carousel, you have two institution options: Groups And Active Groups in the Design Tab of your group carousel module. By changing the settings of the active groups, only the middle slide is influenced, while the groups change the rest of the slides.

First we add a gray hue to all logos. To do this, turn around Saturate up to zero in Groups > Filters.

Now change Active groups> Filters> Satur up to 120. This makes the middle logo stand out.

Note that only the main logo is colored, while the other are gray. You can also add a subtle zoom effect to the active groups, such as that each logo extends a bit when in the middle. Go to Transform And fit the Transform transforming scale Limitation up to 108%.

Your logo -carousel will now display these effects when it is a preview:

6. Adjust the responsive settings

Change the Slides to show option. For example, seven on desktop, five on tablet and three on mobile.

You may have noticed that the logos on mobile are too small and apart, so let’s repair that. Start by switching to mobile display in the panel adjustable breakpoints. Then go to the group Filling And set it to 0.

Now you can easily Copy item styles From the modified group and stick them in others to prevent the steps from being repeated every time.

Then change the image width in 20VW to increase the logo size.

With the help of paste brands you can once again transfer the same screen styles to the rest of the logos.

The logo carousel looks great at all major breaking points. You can dig deeper and change the settings for other views if you wish.

Download the Logo -Carrousellay -Out

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 open it on every page you build.

Design striking logo carousels in Divi 5

A logo carousel is a small touch that can add credibility to your site. With the Group Carousel -module from Divi 5 you can build it directly in the builder, control every detail of the movement and style it to match your design. Once set, confidence reinforces while keeping your layout dynamics. Ready to design your first logo carousel in Divi 5? Try it out today!