Using the Logo Carousel Widget - aThemes Knowledge Base

Want to showcase client or partner logos on your website in a sleek rotating carousel? The Logo Carousel widget in aThemes Addons for Elementor lets you display multiple logos with autoplay, navigation controls, and hover effects.

In this guide, we’ll walk you through how to use the Logo Carousel widget in aThemes Addons for Elementor.

Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.

Activating the Widget

Go to your WordPress admin dashboard and navigate to the aThemes Addons dashboard. Search for the Logo Carousel widget and toggle it on to activate it.

Exploring Widget Options

Configuring the Logos Section

The Logos section includes the following options:

Choose Image – Upload or select the logo image from your media library.
Title – Add a title for the logo item.
Different Image on Hover – Toggle to display a different image when visitors hover over the logo.
Link to – Choose from None, Media File, or Custom URL.
Link – Enter the URL if you selected Custom URL.
Columns – Set the number of logos visible at once, from 1 to 6.

Configuring the Settings Section

The Settings section includes the following options:

Image Size – Select the image size for the logos.
Image Fit – Choose between Cover or Contain.
Image Height – Set the image height in pixels or viewport height units.
Arrows – Toggle the navigation arrows on or off.
Dots – Toggle the navigation dots on or off.
Image Gap – Set the spacing between logo images.
Transition Speed – Set the transition speed in milliseconds.
Autoplay – Toggle automatic carousel rotation on or off.
Autoplay Speed – Set the autoplay interval in milliseconds.
Infinite Loop – Toggle continuous looping of the carousel on or off.
Pause on Hover – Toggle to pause autoplay when visitors hover over the carousel.

Customizing the Style Tab

The Style tab lets you customize the appearance of the Logo Carousel widget.

Styling the Wrapper

The Wrapper style section includes the following options:

Padding – Set the inner spacing around the carousel.
Margin – Set the outer spacing around the carousel.
Background Color – Choose a background color for the carousel container.
Border – Set the border color, width, and radius.

Styling the Images

The Image style section includes the following options:

Border – Add a border around each logo image.
Border Radius – Round the corners of each logo image.
Box Shadow – Add a shadow effect to the logo images.
Opacity – Set the opacity for normal and hover states.
Hover Animation – Choose an animation effect for logo hover states.

Styling the Titles

The Title style section includes the following options:

Color – Set the title text color.
Typography – Customize the title font settings.
Margin Top – Set the spacing above the title text.

Styling the Arrows

The Arrows style section includes the following options:

Color – Set the arrow icon color.
Background – Set the arrow background color.
Size – Adjust the arrow size.
Border – Add a border around the arrows.
Border Radius – Round the corners of the arrow buttons.

Styling the Dots

The Dots style section includes the following options:

Color – Set the dot color for normal and active states.
Size – Adjust the dot size.
Spacing – Set the spacing between dots.

Following Usage Tips

Use consistent logo sizes for a polished, professional look.
Enable infinite loop for a continuous display that keeps the carousel moving.
Test the carousel on mobile devices to ensure logos display correctly at smaller screen sizes.
Use hover images for an interactive effect that engages visitors.

That’s it! You’ve successfully learned how to use the Logo Carousel widget in aThemes Addons for Elementor to display client and partner logos in a rotating carousel.

Next, would you like to add engaging animations to your pages? Check out our guide on using the Lottie widget to learn more.