The Advanced Search Form Component - Neve Header / Footer Builder
📝Note: This component is part of the Neve Header / Footer Builder.
The Advanced Search Form component enhances the basic search form by adding controls on what to search and what to exclude from the search.
🧰 Using the Component
- Start by adding the component into the rows, by clicking on the ➕ button and selecting the component.
- Open the component's settings to customize it by clicking on the ⚙️icon.
📝 Note: This component is available in two instances: Advanced Search Form and Advanced Search Form 1.
🔮Customizing the Component
There are three panels with customizing options for this component, which allow you to create the desired header / footer:
Placeholder - this option allows the user to add the desired text that will appear on the blank field of the Search Form.
Exclude Sticky Posts - these are the posts that appear at the top of your blog page if you have previously set them.
Search options - extend the search through your website to post title, post excerpt, post content, category / tag title or description, by enabling any of these options from the tab. You can also restrict the search area to specific post types by picking them from the list.
In the Layout tab, you also have access to advanced positioning options like Padding and Margin, available in PX, EM, REM, and %, with a link button that helps establish the same dimension for all the directions ( Desktop | Tablet | Mobile ).
🖌 Style Panel
In this area, you will find options that will be applied to the field that appears, such as:
- Height - sets the height of the search field.
- Font Size - sets the font size of the text that appears as a placeholder.
- Border Width and Border Radius - adjust the width of the border as well as its radius.
- Background color - sets the color of the search field, and you can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
📝 Note: You can boost the component's appearance by using the Gradient option that can be accessed from the background color tab.
- Text and Border - sets the color of the text inside the field and border, and you can choose one of the global colors ( theme's default colors ) by clicking on the 🌐 button.
- Button Appearance - you can display it as an icon button, which will allow you to choose from predefined icons or insert your own SVG code, or display it as a text button, allowing you to insert the text and customize the colors of text and background.