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

Enable the EDD Standard Carousel Widget

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

1. Navigate to Other Widgets Tab.
2. Search by the EDD Standard Carousel Widget Name.
3. Enable the EDD Standard Carousel Widget.
4. Hit the Save Settings Button.

Inserting The EDD Standard Carousel widget

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the EDD Standard 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

The layout section contains the basic controls of the featured box. Make changes by following the instruction.

1. Columns: Set the columns for the layout section.
2. Item Gap: Set the gap between the columns.
3. Alignment: Set the alignment for the Items.
4. Image Resolution: Set the resolution for the image. Different resolution appear

Query Section

Go to Content > Query

1. Source: Select the source for the carousel item.
2. Product Limit: Set the limitation for the product item.
3. Include/Exclude: Include or Exclude item your wish.

Please read more about the query section.

Additional Section

Go to Content > Additional

1. Title: Enable the switcher to show the Title of the carousel item.
2. 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. Category: Category can be shown by enabling the switcher. All the category will be appear.
4. Category HTML Tag: Set any HTML Tag for Category ( H1, H2, H3, H4, H5, H6, p, span ). The Category tag is essential for both user experience and search engine optimization (SEO).
5. Price: The Price will appear on the carousel item if enable the switcher.

Navigation Section

Go to Content > Navigation

1. Navigation: Select available navigation items ( Arrows, Arrows and Dots, Arrows and Fraction, Dots, Progress bar, None).
2. Arrows Position: Set the position of the arrows ( Center, Top Right, Top Left, Bottom Left, Bottom Right ).
3. Show Scrollbar?: The scrollbar appear below the carousel items slides. Enable the switcher to show the scrollbar.
4. Arrows Icon: Select multiple icon from the arrows icon list section.
5. Hide Arrows on mobile: The feature will turn off the arrows for the mobile devices only if it is enabled.

Carousel Settings Section

Go to Content > Carousel Settings

1. Layout: Select the layout of carousel ( Carousel, Cover flow ).
2. Autoplay: The Carousel item will play automatically when enable the Autoplay feature.
3. Autoplay Speed: Set the speed for automatically playing the carousel.
4. Pause on Hover: On Mouse hover over the carousel will pause. Enable the switcher to activate it.
5. Slides to Scroll: Select the sliding items and it will slide according to it.

6. Center Slide: Enable the switcher to slide the content in centre.
7. Grab Cursor: Enable the is to grab the slider, The cursor pointer will turn into grab feature.
8. Loop: Enable the switcher to loop the content.
9. Animation Speed: Set the speed for animation. The speed count in ( ms ).
10. Observer: Enable the switcher to work with the observer.

11. Item Match Height: This feature is to make all the item height same, Enable the switcher to match the same height of the carousel item.

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: Select the Background type for the carousel item. Select the Color or Gradient for the background.
2. Color: Select the color from the color plate of it.
3. Border Type: Border for the items ( Solid, Double, Dashed, Dotted, etc. ).
4. Border Width: Set the thickness of the border by selecting the width.
5. Border Color: Set the color for the border.

6. Border Radius: Make the border radius by setting the number on there.
7. Box Shadow: Make the shadow for the box item.
8. Item Padding: Set the padding for the items.
9. Content Padding: Make space for the inner content of the items.

Hover Tab

1. Background Type: Select the Background type for the carousel item. Select the Color or Gradient for the background.
2. Color: Select the color from the color plate of it.
3. Border Color: Set the border color for the hover item of carousel.
4. Box Shadow: Set the shadow for the carousel item.

Title Section

Go to Style > Title

1. Color: Set the color for the Title.
2. Hover Color: Set hover color for the title section.
3. Margin: Set the margin for it.
4. Typography: Set the typography for the title.

Category Section

Go to Style > Category

Normal Tab

1. Color: Set the color for the category text.
2. Background Type: Select the background type for the category item and set it by following this.
3. Border Type: Set the type for the border ( Solid, Dotted, Dashed, etc ).
4. Border Width: Set the width for the border item.
5. Border Color: Select the border color of it.

6. Border Radius: Set the border radius by following the controls.
7. Padding: Set the padding to make inner space of it.
8. Margin: Set the margin for the outer space of the category button.
9. Typography: Set the typography for the category text item.
10. Box Shadow: Make the box shadow for the items.

Hover Tab

The changes will appear on mouse hover over the category items.

1. Color: Set the color for the category text.
2. Background Type: Select the background type for the category items, Select the color or gradient and set according to it.
3. Border Color: Set the color for the border item.

Action Button Section

Go to Style > Action Button

VIEW DETAILS

1. Color: Set the color for the view details button.
2. Background Type: Select the background type for the category items, Select the color or gradient and set according to it.

Hover

3. Color: Set the color for the View Details Button.
4. Background Type: Select the background type for the View Details item and Select the color or gradient and set according to it.
5. Border Type: Set the type for the border ( Solid, Dotted, Dashed, etc ).
6. Border Width: Set the width for the border item.
7. Border Color: Select the border color of it.

8. Radius: Set the border radius by following the controls
9. Padding: Set the padding for the button to make inner space.
10. Margin: Set the margin for the button to get outer space.
11. Space Between: Make space between the buttons .
12. Typography: Set the typography for the buttons.

PURCHASE

1. Color: Set the color for the purchase button text.
2. Background Type: Select the background type for the Purchase Button and Select the color or gradient and set according to it.

Price Section

Go to Style > Price

1. Color: Set the color for the price button.
2. Margin: Set the margin for the button.
3. Typography: Set the typography for the button.

Navigation Section

Go to Style > Navigation

1. Color: Set the color for the dots.
2. Active Color: Set the active color.
3. Border Radius: Make the border radius for the dots.
4. Width(px): Set the width for the dots.
5. Height(px): Set the height for the dots.

Video Assist

Video Tutorial coming soon! Please visit the demo page for examples.

Thanks for being with us.