In this guide, we will show you how to use the “Logo Carousel widget” on your Elementor website. The Logo Carousel widget allows you to showcase a collection of logos in an interactive, sliding carousel format. It’s perfect for displaying client logos, brand partnerships, or sponsors while adding a dynamic element to your website design. With its responsive and customizable layout, the Logo Carousel widget enhances brand visibility and provides a smooth, engaging browsing experience on your Elementor site.
Let’s explore the customization options available in the “Logo Carousel widget” for Elementor below.
Elementor Free Logo Carousel Tutorial Video
Add a Free Logo Carousel to Elementor
Add a Free Logo Carousel Widget to an Elementor Page
Elementor Logo Carousel Widget General Settings
Items Source
Items – Manually input content directly into the widget.
Posts – Pulls content from regular WordPress posts or a specified Custom Post Type.
WooCommerce Products – Retrieves data from WooCommerce product listings.
ACF Custom Field – Uses values from fields created with the Advanced Custom Fields plugin.
JSON or CSV – Imports content from an external JSON or CSV file.
Gallery – Displays images from a WordPress gallery.
Terms – Loads taxonomy terms (such as categories or tags).
Users – Pulls information from registered WordPress users.
Menu – Displays items from a WordPress navigation menu.
RSS – Retrieves data from an external RSS feed.
Instagram – Pulls posts or media from an Instagram feed (requires integration).
API Integrations – Connects and pulls data dynamically from an external API source.
Debug - Show Input Data
A troubleshooting toggle to display the raw data the widget is processing.
Number of items
Sets how many carousel items are visible at once. It can be set for different devices.
Autoplay
Determines if the carousel automatically scrolls.
Autoplay Hover Pause
Pauses the automatic scrolling when the user hovers over the carousel.
Show Arrows
Displays navigation arrows.
Show Dots
Displays navigation dots/pagination.
Loop
Makes the carousel scroll infinitely.
Margin Between Items
Sets the space in pixels between the carousel items.
Autoplay Timeout
Sets the delay in milliseconds between slides when Autoplay is active.
Transition Speed
Sets the delay in milliseconds between slides when Autoplay is active.
Center
Aligns the active item in the center of the carousel view.
Item Image Size
Selects the image size for the carousel items.
Open Link In New Tab
Determines if the item's link opens in a new browser tab.
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
Elementor Logo Carousel Widget Style Settings
Item Height
Sets the height of each carousel item. It can be set for different devices.
Item Background
Allows you to choose a background color or gradient for the item.
Item Border Radius
Controls the curvature of the item's corners.
Item Padding
Sets the inner spacing (top, right, bottom, left) within each item. It can be set for different devices.
Item Border Type
Selects the style of the border
Solid
Double
Dotted
Dashed
Groove
Item Border Width
Sets the thickness of the border (top, right, bottom, left). It can be set for different devices.
Item Border Color
Choose the color of the border.
Nav Dots Size
Controls the size of the navigation dots.
Dot Color
Sets the color of the inactive navigation dots.
Dot Active Color
Sets the color of the currently active navigation dot.
Dot Spacing
Controls the overall spacing/margin around the navigation dots element.
Dot Space Between
Sets the individual spacing between each navigation dot.
Dot Alignment
Determines the horizontal alignment of the navigation dots (e.g., Center).
Nav Arrow Spacing
Controls the horizontal spacing/position of the navigation arrows. It can be set for different devices.
Nav Arrow Position
Controls the vertical spacing/position of the navigation arrows. It can be set for different devices.
Nav Arrow Radius
Controls the curvature of the navigation arrow background's corners.
Nav Arrow Background Size
Sets the size of the background area behind the navigation arrow icon. It can be set for different devices.
Nav Arrow Icon Size
Sets the size of the arrow icon itself. It can be set for different devices.
Nav Arrow Background
Sets the background color or gradient for the navigation arrows.
Nav Arrow Background Hover
Sets the background color or gradient for the navigation arrows when hovered over.
Nav Arrow Icon Color
Sets the color of the navigation arrow icons.
Nav Arrow Icon Color Hover
Sets the color of the navigation arrow icons when hovered over.
Logo Carousel Widget Design Examples For Elementor
Here are some live use cases for the Logo Carousel widget.
Logo Carousel with Automotive.
Logo Carousel with Autoplay.
Thank you for using the Logo Carousel widget for Elementor! This versatile and engaging tool lets you showcase a collection of logos, such as clients, partners, or sponsors, in a smooth, responsive carousel. Designed to enhance brand credibility and visual appeal, it offers full customization options to perfectly fit your website’s style. For support or inspiration, feel free to get in touch or explore our demo.