Back to contents

How to add an AJAX search to website’s header with JetSearch

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

The Ajax Search widget of the JetSearch  plugin enables not only to perform search results from the search field but also show the results in accordance with the categories you’ve set before.

The Ajax Search widget can be added to the header, the footer or it can be shown on the particular page on the site only. However, the most suitable placement on the site for this widget is definitely the header. This section is viewed on the entire site and it is emplaced on the top that guarantees that it’s viewed.

The Ajax Search widget can be added to any header if the last is created with Elementor, either Elementor Pro version or Crocoblock addon.

In this tutorial, we will take the widget to pieces on the example of Crocoblock addon.

Setting up in the WordPress Dashboard

Before compiling settings in the editor you should perform some preliminary actions. Let’s get started!

Step 1 – First of all, you need to proceed to WordPress Dashboard. Here on the left panel you should look for Crocoblock > My library directory and click on it.

Crocoblock > My library directory

Step 2 – Next, you have to select the Header template and click on Edit with Elementor button.

Setting up in Elementor editor

Now we navigate to the interface of Elementor editor to look through the settings here and make them responsive.

Step 1 – Search for the Ajax Search widget.

Search form content settings for Ajax Search widget

Step 2 – Customize the widget on the strength of your own feeling. To perform the settings you should put up some general options, such as the size, color, etc. Don’t forget to use possibilities to the full extent so that it grabs the visitor’s attention and complies with the primary purpose of searching the desirable information.

What is more, you can add the customized header with Ajax Search widget for the selected pages only. For instance, you can do it for the Travelling category where you have a wide range of posts. Such action makes your pages more responsive and useful for customers.

Pretty easy, isn’t it? Now the visitors of your site have the opportunity to search for the needed information directly in the header. Enjoy your results!