Site Search Widget

The site Search widget is a control element. It is used to help the user to search and retrieve information from the database.

Site Search Widget Sample

Content

• General Settings

  • Layouts: choose the layout for the search box (Normal, Popup).

  • Search Placeholder: set the search input placeholder text.

  • Button:

    • Show Submit button: Turn it off to hide the submit button, in this case, you write then hit enter.
    • Submit button label: You can add a text inside the submit button.
    • Submit button icon: You can change the icon, upload a custom one, or delete it completely.

  • Is Product Search: Switch it on in case that you use WooCommerce, and you need to search for the products.

• Popup Settings: in case that you choose popup layout

  • Full Screen Popup: turn it on to show the search box on full-screen mode.
  • Popup Trigger Icon: You can change the icon, upload a custom one, or delete it completely.
  • Pop Close Button Icon: You can change the icon, upload a custom one, or delete it completely.
  • Show Effect: you can choose from different animation effects or disable them.

Style

• Form

  • Background Color: set the background color for the search form.
  • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  • Margin: specify the margin for the search form.
  • Border: here you can select the needed type of border to use for the search form.
  • Border Radius: here you can set the border-radius to make the angles more smooth and round.
  • Box Shadow: here you can apply the shadow for the search form and change the shadow’s settings, such as color, blur, spread, and position.

• Input

  • Typography: turn the option on to view the typography settings.

  • Normal – Focus: you can switch between the modes for the following options:

    • Background Color: set the background color for the input.
    • Text Color: set the text color for the input.
    • Placeholder Color: set the placeholder text color for the input.
    • Box Shadow: here you can apply the shadow for the input and change the shadow’s settings, such as color, blur, spread, and position.

  • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.

  • Margin: specify the margin for the input.

  • Border: here you can select the needed type of border to use for the input.

  • Border Radius: here you can set the border-radius to make the angles more smooth and round.

• Submit

  • Typography: turn the option on to view the typography settings.

  • Icon Size: set the submit button icon size.

  • Normal – Hover: you can switch between the modes for the following options:

    • Background Color: set the background color for the submit button.
    • Text Color: set the text color for the submit button.
  • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  • Margin: specify the margin for the submit button.
  • Border: here you can select the needed type of border to use for the submit button.
  • Border Radius: here you can set the border-radius to make the angles more smooth and round.
  • Box Shadow: here you can apply the shadow for the submit button and change the shadow’s settings, such as color, blur, spread, and position.

• Popup Box

  • Popup Content Width: set the popup box width in PX or %.

  • Background Color: set the background color for the popup box.

  • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.

  • Margin: specify the margin for the popup box.

  • Border: here you can select the needed type of border to use for the popup box.

  • Border Radius: here you can set the border-radius to make the angles more smooth and round.

  • Box Shadow: here you can apply the shadow for the popup box and change the shadow’s settings, such as color, blur, spread, and position.

  • Popup Position

    • Vertical Position by: choose Top or Bottom to set the position.
    • Top Indent: set the top or bottom indent for the popup.
    • Horizontal Position by: choose left or right to set the position.
    • Left Indent: set the left or right indent for the popup.

• Popup Trigger

  • Icon Size: set the popup trigger button icon size.

  • Normal – Hover: you can switch between the modes for the following options:

    • Background Color: set the background color for the popup trigger button.
    • Text Color: set the text color for the popup trigger button.

  • Alignment: align the popup trigger button [left – right – center].

  • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.

  • Margin: specify the margin for the popup trigger button.

  • Border: here you can select the needed type of border to use for the popup trigger button.

  • Border Radius: here you can set the border-radius to make the angles more smooth and round.

  • Box Shadow: here you can apply the shadow for the popup trigger button and change the shadow’s settings, such as color, blur, spread, and position.

• Popup Close

  • Icon Size: set the popup close button icon size.

  • Normal – Hover: you can switch between the modes for the following options:

    • Background Color: set the background color for the popup close button.
    • Text Color: set the text color for the popup close button.
  • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  • Margin: specify the margin for the popup close button.
  • Border: here you can select the needed type of border to use for the popup close button.
  • Border Radius: here you can set the border-radius to make the angles more smooth and round.
  • Box Shadow: here you can apply the shadow for the popup close button and change the shadow’s settings, such as color, blur, spread, and position.