How to make Logo slider in Elementor

What Is a Logo Slider and Why Does Your Website Need One

A logo slider is a widget that displays a row of logos in a sliding or scrolling carousel format. Instead of stacking logos in a static grid, they scroll automatically or on user interaction, saving space and adding visual movement to your page.

Most local business websites use a logo slider in one of three ways:

• Displaying client logos to build social proof
• Showing partner or sponsor brand logos
• Highlighting certifications, awards, or media mentions

All three of these uses make a visitor trust your site more within the first few seconds of landing on it. That is why almost every homepage I build for local business clients includes one.

Which Free Plugin to Use for an Elementor Logo Slider

Elementor free does not have a native logo slider or logo carousel widget. You need a third-party add-on to get the job done without paying for Elementor Pro or a premium add-on pack.

For this tutorial, we are using a free Elementor add-on plugin available on WordPress.org. It adds a dedicated Logo Slider or Logo Carousel widget directly inside the Elementor editor. It is completely free, lightweight, and does not slow your site down. You get full control over autoplay speed, number of logos visible at once, hover effects, navigation arrows, and pagination dots.

How to Install the Free Logo Slider Plugin

Installing the plugin takes about sixty seconds. Here is exactly how to do it:

1. Log in to your WordPress dashboard
2. Go to Plugins and click Add New
3. In the search bar, type the name of your chosen logo slider add-on for Elementor
4. Click Install Now on the correct plugin result
5. Once installed, click Activate
6. The plugin will now add new widgets to your Elementor editor automatically

You do not need to configure anything in the plugin settings. Once it is activated, open any page with Elementor and the logo slider widget will appear in the widget panel.

How to Add the Logo Slider Widget in Elementor

Once the plugin is active, follow these steps to place the widget on your page:

1. Open the page you want to edit and click Edit with Elementor
2. In the Elementor widget search bar on the left, type logo slider or logo carousel
3. Look for the widget from the plugin you just installed (it will show the plugin’s icon badge)
4. Drag and drop the widget onto your page in the section where you want the logos to appear

A placeholder carousel will appear on the canvas. Now you are ready to start adding your logos.

Adding and Configuring Your Logo Images

This is the most important step and it is where most beginners go wrong. Here is what to do:

1. Click on the logo slider widget on the canvas to open its settings in the left panel
2. In the Content tab, find the Logo Items or Images section
3. Click Add Item for each logo you want to display
4. Upload your logo image from the media library or your computer
5. Optionally add a link URL so clicking a logo takes the visitor to that brand’s website
6. Repeat for every logo you want in the slider

One thing I always tell my clients: prepare your logo images before you upload them. Crop them all to the same dimensions, for example 200 by 100 pixels, and save them as PNG with a transparent background. When all logos are the same size, the slider looks consistent and professional. Mixing landscape, square, and portrait logos in the same slider looks messy and unprofessional.

Setting Up the Hover Colour Change Effect

One of the most popular things I set up for clients is a hover colour effect on the logo slider. The idea is simple: logos appear in black and white by default, and when a visitor hovers over them, they switch to full colour. It adds a really nice interactive feel to the section.

To do this, you need two versions of each logo:

• A full colour version (your normal logo file)
• A black and white or greyscale version

Here is how to set it up:

1. In the Logo Item settings, upload the black and white version as the default image
2. Look for the Hover Image option within that same logo item
3. Upload the full colour version as the hover image
4. The widget will automatically swap between them when a user hovers

If your plugin does not have a per-item hover image option, you can achieve a similar effect using the Style tab. Look for a Greyscale or Filter option under the normal state, set it to 100 percent greyscale, then set it to 0 percent under the hover state. The result looks equally polished.

Configuring Autoplay, Speed, and Carousel Settings

Now let us set up how the slider actually moves. In the Content or Settings tab of the widget, look for the Carousel Settings section. Here is what each option does and what I recommend:

• Autoplay: Set to Yes so the logos scroll automatically without the user needing to click anything
• Autoplay Speed: This is the delay between slides, measured in milliseconds. 3000 means 3 seconds. I usually set this to 2500 or 3000 for a relaxed pace
• Transition Speed: This controls how fast the slide animation itself takes. 800 to 1000 milliseconds gives a smooth, natural feel
• Loop: Set to Yes so the slider wraps back around to the beginning endlessly
• Pause on Hover: Set to Yes so the slider stops scrolling when a visitor hovers over it, giving them time to read a logo or click a link
• Slides to Show: How many logos are visible at once. I use 4 to 5 on desktop and drop it to 2 on mobile
• Navigation Arrows: Optional. For a clean homepage trust section, I usually turn these off
• Pagination Dots: Also optional. I turn these off for logo sliders since users do not need to navigate manually

Styling Your Logo Slider to Match Your Brand

Click the Style tab in the Elementor widget panel to access visual customisation options. Here is what you can adjust:

• Image Size: Control the width and height of each logo in the slider
• Background: Add a background colour or keep it transparent to blend with your section
• Padding and Spacing: Add space around each logo so they do not look cramped
• Border and Shadow: Add a subtle box shadow or border to each logo card if you want a boxed look
• Arrow Colour and Size: If you left navigation arrows on, style them to match your site palette

My personal rule for logo sliders is to keep the styling minimal. A white or light grey background, uniform logo sizes, and no borders. Clean and simple always works better than over-designed for this type of section.

Benefits of Using a Logo Slider on Your WordPress Site

A logo slider does several useful things for your website at once:

• Builds trust instantly: Visitors see familiar brand names associated with your business and feel more confident
• Saves page real estate: Multiple logos fit in a single compact section without needing a large static grid
• Improves user experience: The sliding animation gives the page a dynamic, modern feel that static pages lack
• Boosts brand awareness: Showing partner or client logos reinforces who you work with and what industry you serve
• Encourages navigation: You can link each logo to a relevant page or case study, turning the slider into a navigation tool
• Fully customisable: You can adjust layout types, transition effects, animation speed, and hover states to match your exact design

Frequently Asked Questions

What is a logo slider in Elementor?

A logo slider in Elementor is a widget that displays multiple logos in a scrolling carousel format on your page. You can add as many logos as you want, link them to external URLs, and customise how they scroll, animate, and respond to hover interactions. Because Elementor free does not include one natively, you need a free add-on plugin to get this widget.

How do I add a logo slider in Elementor for free?

Install a free Elementor add-on plugin from WordPress.org that includes a logo carousel or logo slider widget. Once activated, the widget appears in your Elementor editor panel. Drag it onto your page, upload your logo images, configure autoplay and carousel settings, and publish. No paid plugins or Elementor Pro licence is required.

Can I add a hover effect to the Elementor logo slider?

Yes. Most free logo slider plugins for Elementor support hover effects. You can upload a second image per logo item that appears on hover, which is a great way to show a colour version on hover and a greyscale version by default. Alternatively, use the Style tab to apply a CSS greyscale filter that removes itself on hover.

How many logos can I display in an Elementor logo slider?

There is no hard limit on the number of logos you can add. The number of logos visible at one time depends on the Slides to Show setting in the carousel configuration. Typically 4 to 5 logos on desktop and 2 on mobile is the ideal balance between visibility and clean layout.

Do I need Elementor Pro to create a logo slider?

No, you do not need Elementor Pro. A free third-party add-on plugin from WordPress.org gives you a full-featured logo slider widget that works with the free version of Elementor. You get autoplay, hover effects, navigation arrows, pagination dots, and full styling control without any paid upgrade.

Should I use PNG or JPG for logo images in the slider?

Always use PNG with a transparent background for logo images in a slider. PNG transparency means the logo will sit cleanly on any background colour in your slider section without a white box around it. Make sure all your logos are cropped to the same pixel dimensions before uploading for a consistent, professional look.

Final Thoughts

Thanks so much for reading through this guide on how to make a logo slider in Elementor. I hope it saves you time and helps you get that trust section on your homepage looking sharp. If you are more of a visual learner, make sure you watch the full video tutorial I have linked on this page. I walk through the whole setup live so you can follow along step by step and see exactly what each setting does. If you have any questions, drop them in the comments below and I will do my best to help you out. And if you would like me to set this up for your site, just reach out through the contact page and we can sort it together.