In this guide, we will show you how to add an “AJAX Search widget” to your Elementor website. The AJAX Search widget is the fastest live search solution for WordPress, allowing you to add an instant, responsive search bar to your site. Perfect for improving user experience and helping visitors find content quickly and efficiently, this widget enhances navigation and accessibility across your website.
Let’s explore the customization options available in the “AJAX Search widget” for Elementor below.
Elementor Ajax Search Tutorial Video (Step by Step Guide)
Add a Free Ajax Search to Elementor
Add a Free Ajax Search Widget to an Elementor Page
Elementor Ajax Search Widget General Settings
Enable Connection to Ajax Post Filters
This will enable the widget to establish connection to Ajax Post Filter.
Search Button Open New Window
Clicking on search button will open a new window.
Search Result Open New Window
Clicking on any of the search results will open a new window.
Search Placeholder
Type text to display as search placeholder.
Show Search Button
Show/Hide the search button.
Search Button Text
Type text to display in the search button.
Search Button Icon
Choose an icon to display as search button.
Show Search Label
Show/Hide the search label.
Layout
Select the layout of ajax search widget.
Row
Row Reverse
Elementor Ajax Search Widget Results Settings
Show Pagination
Show/Hide the pagination element.
Pagination Position
Set the positioning of pagination.
Before Results
After Results
Number of Items Per Page
Specify the number of items to show on a page.
Left Font Awesome
Paste unicode from font awesome website for left side.
Right Font Awesome
Paste unicode from font awesome website for right side.
Keys Control
Enable or disable keys control.
Number of Columns
Set the number of columns to display.
Items Gap
Set the gap between items.
No Result Text
Type text to display when no result found.
Elementor Ajax Search Widget Testing and Tools Settings
Elementor Ajax Search Widget Posts Query Setting
Select the exact posts you want to show in your Ajax Search results.
Posts Source
Choose any of the below options for your post source.
Current Query Post
Custom Posts
Related Posts
Manual Selection
Post Types
Choose the type of post you want to display.
Include By
Include the posts from different options given below
Include Sticky Posts
Get Only Sticky Posts
Author
Date
Post Parent
Post Meta
Most Viewed
ID's from PHP function
ID's from Post Meta
ID's from Dynamic Field
Include By Terms
Choose specific posts that you would like to include from your selection by adding rules.
Include By Terms Relation
Include Terms Children
Exclude By
Choose specific posts that you would like to exclude from your selection by adding rules.
Terms
Current Posts
Author
Post Without Featured Image
Posts with current category
Posts with current tags
Offset
Avoid Duplicates
ID's from Dynamic Field
To know more about post query setting, please visit our article on Advanced Post Selection
Elementor Ajax Search Widget Post Pagination Setting
Elementor Ajax Search Widget Show Suggested Searches Setting
Elementor Ajax Search Widget Styling Setting
A variety of styling options are provided to control every aspect of the widget’s appearance. Select the colors that match the theme of your site. Make the widget look exactly how you want it to, by customizing the text, buttons, fonts, and layout.
Elementor Ajax Search Widget Search Input Styling Setting
Style the search border, radius, background, text color, padding, and typography.
Elementor Ajax Search Widget Search Button Styling Setting
In this section, style the button gap, typography, padding, radius, background, text color, and icon color.
Elementor Ajax Search Widget Wrapper Styling Setting
Set the wrapper width, padding, border, radius, alignment, and background.
Elementor Ajax Search Widget Results Styling Setting
Set the results shadow, border, radius, background, and items padding.
Elementor Ajax Search Widget Results Item Styling Setting
Style the results item border width, color, item padding, background, typography, color, and layout.
Elementor Ajax Search Widget Result Item Image Styling Setting
Set the result image width, height, radius, image fit and border.
Elementor Ajax Search Widget Label Styling Setting
Set the label color, typography, alignment, and margin.
Elementor Ajax Search Widget Loader Styling Setting
Style the loader color.
Elementor Ajax Search Widget Results Pagination Styling Setting
Style the results pagination padding, background, color, and typography.
Elementor Ajax Search Widget Suggestion Styling Setting
Style for suggestions padding, color, and typography.
Content Ajax Search Design Examples For Elementor
Here are some live use cases for the Ajax Search Widget.
Thank you for using the AJAX Search Widget for Elementor! With its powerful live search functionality, it’s the perfect tool for enhancing your website’s content discovery. Ideal for blogs, online stores, and business websites, this widget delivers instant, accurate search results to improve user experience and navigation. If you have any questions or need assistance, feel free to reach out. For inspiration and live demos, don’t forget to visit our website.