Create an Infinite Scrolling Logo Section [Divi Tutorial]

Build a Stunning, Plugin-Free Logo Marquee for Your Divi Website

Want to showcase your clients, partners, or sponsors in a way that captures attention? A scrolling logo section (also known as a logo marquee) adds movement and professionalism to any website. The best part? You can create this dynamic element in Divi without a single plugin or line of JavaScript!

In this step-by-step guide, I'll walk you through creating a smooth, infinite horizontal scroll that even pauses when visitors hover over it - all using pure CSS. Whether you're building a portfolio site, business website, or e-commerce platform, this elegant solution will help you showcase partnerships and build credibility.

Quick Facts:

Difficulty: Intermediate
Time to Complete: 10-15 minutes
Tools Needed: Just Divi Builder
Result: A professional, responsive logo carousel

Watch the Video Tutorial (Highly Recommended!)

If you're a visual learner, check out the video version of this tutorial! I'll demonstrate each step in real-time, making it easier to follow along. It's especially helpful for seeing how the CSS animations work in practice.

While this written guide is comprehensive, watching the video alongside can help reinforce your understanding, especially if CSS is new to you.

Step-by-Step Guide

Step 1: Setting Up the Basic Structure

First, let's create the foundation for our scrolling logo section:

1. Create a new section where you want your logo carousel to appear
2. Add a single-column row inside this section

Using a single column might seem counterintuitive, but it's essential for the scrolling effect we'll create with CSS later.

Step 2: Adding Your First Logo

Now, let's add and configure the first logo:

1. Add an Image module to your row
2. Upload your first logo image
3. Configure the image settings:

Design Tab ➜ Sizing:
- Set Width to 150px for desktop
- For mobile responsiveness, click the "phone" icon and set Width to 120px

Design Tab ➜ Spacing:
- Set Right Margin to 30px (this creates space between logos)
- Set Bottom Margin to 0px (removes default Divi spacing)

Use pixel values rather than percentages for precise control over your logo sizes across all devices.

Step 3: Adding Multiple Logos

With your first logo properly configured:

1. Duplicate the image module for each logo you want to display
2. For each duplicate, upload a different logo image
3. Maintain the same size and spacing settings for consistency

For an optimal scrolling effect, include at least 5-8 logos. Too few will create a choppy appearance.

Step 4: Arranging Logos Horizontally with Flexbox

Now, let's arrange all logos in a neat horizontal line:

1. Open the Row Settings (click the gear icon for your row)
2. Go to the Column Settings (click the gear icon for the single column)
3. Navigate to Advanced tab ➜ Custom CSS
4. In the Free-Form CSS field, add:

selector {
    display: flex;
}

This CSS transforms your column into a "flex container," which automatically arranges all logo modules side-by-side in a row.

Step 5: Allowing Row to Expand Beyond Screen Width

This crucial step enables the scrolling effect:

1. Return to Row Settings (main row, not column)
2. Go to Advanced tab ➜ Custom CSS
3. In the Free-Form CSS field, add:

selector {
    max-width: max-content;
    width:max-content;
}

The max-content value allows the row to expand as wide as needed to fit all logos, rather than constraining it to the screen width. This is essential for the scrolling animation.

Step 6: The Structure for the Infinite Loop Effect

To create a seamless infinite scroll:

1. Duplicate the entire row (not just the image modules)
2. Ensure the duplicate row contains the exact same logos in the same order

When the first row scrolls off-screen, the identical second row takes its place, creating the illusion of infinite scrolling. Think of it like a continuous loop!

Step 7: Configuring the Section for Smooth Scrolling

Let's set up the parent section to properly handle the scrolling:

1. Open Section Settings
2. Go to Advanced tab ➜ Custom CSS
3. In the Free-Form CSS field, add:

selector {
    display: flex;
}

1. Go to Design tab ➜ Visibility
2. Set Horizontal Overflow to Hidden
3. Set Vertical Overflow to Hidden

The display: flex places both rows side-by-side, while the overflow settings prevent scrollbars from appearing and breaking the illusion.

Step 8: Adding the Scrolling Animation

Now for the magic that makes everything move:

1. Stay in Section Settings ➜ Advanced tab ➜ Custom CSS ➜ Free-Form CSS.
2. Add the following CSS below the display: flex; rule:

selector .et_pb_row {
    animation: ticker 30s linear infinite;
}

@keyframes ticker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

How this works:

• ticker: This is just a name we give to our animation (you could call it anything, but "ticker" makes sense).
• 30s: This is the duration of the animation – how long it takes for one complete loop (30 seconds in this case). You can make it faster or slower by changing this number.
• linear: This makes the animation move at a constant speed, without any speeding up or slowing down.
• infinite: This makes the animation repeat forever, creating the infinite loop.
• @keyframes ticker { ... }: This is where we define what the animation actually does.
• from { transform: translateX(0); }: This is the starting point. transform: translateX(0); means the row starts at its normal position.
• to { transform: translateX(-100%); }: This is the ending point. transform: translateX(-100%); means the row moves to the left by 100% of its own width. This is what makes it scroll! The -100% is key – it moves the row completely off-screen, so the duplicate row can seamlessly take its place.

Step 9: Adding an Interactive Hover Pause

Let's add a user-friendly touch that pauses the animation when visitors hover over the logos:

1. Still in Section Settings ➜ Advanced tab ➜ Custom CSS ➜ Free-Form CSS
2. Add this CSS below the keyframes:

selector:hover .et_pb_row {
    animation-play-state: paused;
}

This creates a more interactive experience, allowing visitors to pause the scrolling when they find a logo of interest.

Step 10: Testing and Refinement

You've done it! Now let's make sure everything works perfectly:

• Save your changes and preview the page
• Check that logos scroll smoothly and continuously
• Test the hover pause functionality
• View on different devices to ensure responsive behavior

Troubleshooting Common Issues

• Logos aren't scrolling: Double-check the CSS in Step 8. Make sure the animation name matches in both places ("ticker" in this example).
• Animation looks jerky: Try increasing the animation duration (30s) for smoother movement.
• Scrolling stops unexpectedly: Ensure you have properly duplicated the row with identical logos.
• Horizontal scrollbar appears: Verify the overflow settings in Step 7 are set to "Hidden".

Customization Ideas

Once you've mastered the basic scrolling logo section, try these enhancements:

• Speed Variations: Adjust the animation duration (30s) to make it faster or slower
• Direction Change: Change translateX(-100%) to translateX(100%) to scroll right-to-left
• Color Effects: Add grayscale filters that change to color on hover
  Background Gradient: Add a subtle gradient background to make logos pop

And that’s it!

Congratulations! You've successfully created a professional, CSS-only scrolling logo section in Divi without relying on any plugins. This elegant solution adds movement and visual interest to your website while showcasing your partnerships.

The skills you've learned (especially working with CSS animations and flexbox) can be applied to many other creative elements in your Divi projects. Remember that small details like the hover pause can make a big difference in user experience.

Have you created your own logo carousel using this tutorial? Share your results in the comments below or tag Divi Lover on social media—we'd love to see your creative implementations! 

PS. If you need 1-on-1 help, check out the best ways to work with me here.