In this documentation, we will show you how to customize the Mentor Slider Widget by Ultimate Store Kit.
Enable the Mentor Slider Widget
To use the Mentor Slider by Ultimate Store Kit, first, you have to enable the widget.
- Go to WordPress > Ultimate Store Kit Plugin dashboard.
- Then Click the WC Widgets Tab.
- Search the Mentor Slider Widget Name.
- Enable the Mentor Slider Widget.
- Hit the Save Settings Button.
Inserting The Mentor Slider widget
- Go to the Elementor Editor Page and Hit the “+” (Add Element) icon button.
- Search the Mentor Slider widget.
- Drag the widget and drop it on the editor page
Configuring the Content Tab
The Content Tab provides options to manage and structure the core settings of elements. It allows defining the content and functionality to align with design goals.
Layout Section
Go to Content > Layout
1. Item Height: You can set the item height with this option.
2. Image Resolutions: You can select the image resolution here.
3. Show Arrows: Enable the switcher to visible the arrows to the audience.
4. Show Pagination: Enable the switcher to show the page numbers to the audience.
Query Section
Go to Content > Query
1. Source: Select the source for the Heaven Slider. You can select the source from Product, Manual Selection, Current Query & Related option.
2. Product Limit: Set limitations for the appearing product items.
3. Include/Exclude Selection: Select Include / Exclude filter to show/hide specific posts by Terms (Tags/Categories) or Authors.
4. Terms: Select the terms for specifying. You will get to select from Category or Tags.
5 Date: You can select the date range to show the source from this option.
6. Order By: It controls the data you want to display through author, approved, date, content & random.
7. Order: This option controls the order by which data is arranged. There are two types of order. Ascending Order (Starts from the smallest or lowest value and goes to the largest or highest.) & Descending Order (Starts from the largest or highest value and goes to the smallest or lowest.)
Learn more about the Query.
Additional Options Section
Go to Content > Additional Options
In this section, we have 3 sub-sections. They are Content, Badge & Action Button. Let’s explore these sub-sections one by one.
Content Sub – Section
1. Title: By enabling this option the product name/title will be visible2.Title HTML Tag: Set any HTML Tag for Title (H1, H2, H3, H4, H5, H6, p, span). The title tag is essential for both user experience and search engine optimization (SEO).
3.Rating: Enable the switcher to show the rating of the products.
4. Hide Review Text: Enable the switcher to hide the review text.
5. Price: Enable the switcher to show the Price of the products.
6. Category: Enable the switcher to show the Category.
7. Text: Enable the switcher to show the text.
8. Text Limit: You can set limitations to the text with this option.
Badge Sub – Section
1. Sale: Enable the switcher to show the sale badge.
2. Percentage: Enable the switcher to show the percentage badge.
3. Stock Status: Enable the switcher to show the stock status badge.
4. Trending: Enable the switcher to show the trending badge.
5. New: Enable the switcher to show the new badge.
6. Newness Days: This option allows you to set the day limitation to visible the new badge to the audience.
Action Button Sub – Section
1. Add to Cart: Enable the switcher to show the add to cart.
2. Wishlist: Enable the switcher to show the wishlist button.
3. Quick View: Enable the switcher to show the quick view button.
Slider Settings Section
Go to Content > Slider Settings
1. Autoplay: If you enable the Autoplay switcher button, your slider will slide into Autoplay mode.
2. Autoplay Speed: This option allows you to set the speed for automatically playing the carousel.
3. Pause on Hover: If you activate the pause on Hover button, when visitors hover the mouse cursor on the slider, then your slider will hold; otherwise, your slider will slide Autoplay.
4. Grab Cursor: By enable this switch, Your mouse pointer icon will be changed into a grab cursor. Visitors can slide your slider manually with your mouse cursor.
5. Loop: Enable the switch to loop the content.
6. Mousewheel: Enable the switcher to change the slide when scrolling the mouse.
7. Animation Speed: You can set the slider animation speed by using this option. The speed count in (ms).
8. Observer: If you enable the option, then you will be able to use the slider/carousel in any hidden places (such as in tabs, Accordion, etc).
Work with the Style Tab
Slider Section
Go to Style > Slider
1. Background Type: You can change the color of any object background to classic or gradient. In Classic, you can change the background color and also set an image to the background. In the gradient option, you can also set background color along with locations and angle for each breakpoint to ensure the gradient adapts to different screen sizes. Also, you can change the gradient type (Radial & Linear) and positions.
2. Color: You can change the slider background color with this option.
3. Image: You can change the slider background image with this option.
4. Border Type: This option allows you to add borders to your sliders. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.
5. Border Width: Set the thickness of the border by selecting the width.
6. Border Color: You can change the border color by this option.
7. Radius: The Border Radius controls the roundness of the border.
8. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
9. Content Padding: This option allows you to adjust the space & create gaps between the content.
Images Section
Go to Style > Images
1. Background Type: You can change the background type to classic & gradient from here. Here we selected classic.
2. Color: You can change the item background color with this option.
3. Image: You can change the item background image with this option.
4. Border Type: This option allows you to add borders to your items. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.
5. Border Width: Set the thickness of the border by selecting the width.
6. Border Color: You can change the border color by this option.
7. Radius: The Border Radius controls the roundness of the border.
Title Section
Go to Style > Title
1. Color: This option allows you to change the title color.
2. Hover Color: You can change your title hover color by this option.
3. Margin: This option allows you to adjust the space & create gaps around the title.
4. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
5. Text Shadow: You can add a shadow to the text with this option.
6. Text Stroke: The Text Stroke option adds a colored outline around the title text to make it stand out more.
Text Section
Go to Style > Text
1. Color: You can change the text color with this option.
2. Margin: This option allows you to adjust the space & create gaps around the text.
3. Typography: Change the text’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Price Section
Go to Style > Price
1. Regular Color: This option allows you to change the product’s regular price color.
2. Sale Color: This option allows you to change the product’s sale price color.
3. Typography: You can change the price’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Rating Section
Go to Style > Rating
1. Color: You can change the rating color with this option.
2. Active Color: You can change the active rating color with this option.
3. Margin: This option allows you to adjust the space & create gaps around the rating.
Badge Section
Go to Style > Badge
1. Border Type: You can set the border type with this option.
2. Border Radius: This option controls the roundness of the border.
3. Padding: You can adjust space inside the badge with this option.
4. Margin: You can adjust space around the badge with this option.
5. Space Between: You can adjust the space between the badges with this option.
6. Typography: Change the badge’s text font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
7. Display Type: This option allows you display the badges to inline or grid. Here we selected inline.
In this section, we have 5 tabs.These are sale, discount, stock, trending & new. Let’s explore those one bye one.
Sale tab subsection:
1. Color: You can change the sale badge text color with this option.
2. Background Type: This option allows you to change the background type to classic or gradient.
3. Color: You can change the background color with this option.
4. Image: You can set a background image with this option.
Discount tab:
1. Color: You can change the discount badge text color with this option.
2. Background Type: This option allows you to change the background type to classic or gradient.
3. Color: You can change the background color with this option.
4. Image: You can set a background image with this option.
Stock tab:
1. Color: You can change the stock badge text color with this option.
2. Background Type: This option allows you to change the background type to classic or gradient.
3. Color: You can change the background color with this option.
4. Image: You can set a background image with this option.
Trending tab:
1. Color: You can change the trending badge text color with this option.
2. Background Type: This option allows you to change the background type to classic or gradient.
3. Color: You can change the background color with this option.
4. Image: You can set a background image with this option.
New tab:
1. Color: You can change the new badge text color with this option.
2. Background Type: This option allows you to change the background type to classic or gradient.
3. Color: You can change the background color with this option.
4. Image: You can set a background image with this option.
Action Button Section
Go to Style > Action Button
1. Color: You can change the action button color with this option.
2. Background: You can change the background color with this option.
3. Color: You can change the action button hover color with this option.
4. Background: You can change the background hover color with this option.
5. Border Type: This option allows you to add border and changes it’s type to (default, none, solid, double, dotted, dashed, groove) with this option.
6. Border Width: Set the thickness of the border with this option.
7. Border Color: You can change the border color with this option.
8. Radius: This option controls the roundness of the border.
9. Padding: This option controls the inner space of the action button.
10. Margin: This option controls the space around the action button.
11. Tooltip Font: You can change the action button font with this option.
In this section, we have 3 tabs to customize the action buttons separately. These are wishlist, quickview & cart. Let’s start with the wishlist tab –
1. Color: You can change the wishlist button color with this option.
2. Background: You can change the wishlist button background color with this option.
Let’s start with the Hover tab –
3. Color: You can change the wishlist button hover color with this option.
4. Background: You can change the wishlist button background hover color with this option.
Now, let’s proceed to the Quickview tab –
1. Color: You can change the quickview button color with this option.
2. Background: You can change the quickview button background color with this option.
3. Color: You can change the quickview button hover color with this option.
4. Background: You can change the quickview button background hover color with this option.
Last, let’s proceed to the Cart tab –
1. Color: You can change the cart button color with this option.
2. Background: You can change the cart button background color with this option.
3. Color: You can change the cart button hover color with this option.
4. Background: You can change the cart button background hover color with this option.
Category Section
Go to Style > Category
In this section, we have two tabs. One is Normal and the other is Hover. Let’s start with the Normal tab –
1. Color: You can change the category’s color with this option.
2. Background Type: You can change the category’s background type here. There are two options for background type. These are Classic & Gradient.
3. Color: You can change the category’s color with this option.
4. Image: You can change the category’s background image with this option.
5. Border Type: This option allows you to add borders to your items. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.
6. Border Width: Set the thickness of the border by selecting the width.
7. Border Color: You can change the border color by this option.
8. Border Radius: The Border Radius controls the roundness of the border.
9. Padding: Padding allows you to control the internal space around the category.
10. Margin: This option allows you to adjust the space & create gaps around the category border.
11. Space Between: You can adjust the space between categories with this option.
12. Typography: Change the category’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
13. Box Shadow: You can add a shadow and customize it by this option.
Now Let’s proceed to the Hover tab –
1. Color: This option allows you to change the category hover color.
2. Background Type: You can change the background type (Classic or Gradient) by using this option.
3. Color: This option allows you to change the category’s background hover color.
4. Image: This option allows you to change the background image.
5. Border Color: You can set hover color on your border by using this option.
Navigation Section
Go to Style > Navigation
In this section, we have two tabs. One is Normal and the other is Hover. Let’s start with the Normal tab –
1. Arrows Icon: You can select the arrows icon style from here. A total of 23 styles are included here.
2. Color: This option allows you to change the arrow’s Normal color.
3. Background: You can change the arrow’s normal background color by using this option.
4. Border Type: This option allows you to add borders to the arrows. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.
5. Border Width: You can set the border thickness by this option.
6. Border Color: You can set a color on your arrow’s border by using this option.
7. Border Radius: The Border Radius controls the roundness of the border.
8. Padding: Padding allows you to control the internal space around the arrow.
9. Margin: This option allows you to set space around the navigation bar.
10. Typography: Change the category’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
11. Space Between Arrows: This option allows you to adjust the space between two arrows.
Now let’s proceed to the Hover tab –
10. Color: This option allows you to change the arrow’s hover color.
11. Background: You can change the arrow’s background hover color by using this option.
12. Border Color: This option lets you set the Arrow hover border color.
Pagination Section
Go to Style > Pagination
1. Color: You can change the page number color with this option.
2. Active Color: You can change the page number’s active color with this option.
3. Typography: Change the category’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Thumbs Section
Go to Style > Thumbs
1. Background Type: You can change the background type to classic & gradient with this option.
2. Color: You can change the background color with this option.
3. Image: This option allows you to set the background image.
4. Border Type: This option allows you to add borders to the arrows. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.
5. Border Width: Set the thickness of the border with this option.
6. Border Color: You can change the border color with this option.
7. Radius: This option controls the roundness of the border.
8. Border Color: You can change the border hover color with this option.
All done! You have successfully customized the Mentor Slider widget on your website.
Video Assist
You can also watch the video tutorial learn more about the Mentor Slider Widget. Please visit the demo page for examples.
Thanks for being with us.
