In this documentation, we will show you how to customize the Search widget presented by Element Pack Pro.

Inserting The Search Widget

Inserting the widget by following this,

1. Search by the Search widget name.
2. Then select the appear widget ( with Element Pack Pro logo T.R corner).
3. After Drag and Drop it on the Elmentor Editor page.

Content Tab

The Content tab controller displayed here offers the flexibility to adjust the layout of the widget according to your preferences.

Search Layout Section

Go to Content > Search Layout

This section provides control for the search.

1. Skin: Select the available skin for the layout (e.g.:Default, Dropbar, Dropdown, Modal).

The Dropbar Skin was selected. Click on the search icon the search box will appear on the bottom right after it.

Select the Dropdown skin. The search box will appear right after it and the Close button feature is included here.

2. Specific Post Type: Select the post type for searching (e.g.: Post, Pages, Type).
3. Placeholder: Set the placeholder.
4. Search Icon: Enable the switcher to show the search Icon.

5. Icon Flip: Enable the switcher to flip the icon.
6. Alignment: Set alignment for the search button.
7. Search Width: Select the width for the search.

8. Ajax Search: Enable the switcher to Ajax search. The following example will demonstrate a live search, where you get search results while you type
9. Content Section / Widget: Enable the switcher to show a specific section.
10. Section / Widget Selector: Set the section or widget selector to show the search result specifically.
11. Link open in new window: Enable the switcher to open the search in a new window.

AJAX Query Section

Go to Content > AJAX Query

Here make the query for the Ajax search.

1. Item Limit: Set the showing limit number for the Ajax search.
   

Please read more to work with the query.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects that are visually appealing and cohesive with the overall design of the interface.

Search Container Section

Go to Style > Search Container

This section provides control for the search container,

1. Background: Set the background for the search.
2. Padding: Set the padding for the inner space.
3. Radius: Make the border radius for the corner of the edge rounded.
4. Box Shadow: Set the shadow for the Box.

Input Section

Go to Style > Input

This section provides control for the input section to make it visually interactive,

1. Typography: Set the typography for the input.
2. Icon Size: Set the size for the Icon.
3. Icon Color: Set the color for the Icon.
4. Icon Background: Select the icon background.
5. Color: Set the color for the background.

The normal State of the Input

6. Text Color: Set the color for the input text.
7. Background Color: Set the background for the color.
8. Placeholder Color: Set the placeholder color.
9. Border Color: Set the border color for the border.
10. Border Size: Set the size for the border.

11. Border Radius: Set the radius for the border.
12. Padding: Set the padding for the input.
13. Box Shadow: Set the shadow for the box.

Focus State for the Input

Set the focus for the input state,

14. Text Color: Set the color for the text.
15. Background Color: Set the background for the input focus.
16. Border Color: Set the color for the border.
17. Box Shadow: Set the shadow for the box.

Ajax Dropdown Section

Go to Style > Ajax Dropdown

This section provides control for the Ajax dropdown,

1. Background: Set the background for the dropdown.
2. Padding: Set the padding for the dropdown.
3. Margin: Set the margin for the outer space.
4. Border Type: Set the type for the border.

5. Border Width: Set the width for the border.
6. Border Color:Set the color for the border.
7. Border Radius: Make the border cornder egdes rounded by setting the radius.
8. Box Shadow: Set the shadow for the box.

Heading

9. Color: Set the Color for the Heading.
10. Typography: Set the typography for the heading.

Title

11. Color: Set the color for the ajax search title.
12. Background Type: Set the type for the background.
13. Color: Set the background Color.
14. Typography: Set the typography for the title.

Hover State of Title

Set the Title for the search.

15. Color: Set the color for the title.
16. Background Type: Set the type for background.
17. Color: Set the background color.

Description

18. Color: Set the color for the description.
19. Hover Color: Set hover color for description. This works on mouse hover.
20. Typography: Set the typography for the description.

Others

21. Color: Set the color for the close button.
22. Hover Color: Set hover color for close button. This works on mouse hover.
23. Background Color: Set the background for the close button.

24. Hover Background Color: Set the background color. The changes will appear on mouse hover.
25. Border Radius: Set the radius for the border.

DIVIDER

26. Color: Set the color for the divider.

No Post

27. Color: Set the color for the no post.
28. Typography: Set the typography for the No post.

Video Assist

You can watch the video above to learn about the Search widget.
Please visit the demo page for examples.

Thanks for staying with us.