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. From there you can add any widget from the library, by clicking on the ➕ button.

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 - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions  ( Desktop | Tablet | Mobile ).
  • Margin - available in PX, EM, and %, with a link button that helps with establishing 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.


🗂Useful Resources

🎥 Video - how to create a Custom Header

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.