Header Search Form

The header builder ( found in Appearance > Customize > Header ) has three rows in which you can easily select and arrange the available components you can find while hovering over each division of the rows.

Add a Header Search Form

Just click on the ➕ symbol and a list of components will appear.

From there you can add the Search Form component.

To open the customizing options, just click on the ⚙️ icon inside the Search Form component. This will open the Search Form panel on the left side, from where you can customize the component.

⚙️ General

Appearance > Customize > Header > Search Form > General

Placeholder

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

📐Layout

Appearance > Customize > Header > Search Form > Layout

Custom padding and margin

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

Appearance > Customize > Header > Search Form > Style

In this area, you will find six options:

Height - sets the height of the search field (in PX).
- it has a reset button ( Desktop | Tablet | Mobile )
Font Size - sets the size of the placeholder (in PX).
- it has a reset button ( Desktop | Tablet | Mobile )
Border Width - sets the width of the border (in PX), and has 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.
- it has a reset button ( Desktop | Tablet | Mobile )
Background color - sets the color of the search field.
- You can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
Text and Border - sets the color of the text inside the field and border.
- You can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.