The Advanced Search Form Component - Neve Header / Footer Builder

📝Note: This component is part of the Neve Header / Footer Builder.

The Advanced Search Form component enhances the basic search form by adding controls on what to search and what to exclude from the search.

🧰 Using the Component

Start by adding the component into the rows, by clicking on the ➕ button and selecting the component.

Open the component's  settings to customize it by clicking on the ⚙️icon.

📝 Note: This component is available in two instances: Advanced Search Form and Advanced 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 Panel

Placeholder - this option allows the user to add the desired text that will appear on the blank field of the Search Form.

Exclude Sticky Posts - these are the posts that appear at the top of your blog page if you have previously set them.

Search options - extend the search through your website to post title, post excerpt, post content, category / tag title or description, by enabling any of these options from the tab. You can also restrict the search area to specific post types by picking them from the list.

 📐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, such as:

  • Height - sets the height of the search field.
  • Font Size - sets the font size of the text that appears as a placeholder. 
  • Border Width and Border Radius - adjust the width of the border as well as its radius.
  • 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.

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

Still need help? Contact Us Contact Us