The Overlay Carousel widget for Elementor enables you to showcase content in an engaging and interactive carousel with an overlay effect. It is a versatile tool designed to enhance your website’s visual appeal and functionality with its dynamic layout and intuitive customization options. Whether you’re looking to display portfolio items, testimonials, or featured products, the Overlay Carousel Widget ensures a seamless browsing experience that captures your audience’s attention.
Let’s look at each of the options in the Overlay Carousel widget for Elementor below.
Elementor Overlay Carousel Video Tutorial
Add a Overlay Carousel Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Overlay Carousel”
- Hover over the widget in the search results and click install
- Add the “Overlay Carousel” widget to any Elementor Page
Source Settings
The Overlay Carousel widget supports multi-source functionality, allowing you to populate dynamic, data-driven content from a variety of sources. These include items, posts, meta fields, JSON or CSV files, galleries, terms, users, menus, and even API integrations for ultimate flexibility.
Items
You can use the item repeater field as item source.
Posts
Display WordPress posts dynamically in overlay carousel, including custom post types and fields for maximum flexibility.
WooCommerce Products
Use this to showcase WooCommerce product images, names, prices, and descriptions in the carousel.
Meta Field
Use Meta as an item source for your overlay carousel to dynamically display and manage content from your Meta data.
JSON or CSV
Load your overlay carousel with data from JSON or CSV files to easily manage and display structured content.
Gallery
You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.
Terms
Use Terms as a source for your overlay carousel to dynamically display and manage taxonomy terms from your WordPress site.
Users
You can use WordPress Users as an item source for your overlay carousel to display and manage dynamic content from your site’s user data.
Menu
Use your WordPress Menu as a source for the overlay carousel to dynamically display and manage menu items in a visually engaging layout.
RSS
Fetch and display items from an RSS feed. This is perfect for showcasing updates or content from external blogs.
API Integrations
Integrate an API into your overlay carousel to dynamically fetch and display data from external systems or services.
General Settings
Margin
Defines the space (in pixels) between carousel items. Increasing the value adds more spacing between items, while a lower value reduces the spacing.
Loop
Enables or disables infinite looping of the carousel. When enabled, the carousel will continuously cycle through items without stopping at the end.
Autoplay
Enable autoplay to make the carousel automatically scroll through items without user interaction.
Number of Items
Set the number of items visible in the carousel at one time.
Transition Speed
Specify the duration (in milliseconds) of the transition animation between slides. A lower value creates faster transitions, while a higher value slows them down.
Autoplay Interval
Defines the time in milliseconds between automatic transitions when autoplay is enabled.
Center Mode
When enabled, the carousel focuses the middle item and slightly shows the previous and next items on the sides.
Make 3D
Adds a 3D effect to the carousel, items appear with depth, simulating a 3D perspective.
Randomize Items at Start
Shuffles the order of items when the carousel is first loaded. Useful for displaying content in a non-sequential manner.
Autoplay Hover Pause
Pauses the autoplay feature when the user hovers over the carousel.
Show Arrows
Display the navigation arrows on the sides of the carousel.
Item Image Size
It lets you choose predefined image dimensions for optimal display and performance.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
Stage Padding Type
Adds padding to the left and right of the carousel's viewport. Useful for creating spacing around the entire carousel stage.
Auto Width
Adjusts the width of each carousel item to match the width of its content. This is useful for variable-width content like text or small images.
Show Dots
Enables pagination dots below the carousel. These dots allow users to navigate directly to specific slides.
Slide Transition
Determines the type of animation used for transitions between slides.
- Ease
- Linear
- Ease-In
- Ease-Out
- Ease-In-Out
Arrows Settings
Layout Settings
Show Icon
Show or hide icon on carousel.
Show Title
Show title element on carousel.
Show Text
Show text element on carousel.
Link Type
Select the link type.
- Button : Link URL with only button.
- All Item: Link your URL with whole carousel item.
Button Text
Type text to show in the button.
Show Back Image
Show or hide the back image.
Connected Widgets Settings
Connected Widgets Settings let you create dynamic, interactive layouts with advanced features. Use remote control widgets for creative layouts or sync item-based widgets together for smooth integration.
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Items Setting
Manage the items of the overlay carousel using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Type text for title.
Content
Type text to show as content.
Link
Type or paste the URL to link with carousel item.
Icon
Choose an icon to display in carousel.
Back Image
Choose an image to display as back image.
Back Image Size
Select appropriate size of back image from given options.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
Schema Setting
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.
Overlay Carousel Widget Styling
There are a number of styling options that allow you to control every aspect of the widget’s design. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Slide Styling
Set the slide alignment, overlay padding, image height, overlay color, opacity, border and radius.
Content Box Styling
You can set the content padding, border width and border color.
Icon Styling
Set the size, color, background, radius, shadow, border, spacing and alignment of icon element.
Title Styling
Here, you can set the title spacing, color, and typography.
Text Styling
You can set the text spacing, color and typography.
Button Styling
Set the button typography, padding, radius, background color, text color, spacing, and border.
Dot Navigation Styling
You can set the navigation dot size, color, spacing, and alignment.
Nav Arrows Styling
Here, you can set the nav arrows spacing, positioning, radius, background, icon color, and border.
Overlay Carousel Design Examples For Elementor
Here are some live use cases for the Overlay Carousel Widget.
Overlay carousel for posts with filter.
Overlay carousel with remote control.
We hope this guide helps you make the most of the Overlay Carousel Widget for Elementor. With its robust features and sleek design, it’s an excellent addition to your website toolkit, perfect for creating stunning, interactive carousel with overlay effect. Should you need further assistance or have any questions, feel free to explore our support resources or reach out to our team.