How to Add a Custom Search Widget with Live Preview in Elementor Pro 🚀
If you run a blog or an e-commerce with Elementor PRO, the new live search results feature will be a powerful option to let users search effectively through your website content instead of redirecting them to a search results page.
In this guide I'll show you how to create an efficient and aesthetically pleasing live search results form using the new Elementor PRO search widget features.
Why Use Elementor Pro's Search Widget?
Elementor Pro's Search Widget is a game changer because it provides live search results for your visitors, making it easier for them to find what they're looking for on your website. Here's a breakdown of the main benefits:
- Live Preview Results: Users can get real-time results as they type. 💻
- Customizable Design: You can fully control the widget's appearance and behavior.
- Flexible Search Options: Choose what content to search through, from blog posts to products or specific categories.
Let's break down the steps to create a fully functional live search widget for your site!
Step 1: Adding the Search Widget 🛠️
- Edit your header with Elementor, where you'll place the search bar.
- Drag and drop the Search widget into your header area.
- Style the search bar to fit your website's theme. You can adjust everything from font to background color.
ℹ️ INFO: if you were already using an old Elementor PRO search widget you'll need to replace it with a new search widget in order to be able to see all the new features.
Step 2: Configuring Search Functionality 🔍
Next, configure the widget's search capabilities:
- Content area settings: Choose whether to search posts, products, or any custom content type.
- Autocomplete feature: Enable this for users to get suggestions as they type.
- Live results option: This feature is the NEW Live Search results! It allows users to see results immediately, without needing to press “Enter.”
💡 Pro Tip: If you're running an online store, you can configure the search widget to display just products instead of blog posts by simply selecting the type of content that you want your widget to search.
Step 3: Creating a Live Results Template 🎨
Elementor Pro allows you to create a custom template for the live search results card:
- Create a new template for the search results by enabling the Live Results option in the “Results” tab.
- Add key elements such as:
- Featured Image: Place it on the left side, use a thumbnail size, and give it a light border for a polished look.
- Post Title: Set it to a header style that fits the theme of your site.
- Category Info: Display the post’s category under the title.
Finally, add a dynamic post URL link so that users can click on the result to navigate directly to the post or product.
Step 4: Styling the Live Results 💅
Once the functionality is in place, it's time to refine the design.
- Spacing and padding: Make sure the search results are easy to read and not cluttered. Adjust the padding to give breathing room between elements.
- Width adjustments: Set a custom width for different devices. Elementor Pro allows you to specify different widths for mobile, tablet, and desktop views.
- Excluding categories: If there are specific categories you don’t want to show, you can exclude them from the live results in the “Query” settings tab.
Final Touches and Testing 🔧
After setting everything up, it's crucial to test the search bar on your website:
- Search for a specific post or product and see how the live results appear.
- Adjust the image aspect ratio and tweak the card layout to ensure the results are easy to browse.
🎉 Once everything looks good, hit publish, and your new live results search bar is ready!
Conclusion 🎯
Adding a live search widget to your website not only improves the user experience but also enhances your site’s functionality. Elementor Pro makes it super easy to create and customize search bars that are sleek, fast, and functional.
👉 If you’re interested in diving deeper into Elementor Pro’s features, check out my other Elementor tutorials.
Don't forget to:
- Subscribe to my YouTube channel, WP Roads, for more WordPress tutorials.
- Support me by purchasing Elementor Pro via my affiliate link here 👉 wproads.com/elepro
What do you think about this new Elementor PRO feature? Let me know in the comments below. 👇
Until next time, happy building! 🛠️
