How to use the Search Widget by Element Pack Pro

  • BdThemes
  • How to use the Search Widget by Element Pack Pro

Table Of Contents

How to use the Search Widget by Element Pack Pro

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

Inserting The Search Widget

Search and insert 2 - BdThemes

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

content skin - BdThemes

This section provides control for the search.

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

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

content skin dropdown - BdThemes

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

layout 1 1 - BdThemes
  1. Specific Post Type: Select the post type for searching (e.g.: Post, Pages, Type).
  2. Placeholder: Set the placeholder.
  3. Search Icon: Enable the switcher to show the search Icon.
layout 2 - BdThemes
  1. Icon Flip: Enable the switcher to flip the icon.
  2. Alignment: Set alignment for the search button.
  3. Search Width: Select the width for the search.
layout 3 - BdThemes
  1. Ajax Search: Enable the switcher to Ajax search. The following example will demonstrate a live search, where you get search results while you type
  2. Content Section / Widget: Enable the switcher to show a specific section.
  3. Section / Widget Selector: Set the section or widget selector to show the search result specifically.
  4. Link open in new window: Enable the switcher to open the search in a new window.

AJAX Query Section

Go to Content > AJAX Query

ajax search - BdThemes

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

search container - BdThemes

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

inout - BdThemes

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

input normal - BdThemes
  1. Text Color: Set the color for the input text.
  2. Background Color: Set the background for the color.
  3. Placeholder Color: Set the placeholder color.
  4. Border Color: Set the border color for the border.
  5. Border Size: Set the size for the border.
input normal 2 - BdThemes
  1. Border Radius: Set the radius for the border.
  2. Padding: Set the padding for the input.
  3. Box Shadow: Set the shadow for the box.

Focus State for the Input

input focus - BdThemes

Set the focus for the input state,

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

Ajax Dropdown Section

Go to Style > Ajax Dropdown

ajax dropdown - BdThemes

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.
ajax dropdown 2 - BdThemes
  1. Border Width: Set the width for the border.
  2. Border Color:Set the color for the border.
  3. Border Radius: Make the border cornder egdes rounded by setting the radius.
  4. Box Shadow: Set the shadow for the box.

Heading

ajax dropdown heading 2 - BdThemes
  1. Color: Set the Color for the Heading.
  2. Typography: Set the typography for the heading.

Title

ajax dropdown title - BdThemes
  1. Color: Set the color for the ajax search title.
  2. Background Type: Set the type for the background.
  3. Color: Set the background Color.
  4. Typography: Set the typography for the title.
Hover State of Title
ajax dropdown title hover - BdThemes

Set the Title for the search.

  1. Color: Set the color for the title.
  2. Background Type: Set the type for background.
  3. Color: Set the background color.

Description

ajax dropdown description - BdThemes
  1. Color: Set the color for the description.
  2. Hover Color: Set hover color for description. This works on mouse hover.
  3. Typography: Set the typography for the description.

Others

ajax dropdown others close button - BdThemes
  1. Color: Set the color for the close button.
  2. Hover Color: Set hover color for close button. This works on mouse hover.
  3. Background Color: Set the background for the close button.
ajax dropdown others close button 2 - BdThemes
  1. Hover Background Color: Set the background color. The changes will appear on mouse hover.
  2. Border Radius: Set the radius for the border.
DIVIDER
ajax dropdown others divider - BdThemes
  1. Color: Set the color for the divider.
No Post
ajax dropdown others no post - BdThemes
  1. Color: Set the color for the no post.
  2. 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.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge