WP Search

This block allows you to add the WordPress search field on your page. This will help your users to search for the required information easily.

How To Add The WP Search Block

1. Open a page or a post and click on the plus icon to add a new block and look for the WP Search or you can search for it if it doesn’t pop up quickly for you.

2. By default, you'll get the below design-

How To Configure The WP Search Block

To configure the WP Search block, switch to the ‘Content’ tab.

Content

Under the Content Tab, General Settings like Layout and Width are available.

Layout- There are two types of layouts available for WP Search block - Classic and Minimal.

Placeholder- This setting has a text area to enter the placeholder for the search block.

Input Width- This allows you to set the width for your block in percentage or pixels.

How To Style The WP Search Block

Under the Style Tab, various style settings for Input Box, Search Button, and Search Icon are available.

Input Box- This panel has Color, Border, Padding, and Typography Settings for Input Box.

• Text Color - Choose the color for the text you type in the input box.

• Background Color- Choose the background color for the input box.

• Border - This panel has settings for border style, border color, border width, border radius, and box shadow.

• Padding- This panel allows you to add padding to your input box, with different values for top, bottom, left and right side for mobile, tablet, and desktop.

• Typography - Choose the values for font family, font size, font weight, line height for the input box text.

Button

This panel will be available if you select the ‘Classic’ layout. It has settings for the search button of the WP block.

1. Type - You can choose if you want the search button to have an icon or text.

2. Width- Set the width of the button in pixels.

3. Background Color- Choose the background color for your button.

4. Background Color Hover- Choose the background color of the button when you hover on it.

Text- This setting provides a text area to set the text for the search button.

Typography- This Panel is available if you select ‘Text’ as button type. It allows you to choose the values for font family, font size, font weight, line height for the button text.

Text Color- This option is available if you select ‘Text’ as button type. It allows you to choose the color of your button text.

Text Color Hover- This option is available if you select ‘Text’ as button type. It allows you to choose the hover color of your button text.

Icon

This panel will be available if you select ‘button’ as button type. It has styles settings for the button icon.

• Icon Size- Set the icon for your button icon in pixels.

• Icon Color- Choose the color for your button icon.

• Icon Color Hover- Choose the hover color for your button icon.