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.
Step 2 – Select the Header template and click on the “Edit with Elementor” button.
Step 3 – Search for the AJAX Search widget and drag and drop it to the needed section.
Step 4 – 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.
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.
Once you add the block, proceed to the Block tab and customize the block’s elements.
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.
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.