Search Widget

Advanced AJAX Search Bar for Elementor

The Search Bar widget in UAE Lite allows you to add a sleek and powerful search bar to your Elementor-built pages. With real-time, AJAX-powered search results, this widget ensures faster content discovery and an improved user experience for your visitors.

Whether you’re building a blog, an eCommerce site, or a content-rich website, this widget helps users find what they need instantly.

How to Add the Widget

To begin using the Advanced AJAX Search Bar widget:

1. Edit your page with Elementor.
2. In the Elementor panel, search for “Search”.
3. Drag and drop the widget onto your page.
4. Start customizing it through the widget settings panel.

No coding required just a few clicks and you’re ready to go!

General Settings

Here’s an overview of the available options under the Content tab:

Search Box Layout

Choose how the search box appears on your site. There are 3 layout styles available:

• Input Box: Displays only the search input field.
• Icon: Displays a search icon that opens the search bar on click.
• Input Box With Button: Includes both the input field and a clickable search button.

Search Placeholder

Set the default text that appears inside the search bar (e.g., “Search posts, pages…”). This helps guide users on what to look for.

Result Layout

The widget uses the default WordPress search results layout. However, you can customize the result layout by using Elementor Theme Builder to create a custom search results template.

Redirect on Submit

Enable this option to redirect users to the full search results page when they press the Enter key.

Styling Options

Customize the look and feel of your search bar under the Style tab:

Search Bar

• Background color
• Border styling
• Padding and spacing
• Typography (font, size, color)

Search Icon

• Icon type (Magnifying Glass)
• Icon color and size
• Icon Background Color
• Icon Width

Close Icon

• Icon color and size

Use Cases

• Blog: Let readers quickly find articles by title or keyword.
• Ecommerce: Help customers instantly locate products from your store.
• Directory Listings: Provide fast search across custom post types like listings, jobs, etc.

Best Practices

• Use a clear placeholder text to guide users on what can be searched.
• If your site has a large content base, limit the number of AJAX results for performance.
• Pair the widget with relevant filters or categories to enhance user experience.

Need Help?

If you need more assistance with the Advanced AJAX Search Bar widget, feel free to reach out to our support team or check out our UAE documentation for more helpful guides.