In this documentation, we will show you how to customize the Featured Box Widget by Ultimate Store Kit.

Enable the Featured Box Widget

To use the Featured Box 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 Featured Box Widget Name.
3. Enable the Featured Box Widget.
4. Hit the Save Settings Button.

Inserting The Featured Box widget

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the Featured Box 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 any changes by following the instruction.

Content Tab

1. Title: Set the title of the featured box.
2. Meta Text: Set the text for the meta section.
3. Button Text: Set the text for the button.
4. Button Link: Set the link for the button.

5. Image: Set the image for the featured box.
6. Image Resolution: Image resolution is crucial to display the image. Available image resolution ( Full, Medium, Small, Thumbnails, ect.).
7. Position: Set the position for the image ( Center Center, Center Top, Center Right, etc.) Adjust position according to your preference.
8. Repeat: Repeating controls are ( No-Repeat, Repeat, Repeat-x, Repeat-y) select any to adjust image.
9. Display Size: Set the display size for the image ( Cover, Contain, Custom, Auto, Default ).

Optional Tab

1. Title Link: Set the link for the title to navigate.
2. Text: Optional Text appear right after the Title. Set the optional text.

Additional Section

Go to Content > Additional

These controls are available for adjusting feature for featured box.

1. Height: Set the height for the featured box, Input the value as height preferable, The measure are in px.
2. Content Width: Set the width for the content. It will not impact on the while featured box.
3. Content Position: Set the position for the content.
4. Alignment: Adjust the position of the alighnemt.

5. Show Title: Enable the switcher to show the title for the featured box.
6. 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).
7. Show Text: Enable the switcher to show the text.
8. Show Meta: Enable the switcher to show the meta content on featured box.

9. Show Button: Enable the switcher to show the button.
10. Badge: Enable the switcher to show the badge for the featured box.
11. Show Wrapper Link: Enable the switcher to show the wrapper link input field and works while box as link.
12. Wrapper Link: Set the link for the wrapper navigation.

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.

Featured Box Section

Go to Style > Featured Box

Normal Tab

1. Background Type: Set the background type color and set color for the background of the featured box.
2. Border Type: Set the border type solid for the border area ( None, Solid, Dashed, Dotted ).
3. Border Width: Set the width for the border. The value as for the thickness of border.

4. Border Color: Set the border color.
5. Border Radius: Make the border corner radius by setting the value.
6. Padding: Make inner space for the content to set the padding.
7. Box Shadow: Set the box shadow for the content.

Hover Tab

The changes will appear on hover overing the mouse.

1. Background Type: Set the Background Type Color for the background.
2. Color: Set the color for the text
3. Border Color: Set the border color.
4. Box Shadow: Make the shadow for the box.

Title Section

Go to Style > Title

1. Color: Set the color for the Title.
2. Hover Color: Set the color for the hover.
3. Margin: Set margin to adjust the position Title from the another content.
4. Typography: Set the typography for the Title and set Fonts, Font Family, Size, Weight, Letter Spacing etc.

Text Section

Go to Style > Text

1. Color: Set the color for the Text.
2. Margin: Set margin to adjust the position of Text from the another content.
3. Typography: Set the typography for the Text and set Fonts, Font Family, Size, Weight, Letter Spacing etc.

Meta Section

Go to Style > Meta

1. Color: Set the color for the Meta.
2. Hover Color: Set the color for the hover for the meta.
3. Margin: Set margin to adjust the position Meta from the another content.
4. Typography: Set the typography for the Meta and set Fonts, Font Family, Size, Weight, Letter Spacing etc.

Button Section

Go to Style > Button

Normal Tab

1. Color: Set the color for the button text.
2. Background Type: Set the background type color and choose color from the color plate.
3. Border Type: Set the border type for the border of the button.
4. Border Width: Set width for the border.

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

9. Typography: Set the typography for the button.
10. Box Shadow: Set the box shadow for the button.

Hover Tab

The changes will appear on mouse hover over on it.

1. Color: Set the color for button.
2. Background Type: Set the background type for the background.
3. Border Color: Set the border color for the button.

Badge Section

Go to Style > Badge

1. Position: Set the position for the badge.

Normal Tab

2. Color: Set the color for the badge.
3. Background Type: Set the background type color and choose color from the color plate.
4. Border Type: Set the border type for the border of the badge.
5. Border Width: Set width for the badge.

6. Padding: Set the padding.
7. Margin: Set the margin for the badge.
8. Typography: Set the typography for the badge.

9. Box Shadow: Set the box shadow for the button.
10. Offset: Set the position for the badge.

Hover Tab

1. Color: Set the color for the badge text.
2. Background Type: Set the background type color for the badge.
3. Border Color: Set the border color for the badge.

Video Assist

Please visit the demo page for examples.

Thanks for being with us.