The Search Form Component - Neve Header / Footer Builder
📝Note: This component is part of the Neve Header / Footer Builder.
The Search Form component is similar to the Search Icon, but in this case, it will be displayed the whole form, not just the icon.
🧰Using the Component
- 1
- Start by adding the component into the rows by clicking on the ➕ button and selecting the component.
- 2
- Open the component's settings to customize it by clicking on the ⚙️icon.
📝 Note: This component is available in two instances: Search Form and 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:
| General |
Layout |
Style |
⚙️General Panel
When you click on the ⚙️ icon, the General tab will appear on the left side.
Placeholder
This option allows the user to add the desired text that will appear on the blank field of the Search Form:
📐Layout Panel
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:
- Height - sets the height of the search field (in PX), with a reset button ( Desktop | Tablet | Mobile ).
- Font Size - sets the size of the placeholder (in PX), with a reset button ( Desktop | Tablet | Mobile ).
- Border Width - sets the width of the border (in PX), having the link option, to change the values at the same time ( Desktop | Tablet | Mobile ).
- Border Radius - rounds the corners of the field (in PX), and has the link option, to change the values at the same time.
- 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.
