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.

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