The Material Carousel widget for Elementor lets you display multiple content items with icons in a sleek, dynamic carousel format. Designed to enhance visual flow and interactivity, this widget is ideal for creating engaging, modern layouts that capture your audience’s attention. With its smooth transitions and versatile customization options, the Material Carousel Widget is a must-have for elevating the design of your Elementor site.
Let’s look at each of the options in the Material Carousel widget for Elementor below.
Elementor Material Carousel Video Tutorial
Add a Material 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 “Material Carousel”
- Hover over the widget in the search results and click install
- Add the “Material Carousel” widget to any Elementor Page
Source Settings
The Material 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.
WordPress Posts
Display WordPress posts dynamically in material carousel, including custom post types and fields for maximum flexibility.
Meta Field
Use Meta as an item source for your material carousel to dynamically display and manage content from your Meta data.
JSON or CSV
Load your material 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 material carousel to dynamically display and manage taxonomy terms from your WordPress site.
Users
You can use WordPress Users as an item source for your material carousel to display and manage dynamic content from your site’s user data.
Menu
Use your WordPress Menu as a source for the material carousel to dynamically display and manage menu items in a visually engaging layout.
API Integrations
Integrate an API into your material carousel to dynamically fetch and display data from external systems or services.
General Settings
Loop
Enable infinite looping so your carousel seamlessly starts over after the last slide.
Autoplay
Activate autoplay to let your carousel scroll automatically for a dynamic experience.
Number of Items
Set the number of items to display in carousel.
Margin Between Slides
Adjust the spacing or offset between carousel slides for a cleaner and more customizable layout.
Transition Speed
Customize the speed of carousel transitions to create a smooth, visually engaging, and personalized user experience.
Autoplay Interval
It allows you to control the time delay between automatic transitions in a carousel when autoplay is enabled.
Center
Highlight the center slide to draw attention and create a more engaging layout.
Open Links In New Tab
Enable this option to open linked carousel items in a new browser tab, enhancing user convenience.
Change on Click
Choose the perfect size for carousel images to optimize quality and layout:
- Full
- Large
- Medium Large
- Medium
- Thumbnail
- 1536x1536
- 2048x2048
Layout Settings
Show Arrows
Show/Hide the navigation arrows.
Show Dots
Show/Hide the navigation dots.
Show Title
Show/Hide the title.
Show Subtitle
Show/Hide the subtitle.
Show Button
Show or hide the button on carousel.
Arrows Settings
Left Arrow
Choose icon for left arrow.
Right Arrow
Choose icon for right arrow.
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 material 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.
Icon
Choose an icon to display in carousel.
Button Text
Type text to show in button.
Item Link
Type or paste the URL to link with carousel item.
Material 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.
Item Styling
Set the item direction, vertical and horizontal alignment, padding, background, radius, border, and box shadow.
Item Top Styling
Set the item top height, border radius, padding, background, icon color, and icon size.
Content Styling
You can set the content padding, background, border radius, and alignment.
Title Styling
Here, you can set the title spacing, color, and typography.
Text Styling
You can set the text spacing, color, and typography.
Nav Dots Styling
You can style the navigation dots size, color, spacing, and alignment.
Nav Arrows Styling
Here, you can set the spacing, position, radius, background, icon size, and icon color of navigation arrows.
Material Carousel Design Examples For Elementor
Here are some live use cases for the Material Carousel Widget.
Material carousel for vehicle rentals.
Material carousel for web agency services.
We hope this guide has helped you understand how to use the Material Carousel Widget for Elementor to elevate your website’s design and functionality. With its user-friendly interface and customizable features, this widget makes it simple to create captivating carousels that leave a lasting impression. If you have any questions or need further assistance, don’t hesitate to reach out.
