In this documentation, we will show you how to customize the Sub Category Carousel Widget by Ultimate Store Kit.

Enable the Sub Category Carousel Widget

To use the Sub Category Carousel from Ultimate Store Kit Widget must be enabled. Navigate to WordPress Dashboard > Ultimate Store Kit Plugin dashboard.

1. Navigate to WC Widgets Tab.
2. Search by the Sub Category Carousel Widget Name.
3. Enable the Sub Category Carousel Widget.
4. Hit the Save Settings Button.

Inserting The Sub Category Carousel widget

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the Sub Category Carousel widget name.
3. The widget will appear, Check the Ultimate Store Kit logo on top right corner.
4. Select the widget then Drag 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 to define the content and functionality to align with design goals.

Layout Section

Go to Content > Layout

1. Columns: Set the columns for the sub category carousel layout. It support 1 to 6 columns.
2. Item Gap: Set the gap between the items. Use seek bar or input the value to add the gaps.
3. 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).

4. Image Resolution: Select the desired resolution, such as thumbnail, full size, or other predefined dimensions.
5. Direction: Set the direction of the content. Right, Down, Left, Up direction are available. Set the position according to it.
6. Text Align: Set the alignment of the text; Left, Center, Right, and Justified are available.

Query Section

Go to Content > Query

1. Categories: Select the categories by clicking on the ” + ” icon. Here appear the available category.
2. Order By: Set the order by following the Name, Slug and Count.
3. Order: Arrange according to the order DESC or ASC,
4. Hide Empty: Enable the switcher to hide the empty sub category.

Navigation Section

Go to Content > Navigation

1. Navigation: Select the option for the navigation. Select the navigation of it. Arrows, Dots, Progress, Arrows and Dots, Arrows and Fraction, None.
2. Arrows Position: Set the position of the arrows, It will be Top Left, Right, Center, Bottom Right.
3. Show Scrollbar?: Enable the switcher to show the scrollbar. It appear while sliding.
4. Arrows Icon: Select the Icon for the arrows. Different types of icon are available on there.
5. Hide Arrows on Mobile: Enable the switcher to hide the arrows for mobile device.

Carousel Settings Section

Go to Content > Carousel Settings

1. Layout: Select the layout style for the carousel. Available options include Carousel and Cover flow.
2. Autoplay: Enable the switcher to automatically play the carousel.
3. Autoplay Speed: Set the speed for the autoplay. The the input set in milisecond.
4. Pause on Hover: Enable the switcher. It will pause the carousel item on mouse hover.

5. Slides to Scroll: Select the slide number to scroll at a time.
6. Center Slide: Enable the switcher to show the slider centre.
7. Grab Cursor: Enable this option to show a grab cursor, allowing to drag the slider manually.
8. Loop: Enable this option to make the carousel loop continuously.

9. Animation Speed (ms): Set the speed for the animation. The speed count in mili second.
10. Observer: Enable this option to detect changes in the carousel’s elements and update the layout automatically.
11. Match Padding: Adjust the padding to align the box shadow with the content area.
12. Item Match Height: Enable this option to make all items equal in height.

Item Settings Section

Go to Content > Item Settings

1. Autoplay: Enable this option to automatically play the carousel images.
2. Loop: Enable this option to make the carousel loop continuously.
3. Delay: Set the delay time before the autoplay starts.
4. Speed: Define the transition speed of the carousel.
5. Effect: Select a visual effect for the image transitions.

Designing with the Style Tab

The Style Tab offers a range of options to enhance the visual appearance of elements, enabling precise adjustments and creative design possibilities. It helps create polished and engaging layouts effortlessly.

Item Section

Go to Style > Item

Normal Tab

1. Background Type: Set the background type color and choose the background color from the color plate.
2. Border Type: Set the border type solid of the items. Select available border types None, Solid, Dashed, Dotted, Grove.
3. Border Width: Adjust the thickness of the border around the element.

4. Border Color: Set the border color of the items.
5. Border Radius: Make the border corner edges rounded by setting the readius.
6. Padding: Make inner space by setting the padding of it.

7. Margin: Set the margin for the outer space of the item.
8. Space Between: Make gap between the items.
9. Box Shadow: Set the box shadow of the item.

Hover Tab

1. Border Color: Select the border color for the item.
2. Box Shadow: Make a box shadow of the sub category item.

Image Section

Go to Content > Image

1. Height: Set the height for the image.
2. Width: Set the width for the image.
3. Border Type: Select the border type from available, Solid, Dotted, Dashed, Grove.

4. Border Width: Set the width for the border.
5. Border Color: Choose the border color from there.
6. Border Radius: Make the border corner edges rounded by selecting the radius.

Title Section

Go to Style > Title

1. Color: Choose color for the Title.
2. Margin: Make spacing by setting the margin.
3. Typography: Select typography for the title. Available typography options are Font Family, Size, Weight, Transform, Style, Line Height, Word Spacing etc.

Sub Category Section

Go to Style > Sub Category

1. Color: Choose the color for the sub category.

2. Hover Color: Set the hover color. The changes will appear on mouse hover.
3. Margin: Set outer space by selecting the margin.
4. Typography: Select typography for the Sub Category. Available typography options are Font Family, Size, Weight, Transform, Style, Line Height, Word Spacing etc.

Read More Section

Go to Style > Read More

1. Color: Choose the color for the Read More Button. The button appear on mouse hover over the item.

2. Hover Color: Set the hover color for the read more item. Hover over it and set the color.
3. Margin: Set the margin for the read more item.
4. Typography: Select the typography of the read more button.

Navigation Section

Go to Style > Navigation

ARROWS

Normal Tab

1. Color: Select the color for the arrows item.
2. Background: Set the background for the arrows item.
3. Border Type: Select the border type solid, dashed, dotted, groved, etc.
4. Border Width: Set the thickness for the border.

5. Border Color: Set the color for the border.
6. Border Radius: Make the border radius.
7. Padding: Set the padding for the border.

8. Size: Set the size for the arrows.
9. Space Between Arrows: Make the space between the arrows.

OFFSET

1. Arrows Vertical Offset: Set the offset for the vertical position.
2. Arrows Horizontal Offset: Set the horizontal position of the arrows.

Hover Tab

1. Color: Set the color for the arrows.
2. Background: Set the background of the arrows.
3. Border Color: Select the border color of it.

Video Assist

Watch the Tutorial to learn more.

Please visit the demo page for examples.
Thanks for being with us.