Help Center

How to Add an AJAX Search to Website’s Header with JetSearch

How to Add an AJAX Search to Website’s Header with JetSearch

When it comes to customizing your header, the great functionality is to embed AJAX search functionality to allow visitors always use the chance to find what they need.

Before you start, check the tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg);

  • JetSearch plugin installed and activated.

Adding the AJAX Search to the Header in Elementor Editor

Navigate to the WordPress Dashboard. On the left panel, you should look for the Crocoblock > Theme Templates directory and click on it.

theme parts header

Select the Header template and click on the “Edit with Elementor” button.

header in the elementor editor

Search for the AJAX Search widget and drag and drop it to the needed section.

ajax search widget

The JetSearch plugin allows changing every element of the widget; e.g., you can easily customize the placeholder text and the content of the search results.

Proceed to the Style tab and apply the needed changes to the widget’s design.

style the ajax search widget

Applying the AJAX Search in Gutenberg

JetSearch works not only with the Elementor page builder. This plugin allows applying a Search block using Gutenberg as well.

Edit the header built with Gutenberg. Click on the “Add block” button and find the AJAX Search block.

ajax search block

Once you add the block, proceed to the Block tab and customize the block’s elements.

customization of the Gutenberg ajax search block

You can style the AJAX Search block with the help of the JetStyleManager plugin.

Click on the “Block Style” button in the upper right corner of the editing window and style the block, so it matches your website’s design.

jetstylemanager plugin in gutenberg

After completing all customizations, click the “Update” button and preview the header on the front end.

Now you know how to add the AJAX Search to the website’s header and style it up with the help of the JetSearch plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.