The Search Icon Component - Neve Header / Footer Builder

For more details check out the full Neve documentation and Neve PRO documentation.

📝Note: This component is part of both Neve and Neve PRO.

🧰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.

There are three panels with customizing options for this component, which allow you to create the desired header / footer:

When you click on the ⚙️ icon, the General tab will appear on the left side.

This option allows the user to add the desired text that will appear on the blank field of the Search Icon:

There are three options available for the open behavior of the Search Icon:

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 ).

the style tab is divided into two main areas of customization:

In this area you will find options that will be applied only to the search icon:

Icon Size - sets the size of the 🔍, and it has a reset button, to undo the changes
Color - sets the color of the 🔍and you can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
Hover Color - sets the color of the 🔍 when you hover with the mouse, and you can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.

In this area, you will find options that will be applied to the field that appears after clicking on the search icon:

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.