Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

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.

Tutorial requirements:

  • JetSearch — apply the fastest AJAX search and manage the way the results are displayed, using advanced stylization settings;
  • WordPress Gutenberg editor and JetStyleManager — style any Gutenberg block & adjust its visual rendition;
  • Elementor free — add the necessary widget into the editor, style it up, and publish it right away.

Adding the AJAX Search to the Header in Elementor Editor

Step 1 – 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

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

header in the elementor editor

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

ajax search widget

Step 4JetSearch 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.