Logo Carousel #

The Logo Carousel Elementor Free widget allows you to display multiple brand or partner logos in a responsive carousel layout. You can easily control logo content, carousel behavior, and visual styling without writing any code.

Live Demo

How to Use the Logo Carousel Widget #

Step 1: Add the Widget #

1. Open any page with Elementor Editor.

2. Search for Logo Carousel in the widget panel.

3. Drag and drop the widget into your desired section.

Step 2: Configure Logo Content #

Go to the Content tab → Logo section.

Logo Style #

• Choose the display style for logos.

• Default: Normal

Repeater List #

Use the repeater to add multiple logos.

For each logo item:

• Logo Name – Set an internal name for easy identification.

• Logo Image – Upload or select the logo image.

• Enable Hover Logo – Enable if you want a hover-state logo (optional).

• Enable Link – Enable to make the logo clickable.

You can:

• Add unlimited logos

• Duplicate logos

• Reorder logos using drag & drop

• Remove logos easily

Step 3: Carousel Settings #

Go to Content tab → Settings.

📷 Image Placeholder: Content Tab → Settings section

Rows #

• Choose how many rows of logos to display.

• Example: One row / Two rows

Spacing Left Right #

• Adjust horizontal spacing between logos.

Slides to Show #

• Set how many logos are visible at once.

Slides to Scroll #

• Define how many logos move per slide action.

Autoplay #

• Enable or disable automatic sliding.

Speed (ms) #

• Control transition speed in milliseconds.

Pause on Hover #

• Pause carousel animation when the user hovers.

Show Arrow #

• Enable navigation arrows.

Show Dots #

• Enable pagination dots below the carousel.

Step 4: Style the Logos #

Go to Style tab → Logo.

Logo Height #

• Adjust the height of logos (responsive supported).

Normal / Hover State #

You can style logos differently for:

• Normal

• Hover

Background Type #

• Solid color

• Gradient background

Gradient Options: #

• Color

• Second Color

• Location (start & end)

• Type (Linear)

• Angle

Box Shadow #

• Add shadow effects to logos.

• Control shadow opacity and appearance.

Border Settings #

• Border Type (Solid)

• Border Width (Top, Right, Bottom, Left)

• Border Color

Step 5: Advanced Options #

Use Elementor’s default Advanced tab for:

• Margin & padding

• Responsive visibility

• Motion effects

• Custom CSS (if needed)

✅ Final Output #

Once configured, the Logo Carousel will display responsive, animated brand logos that adapt perfectly to desktop, tablet, and mobile devices.

Also See the you tube tutorial:

💡 Tips #

• Use SVG or optimized PNG logos for best performance.

• Keep Slides to Show lower on mobile for better readability.

• Enable Pause on Hover for improved user experience.